Property Editors: Added form control and mandatory support(User, Member, Member Group)

src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts

@@ -7,11 +7,12 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
-import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-input-member-group')
-export class UmbInputMemberGroupElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+export class UmbInputMemberGroupElement extends UmbFormControlMixin<string, typeof UmbLitElement>(
 	UmbLitElement,
+	undefined,
 ) {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
@@ -50,7 +51,7 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin<string | und
 	 * @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.
@@ -72,7 +73,7 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin<string | und
 	 * @attr
 	 * @default
 	 */
-	@property({ type: String, attribute: 'min-message' })
+	@property({ type: String, attribute: 'max-message' })
 	maxMessage = 'This field exceeds the allowed amount of items';
 
 	public set selection(ids: Array<string>) {
@@ -89,6 +90,7 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin<string | und
 	@property({ type: String })
 	public override set value(selectionString: string | undefined) {
 		this.selection = splitStringToArray(selectionString);
+		super.value = selectionString;
 	}
 	public override get value(): string | undefined {
 		return this.selection.length > 0 ? this.selection.join(',') : undefined;
@@ -118,6 +120,15 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin<string | und
 	}
 	#readonly = false;
 
+	/**
+	 * Sets the input to required, meaning validation will fail if the value is empty.
+	 * @type {boolean}
+	 */
+	@property({ type: Boolean })
+	required?: boolean;
+	@property({ type: String })
+	requiredMessage?: string;
+
 	@state()
 	private _editMemberGroupPath = '';
 
@@ -138,6 +149,12 @@ export class UmbInputMemberGroupElement extends UmbFormControlMixin<string | und
 				this._editMemberGroupPath = routeBuilder({});
 			});
 
+		this.addValidator(
+			'valueMissing',
+			() => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
+			() => !this.readonly && !!this.required && (this.value === undefined || this.value === null || this.value === ''),
+		);
+
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,

src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts

