Property Editors: Add mandatory support to Number Range (Refactor). (#20570)

* Added mandatory property to number range property editor and bind it to the inner input.

* Added mandatory message support.

---------

Co-authored-by: Mads Rasmussen <madsr@hey.com>

Author: engijlr

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

@@ -1,6 +1,6 @@
 import { css, customElement, html, ifDefined, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
 import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
@@ -34,6 +34,11 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 		return this._minValue;
 	}
 
+	@property({ type: Boolean })
+	required = false;
+	@property({ type: String })
+	requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+
 	@state()
 	private _maxValue?: number;
 
@@ -90,6 +95,12 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 	constructor() {
 		super();
 
+		this.addValidator(
+			'valueMissing',
+			() => this.requiredMessage,
+			() => this.required && (this._minValue == null || this._maxValue == null),
+		);
+
 		this.addValidator(
 			'patternMismatch',
 			() => {
@@ -129,7 +140,8 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 				min=${ifDefined(this.validationRange?.min)}
 				max=${ifDefined(this.validationRange?.max)}
 				placeholder=${this._minPlaceholder}
-				.value=${this._minValue}
+				?required=${this.required}
+				.value=${this._minValue?.toString() ?? ''}
 				@input=${this.#onMinInput}></uui-input>
 			<b>–</b>
 			<uui-input
@@ -138,7 +150,8 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen
 				min=${ifDefined(this.validationRange?.min)}
 				max=${ifDefined(this.validationRange?.max)}
 				placeholder=${this._maxPlaceholder}
-				.value=${this._maxValue}
+				?required=${this.required}
+				.value=${this._maxValue?.toString() ?? ''}
 				@input=${this.#onMaxInput}></uui-input>
 		`;
 	}

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

@@ -1,6 +1,6 @@
 import type { UmbInputNumberRangeElement } from '@umbraco-cms/backoffice/components';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
@@ -26,9 +26,14 @@ export class UmbPropertyEditorUINumberRangeElement
 	@state()
 	private _validationRange?: UmbNumberRangeValueType;
 
+	@property({ type: Boolean })
+	mandatory = false;
+	@property({ type: String })
+	mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+
 	@property({ type: Object })
 	public override set value(value: UmbNumberRangeValueType | undefined) {
-		super.value = value || { min: undefined, max: undefined };
+		super.value = value;
 		this._minValue = value?.min;
 		this._maxValue = value?.max;
 	}
@@ -42,7 +47,9 @@ export class UmbPropertyEditorUINumberRangeElement
 	}
 
 	#onChange(event: CustomEvent & { target: UmbInputNumberRangeElement }) {
-		this.value = { min: event.target.minValue, max: event.target.maxValue };
+		const min = event.target.minValue;
+		const max = event.target.maxValue;
+		this.value = min == null && max == null ? undefined : { min, max };
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
@@ -59,6 +66,8 @@ export class UmbPropertyEditorUINumberRangeElement
 			<umb-input-number-range
 				.minValue=${this._minValue}
 				.maxValue=${this._maxValue}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}
 				.validationRange=${this._validationRange}
 				@change=${this.#onChange}>
 			</umb-input-number-range>