diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts index 41d300a752..242f3fa852 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts +++ b/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}> `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts index aaeeb1a5ae..792276779b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts +++ b/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