alias input

src/Umbraco.Web.UI.Client/src/packages/core/components/alias-input/alias-input.element.ts

@@ -0,0 +1,112 @@
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+@customElement('umb-alias-input')
+export class UmbAliasInput2Element extends FormControlMixin(UmbLitElement) {
+	protected getFormElement() {
+		return undefined;
+	}
+
+	@property()
+	public set value(val: string | null) {
+		if (val === null) return;
+		this.locked = true;
+		super.value = val;
+		this.pristine = false;
+	}
+	public get value(): string {
+		return super.value as string;
+	}
+
+	private _listenToElement: HTMLElement | null = null;
+
+	public set listenToElement(el: HTMLElement | null) {
+		if (this._listenToElement) {
+			this._listenToElement.removeEventListener('input', this.#parentChange);
+		}
+		this._listenToElement = el;
+		this._listenToElement?.addEventListener('input', this.#parentChange);
+	}
+	public get listenToElement(): HTMLElement | null {
+		return this._listenToElement;
+	}
+
+	@state()
+	locked = true;
+
+	#parentIsInput: boolean;
+
+	constructor() {
+		super();
+		this.listenToElement = (this.getHostElement() as Element).parentElement;
+		this.#parentIsInput = this.listenToElement?.nodeName === 'UUI-INPUT';
+	}
+
+	disconnectedCallback(): void {
+		if (this.parentElement) {
+			this.parentElement.removeEventListener('input', this.#parentChange);
+		}
+	}
+
+	#onToggleAliasLock() {
+		this.locked = !this.locked;
+	}
+
+	#onChange(e: UUIInputEvent) {
+		super.value = e.target.value as string;
+		this.dispatchEvent(new UmbChangeEvent());
+	}
+
+	#parentChange = (e: Event) => {
+		if (!this.pristine) return;
+		super.value = (e as UUIInputEvent).target.value as string;
+		this.dispatchEvent(new UmbChangeEvent());
+	};
+
+	render() {
+		return html`<uui-input
+			@change=${this.#onChange}
+			value="${this.value}"
+			placeholder=${this.localize.term('placeholders_enterAlias')}
+			?disabled=${this.locked}
+			label=${this.localize.term('placeholders_enterAlias')}
+			class="${this.#parentIsInput ? 'inside' : 'outside'}">
+			<div role="button" id="alias-lock" @click=${this.#onToggleAliasLock} @keydown=${() => ''} slot="prepend">
+				<uui-icon name="${this.locked ? 'icon-lock' : 'icon-unlocked'}"></uui-icon>
+			</div>
+		</uui-input>`;
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: contents;
+			}
+			uui-input {
+				--uui-input-border-width: 0;
+				height: 100%;
+			}
+			uui-input.outside:disabled {
+				background-color: transparent;
+			}
+
+			#alias-lock {
+				display: flex;
+				height: 100%;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+			}
+		`,
+	];
+}
+
+export default UmbAliasInput2Element;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-alias-input': UmbAliasInput2Element;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/components/alias-input/index.ts

@@ -0,0 +1 @@
+export * from './alias-input.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts

@@ -33,3 +33,4 @@ export * from './table/index.js';
 export * from './tooltip-menu/index.js';
 export * from './variant-selector/index.js';
 export * from './popover-layout/index.js';
+export * from './alias-input/index.js';

src/Umbraco.Web.UI.Client/src/packages/templating/templates/components/alias-input/alias-input.ts

@@ -6,15 +6,11 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 @customElement('umb-template-alias-input')
 export class UmbTemplateAliasInputElement extends UmbLitElement {
 	render() {
-		return html`
-        <uui-button compact @click=${this.#handleClick} label="unlock alias input">
-            <uui-symbol-lock .open=${this.isOpen} ></uui-symbol-lock>
-        </uui-button>
-        <input placeholder="Enter alias..." .value=${this.value} ?disabled=${!this.isOpen} @input=${
-					this.#setValue
-				}></input>
-
-        `;
+		return html`!
+			<uui-button compact @click=${this.#handleClick} label="unlock alias input">
+				<uui-symbol-lock .open=${this.isOpen}></uui-symbol-lock>
+			</uui-button>
+			<input placeholder="Enter alias..." .value=${this.value} ?disabled=${!this.isOpen} @input=${this.#setValue} /> `;
 	}
 
 	@property({ type: String, attribute: 'value' })

src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts

@@ -6,7 +6,7 @@ import { UMB_TEMPLATE_WORKSPACE_CONTEXT } from './template-workspace.context.js'
 import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
 import { camelCase } from '@umbraco-cms/backoffice/external/lodash';
 import { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, customElement, query, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, query, state, nothing, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import {
 	UMB_MODAL_MANAGER_CONTEXT_TOKEN,
 	UMB_TEMPLATE_PICKER_MODAL,
@@ -179,12 +179,10 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
 				slot="header"
 				.value=${this._name}
 				@input=${this.#onNameInput}
-				label="template name"
-				><umb-template-alias-input
-					slot="append"
-					.value=${this._alias ?? ''}
-					@change=${this.#onAliasInput}></umb-template-alias-input
-			></uui-input>
+				label="template name">
+				<umb-alias-input slot="append" value=${ifDefined(this._alias!)} @change=${this.#onAliasInput}></umb-alias-input>
+			</uui-input>
+
 			<uui-box>
 				<div slot="header" id="code-editor-menu-container">
 					${this.#renderMasterTemplatePicker()}