@umbraco-cms/backoffice 14.0.0-40e04294 → 14.0.0-43239cee

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

@@ -4,17 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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_GROUP_ENTITY_TYPE } from '../index.js';
 import { UMB_USER_GROUP_WORKSPACE_CONTEXT } from './user-group-workspace.context.js';
 import { UUIInputEvent } from '../../../../external/uui/index.js';
 import { css, html, nothing, customElement, state } from '../../../../external/lit/index.js';
-// TODO: import from package when available
-//import { UmbUserInputElement } from '../../users/components/user-input/user-input.element.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
-import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../../core/modal/index.js';
 import { UmbTextStyles } from '../../../../shared/style/index.js';
+import './components/user-group-default-permission-list.element.js';
+import './components/user-group-granular-permission-list.element.js';
 export let UmbUserGroupWorkspaceEditorElement = class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
     #workspaceContext;
-    #modalContext;
     constructor() {
         super();
         this.consumeContext(UMB_USER_GROUP_WORKSPACE_CONTEXT, (instance) => {
@@ -22,31 +21,26 @@ export let UmbUserGroupWorkspaceEditorElement = class UmbUserGroupWorkspaceEdito
             this.observe(this.#workspaceContext.data, (userGroup) => (this._userGroup = userGroup));
             this.observe(this.#workspaceContext.userIds, (userKeys) => (this._userKeys = userKeys));
         });
-        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
-            this.#modalContext = instance;
-        });
     }
-    #onUsersChange(userIds) {
-        this.#workspaceContext?.updateUserKeys(userIds);
+    #onSectionsChange(event) {
+        event.stopPropagation();
+        const target = event.target;
+        this.#workspaceContext?.updateProperty('sections', target.value);
     }
-    #onSectionsChange(value) {
-        this.#workspaceContext?.updateProperty('sections', value);
+    #onDocumentStartNodeChange(event) {
+        event.stopPropagation();
+        const target = event.target;
+        this.#workspaceContext?.updateProperty('documentStartNodeId', target.selectedIds[0]);
     }
