Validates and prevents save when providing a number outside of the configured range. (#17991)

* Validates and prevents save when providing a number outside of the configured range.

* Refactored to make use of `UmbFormControlMixin`

This flags the property layout container to be invalid (with prompt).
Adds localization keys.

* Corrected localization parameter order

---------

Co-authored-by: leekelleher <[email protected]>

Author: AndyButland

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -2126,6 +2126,9 @@ export default {
 		duplicateUsername: "Username '%0%' is already taken",
 		legacyOption: 'Legacy option',
 		legacyOptionDescription: 'This option is no longer supported, please select something else',
+		numberMinimum: "Value must be greater than or equal to '%0%'.",
+		numberMaximum: "Value must be less than or equal to '%0%'.",
+		numberMisconfigured: "Minimum value '%0%' must be less than the maximum value '%1%'.",
 	},
 	healthcheck: {
 		checkSuccessMessage: "Value is set to the recommended value: '%0%'.",

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

@@ -1,4 +1,5 @@
 import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type {
@@ -7,10 +8,10 @@ import type {
 } from '@umbraco-cms/backoffice/property-editor';
 
 @customElement('umb-property-editor-ui-number')
-export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property({ type: Number })
-	value?: number;
-
+export class UmbPropertyEditorUINumberElement
+	extends UmbFormControlMixin<number | undefined, typeof UmbLitElement, undefined>(UmbLitElement)
+	implements UmbPropertyEditorUiElement
+{
 	/**
 	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
 	 * @type {boolean}
@@ -40,6 +41,28 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 		this._placeholder = config.getValueByAlias('placeholder');
 	}
 
+	constructor() {
+		super();
+
+		this.addValidator(
+			'rangeUnderflow',
+			() => this.localize.term('validation_numberMinimum', this._min),
+			() => !!this._min && this.value! < this._min,
+		);
+
+		this.addValidator(
+			'rangeOverflow',
+			() => this.localize.term('validation_numberMaximum', this._max),
+			() => !!this._max && this.value! > this._max,
+		);
+
+		this.addValidator(
+			'customError',
+			() => this.localize.term('validation_numberMisconfigured', this._min, this._max),
+			() => !!this._min && !!this._max && this._min > this._max,
+		);
+	}
+
 	#parseInt(input: unknown): number | undefined {
 		const num = Number(input);
 		return Number.isNaN(num) ? undefined : num;
@@ -58,7 +81,7 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 				max=${ifDefined(this._max)}
 				step=${ifDefined(this._step)}
 				placeholder=${ifDefined(this._placeholder)}
-				.value=${this.value ?? (this._placeholder ? undefined : 0)}
+				value=${this.value?.toString() ?? (this._placeholder ? '' : '0')}
 				@input=${this.#onInput}
 				?readonly=${this.readonly}>
 			</uui-input>