@@ -7,15 +7,16 @@ import type {
 	UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 /**
  * @element umb-property-editor-ui-member-group-picker
  */
 @customElement('umb-property-editor-ui-member-group-picker')
-export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property()
-	public value?: string;
-
+export class UmbPropertyEditorUIMemberGroupPickerElement
+	extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(UmbLitElement, undefined)
+	implements UmbPropertyEditorUiElement
+{
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 
@@ -32,6 +33,14 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
 	 */
 	@property({ type: Boolean, reflect: true })
 	readonly = false;
+	@property({ type: Boolean })
+	mandatory?: boolean;
+	@property({ type: String })
+	mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+
+	protected override firstUpdated() {
+		this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-member-group')!);
+	}
 
 	@state()
 	private _min = 0;
@@ -51,6 +60,8 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i
 				.max=${this._max}
 				.value=${this.value}
 				@change=${this.#onChange}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}
 				?readonly=${this.readonly}></umb-input-member-group>
 		`;
 	}

src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts

@@ -3,14 +3,15 @@ import { UmbMemberPickerInputContext } from './input-member.context.js';
 import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 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 { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UMB_MEMBER_TYPE_ENTITY_TYPE } from '@umbraco-cms/backoffice/member-type';
 
 @customElement('umb-input-member')
-export class UmbInputMemberElement extends UmbFormControlMixin<string | undefined, typeof UmbLitElement>(
+export class UmbInputMemberElement extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(
 	UmbLitElement,
+	undefined,
 ) {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
@@ -49,7 +50,7 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
 	 * @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.
@@ -118,6 +119,15 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
 	}
 	#readonly = false;
 
+	/**
+	 * Sets the input to required, meaning validation will fail if the value is empty.
+	 * @type {boolean}
+	 */
+	@property({ type: Boolean })
+	required?: boolean;
+	@property({ type: String })
+	requiredMessage?: string;
+
 	@state()
 	private _items?: Array<UmbMemberItemModel>;
 
@@ -126,6 +136,12 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
 	constructor() {
 		super();
 
+		this.addValidator(
+			'valueMissing',
+			() => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
+			() => !this.readonly && !!this.required && (this.value === undefined || this.value === null || this.value === ''),
+		);
+
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,

src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts

@@ -6,15 +6,16 @@ import type {
 	UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 /**
  * @element umb-property-editor-ui-member-picker
  */
 @customElement('umb-property-editor-ui-member-picker')
-export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property()
-	public value?: string;
-
+export class UmbPropertyEditorUIMemberPickerElement
+	extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(UmbLitElement, undefined)
+	implements UmbPropertyEditorUiElement
+{
 	@property({ attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
 
@@ -26,18 +27,29 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
 	 */
 	@property({ type: Boolean, reflect: true })
 	readonly = false;
+	@property({ type: Boolean })
+	mandatory?: boolean;
+	@property({ type: String })
+	mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+
+	protected override firstUpdated() {
+		this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-member')!);
+	}
 
 	#onChange(event: CustomEvent & { target: UmbInputMemberElement }) {
 		this.value = event.target.value;
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	override render() {
+		console.log(this.value);
 		return html`<umb-input-member
 			min="0"
 			max="1"
 			.value=${this.value}
 			@change=${this.#onChange}
+			?required=${this.mandatory}
+			.requiredMessage=${this.mandatoryMessage}
 			?readonly=${this.readonly}></umb-input-member>`;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/user/user/components/user-input/user-input.element.ts

@@ -5,11 +5,14 @@ import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 // TODO: Shall we rename to 'umb-input-user'? [LK]
 @customElement('umb-user-input')
-export class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '') {
+export class UmbUserInputElement extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(
+	UmbLitElement,
+	undefined,
+) {
 	#sorter = new UmbSorterController<string>(this, {
 		getUniqueOfElement: (element) => {
 			return element.id;
@@ -26,6 +29,25 @@ export class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '')
 		},
 	});
 
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+
+	/**
+	 * Sets the input to required, meaning validation will fail if the value is empty.
+	 * @type {boolean}
+	 */
+	@property({ type: Boolean })
+	required?: boolean;
+
+	@property({ type: String })
+	requiredMessage?: string;
+
 	/**
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
@@ -47,7 +69,7 @@ export class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '')
 	 * @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.
@@ -69,7 +91,7 @@ export class UmbUserInputElement 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';
 
 	@property({ type: Array })
@@ -82,10 +104,10 @@ export class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '')
 	}
 
 	@property()
-	public override set value(uniques: string) {
+	public override set value(uniques: string | undefined) {
 		this.selection = splitStringToArray(uniques);
 	}
-	public override get value(): string {
+	public override get value(): string | undefined {
 		return this.selection.join(',');
 	}
 
@@ -97,6 +119,12 @@ export class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '')
 	constructor() {
 		super();
 
+		this.addValidator(
+			'valueMissing',
+			() => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
+			() => !this.readonly && !!this.required && (this.value === undefined || this.value === null || this.value === ''),
+		);
+
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
@@ -136,7 +164,8 @@ export class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '')
 				id="btn-add"
 				look="placeholder"
 				label=${this.localize.term('general_choose')}
-				@click=${this.#openPicker}></uui-button>
+				@click=${this.#openPicker}
+				?disabled=${this.readonly}></uui-button>
 		`;
 	}
 
@@ -156,14 +185,19 @@ export class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '')
 	#renderItem(item: UmbUserItemModel) {
 		if (!item.unique) return nothing;
 		return html`
-			<umb-entity-item-ref .item=${item} id=${item.unique} ?standalone=${this.max === 1}>
-				<uui-action-bar slot="actions">
-					<uui-button label=${this.localize.term('general_remove')} @click=${() => this.#removeItem(item)}></uui-button>
-				</uui-action-bar>
+			<umb-entity-item-ref .item=${item} id=${item.unique} ?standalone=${this.max === 1} ?readonly=${this.readonly}>
+				<uui-action-bar slot="actions"> ${this.#renderRemoveButton(item)} </uui-action-bar>
 			</umb-entity-item-ref>
 		`;
 	}
 
+	#renderRemoveButton(item: UmbUserItemModel) {
+		if (this.readonly) return nothing;
+		return html`
+			<uui-button label=${this.localize.term('general_remove')} @click=${() => this.#removeItem(item)}></uui-button>
+		`;
+	}
+
 	static override styles = [
 		css`
 			#btn-add {

src/Umbraco.Web.UI.Client/src/packages/user/user/property-editor/user-picker/property-editor-ui-user-picker.element.ts

@@ -6,26 +6,45 @@ import type {
 	UmbPropertyEditorConfigCollection,
 	UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
 /**
  * @element umb-property-editor-ui-user-picker
  */
 @customElement('umb-property-editor-ui-user-picker')
-export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	@property()
-	value?: string = '';
+export class UmbPropertyEditorUIUserPickerElement
+	extends UmbFormControlMixin<string, typeof UmbLitElement, undefined>(UmbLitElement, undefined)
+	implements UmbPropertyEditorUiElement
+{
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+	@property({ type: Boolean })
+	mandatory?: boolean;
+	@property({ type: String })
+	mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
 
 	@property({ attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
 
+	protected override firstUpdated() {
+		this.addFormControlElement(this.shadowRoot!.querySelector('umb-user-input')!);
+	}
+
 	#onChange(event: CustomEvent & { target: UmbUserInputElement }) {
 		this.value = event.target.value;
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	override render() {
 		return html`
-			<umb-user-input min="0" max="1" .value=${this.value ?? ''} @change=${this.#onChange}></umb-user-input>
+			<umb-user-input
+				min="0"
+				max="1"
+				.value=${this.value}
+				@change=${this.#onChange}
+				?readonly=${this.readonly}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}></umb-user-input>
 		`;
 	}
 }