@umbraco-cms/backoffice 17.0.2 → 17.1.0

package/dist-cms/packages/user/user/components/user-input/user-input.element.js

@@ -10,9 +10,9 @@ import { splitStringToArray } from '../../../../core/utils/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
-import { UUIFormControlMixin } from '../../../../../external/uui/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
 // TODO: Shall we rename to 'umb-input-user'? [LK]
-let UmbUserInputElement = class UmbUserInputElement extends UUIFormControlMixin(UmbLitElement, '') {
+let UmbUserInputElement = class UmbUserInputElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     #sorter;
     /**
      * This is a minimum amount of selected items in this input.
@@ -69,13 +69,20 @@ let UmbUserInputElement = class UmbUserInputElement extends UUIFormControlMixin(
                 this.dispatchEvent(new UmbChangeEvent());
             },
         });
+        /**
+         * 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
+         */
+        this.readonly = false;
         /**
          * Min validation message.
          * @type {boolean}
          * @attr
          * @default
          */
-        this.minMessage = 'This field need more items';
+        this.minMessage = 'This field needs more items';
         /**
          * Max validation message.
          * @type {boolean}
@@ -84,10 +91,12 @@ let UmbUserInputElement = class UmbUserInputElement extends UUIFormControlMixin(
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
         this.#pickerContext = new UmbUserPickerInputContext(this);
+        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), '_observerItems');
+        this.observe(this.#pickerContext.statuses, (statuses) => (this._statuses = statuses), '_observeStatuses');
     }
     getFormElement() {
         return undefined;
@@ -95,8 +104,8 @@ let UmbUserInputElement = class UmbUserInputElement extends UUIFormControlMixin(
     #openPicker() {
         this.#pickerContext.openPicker({});
     }
-    #removeItem(item) {
-        this.#pickerContext.requestRemoveItem(item.unique);
+    #removeItem(unique) {
+        this.#pickerContext.requestRemoveItem(unique);
     }
     render() {
         return html `${this.#renderItems()} ${this.#renderAddButton()}`;
@@ -109,25 +118,36 @@ let UmbUserInputElement = class UmbUserInputElement extends UUIFormControlMixin(
 				id="btn-add"
 				look="placeholder"
 				label=${this.localize.term('general_choose')}
-				@click=${this.#openPicker}></uui-button>
+				@click=${this.#openPicker}
+				?disabled=${this.readonly}></uui-button>
 		`;
     }
     #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) => this.#renderItem(status))}
 			</uui-ref-list>
 		`;
     }
-    #renderItem(item) {
-        if (!item.unique)
-            return nothing;
+    #renderItem(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 .item=${item} id=${item.unique} ?standalone=${this.max === 1}>
+			<umb-entity-item-ref
+				id=${unique}
+				.item=${item}
+				?error=${isError}
+				.errorMessage=${status.state.error}
+				.errorDetail=${isError ? unique : undefined}
+				?standalone=${this.max === 1}
+				?readonly=${this.readonly}>
 				<uui-action-bar slot="actions">
-					<uui-button label=${this.localize.term('general_remove')} @click=${() => this.#removeItem(item)}></uui-button>
+					<uui-button
+						label=${this.localize.term('general_remove')}
+						@click=${() => this.#removeItem(unique)}></uui-button>
 				</uui-action-bar>
 			</umb-entity-item-ref>
 		`;
@@ -140,6 +160,15 @@ let UmbUserInputElement = class UmbUserInputElement extends UUIFormControlMixin(
 		`,
     ]; }
 };
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbUserInputElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbUserInputElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbUserInputElement.prototype, "requiredMessage", void 0);
 __decorate([
     property({ type: Number })
 ], UmbUserInputElement.prototype, "min", null);
@@ -150,7 +179,7 @@ __decorate([
     property({ type: Number })
 ], UmbUserInputElement.prototype, "max", null);
 __decorate([
-    property({ type: String, attribute: 'min-message' })
+    property({ type: String, attribute: 'max-message' })
 ], UmbUserInputElement.prototype, "maxMessage", void 0);
 __decorate([
     property({ type: Array })
@@ -161,6 +190,9 @@ __decorate([
 __decorate([
     state()
 ], UmbUserInputElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbUserInputElement.prototype, "_statuses", void 0);
 UmbUserInputElement = __decorate([
     customElement('umb-user-input')
 ], UmbUserInputElement);

package/dist-cms/packages/user/user/paths.js

@@ -10,4 +10,4 @@ export const UMB_USER_ROOT_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generateA
     sectionName: UMB_USER_SECTION_PATHNAME,
     entityType: UMB_USER_ROOT_ENTITY_TYPE,
 });
-export const UMB_EDIT_USER_WORKSPACE_PATH_PATTERN = new UmbPathPattern('edit/:unique');
+export const UMB_EDIT_USER_WORKSPACE_PATH_PATTERN = new UmbPathPattern('edit/:unique', UMB_USER_WORKSPACE_PATH);

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

@@ -1,12 +1,16 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
+declare const UmbPropertyEditorUIUserPickerElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-user-picker
  */
-export declare class UmbPropertyEditorUIUserPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUIUserPickerElement extends UmbPropertyEditorUIUserPickerElement_base implements UmbPropertyEditorUiElement {
     #private;
-    value?: string;
+    readonly: boolean;
+    mandatory?: boolean;
+    mandatoryMessage: string;
     config?: UmbPropertyEditorConfigCollection;
+    protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default UmbPropertyEditorUIUserPickerElement;

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

@@ -7,13 +7,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { html, customElement, property } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
 /**
  * @element umb-property-editor-ui-user-picker
  */
-let UmbPropertyEditorUIUserPickerElement = class UmbPropertyEditorUIUserPickerElement extends UmbLitElement {
+let UmbPropertyEditorUIUserPickerElement = class UmbPropertyEditorUIUserPickerElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     constructor() {
         super(...arguments);
-        this.value = '';
+        this.readonly = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+    }
+    firstUpdated() {
+        this.addFormControlElement(this.shadowRoot.querySelector('umb-user-input'));
     }
     #onChange(event) {
         this.value = event.target.value;
@@ -21,13 +26,26 @@ let UmbPropertyEditorUIUserPickerElement = class UmbPropertyEditorUIUserPickerEl
     }
     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>
 		`;
     }
 };
 __decorate([
-    property()
-], UmbPropertyEditorUIUserPickerElement.prototype, "value", void 0);
+    property({ type: Boolean, reflect: true })
+], UmbPropertyEditorUIUserPickerElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIUserPickerElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUIUserPickerElement.prototype, "mandatoryMessage", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbPropertyEditorUIUserPickerElement.prototype, "config", void 0);

package/dist-cms/packages/user/user/workspace/user/manifests.js

@@ -1,5 +1,6 @@
 import { UMB_USER_ENTITY_TYPE } from '../../entity.js';
 import { UMB_USER_WORKSPACE_ALIAS } from './constants.js';
+import { manifests as viewManifests } from './views/manifests.js';
 import { UMB_WORKSPACE_CONDITION_ALIAS, UmbSubmitWorkspaceAction } from '../../../../core/workspace/index.js';
 export const manifests = [
     {
@@ -30,4 +31,5 @@ export const manifests = [
             },
         ],
     },
+    ...viewManifests,
 ];

package/dist-cms/packages/user/user/workspace/user/user-workspace-editor.element.d.ts

@@ -1,13 +1,5 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import './components/user-workspace-profile-settings/user-workspace-profile-settings.element.js';
-import './components/user-workspace-access/user-workspace-access.element.js';
-import './components/user-workspace-info/user-workspace-info.element.js';
-import './components/user-workspace-avatar/user-workspace-avatar.element.js';
-import './components/user-workspace-client-credentials/user-workspace-client-credentials.element.js';
 export declare class UmbUserWorkspaceEditorElement extends UmbLitElement {
-    #private;
-    private _user?;
-    constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/user/user/workspace/user/user-workspace-editor.element.js

@@ -5,87 +5,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_USER_ROOT_WORKSPACE_PATH } from '../../paths.js';
-import { UMB_USER_WORKSPACE_CONTEXT } from './user-workspace.context-token.js';
-import { css, html, nothing, customElement, state } from '../../../../../external/lit/index.js';
+import { css, html, customElement } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
-// import local components. Theses are not meant to be used outside of this component.
-import './components/user-workspace-profile-settings/user-workspace-profile-settings.element.js';
-import './components/user-workspace-access/user-workspace-access.element.js';
-import './components/user-workspace-info/user-workspace-info.element.js';
-import './components/user-workspace-avatar/user-workspace-avatar.element.js';
-import './components/user-workspace-client-credentials/user-workspace-client-credentials.element.js';
 let UmbUserWorkspaceEditorElement = class UmbUserWorkspaceEditorElement extends UmbLitElement {
-    #workspaceContext;
-    constructor() {
-        super();
-        this.consumeContext(UMB_USER_WORKSPACE_CONTEXT, (context) => {
-            this.#workspaceContext = context;
-            this.#observeUser();
-        });
-    }
-    #observeUser() {
-        if (!this.#workspaceContext)
-            return;
-        this.observe(this.#workspaceContext.data, (user) => (this._user = user), 'umbUserObserver');
-    }
     render() {
         return html `
-			<umb-entity-detail-workspace-editor class="uui-text" .backPath=${UMB_USER_ROOT_WORKSPACE_PATH}>
+			<umb-entity-detail-workspace-editor .backPath=${UMB_USER_ROOT_WORKSPACE_PATH}>
 				<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
-				${this._user
-            ? html `<div id="main">
-							<div id="left-column">${this.#renderLeftColumn()}</div>
-							<div id="right-column">${this.#renderRightColumn()}</div>
-						</div>`
-            : nothing}
 			</umb-entity-detail-workspace-editor>
 		`;
     }
-    #renderLeftColumn() {
-        return html `
-			<umb-stack>
-				<umb-user-workspace-profile-settings></umb-user-workspace-profile-settings>
-				<umb-user-workspace-assign-access></umb-user-workspace-assign-access>
-				<umb-user-workspace-access></umb-user-workspace-access>
-			</umb-stack>
-		`;
-    }
-    #renderRightColumn() {
-        return html `
-			<umb-stack look="compact">
-				<umb-user-workspace-avatar></umb-user-workspace-avatar>
-				<umb-user-workspace-info></umb-user-workspace-info>
-				<umb-user-workspace-client-credentials></umb-user-workspace-client-credentials>
-			</umb-stack>
-		`;
-    }
     static { this.styles = [
         UmbTextStyles,
         css `
 			:host {
 				display: block;
+				width: 100%;
 				height: 100%;
 			}
-
-			#main {
-				display: grid;
-				grid-template-columns: 1fr 350px;
-				gap: var(--uui-size-layout-1);
-				padding: var(--uui-size-layout-1);
-			}
-
-			#left-column {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-4);
-			}
 		`,
     ]; }
 };
-__decorate([
-    state()
-], UmbUserWorkspaceEditorElement.prototype, "_user", void 0);
 UmbUserWorkspaceEditorElement = __decorate([
     customElement('umb-user-workspace-editor')
 ], UmbUserWorkspaceEditorElement);

package/dist-cms/packages/user/user/workspace/user/views/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/user/user/workspace/user/views/manifests.js

@@ -0,0 +1,22 @@
+import { UMB_USER_WORKSPACE_ALIAS } from '../constants.js';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '../../../../../core/workspace/index.js';
+export const manifests = [
+    {
+        type: 'workspaceView',
+        alias: 'Umb.WorkspaceView.User.Details',
+        name: 'User Details Workspace View',
+        element: () => import('./user-details-workspace-view.element.js'),
+        weight: 90,
+        meta: {
+            label: '#general_details',
+            pathname: 'details',
+            icon: 'edit',
+        },
+        conditions: [
+            {
+                alias: UMB_WORKSPACE_CONDITION_ALIAS,
+                match: UMB_USER_WORKSPACE_ALIAS,
+            },
+        ],
+    },
+];

package/dist-cms/packages/user/user/workspace/user/views/user-details-workspace-view.element.d.ts

@@ -0,0 +1,20 @@
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import type { UmbWorkspaceViewElement } from '../../../../../core/workspace/index.js';
+import '../components/user-workspace-profile-settings/user-workspace-profile-settings.element.js';
+import '../components/user-workspace-access/user-workspace-access.element.js';
+import '../components/user-workspace-info/user-workspace-info.element.js';
+import '../components/user-workspace-avatar/user-workspace-avatar.element.js';
+import '../components/user-workspace-client-credentials/user-workspace-client-credentials.element.js';
+export declare class UmbUserDetailsWorkspaceViewElement extends UmbLitElement implements UmbWorkspaceViewElement {
+    #private;
+    private _user?;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbUserDetailsWorkspaceViewElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-user-details-workspace-view': UmbUserDetailsWorkspaceViewElement;
+    }
+}

package/dist-cms/packages/user/user/workspace/user/views/user-details-workspace-view.element.js

@@ -0,0 +1,89 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UMB_USER_WORKSPACE_CONTEXT } from '../user-workspace.context-token.js';
+import { customElement, html, nothing, state, css } from '../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbTextStyles } from '../../../../../core/style/index.js';
+// import local components. Theses are not meant to be used outside of this component.
+import '../components/user-workspace-profile-settings/user-workspace-profile-settings.element.js';
+import '../components/user-workspace-access/user-workspace-access.element.js';
+import '../components/user-workspace-info/user-workspace-info.element.js';
+import '../components/user-workspace-avatar/user-workspace-avatar.element.js';
+import '../components/user-workspace-client-credentials/user-workspace-client-credentials.element.js';
+let UmbUserDetailsWorkspaceViewElement = class UmbUserDetailsWorkspaceViewElement extends UmbLitElement {
+    #workspaceContext;
+    constructor() {
+        super();
+        this.consumeContext(UMB_USER_WORKSPACE_CONTEXT, (context) => {
+            this.#workspaceContext = context;
+            this.#observeUser();
+        });
+    }
+    #observeUser() {
+        if (!this.#workspaceContext)
+            return;
+        this.observe(this.#workspaceContext.data, (user) => (this._user = user), 'umbUserObserver');
+    }
+    render() {
+        return html `
+			${this._user
+            ? html `<div id="main">
+						<div id="left-column">${this.#renderLeftColumn()}</div>
+						<div id="right-column">${this.#renderRightColumn()}</div>
+					</div>`
+            : nothing}
+		`;
+    }
+    #renderLeftColumn() {
+        return html `
+			<umb-stack>
+				<umb-user-workspace-profile-settings></umb-user-workspace-profile-settings>
+				<umb-user-workspace-assign-access></umb-user-workspace-assign-access>
+				<umb-user-workspace-access></umb-user-workspace-access>
+			</umb-stack>
+		`;
+    }
+    #renderRightColumn() {
+        return html `
+			<umb-stack look="compact">
+				<umb-user-workspace-avatar></umb-user-workspace-avatar>
+				<umb-user-workspace-info></umb-user-workspace-info>
+				<umb-user-workspace-client-credentials></umb-user-workspace-client-credentials>
+			</umb-stack>
+		`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: block;
+				height: 100%;
+			}
+
+			#main {
+				display: grid;
+				grid-template-columns: 1fr 350px;
+				gap: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
+			}
+
+			#left-column {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbUserDetailsWorkspaceViewElement.prototype, "_user", void 0);
+UmbUserDetailsWorkspaceViewElement = __decorate([
+    customElement('umb-user-details-workspace-view')
+], UmbUserDetailsWorkspaceViewElement);
+export { UmbUserDetailsWorkspaceViewElement };
+export { UmbUserDetailsWorkspaceViewElement as element };

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

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

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

@@ -1,4 +1,5 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import '../../../../core/entity-item/index.js';
 declare const UmbUserGroupInputElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
 export declare class UmbUserGroupInputElement extends UmbUserGroupInputElement_base {
     #private;
@@ -37,11 +38,11 @@ export declare class UmbUserGroupInputElement extends UmbUserGroupInputElement_b
     set value(idsString: string);
     get value(): string;
     private _items?;
+    private _statuses?;
     private _editUserGroupPath;
     constructor();
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
-    private _renderItem;
     static styles: import("lit").CSSResult[];
 }
 export default UmbUserGroupInputElement;

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

@@ -6,12 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_USER_GROUP_ENTITY_TYPE } from '../../entity.js';
 import { UmbUserGroupPickerInputContext } from './user-group-input.context.js';
-import { css, html, customElement, property, state, ifDefined, nothing } from '../../../../../external/lit/index.js';
-import { UUIFormControlMixin } from '../../../../../external/uui/index.js';
+import { css, customElement, html, ifDefined, nothing, property, repeat, state, } from '../../../../../external/lit/index.js';
+import { splitStringToArray } from '../../../../core/utils/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UMB_WORKSPACE_MODAL } from '../../../../core/workspace/index.js';
 import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
-import { splitStringToArray } from '../../../../core/utils/index.js';
+import { UMB_WORKSPACE_MODAL } from '../../../../core/workspace/index.js';
+import { UUIFormControlMixin } from '../../../../../external/uui/index.js';
+import '../../../../core/entity-item/index.js';
 let UmbUserGroupInputElement = class UmbUserGroupInputElement extends UUIFormControlMixin(UmbLitElement, '') {
     /**
      * This is a minimum amount of selected items in this input.
@@ -73,6 +74,7 @@ let UmbUserGroupInputElement = class UmbUserGroupInputElement extends UUIFormCon
         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), '_observerItems');
+        this.observe(this.#pickerContext.statuses, (statuses) => (this._statuses = statuses), '_observeStatuses');
         new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
             .addAdditionalPath(UMB_USER_GROUP_ENTITY_TYPE)
             .onSetup(async () => {
@@ -87,7 +89,11 @@ let UmbUserGroupInputElement = class UmbUserGroupInputElement extends UUIFormCon
     }
     render() {
         return html `
