From 4d714ca6c295f49d8045ba2ebb1979f69ab49ec5 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 28 May 2024 18:30:15 +0100
Subject: [PATCH] Document Type Workspace, adds `auto-width` to alias input

---
 .../input-with-alias.element.ts               | 62 +++++++++++--------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-with-alias/input-with-alias.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-with-alias/input-with-alias.element.ts
index 8034bca4d3..1ca1c9f063 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-with-alias/input-with-alias.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-with-alias/input-with-alias.element.ts
@@ -31,36 +31,37 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
 	}
 
 	#onNameChange(e: UUIInputEvent) {
-		if (e instanceof UUIInputEvent) {
-			const target = e.composedPath()[0] as UUIInputElement;
+		if (!(e instanceof UUIInputEvent)) return;
 
-			if (typeof target?.value === 'string') {
-				const oldName = this.value;
-				const oldAlias = this.alias ?? '';
-				this.value = e.target.value.toString();
-				if (this.autoGenerateAlias && this._aliasLocked) {
-					// If locked we will update the alias, but only if it matches the generated alias of the old name [NL]
-					const expectedOldAlias = generateAlias(oldName ?? '');
-					// Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.) [NL]
-					if (expectedOldAlias === oldAlias) {
-						this.alias = generateAlias(this.value);
-					}
+		const target = e.composedPath()[0] as UUIInputElement;
+
+		if (typeof target?.value === 'string') {
+			const oldName = this.value;
+			const oldAlias = this.alias ?? '';
+			this.value = e.target.value.toString();
+			if (this.autoGenerateAlias && this._aliasLocked) {
+				// If locked we will update the alias, but only if it matches the generated alias of the old name [NL]
+				const expectedOldAlias = generateAlias(oldName ?? '');
+				// Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.) [NL]
+				if (expectedOldAlias === oldAlias) {
+					this.alias = generateAlias(this.value);
 				}
-				this.dispatchEvent(new UmbChangeEvent());
 			}
+
+			this.dispatchEvent(new UmbChangeEvent());
 		}
 	}
 
 	#onAliasChange(e: UUIInputEvent) {
-		if (e instanceof UUIInputEvent) {
-			const target = e.composedPath()[0] as UUIInputElement;
-			if (typeof target?.value === 'string') {
-				this.alias = target.value;
-				console.log(this.alias);
-				this.dispatchEvent(new UmbChangeEvent());
-			}
-		}
 		e.stopPropagation();
+		if (!(e instanceof UUIInputEvent)) return;
+
+		const target = e.composedPath()[0] as UUIInputElement;
+
+		if (typeof target?.value === 'string') {
+			this.alias = target.value;
+			this.dispatchEvent(new UmbChangeEvent());
+		}
 	}
 
 	#onToggleAliasLock() {
@@ -80,20 +81,23 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
 				@input=${this.#onNameChange}>
 				<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
 				<uui-input
+					auto-width
 					name="alias"
 					slot="append"
 					label=${aliasLabel}
-					@input=${this.#onAliasChange}
 					.value=${this.alias}
 					placeholder=${aliasLabel}
 					?disabled=${this._aliasLocked && !this.aliasReadonly}
-					?readonly=${this.aliasReadonly}>
+					?readonly=${this.aliasReadonly}
+					@input=${this.#onAliasChange}>
 					<!-- TODO: validation for bad characters -->
 					${this.aliasReadonly
 						? nothing
-						: html`<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
-								<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
-							</div>`}
+						: html`
+								<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
+									<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
+								</div>
+							`}
 				</uui-input>
 			</uui-input>
 		`;
@@ -106,6 +110,10 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
 			align-items: center;
 		}
 
+		#name > uui-input {
+			max-width: 50%;
+		}
+
 		:host(:invalid:not([pristine])) {
 			color: var(--uui-color-danger);
 		}