Decimal umb-property-editor-ui-number fixes (#18233)

* Numeric: renamed `#parseInt` function to `#parseNumber`

* Numeric: Changed to use `@change` event

* Number input: `max="Infinity"` was invalid markup

We don't need to always set the `min` and `max` attributes.
Leave the browser to do its thing.

* Decimal: adds input `step` config

src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Decimal.ts

@@ -12,24 +12,24 @@ export const manifests: Array<UmbExtensionManifest> = [
 						label: 'Minimum',
 						description: 'Enter the minimum amount of number to be entered',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+						config: [{ alias: 'step', value: '0.001' }],
 					},
 					{
 						alias: 'max',
 						label: 'Maximum',
 						description: 'Enter the maximum amount of number to be entered',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+						config: [
+							{ alias: 'placeholder', value: '∞' },
+							{ alias: 'step', value: '0.001' },
+						],
 					},
 					{
 						alias: 'step',
 						label: 'Step size',
 						description: 'Enter the intervals amount between each step of number to be entered',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
-						config: [
+						config: [{ alias: 'step', value: '0.001' }],
-							{
-								alias: 'step',
-								value: '0.01',
-							},
-						],
 					},
 				],
 			},

src/Umbraco.Web.UI.Client/src/packages/property-editors/number/Umbraco.Integer.ts

@@ -18,6 +18,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 						label: 'Maximum',
 						description: 'Enter the maximum amount of number to be entered',
 						propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+						config: [{ alias: 'placeholder', value: '∞' }],
 					},
 					{
 						alias: 'step',

src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts

@@ -39,9 +39,9 @@ export class UmbPropertyEditorUINumberElement
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
-		this._min = this.#parseInt(config.getValueByAlias('min')) || 0;
+		this._min = this.#parseNumber(config.getValueByAlias('min'));
-		this._max = this.#parseInt(config.getValueByAlias('max')) || Infinity;
+		this._max = this.#parseNumber(config.getValueByAlias('max'));
-		this._step = this.#parseInt(config.getValueByAlias('step'));
+		this._step = this.#parseNumber(config.getValueByAlias('step'));
 		this._placeholder = config.getValueByAlias('placeholder');
 	}
 
@@ -80,13 +80,15 @@ export class UmbPropertyEditorUINumberElement
 		}
 	}
 
-	#parseInt(input: unknown): number | undefined {
+	#parseNumber(input: unknown): number | undefined {
 		const num = Number(input);
-		return Number.isNaN(num) ? undefined : num;
+		return Number.isFinite(num) ? num : undefined;
 	}
 
-	#onInput(e: InputEvent & { target: HTMLInputElement }) {
+	#onChange(event: InputEvent & { target: HTMLInputElement }) {
-		this.value = this.#parseInt(e.target.value);
+		const newValue = event.target.value === '' ? undefined : this.#parseNumber(event.target.value);
+		if (newValue === this.value) return;
+		this.value = newValue;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
@@ -99,8 +101,8 @@ export class UmbPropertyEditorUINumberElement
 				max=${ifDefined(this._max)}
 				step=${ifDefined(this._step)}
 				placeholder=${ifDefined(this._placeholder)}
-				value=${this.value?.toString() ?? (this._placeholder ? '' : '0')}
+				value=${this.value?.toString() ?? ''}
-				@input=${this.#onInput}
+				@change=${this.#onChange}
 				?readonly=${this.readonly}>
 			</uui-input>
 		`;