input with alias and input range style corrections (#19441)

* fix alias input

* number range style fix + placeholder inconsistency fix

* build(deps): bump @umbraco-ui/uui to 1.14.0-rc.3

* fix property declaration

* Update src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/package-lock.json

@@ -215,7 +215,7 @@
 		"@tiptap/extension-underline": "2.11.7",
 		"@tiptap/pm": "2.11.7",
 		"@tiptap/starter-kit": "2.11.7",
-		"@umbraco-ui/uui": "1.14.0-rc.2",
+		"@umbraco-ui/uui": "1.14.0-rc.3",
 		"@umbraco-ui/uui-css": "1.14.0-rc.2",
 		"dompurify": "^3.2.5",
 		"element-internals-polyfill": "^3.0.2",
@@ -288,4 +288,4 @@
 		"access": "public",
 		"registry": "https://registry.npmjs.org/"
 	}
-}
+}

src/Umbraco.Web.UI.Client/package.json

@@ -47,7 +47,21 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 	}
 
 	@property({ type: Object })
-	validationRange?: UmbNumberRangeValueType;
+	public set validationRange(value: UmbNumberRangeValueType | undefined) {
+		this.#validationRange = value;
+		this._minPlaceholder = value?.min !== undefined ? String(value?.min) : '';
+		this._maxPlaceholder = value?.max !== undefined && value.max !== Infinity ? String(value.max) : '∞';
+	}
+	public get validationRange(): UmbNumberRangeValueType | undefined {
+		return this.#validationRange;
+	}
+	#validationRange?: UmbNumberRangeValueType | undefined;
+
+	@state()
+	private _minPlaceholder: string = '';
+
+	@state()
+	private _maxPlaceholder: string = '';
 
 	private updateValue() {
 		const newValue =
@@ -114,7 +128,7 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 				label=${this.minLabel}
 				min=${ifDefined(this.validationRange?.min)}
 				max=${ifDefined(this.validationRange?.max)}
-				placeholder=${this.validationRange?.min ?? ''}
+				placeholder=${this._minPlaceholder}
 				.value=${this._minValue}
 				@input=${this.#onMinInput}></uui-input>
 			<b>–</b>
@@ -123,13 +137,20 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 				label=${this.maxLabel}
 				min=${ifDefined(this.validationRange?.min)}
 				max=${ifDefined(this.validationRange?.max)}
-				placeholder=${this.validationRange?.max ?? '∞'}
+				placeholder=${this._maxPlaceholder}
 				.value=${this._maxValue}
 				@input=${this.#onMaxInput}></uui-input>
 		`;
 	}
 
 	static override styles = css`
+		:host {
+			display: flex;
+			align-items: center;
+		}
+		b {
+			margin: 0 var(--uui-size-space-1);
+		}
 		:host(:invalid:not([pristine])) {
 			color: var(--uui-color-invalid);
 		}

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

@@ -138,8 +138,6 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string, typeof
 		}
 
 		#alias {
-			max-width: 50%;
-
 			&.muted {
 				opacity: 0.55;
 				padding: var(--uui-size-1, 3px) var(--uui-size-space-3, 9px);