Property Editors: Added form control and mandatory support to editors in picker group(Color, Content, Date, Document, Eye dropper, Multi URL). (#20684)

engijlr · nielslyngsoe · web-flow · commit 01b300336b9e · 2025-11-14T14:04:20.000Z
* Added form control support to color picker.

* Avoid submit when readonly is true.

* Added mandatory support.

* Added form control support to date picker.

* Removed an unused import.

* Added form control and mandatory support to document picker.

* Added form control support to Eye dropper.

* Added. mandatory support for multi url picker also bind inner input in the eye dropper.

* Removed unused import.

* fix update of value

* fixing not needed override of get and set methods

---------

Co-authored-by: Niels Lyngsø &lt;niels.lyngso@gmail.com&gt;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.element.ts
@@ -1,16 +1,16 @@
 import { html, customElement, property, map, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
 import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 /*
  * This wraps the UUI library uui-color-swatches component
  * @element umb-input-color
  */
 @customElement('umb-input-color')
-export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputColorElement extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(UmbLitElement) {
 	protected override getFormElement() {
 		return undefined;
 	}
@@ -22,13 +22,26 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '')
 	 */
 	@property({ type: Boolean, reflect: true })
 	readonly = false;
+	@property({ type: Boolean })
+	required = false;
+	@property({ type: String })
+	requiredMessage: string = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
 
 	@property({ type: Boolean })
 	showLabels = false;
 
 	@property({ type: Array })
 	swatches?: Array<UmbSwatchDetails>;
 
+	constructor() {
+		super();
+		this.addValidator(
+			'valueMissing',
+			() => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
+			() => !!this.required && !this.value && !this.readonly,
+		);
+	}
+
 	#onChange(event: UUIColorSwatchesEvent) {
 		this.value = event.target.value;
 		this.dispatchEvent(new UmbChangeEvent());
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts
@@ -1,11 +1,13 @@
 import { customElement, html, property, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-eye-dropper')
-export class UmbInputEyeDropperElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputEyeDropperElement extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(
+	UmbLitElement,
+) {
 	protected override getFormElement() {
 		return undefined;
 	}
@@ -16,12 +18,26 @@ export class UmbInputEyeDropperElement extends UUIFormControlMixin(UmbLitElement
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
 	@property({ type: Boolean })
-	opacity = false;
+	required = false;
+	@property({ type: String })
+	requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+
+	constructor() {
+		super();
+		this.addValidator(
+			'valueMissing',
+			() => this.requiredMessage,
+			() => !this.readonly && this.required && (!this.value || this.value === ''),
+		);
+	}
 
+	@property({ type: Boolean })
+	opacity = false;
 	@property({ type: Boolean })
 	showPalette = false;
-
 	@property({ type: Array })
 	swatches?: string[];
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
@@ -4,7 +4,7 @@ import { css, customElement, html, nothing, property, repeat, state, when } from
 import { jsonStringComparison } from '@umbraco-cms/backoffice/observable-api';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 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 { UmbInteractionMemoriesChangeEvent } from '@umbraco-cms/backoffice/interaction-memory';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
@@ -14,7 +14,7 @@ import type { UmbInteractionMemoryModel } from '@umbraco-cms/backoffice/interact
 import type { UmbRepositoryItemsStatus } from '@umbraco-cms/backoffice/repository';
 
 @customElement('umb-input-document')
-export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+export class UmbInputDocumentElement extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(
 	UmbLitElement,
 ) {
 	#sorter = new UmbSorterController<string>(this, {
@@ -54,7 +54,7 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
 	 * @default
 	 */
 	@property({ type: String, attribute: 'min-message' })
-	minMessage = 'This field need more items';
+	minMessage = 'This field needs more items';
 
 	/**
 	 * This is a maximum amount of selected items in this input.
@@ -125,6 +125,10 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
 		}
 	}
 	#readonly = false;
+	@property({ type: Boolean })
+	required = false;
+	@property({ type: String })
+	requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
 
 	@property({ type: Array, attribute: false })
 	public get interactionMemories(): Array<UmbInteractionMemoryModel> | undefined {
@@ -148,16 +152,22 @@ export class UmbInputDocumentElement extends UmbFormControlMixin<string | undefi
 	constructor() {
 		super();
 
+		this.addValidator(
+			'valueMissing',
+			() => this.requiredMessage,
+			() => !this.readonly && this.required && this.selection.length === 0,
+		);
+
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
-			() => !!this.min && this.selection.length < this.min,
+			() => !this.readonly && !!this.min && this.selection.length < this.min,
 		);
 
 		this.addValidator(
 			'rangeOverflow',
 			() => this.maxMessage,
-			() => !!this.max && this.selection.length > this.max,
+			() => !this.readonly && !!this.max && this.selection.length > this.max,
 		);
 
 		this.observe(
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts
@@ -11,12 +11,13 @@ import type {
 	UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbTreeStartNode } from '@umbraco-cms/backoffice/tree';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-property-editor-ui-document-picker')
-export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property()
-	public value?: string;
-
+export class UmbPropertyEditorUIDocumentPickerElement
+	extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(UmbLitElement)
+	implements UmbPropertyEditorUiElement
+{
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this.#interactionMemoryManager.setPropertyEditorConfig(config);
 
@@ -39,6 +40,10 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl
 	 */
 	@property({ type: Boolean, reflect: true })
 	readonly = false;
+	@property({ type: Boolean })
+	mandatory = false;
+	@property({ type: String })
+	mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
 
 	@state()
 	private _min = 0;
@@ -66,6 +71,10 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl
 		});
 	}
 
+	override firstUpdated() {
+		this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-document')!);
+	}
+
 	#onChange(event: CustomEvent & { target: UmbInputDocumentElement }) {
 		this.value = event.target.value;
 		this.dispatchEvent(new UmbChangeEvent());
@@ -95,6 +104,8 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl
 				.value=${this.value}
 				@change=${this.#onChange}
 				?readonly=${this.readonly}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}
 				.interactionMemories=${this._interactionMemories}
 				@interaction-memories-change=${this.#onInputInteractionMemoriesChange}>
 			</umb-input-document>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.element.ts
@@ -206,12 +206,12 @@ export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
-			() => !!this.min && this.selection.length < this.min,
+			() => !this.readonly && !!this.min && this.selection.length < this.min,
 		);
 		this.addValidator(
 			'rangeOverflow',
 			() => this.maxMessage,
-			() => !!this.max && this.selection.length > this.max,
+			() => !this.readonly && !!this.max && this.selection.length > this.max,
 		);
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts
@@ -133,13 +133,13 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
-			() => !!this.min && this.selection.length < this.min,
+			() => !this.readonly && !!this.min && this.selection.length < this.min,
 		);
 
 		this.addValidator(
 			'rangeOverflow',
 			() => this.maxMessage,
-			() => !!this.max && this.selection.length > this.max,
+			() => !this.readonly && !!this.max && this.selection.length > this.max,
 		);
 
 		this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/components/input-multi-url/input-multi-url.element.ts
@@ -23,9 +23,9 @@ import {
 import { UmbMediaItemRepository, UmbMediaUrlRepository } from '@umbraco-cms/backoffice/media';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
 import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 /**
  * @element umb-input-multi-url
@@ -34,7 +34,9 @@ import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
  * @fires focus - when the input gains focus
  */
 @customElement('umb-input-multi-url')
-export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbInputMultiUrlElement extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(
+	UmbLitElement,
+) {
 	#sorter = new UmbSorterController<UmbLinkPickerLink>(this, {
 		getUniqueOfElement: (element) => {
 			return element.id;
@@ -88,7 +90,7 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 	 * @attr
 	 * @default
 	 */
-	@property({ type: String, attribute: 'min-message' })
+	@property({ type: String, attribute: 'max-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
 	/**
@@ -150,6 +152,10 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 		}
 	}
 	#readonly = false;
+	@property({ type: Boolean })
+	required = false;
+	@property({ type: String })
+	requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
 
 	@state()
 	private _modalRoute?: UmbModalRouteBuilder;
@@ -165,6 +171,12 @@ export class UmbInputMultiUrlElement extends UUIFormControlMixin(UmbLitElement,
 	constructor() {
 		super();
 
+		this.addValidator(
+			'valueMissing',
+			() => this.requiredMessage,
+			() => !this.readonly && this.required && (!this.value || this.value === ''),
+		);
+
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/property-editor/property-editor-ui-multi-url-picker.element.ts
@@ -11,7 +11,7 @@ import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 
 import '../components/input-multi-url/index.js';
 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';
 
 /**
  * @element umb-property-editor-ui-multi-url-picker
@@ -38,6 +38,10 @@ export class UmbPropertyEditorUIMultiUrlPickerElement
 	 */
 	@property({ type: Boolean, reflect: true })
 	readonly = false;
+	@property({ type: Boolean })
+	mandatory = false;
+	@property({ type: String })
+	mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
 
 	#parseInt(value: unknown, fallback: number): number {
 		const num = Number(value);
@@ -101,6 +105,8 @@ export class UmbPropertyEditorUIMultiUrlPickerElement
 				.variantId=${this._variantId}
 				?hide-anchor=${this._hideAnchor}
 				?readonly=${this.readonly}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}
 				@change=${this.#onChange}>
 			</umb-input-multi-url>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-editor-ui-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/color-picker/property-editor-ui-color-picker.element.ts
@@ -7,22 +7,23 @@ import type {
 import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
 import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 /**
  * @element umb-property-editor-ui-color-picker
  */
 @customElement('umb-property-editor-ui-color-picker')
-export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	#defaultShowLabels = false;
-
+export class UmbPropertyEditorUIColorPickerElement
+	extends UmbFormControlMixin<UmbSwatchDetails, typeof UmbLitElement, undefined>(UmbLitElement)
+	implements UmbPropertyEditorUiElement
+{
 	@property({ type: Object })
-	public set value(value: UmbSwatchDetails | undefined) {
-		this.#value = value ? this.#ensureHashPrefix(value) : undefined;
+	public override set value(value: UmbSwatchDetails | undefined) {
+		super.value = value ? this.#ensureHashPrefix(value) : undefined;
 	}
-	public get value(): UmbSwatchDetails | undefined {
-		return this.#value;
+	public override get value(): UmbSwatchDetails | undefined {
+		return super.value;
 	}
-	#value?: UmbSwatchDetails | undefined;
 
 	/**
 	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
@@ -32,17 +33,19 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 	 */
 	@property({ type: Boolean, reflect: true })
 	readonly = false;
+	@property({ type: Boolean }) mandatory = false;
+	@property({ type: String }) mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
 
 	@state()
-	private _showLabels = this.#defaultShowLabels;
+	private _showLabels = false;
 
 	@state()
 	private _swatches: Array<UmbSwatchDetails> = [];
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 
-		this._showLabels = config?.getValueByAlias<boolean>('useLabel') ?? this.#defaultShowLabels;
+		this._showLabels = config?.getValueByAlias<boolean>('useLabel') ?? false;
 
 		const swatches = config?.getValueByAlias<Array<UmbSwatchDetails>>('items') ?? [];
 		this._swatches = swatches.map((swatch) => this.#ensureHashPrefix(swatch));
@@ -62,12 +65,18 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
+	override firstUpdated() {
+		this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-color')!);
+	}
+
 	override render() {
 		return html`<umb-input-color
-			value=${this.value?.value ?? ''}
+			.value=${this.value?.value}
 			.swatches=${this._swatches}
 			?showLabels=${this._showLabels}
 			@change=${this.#onChange}
+			?required=${this.mandatory}
+			.requiredMessage=${this.mandatoryMessage}
 			?readonly=${this.readonly}></umb-input-color>`;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/components/input-content/input-content.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/property-editor-ui-content-picker.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/date-picker/property-editor-ui-date-picker.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/eye-dropper/property-editor-ui-eye-dropper.element.ts