-			<uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
+			<uui-ref-list>
+				${this._statuses
+            ? repeat(this._statuses, (status) => status.unique, (status) => this.#renderItem(status))
+            : nothing}
+			</uui-ref-list>
 			<uui-button
 				id="btn-add"
 				look="placeholder"
@@ -95,16 +101,32 @@ let UmbUserGroupInputElement = class UmbUserGroupInputElement extends UUIFormCon
 				label=${this.localize.term('general_choose')}></uui-button>
 		`;
     }
-    _renderItem(item) {
-        if (!item.unique)
-            return;
-        const href = `${this._editUserGroupPath}edit/${item.unique}`;
+    #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}>
+					<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 umb-user-group-ref
+        if (!item?.unique)
+            return nothing;
+        const href = `${this._editUserGroupPath}edit/${unique}`;
         return html `
 			<umb-user-group-ref name="${ifDefined(item.name)}" href=${href}>
 				${item.icon ? html `<umb-icon slot="icon" name=${item.icon}></umb-icon>` : nothing}
 				<uui-action-bar slot="actions">
 					<uui-button
-						@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}
+						@click=${() => this.#pickerContext.requestRemoveItem(unique)}
 						label=${this.localize.term('general_remove')}></uui-button>
 				</uui-action-bar>
 			</umb-user-group-ref>
@@ -136,6 +158,9 @@ __decorate([
 __decorate([
     state()
 ], UmbUserGroupInputElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbUserGroupInputElement.prototype, "_statuses", void 0);
 __decorate([
     state()
 ], UmbUserGroupInputElement.prototype, "_editUserGroupPath", void 0);

package/dist-cms/packages/user/user-group/workspace/user-group/manifests.js

@@ -1,4 +1,5 @@
 import { UMB_USER_GROUP_WORKSPACE_ALIAS } from './constants.js';
+import { manifests as viewManifests } from './views/manifests.js';
 import { UmbSubmitWorkspaceAction, UMB_WORKSPACE_CONDITION_ALIAS } from '../../../../core/workspace/index.js';
 export const manifests = [
     {
@@ -29,4 +30,5 @@ export const manifests = [
             },
         ],
     },
+    ...viewManifests,
 ];

package/dist-cms/packages/user/user-group/workspace/user-group/user-group-workspace-editor.element.d.ts

@@ -1,20 +1,11 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import './components/user-group-entity-type-permission-groups.element.js';
 export declare class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
     #private;
     private _isNew?;
-    private _unique?;
     private _name?;
     private _alias?;
     private _aliasCanBeChanged?;
     private _icon?;
-    private _sections;
-    private _languages;
-    private _hasAccessToAllLanguages;
-    private _documentStartNode?;
-    private _documentRootAccess;
-    private _mediaStartNode?;
-    private _mediaRootAccess;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];