@umbraco-cms/backoffice 17.0.2 → 17.1.0-rc

package/dist-cms/packages/members/member/components/input-member/input-member.element.js

@@ -5,14 +5,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbMemberPickerInputContext } from './input-member.context.js';
-import { css, customElement, html, nothing, property, repeat, state } from '../../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property, repeat, state, when } from '../../../../../external/lit/index.js';
 import { splitStringToArray } from '../../../../core/utils/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
-import { UmbFormControlMixin } from '../../../../core/validation/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 import { UMB_MEMBER_TYPE_ENTITY_TYPE } from '../../../member-type/index.js';
-let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMixin(UmbLitElement) {
+let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     #sorter;
     /**
      * This is a minimum amount of selected items in this input.
@@ -95,7 +95,7 @@ let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMi
          * @attr
          * @default
          */
-        this.minMessage = 'This field need more items';
+        this.minMessage = 'This field needs more items';
         /**
          * Max validation message.
          * @type {boolean}
@@ -106,10 +106,12 @@ let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMi
         this.filter = () => true;
         this.#readonly = false;
         this.#pickerContext = new UmbMemberPickerInputContext(this);
-        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && this.selection.length < this.min);
-        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this.selection.length > this.max);
+        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, () => !this.readonly && !!this.min && this.selection.length < this.min);
+        this.addValidator('rangeOverflow', () => this.maxMessage, () => !this.readonly && !!this.max && this.selection.length > this.max);
         this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
         this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observeItems');
+        this.observe(this.#pickerContext.statuses, (statuses) => (this._statuses = statuses), '_observeStatuses');
     }
     #openPicker() {
         this.#pickerContext.openPicker({
@@ -121,30 +123,43 @@ let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMi
             })),
         });
     }
-    #onRemove(item) {
-        this.#pickerContext.requestRemoveItem(item.unique);
+    #onRemove(unique) {
+        this.#pickerContext.requestRemoveItem(unique);
     }
     render() {
         return html `${this.#renderItems()} ${this.#renderAddButton()}`;
     }
     #renderItems() {
-        if (!this._items)
+        if (!this._statuses)
             return nothing;
         return html `
 			<uui-ref-list>
-				${repeat(this._items, (item) => item.unique, (item) => this.#renderItem(item))}
+				${repeat(this._statuses, (status) => status.unique, (status) => {
+            const unique = status.unique;
+            const item = this._items?.find((x) => x.unique === unique);
+            const isError = status.state.type === 'error';
+            return html `
+							<umb-entity-item-ref
+								id=${unique}
+								.item=${item}
+								?error=${isError}
+								.errorMessage=${status.state.error}
+								.errorDetail=${isError ? unique : undefined}
+								?readonly=${this.readonly}
+								?standalone=${this.max === 1}>
+								${when(!this.readonly, () => html `
+										<uui-action-bar slot="actions">
+											<uui-button
+												label=${this.localize.term('general_remove')}
+												@click=${() => this.#onRemove(unique)}></uui-button>
+										</uui-action-bar>
+									`)}
+							</umb-entity-item-ref>
+						`;
+        })}
 			</uui-ref-list>
 		`;
     }
-    #renderItem(item) {
-        if (!item.unique)
-            return nothing;
-        return html `
-			<umb-entity-item-ref id=${item.unique} .item=${item} ?readonly=${this.readonly} ?standalone=${this.max === 1}>
-				<uui-action-bar slot="actions">${this.#renderRemoveButton(item)} </uui-action-bar>
-			</umb-entity-item-ref>
-		`;
-    }
     #renderAddButton() {
         if (this.selection.length >= this.max)
             return nothing;
@@ -162,13 +177,6 @@ let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMi
 			`;
         }
     }
-    #renderRemoveButton(item) {
-        if (this.readonly)
-            return nothing;
-        return html `
-			<uui-button @click=${() => this.#onRemove(item)} label=${this.localize.term('general_remove')}></uui-button>
-		`;
-    }
     static { this.styles = [
         css `
 			#btn-add {
@@ -205,9 +213,18 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbInputMemberElement.prototype, "readonly", null);
+__decorate([
+    property({ type: Boolean })
+], UmbInputMemberElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputMemberElement.prototype, "requiredMessage", void 0);
 __decorate([
     state()
 ], UmbInputMemberElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbInputMemberElement.prototype, "_statuses", void 0);
 UmbInputMemberElement = __decorate([
     customElement('umb-input-member')
 ], UmbInputMemberElement);

package/dist-cms/packages/members/member/entity-actions/create/manifests.js

@@ -10,7 +10,7 @@ export const manifests = [
         forEntityTypes: [UMB_MEMBER_ROOT_ENTITY_TYPE],
         meta: {
             icon: 'icon-add',
-            label: '#actions_create',
+            label: '#actions_createFor',
             additionalOptions: true,
         },
     },

package/dist-cms/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.d.ts

@@ -1,11 +1,11 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
+declare const UmbPropertyEditorUIMemberPickerElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-member-picker
  */
-export declare class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUIMemberPickerElement extends UmbPropertyEditorUIMemberPickerElement_base implements UmbPropertyEditorUiElement {
     #private;
-    value?: string;
     config?: UmbPropertyEditorConfigCollection;
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
@@ -14,6 +14,9 @@ export declare class UmbPropertyEditorUIMemberPickerElement extends UmbLitElemen
      * @default false
      */
     readonly: boolean;
+    mandatory?: boolean;
+    mandatoryMessage: string;
+    protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default UmbPropertyEditorUIMemberPickerElement;

package/dist-cms/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.js

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, customElement, property } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
 /**
  * @element umb-property-editor-ui-member-picker
  */
-let UmbPropertyEditorUIMemberPickerElement = class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement {
+let UmbPropertyEditorUIMemberPickerElement = class UmbPropertyEditorUIMemberPickerElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     constructor() {
         super(...arguments);
         /**
@@ -20,6 +21,10 @@ let UmbPropertyEditorUIMemberPickerElement = class UmbPropertyEditorUIMemberPick
          * @default false
          */
         this.readonly = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+    }
+    firstUpdated() {
+        this.addFormControlElement(this.shadowRoot.querySelector('umb-input-member'));
     }
     #onChange(event) {
         this.value = event.target.value;
@@ -31,18 +36,23 @@ let UmbPropertyEditorUIMemberPickerElement = class UmbPropertyEditorUIMemberPick
 			max="1"
 			.value=${this.value}
 			@change=${this.#onChange}
+			?required=${this.mandatory}
+			.requiredMessage=${this.mandatoryMessage}
 			?readonly=${this.readonly}></umb-input-member>`;
     }
 };
-__decorate([
-    property()
-], UmbPropertyEditorUIMemberPickerElement.prototype, "value", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbPropertyEditorUIMemberPickerElement.prototype, "config", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUIMemberPickerElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIMemberPickerElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUIMemberPickerElement.prototype, "mandatoryMessage", void 0);
 UmbPropertyEditorUIMemberPickerElement = __decorate([
     customElement('umb-property-editor-ui-member-picker')
 ], UmbPropertyEditorUIMemberPickerElement);

package/dist-cms/packages/members/member/search/member-search.server.data-source.js

@@ -32,7 +32,7 @@ export class UmbMemberSearchServerDataSource {
         if (data) {
             const mappedItems = data.items.map((item) => {
                 return {
-                    href: '/section/member-management/workspace/member/edit/' + item.id,
+                    href: 'section/member-management/workspace/member/edit/' + item.id,
                     entityType: UMB_MEMBER_ENTITY_TYPE,
                     unique: item.id,
                     name: item.variants[0].name || '',

package/dist-cms/packages/members/member/workspace/member/views/member/member-workspace-view-member.element.js

@@ -23,7 +23,7 @@ let UmbMemberWorkspaceViewMemberElement = class UmbMemberWorkspaceViewMemberElem
             const newPassword = this.shadowRoot?.querySelector('uui-input[name="newPassword"]')?.value;
             const confirmPassword = this.shadowRoot?.querySelector('uui-input[name="confirmPassword"]')?.value;
             if (newPassword !== confirmPassword) {
-                this._newPasswordError = 'Passwords do not match';
+                this._newPasswordError = this.localize.term('user_passwordMismatch');
                 return;
             }
             this._newPasswordError = '';

package/dist-cms/packages/members/member-group/collection/views/manifests.js

@@ -8,7 +8,7 @@ export const manifests = [
         element: () => import('./table/member-group-table-collection-view.element.js'),
         meta: {
             label: 'Table',
-            icon: 'icon-list',
+            icon: 'icon-table',
             pathName: 'table',
         },
         conditions: [

package/dist-cms/packages/members/member-group/components/input-member-group/input-member-group.element.d.ts

@@ -1,5 +1,6 @@
 import type { UmbMemberGroupItemModel } from '../../types.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import '../../../../core/entity-item/index.js';
 declare const UmbInputMemberGroupElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbInputMemberGroupElement extends UmbInputMemberGroupElement_base {
     #private;
@@ -47,8 +48,15 @@ export declare class UmbInputMemberGroupElement extends UmbInputMemberGroupEleme
      */
     get readonly(): boolean;
     set readonly(value: boolean);
+    /**
+     * Sets the input to required, meaning validation will fail if the value is empty.
+     * @type {boolean}
+     */
+    required?: boolean;
+    requiredMessage?: string;
     private _editMemberGroupPath;
     private _items?;
+    private _statuses?;
     constructor();
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/members/member-group/components/input-member-group/input-member-group.element.js

@@ -5,15 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbMemberGroupPickerInputContext } from './input-member-group.context.js';
-import { css, html, customElement, property, state, repeat, nothing } from '../../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property, repeat, state, when } from '../../../../../external/lit/index.js';
 import { splitStringToArray } from '../../../../core/utils/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 import { UMB_WORKSPACE_MODAL } from '../../../../core/workspace/index.js';
-import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
-import { UmbFormControlMixin } from '../../../../core/validation/index.js';
-let UmbInputMemberGroupElement = class UmbInputMemberGroupElement extends UmbFormControlMixin(UmbLitElement) {
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
+import '../../../../core/entity-item/index.js';
+let UmbInputMemberGroupElement = class UmbInputMemberGroupElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     #sorter;
     /**
      * This is a minimum amount of selected items in this input.
@@ -48,6 +49,7 @@ let UmbInputMemberGroupElement = class UmbInputMemberGroupElement extends UmbFor
     }
     set value(selectionString) {
         this.selection = splitStringToArray(selectionString);
+        super.value = selectionString;
     }
     get value() {
         return this.selection.length > 0 ? this.selection.join(',') : undefined;
@@ -95,7 +97,7 @@ let UmbInputMemberGroupElement = class UmbInputMemberGroupElement extends UmbFor
          * @attr
          * @default
          */
-        this.minMessage = 'This field need more items';
+        this.minMessage = 'This field needs more items';
         /**
          * Max validation message.
          * @type {boolean}
@@ -115,10 +117,12 @@ let UmbInputMemberGroupElement = class UmbInputMemberGroupElement extends UmbFor
             .observeRouteBuilder((routeBuilder) => {
             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, () => !!this.min && this.#pickerContext.getSelection().length < this.min);
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this.#pickerContext.getSelection().length > this.max);
         this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
         this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observeItems');
+        this.observe(this.#pickerContext.statuses, (statuses) => (this._statuses = statuses), '_observeStatuses');
     }
     getFormElement() {
         return undefined;
@@ -128,18 +132,59 @@ let UmbInputMemberGroupElement = class UmbInputMemberGroupElement extends UmbFor
             filter: this.filter,
         });
     }
-    #removeItem(item) {
-        this.#pickerContext.requestRemoveItem(item.unique);
+    #removeItem(unique) {
+        this.#pickerContext.requestRemoveItem(unique);
     }
     render() {
         return html `${this.#renderItems()} ${this.#renderAddButton()}`;
     }
     #renderItems() {
-        if (!this._items)
+        if (!this._statuses)
             return;
         return html `
 			<uui-ref-list>
-				${repeat(this._items, (item) => item.unique, (item) => this.#renderItem(item))}
+				${repeat(this._statuses, (status) => status.unique, (status) => {
+            const unique = status.unique;
+            const item = this._items?.find((x) => x.unique === unique);
+            const isError = status.state.type === 'error';
+            // For error state, use umb-entity-item-ref
+            if (isError) {
+                return html `
+								<umb-entity-item-ref
+									id=${unique}
+									?error=${true}
+									.errorMessage=${status.state.error}
+									.errorDetail=${unique}
+									?readonly=${this.readonly}
+									?standalone=${this.max === 1}>
+									${when(!this.readonly, () => html `
+											<uui-action-bar slot="actions">
+												<uui-button
+													label=${this.localize.term('general_remove')}
+													@click=${() => this.#removeItem(unique)}></uui-button>
+											</uui-action-bar>
+										`)}
+								</umb-entity-item-ref>
+							`;
+            }
+            // For successful items, use uui-ref-node
+            if (!item)
+                return nothing;
+            return html `
+							<uui-ref-node
+								name=${item.name}
+								id=${unique}
+								href="${this._editMemberGroupPath}edit/${unique}"
+								?readonly=${this.readonly}>
+								<uui-action-bar slot="actions">
+									${when(!this.readonly, () => html `<uui-button
+												@click=${() => this.#removeItem(unique)}
+												label=${this.localize.term('general_remove')}></uui-button>`)}
+								</uui-action-bar>
+								<umb-icon slot="icon" name="icon-users"></umb-icon>
+							</uui-ref-node>
+						`;
+        })}
 			</uui-ref-list>
 		`;
     }
@@ -158,27 +203,6 @@ let UmbInputMemberGroupElement = class UmbInputMemberGroupElement extends UmbFor
 				?disabled=${this.readonly}></uui-button>`;
         }
     }
-    #renderItem(item) {
-        if (!item.unique)
-            return nothing;
-        return html `
-			<uui-ref-node
-				name=${item.name}
-				id=${item.unique}
-				href="${this._editMemberGroupPath}edit/${item.unique}"
-				?readonly=${this.readonly}>
-				<uui-action-bar slot="actions"> ${this.#renderRemoveButton(item)} </uui-action-bar>
-				<umb-icon slot="icon" name="icon-users"></umb-icon>
-			</uui-ref-node>
-		`;
-    }
-    #renderRemoveButton(item) {
-        if (this.readonly)
-            return nothing;
-        return html `<uui-button
-			@click=${() => this.#removeItem(item)}
-			label=${this.localize.term('general_remove')}></uui-button>`;
-    }
     static { this.styles = [
         css `
 			#btn-add {
@@ -201,7 +225,7 @@ __decorate([
     property({ type: Number })
 ], UmbInputMemberGroupElement.prototype, "max", null);
 __decorate([
-    property({ type: String, attribute: 'min-message' })
+    property({ type: String, attribute: 'max-message' })
 ], UmbInputMemberGroupElement.prototype, "maxMessage", void 0);
 __decorate([
     property({ type: Array })
@@ -215,12 +239,21 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbInputMemberGroupElement.prototype, "readonly", null);
+__decorate([
+    property({ type: Boolean })
+], UmbInputMemberGroupElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputMemberGroupElement.prototype, "requiredMessage", void 0);
 __decorate([
     state()
 ], UmbInputMemberGroupElement.prototype, "_editMemberGroupPath", void 0);
 __decorate([
     state()
 ], UmbInputMemberGroupElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbInputMemberGroupElement.prototype, "_statuses", void 0);
 UmbInputMemberGroupElement = __decorate([
     customElement('umb-input-member-group')
 ], UmbInputMemberGroupElement);

package/dist-cms/packages/members/member-group/entity-actions/manifests.js

@@ -11,7 +11,7 @@ export const manifests = [
         forEntityTypes: [UMB_MEMBER_GROUP_ROOT_ENTITY_TYPE],
         meta: {
             icon: 'icon-add',
-            label: '#actions_create',
+            label: '#actions_createFor',
             additionalOptions: true,
         },
     },

package/dist-cms/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.d.ts

@@ -1,11 +1,11 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
+declare const UmbPropertyEditorUIMemberGroupPickerElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-member-group-picker
  */
-export declare class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUIMemberGroupPickerElement extends UmbPropertyEditorUIMemberGroupPickerElement_base implements UmbPropertyEditorUiElement {
     #private;
-    value?: string;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
@@ -14,6 +14,9 @@ export declare class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitE
      * @default false
      */
     readonly: boolean;
+    mandatory?: boolean;
+    mandatoryMessage: string;
+    protected firstUpdated(): void;
     private _min;
     private _max;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.js

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
 /**
  * @element umb-property-editor-ui-member-group-picker
  */
-let UmbPropertyEditorUIMemberGroupPickerElement = class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement {
+let UmbPropertyEditorUIMemberGroupPickerElement = class UmbPropertyEditorUIMemberGroupPickerElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     constructor() {
         super(...arguments);
         /**
@@ -20,6 +21,7 @@ let UmbPropertyEditorUIMemberGroupPickerElement = class UmbPropertyEditorUIMembe
          * @default false
          */
         this.readonly = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
         this._min = 0;
         this._max = Infinity;
     }
@@ -30,6 +32,9 @@ let UmbPropertyEditorUIMemberGroupPickerElement = class UmbPropertyEditorUIMembe
         this._min = minMax?.min ?? 0;
         this._max = minMax?.max ?? Infinity;
     }
+    firstUpdated() {
+        this.addFormControlElement(this.shadowRoot.querySelector('umb-input-member-group'));
+    }
     #onChange(event) {
         this.value = event.target.value;
         this.dispatchEvent(new UmbChangeEvent());
@@ -41,16 +46,21 @@ let UmbPropertyEditorUIMemberGroupPickerElement = class UmbPropertyEditorUIMembe
 				.max=${this._max}
 				.value=${this.value}
 				@change=${this.#onChange}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}
 				?readonly=${this.readonly}></umb-input-member-group>
 		`;
     }
 };
-__decorate([
-    property()
-], UmbPropertyEditorUIMemberGroupPickerElement.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUIMemberGroupPickerElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIMemberGroupPickerElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUIMemberGroupPickerElement.prototype, "mandatoryMessage", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUIMemberGroupPickerElement.prototype, "_min", void 0);

package/dist-cms/packages/members/member-type/components/input-member-type/input-member-type.element.d.ts

@@ -1,4 +1,5 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import '../../../../core/entity-item/index.js';
 declare const UmbInputMemberTypeElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbInputMemberTypeElement extends UmbInputMemberTypeElement_base {
     #private;
@@ -37,6 +38,7 @@ export declare class UmbInputMemberTypeElement extends UmbInputMemberTypeElement
     set value(selectionString: string | undefined);
     get value(): string | undefined;
     private _items?;
+    private _statuses?;
     constructor();
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/members/member-type/components/input-member-type/input-member-type.element.js

@@ -5,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbMemberTypePickerInputContext } from './input-member-type.context.js';
-import { css, html, customElement, property, state, repeat, when } from '../../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property, repeat, state, when } from '../../../../../external/lit/index.js';
 import { splitStringToArray } from '../../../../core/utils/index.js';
-import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbFormControlMixin } from '../../../../core/validation/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import '../../../../core/entity-item/index.js';
 let UmbInputMemberTypeElement = class UmbInputMemberTypeElement extends UmbFormControlMixin(UmbLitElement) {
     /**
      * This is a minimum amount of selected items in this input.
@@ -68,6 +69,7 @@ let UmbInputMemberTypeElement = class UmbInputMemberTypeElement extends UmbFormC
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this.#pickerContext.getSelection().length > this.max);
         this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')));
         this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+        this.observe(this.#pickerContext.statuses, (statuses) => (this._statuses = statuses), '_observeStatuses');
     }
     getFormElement() {
         return undefined;
@@ -81,11 +83,11 @@ let UmbInputMemberTypeElement = class UmbInputMemberTypeElement extends UmbFormC
         return html ` ${this.#renderItems()} ${this.#renderAddButton()} `;
     }
     #renderItems() {
-        if (!this._items)
+        if (!this._statuses)
             return;
         return html `
 			<uui-ref-list>
-				${repeat(this._items, (item) => item.unique, (item) => this.#renderItem(item))}
+				${repeat(this._statuses, (status) => status.unique, (status) => this.#renderItem(status))}
 			</uui-ref-list>
 		`;
     }
@@ -102,15 +104,36 @@ let UmbInputMemberTypeElement = class UmbInputMemberTypeElement extends UmbFormC
 			>
 		`;
     }
-    #renderItem(item) {
-        if (!item.unique)
-            return;
+    #renderItem(status) {
+        const unique = status.unique;
+        const item = this._items?.find((x) => x.unique === unique);
+        const isError = status.state.type === 'error';
+        // For error state, use umb-entity-item-ref
+        if (isError) {
+            return html `
+				<umb-entity-item-ref
+					id=${unique}
+					?error=${true}
+					.errorMessage=${status.state.error}
+					.errorDetail=${unique}
+					?standalone=${this.max === 1}>
+					<uui-action-bar slot="actions">
+						<uui-button
+							label=${this.localize.term('general_remove')}
+							@click=${() => this.#pickerContext.requestRemoveItem(unique)}></uui-button>
+					</uui-action-bar>
+				</umb-entity-item-ref>
+			`;
+        }
+        // For successful items, use the member type specific component
+        if (!item?.unique)
+            return nothing;
         return html `
 			<uui-ref-node-document-type name=${this.localize.string(item.name)}>
 				${when(item.icon, () => html `<umb-icon slot="icon" name=${item.icon}></umb-icon>`)}
 				<uui-action-bar slot="actions">
 					<uui-button
-						@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}
+						@click=${() => this.#pickerContext.requestRemoveItem(unique)}
 						label="Remove Member Type ${item.name}"
 						>${this.localize.term('general_remove')}</uui-button
 					>
@@ -144,6 +167,9 @@ __decorate([
 __decorate([
     state()
 ], UmbInputMemberTypeElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbInputMemberTypeElement.prototype, "_statuses", void 0);
 UmbInputMemberTypeElement = __decorate([
     customElement('umb-input-member-type')
 ], UmbInputMemberTypeElement);

package/dist-cms/packages/members/member-type/constants.d.ts

@@ -7,4 +7,4 @@ export * from './repository/constants.js';
 export * from './search/constants.js';
 export * from './tree/constants.js';
 export * from './workspace/constants.js';
-export { UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE, UMB_MEMBER_TYPE_ENTITY_TYPE } from './entity.js';
+export { UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE, UMB_MEMBER_TYPE_ENTITY_TYPE, UMB_MEMBER_TYPE_FOLDER_ENTITY_TYPE, } from './entity.js';

package/dist-cms/packages/members/member-type/constants.js

@@ -7,4 +7,4 @@ export * from './repository/constants.js';
 export * from './search/constants.js';
 export * from './tree/constants.js';
 export * from './workspace/constants.js';
-export { UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE, UMB_MEMBER_TYPE_ENTITY_TYPE } from './entity.js';
+export { UMB_MEMBER_TYPE_ROOT_ENTITY_TYPE, UMB_MEMBER_TYPE_ENTITY_TYPE, UMB_MEMBER_TYPE_FOLDER_ENTITY_TYPE, } from './entity.js';