-    async #onDelete() {
-        if (!this.#modalContext || !this.#workspaceContext)
-            return;
-        const modalContext = this.#modalContext.open(UMB_CONFIRM_MODAL, {
-            color: 'danger',
-            headline: `Delete user group ${this._userGroup?.name}?`,
-            content: html `Are you sure you want to delete <b>${this._userGroup?.name}</b> user group?`,
-            confirmLabel: 'Delete',
-        });
-        await modalContext.onSubmit();
-        if (!this._userGroup || !this._userGroup.id)
-            return;
-        await this.#workspaceContext.delete(this._userGroup?.id);
-        //TODO: should we check if it actually succeeded in deleting the user group?
-        history.pushState(null, '', 'section/users/view/user-groups');
+    #onMediaStartNodeChange(event) {
+        event.stopPropagation();
+        const target = event.target;
+        this.#workspaceContext?.updateProperty('mediaStartNodeId', target.selectedIds[0]);
+    }
+    #onUsersChange(event) {
+        event.stopPropagation();
+        const target = event.target;
+        this.#workspaceContext?.updateUserKeys(target.selectedIds);
     }
     #onNameChange(event) {
         if (event instanceof UUIInputEvent) {
@@ -77,7 +71,7 @@ export let UmbUserGroupWorkspaceEditorElement = class UmbUserGroupWorkspaceEdito
 				</a>
 				<uui-input
 					id="name"
-					label="name"
+					label=${this.localize.term('general_name')}
 					.value=${this._userGroup?.name ?? ''}
 					@input="${this.#onNameChange}"></uui-input>
 			</div>
@@ -86,53 +80,60 @@ export let UmbUserGroupWorkspaceEditorElement = class UmbUserGroupWorkspaceEdito
     #renderLeftColumn() {
         if (!this._userGroup)
             return nothing;
-        return html ` <uui-box>
-				<div slot="headline">Assign access</div>
-				<umb-workspace-property-layout label="Sections" description="Add sections to give users access">
+        return html `
+			<uui-box>
+				<div slot="headline"><umb-localize key="user_assignAccess"></umb-localize></div>
+				<umb-workspace-property-layout
+					label=${this.localize.term('main_sections')}
+					description=${this.localize.term('user_sectionsHelp')}>
 					<umb-input-section
 						slot="editor"
 						.value=${this._userGroup.sections ?? []}
-						@change=${(e) => this.#onSectionsChange(e.target.value)}></umb-input-section>
+						@change=${this.#onSectionsChange}></umb-input-section>
 				</umb-workspace-property-layout>
 				<umb-workspace-property-layout
-					label="Content start node"
-					description="Limit the content tree to a specific start node">
-					<b slot="editor">CONTENT START NODE PICKER NOT IMPLEMENTED YET</b>
+					label=${this.localize.term('defaultdialogs_selectContentStartNode')}
+					description=${this.localize.term('user_startnodehelp')}>
+					<umb-input-document
+						slot="editor"
+						max="1"
+						.selectedIds=${this._userGroup.documentStartNodeId ? [this._userGroup.documentStartNodeId] : []}
+						@change=${this.#onDocumentStartNodeChange}></umb-input-document>
 				</umb-workspace-property-layout>
 				<umb-workspace-property-layout
-					label="Media start node"
-					description="Limit the media library to a specific start node">
-					<b slot="editor">MEDIA START NODE PICKER NOT IMPLEMENTED YET</b>
+					label=${this.localize.term('defaultdialogs_selectMediaStartNode')}
+					description=${this.localize.term('user_mediastartnodehelp')}>
+					<umb-input-media
+						slot="editor"
+						max="1"
+						.selectedIds=${this._userGroup.mediaStartNodeId ? [this._userGroup.mediaStartNodeId] : []}
+						@change=${this.#onMediaStartNodeChange}></umb-input-media>
 				</umb-workspace-property-layout>
 			</uui-box>
 
 			<uui-box>
-				<div slot="headline">Default Permissions</div>
-				<b>PERMISSIONS NOT IMPLEMENTED YET</b>
+				<div slot="headline"><umb-localize key="user_permissionsDefault"></umb-localize></div>
+				<umb-user-group-default-permission-list></umb-user-group-default-permission-list>
 			</uui-box>
 
+			<!-- Temp disabled because it is work in progress
 			<uui-box>
-				<div slot="headline">Granular permissions</div>
-				<b>PERMISSIONS NOT IMPLEMENTED YET</b>
-			</uui-box>`;
+				<div slot="headline"><umb-localize key="user_permissionsGranular"></umb-localize></div>
+				<umb-user-group-granular-permission-list></umb-user-group-granular-permission-list>
+			</uui-box>
+	-->
+		`;
     }
     #renderRightColumn() {
         return html `<uui-box>
-				<div slot="headline">Users</div>
-				<!-- change any to UmbUserInputElement when package is available -->
-				<umb-user-input
-					@change=${(e) => this.#onUsersChange(e.target.selectedIds)}
-					.selectedIds=${this._userKeys ?? []}></umb-user-input>
+				<div slot="headline"><umb-localize key="sections_users"></umb-localize></div>
+				<umb-user-input @change=${this.#onUsersChange} .selectedIds=${this._userKeys ?? []}></umb-user-input>
 			</uui-box>
-			<uui-box>
-				<div slot="headline">Delete user group</div>
-				<uui-button
-					@click=${this.#onDelete}
-					style="width: 100%"
-					color="danger"
-					look="secondary"
-					label="Delete"></uui-button>
-			</uui-box>`;
+			<uui-box headline="Actions">
+				<umb-entity-action-list
+					.entityType=${UMB_USER_GROUP_ENTITY_TYPE}
+					.unique=${this._userGroup?.id}></umb-entity-action-list
+			></uui-box>`;
     }
     static { this.styles = [
         UmbTextStyles,

package/dist-cms/packages/users/user-groups/workspace/user-group-workspace.context.d.ts

@@ -20,5 +20,17 @@ export declare class UmbUserGroupWorkspaceContext extends UmbWorkspaceContext<Um
     delete(id: string): Promise<void>;
     updateProperty<Alias extends keyof UserGroupResponseModel>(alias: Alias, value: UserGroupResponseModel[Alias]): void;
     updateUserKeys(keys: Array<string>): void;
+    /**
+     * Adds a permission to the user group permission array.
+     * @param {string} permissionAlias
+     * @memberof UmbUserGroupWorkspaceContext
+     */
+    addPermission(permissionAlias: string): void;
+    /**
+     * Removes a permission from the user group permission array.
+     * @param {string} permissionAlias
+     * @memberof UmbUserGroupWorkspaceContext
+     */
+    removePermission(permissionAlias: string): void;
 }
 export declare const UMB_USER_GROUP_WORKSPACE_CONTEXT: UmbContextToken<UmbSaveableWorkspaceContextInterface<unknown>, UmbUserGroupWorkspaceContext>;

package/dist-cms/packages/users/user-groups/workspace/user-group-workspace.context.js

@@ -83,5 +83,25 @@ export class UmbUserGroupWorkspaceContext extends UmbWorkspaceContext {
     updateUserKeys(keys) {
         this.#userIds.next(keys);
     }
+    /**
+     * Adds a permission to the user group permission array.
+     * @param {string} permissionAlias
+     * @memberof UmbUserGroupWorkspaceContext
+     */
+    addPermission(permissionAlias) {
+        const permissions = this.#data.getValue()?.permissions ?? [];
+        const newValue = [...permissions, permissionAlias];
+        this.#data.update({ permissions: newValue });
+    }
+    /**
+     * Removes a permission from the user group permission array.
+     * @param {string} permissionAlias
+     * @memberof UmbUserGroupWorkspaceContext
+     */
+    removePermission(permissionAlias) {
+        const permissions = this.#data.getValue()?.permissions ?? [];
+        const newValue = permissions.filter((alias) => alias !== permissionAlias);
+        this.#data.update({ permissions: newValue });
+    }
 }
 export const UMB_USER_GROUP_WORKSPACE_CONTEXT = new UmbContextToken('UmbWorkspaceContext', (context) => context.getEntityType?.() === 'user-group');

package/dist-cms/packages/users/user-groups/workspace/user-group-workspace.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbUserGroupWorkspaceContext } from './user-group-workspace.context.js';
 import { UmbUserGroupWorkspaceEditorElement } from './user-group-workspace-editor.element.js';
-import { UmbTextStyles } from "../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { html, customElement, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import { UmbWorkspaceIsNewRedirectController } from '../../../core/workspace/index.js';

package/dist-cms/packages/users/users/collection/user-collection-header.element.js

@@ -85,18 +85,19 @@ export let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement
         return html `
 			<uui-button
 				@click=${this._showInviteOrCreate}
-				label=${this._isCloud ? 'Invite' : 'Create' + ' user'}
+				label=${this.localize.term(this._isCloud ? 'user_inviteUser' : 'user_createUser')}
 				look="outline"></uui-button>
-			<uui-input @input=${this._updateSearch} label="search" id="input-search"></uui-input>
+			<uui-input @input=${this._updateSearch} label=${this.localize.term('visuallyHiddenTexts_userSearchLabel')} placeholder=${this.localize.term('visuallyHiddenTexts_userSearchLabel')} id="input-search"></uui-input>
 			<div>
 				<!-- TODO: we should consider using the uui-combobox. We need to add a multiple options to it first -->
 				<umb-dropdown margin="8">
 					<uui-button @click=${this.#onDropdownClick} slot="trigger" label="status">
-						State: ${this._stateFilterSelection}
+						<umb-localize key="general_status"></umb-localize>: 
+						<umb-localize key=${'user_state' + this._stateFilterSelection}></umb-localize>
 					</uui-button>
 					<div slot="dropdown" class="filter-dropdown">
 						${this._stateFilterOptions.map((option) => html `<uui-checkbox
-									label=${option}
+									label=${this.localize.term('user_state' + option)}
 									@change=${this.#onStateFilterChange}
 									name="state"
 									value=${option}></uui-checkbox>`)}
@@ -105,19 +106,25 @@ export let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement
 
 				<!-- TODO: we should consider using the uui-combobox. We need to add a multiple options to it first -->
 				<umb-dropdown margin="8">
-					<uui-button @click=${this.#onDropdownClick} slot="trigger" label="order by"> Group: </uui-button>
+					<uui-button @click=${this.#onDropdownClick} slot="trigger" label=${this.localize.term('general_groups')}>
+						<umb-localize key="general_groups"></umb-localize>:
+						<!-- TODO: show the value here -->
+					</uui-button>
 					<div slot="dropdown" class="filter-dropdown">
-						<uui-checkbox label="Active"></uui-checkbox>
-						<uui-checkbox label="Inactive"></uui-checkbox>
-						<uui-checkbox label="Invited"></uui-checkbox>
-						<uui-checkbox label="Disabled"></uui-checkbox>
+						<!-- TODO: GET THESE FROM SERVER (not localized) -->
+						<uui-checkbox label="Administrators"></uui-checkbox>
+						<uui-checkbox label="Editors"></uui-checkbox>
+						<uui-checkbox label="Sensitive Data"></uui-checkbox>
+						<uui-checkbox label="Translators"></uui-checkbox>
+						<uui-checkbox label="Writers"></uui-checkbox>
 					</div>
 				</umb-dropdown>
 
 				<!-- TODO: we should consider using the uui-combobox. We need to add a multiple options to it first -->
 				<umb-dropdown margin="8">
-					<uui-button @click=${this.#onDropdownClick} slot="trigger" label="Order By">
-						Order By: <b>${this._orderBy}</b>
+					<uui-button @click=${this.#onDropdownClick} slot="trigger" label=${this.localize.term('general_orderBy')}>
+						<umb-localize key="general_orderBy"></umb-localize>:
+						<b>${this._orderBy}</b>
 					</uui-button>
 					<div slot="dropdown" class="filter-dropdown" name="orderBy">
 						<uui-radio-group name="radioGroup" @change=${this.#onOrderByChange}>

package/dist-cms/packages/users/users/collection/views/grid/user-collection-grid-view.element.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { getLookAndColorFromUserStatus } from '../../../../utils.js';
+import { getDisplayStateFromUserStatus } from '../../../../utils.js';
 import { css, html, nothing, customElement, state, repeat, ifDefined } from '../../../../../../external/lit/index.js';
 import { UmbTextStyles } from "../../../../../../shared/style/index.js";
 import { UMB_COLLECTION_CONTEXT_TOKEN } from '../../../../../core/collection/index.js';
@@ -52,22 +52,22 @@ export let UmbUserCollectionGridViewElement = class UmbUserCollectionGridViewEle
         if (user.state && user.state === UserStateModel.ACTIVE) {
             return nothing;
         }
-        const statusLook = getLookAndColorFromUserStatus(user.state);
+        const statusLook = getDisplayStateFromUserStatus(user.state);
         return html `<uui-tag
 			slot="tag"
 			size="s"
 			look="${ifDefined(statusLook?.look)}"
 			color="${ifDefined(statusLook?.color)}">
-			${user.state}
+			<umb-localize key=${'user_' + statusLook.key}></umb-localize>
 		</uui-tag>`;
     }
     #renderUserLoginDate(user) {
         if (!user.lastLoginDate) {
-            return html `<div class="user-login-time">${`${user.name} has not logged in yet`}</div>`;
+            return html `<div class="user-login-time">${`${user.name} ${this.localize.term('user_noLogin')}`}</div>`;
         }
         return html `<div class="user-login-time">
-			<div>Last login</div>
-			${user.lastLoginDate}
+			<umb-localize key="user_lastLogin"></umb-localize><br/>
+			${this.localize.date(user.lastLoginDate)}
 		</div>`;
     }
     render() {

package/dist-cms/packages/users/users/collection/views/table/column-layouts/status/user-table-status-column-layout.element.js

@@ -4,15 +4,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { getLookAndColorFromUserStatus } from '../../../../../../utils.js';
+import { getDisplayStateFromUserStatus } from '../../../../../../utils.js';
 import { html, LitElement, nothing, customElement, property } from '../../../../../../../../external/lit/index.js';
 export let UmbUserTableStatusColumnLayoutElement = class UmbUserTableStatusColumnLayoutElement extends LitElement {
     render() {
         return html `${this.value.status && this.value.status !== 'enabled'
             ? html `<uui-tag
 					size="s"
-					look="${getLookAndColorFromUserStatus(this.value.status).look}"
-					color="${getLookAndColorFromUserStatus(this.value.status).color}">
+					look="${getDisplayStateFromUserStatus(this.value.status).look}"
+					color="${getDisplayStateFromUserStatus(this.value.status).color}">
 					${this.value.status}
 			  </uui-tag>`
             : nothing}`;

package/dist-cms/packages/users/users/components/index.d.ts

@@ -1 +1,4 @@
 import './user-input/user-input.element.js';
+import './user-permission-setting/user-permission-setting.element.js';
+export * from './user-input/user-input.element.js';
+export * from './user-permission-setting/user-permission-setting.element.js';

package/dist-cms/packages/users/users/components/index.js

@@ -1 +1,4 @@
 import './user-input/user-input.element.js';
+import './user-permission-setting/user-permission-setting.element.js';
+export * from './user-input/user-input.element.js';
+export * from './user-permission-setting/user-permission-setting.element.js';

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbUserPickerContext } from './user-input.context.js';
-import { css, html, customElement, property, state } from '../../../../../external/lit/index.js';
+import { css, html, customElement, property, state, ifDefined } from '../../../../../external/lit/index.js';
 import { FormControlMixin } from '../../../../../external/uui/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 export let UmbUserInputElement = class UmbUserInputElement extends FormControlMixin(UmbLitElement) {
@@ -81,7 +81,7 @@ export let UmbUserInputElement = class UmbUserInputElement extends FormControlMi
         if (!item.id)
             return;
         return html `
-			<uui-ref-node-user name=${item.name}>
+			<uui-ref-node-user name=${ifDefined(item.name)}>
 				<uui-action-bar slot="actions">
 					<uui-button @click=${() => this.#pickerContext.requestRemoveItem(item.id)} label="Remove ${item.name}"
 						>Remove</uui-button

package/dist-cms/packages/users/users/components/user-permission-setting/user-permission-setting.element.d.ts

@@ -0,0 +1,15 @@
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+export declare class UmbUserPermissionSettingElement extends UmbLitElement {
+    #private;
+    label: string;
+    description?: string;
+    allowed: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+export default UmbUserPermissionSettingElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-user-permission-setting': UmbUserPermissionSettingElement;
+    }
+}

package/dist-cms/packages/users/users/components/user-permission-setting/user-permission-setting.element.js

@@ -0,0 +1,66 @@
+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 { css, html, customElement, property } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
+import { UmbChangeEvent } from '../../../../../shared/umb-events/index.js';
+export let UmbUserPermissionSettingElement = class UmbUserPermissionSettingElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.description = '';
+        this.allowed = false;
+    }
+    #onChange(event) {
+        event.stopPropagation();
+        this.allowed = event.target.checked;
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    render() {
+        return html `<div id="setting">
+			<uui-toggle label=${this.label} ?checked=${this.allowed} @change=${this.#onChange}>
+				<div id="meta">
+					<div id="name">${this.label}</div>
+					<small>${this.description}</small>
+				</div>
+			</uui-toggle>
+		</div>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			#setting {
+				display: flex;
+				align-items: center;
+				border-bottom: 1px solid var(--uui-color-divider);
+				padding: var(--uui-size-space-3) 0 var(--uui-size-space-4) 0;
+			}
+
+			#meta {
+				margin-left: var(--uui-size-space-4);
+				line-height: 1.2em;
+			}
+
+			#name {
+				font-weight: bold;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: String, attribute: true })
+], UmbUserPermissionSettingElement.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: true })
+], UmbUserPermissionSettingElement.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], UmbUserPermissionSettingElement.prototype, "allowed", void 0);
+UmbUserPermissionSettingElement = __decorate([
+    customElement('umb-user-permission-setting')
+], UmbUserPermissionSettingElement);
+export default UmbUserPermissionSettingElement;

package/dist-cms/packages/users/users/index.d.ts

@@ -1 +1,3 @@
+export * from './components/index.js';
+export * from './repository/index.js';
 export * from './types.js';

package/dist-cms/packages/users/users/index.js

@@ -1 +1,3 @@
+export * from './components/index.js';
+export * from './repository/index.js';
 export * from './types.js';

package/dist-cms/packages/users/users/modals/user-picker/user-picker-modal.element.d.ts

@@ -1,9 +1,11 @@
+import { PropertyValueMap } from '../../../../../external/lit/index.js';
 import { UmbUserPickerModalData, UmbUserPickerModalResult } from '../../../../core/modal/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
 export declare class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPickerModalData, UmbUserPickerModalResult> {
     #private;
     private _users;
-    constructor();
+    connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }

package/dist-cms/packages/users/users/modals/user-picker/user-picker-modal.element.js

@@ -4,38 +4,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UmbTextStyles } from "../../../../../shared/style/index.js";
-import { css, html, customElement, state } from '../../../../../external/lit/index.js';
-import { createExtensionClass } from '../../../../../libs/extension-api/index.js';
-import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
-import { UmbObserverController } from '../../../../../libs/observable-api/index.js';
+import { UmbUserRepository } from '../../repository/user.repository.js';
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
+import { css, html, customElement, state, ifDefined } from '../../../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
 import { UmbSelectionManagerBase } from '../../../../../shared/utils/index.js';
 export let UmbUserPickerModalElement = class UmbUserPickerModalElement extends UmbModalBaseElement {
-    #selectionManager;
-    #userRepository;
     constructor() {
-        super();
+        super(...arguments);
         this._users = [];
         this.#selectionManager = new UmbSelectionManagerBase();
-        // TODO: this code is reused in multiple places, so it should be extracted to a function
-        new UmbObserverController(this, umbExtensionsRegistry.getByTypeAndAlias('repository', 'Umb.Repository.User'), async (repositoryManifest) => {
-            if (!repositoryManifest)
-                return;
-            try {
-                const result = await createExtensionClass(repositoryManifest, [this]);
-                this.#userRepository = result;
-                this.#observeUsers();
-            }
-            catch (error) {
-                throw new Error('Could not create repository with alias: Umb.Repository.User');
-            }
-        });
+        this.#userRepository = new UmbUserRepository(this);
+    }
+    #selectionManager;
+    #userRepository;
+    connectedCallback() {
+        super.connectedCallback();
+        // TODO: in theory this config could change during the lifetime of the modal, so we could observe it
+        this.#selectionManager.setMultiple(this.data?.multiple ?? false);
+        this.#selectionManager.setSelection(this.data?.selection ?? []);
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.#requestUsers();
     }
-    async #observeUsers() {
+    async #requestUsers() {
         if (!this.#userRepository)
             return;
-        // TODO is this the correct end point?
         const { data } = await this.#userRepository.requestCollection();
         if (data) {
             this._users = data.items;
@@ -53,12 +48,12 @@ export let UmbUserPickerModalElement = class UmbUserPickerModalElement extends U
 				<uui-box>
 					${this._users.map((user) => html `
 							<uui-menu-item
-								label=${user.name}
+								label=${ifDefined(user.name)}
 								selectable
 								@selected=${() => this.#selectionManager.select(user.id)}
 								@deselected=${() => this.#selectionManager.deselect(user.id)}
 								?selected=${this.#selectionManager.isSelected(user.id)}>
-								<uui-avatar slot="icon" name=${user.name}></uui-avatar>
+								<uui-avatar slot="icon" name=${ifDefined(user.name)}></uui-avatar>
 							</uui-menu-item>
 						`)}
 				</uui-box>

package/dist-cms/packages/users/users/repository/index.d.ts

@@ -0,0 +1 @@
+export * from './user.repository.js';

package/dist-cms/packages/users/users/repository/index.js

@@ -0,0 +1 @@
+export * from './user.repository.js';

package/dist-cms/packages/users/users/repository/user.repository.js

@@ -45,7 +45,7 @@ export class UmbUserRepository {
         ]);
     }
     // COLLECTION
-    async requestCollection(filter = { skip: 0, take: 100 }) {
+    async requestCollection(filter = { skip: 0, take: 100000 }) {
         //TODO: missing observable
         return this.#collectionSource.filterCollection(filter);
     }