@umbraco-cms/backoffice 15.2.2 → 15.3.0-rc

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

@@ -42,6 +42,7 @@ let UmbMemberTableCollectionViewElement = class UmbMemberTableCollectionViewElem
             {
                 name: '',
                 alias: 'entityActions',
+                align: 'right',
             },
         ];
         this._tableItems = [];

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

@@ -1,8 +1,18 @@
-import type { UmbMemberItemModel } from '../../repository/index.js';
+import type { UmbMemberItemModel } from '../../item/types.js';
+import { type UmbMemberPickerModalData, type UmbMemberPickerModalValue } from '../member-picker-modal/member-picker-modal.token.js';
 import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
 import type { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
-export declare class UmbMemberPickerInputContext extends UmbPickerInputContext<UmbMemberItemModel> {
+import type { UmbMemberTypeEntityType } from '../../../member-type/index.js';
+interface UmbMemberPickerInputContextOpenArgs {
+    allowedContentTypes?: Array<{
+        unique: string;
+        entityType: UmbMemberTypeEntityType;
+    }>;
+}
+export declare class UmbMemberPickerInputContext extends UmbPickerInputContext<UmbMemberItemModel, UmbMemberItemModel, UmbMemberPickerModalData, UmbMemberPickerModalValue> {
+    #private;
     constructor(host: UmbControllerHostElement);
+    openPicker(pickerData?: Partial<UmbMemberPickerModalData>, args?: UmbMemberPickerInputContextOpenArgs): Promise<void>;
 }
 /** @deprecated Use `UmbMemberPickerInputContext` instead. This method will be removed in Umbraco 15. */
 export { UmbMemberPickerInputContext as UmbMemberPickerContext };

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

@@ -1,10 +1,38 @@
-import { UMB_MEMBER_PICKER_MODAL } from '../member-picker-modal/member-picker-modal.token.js';
-import { UMB_MEMBER_ITEM_REPOSITORY_ALIAS } from '../../constants.js';
+import { UMB_MEMBER_PICKER_MODAL, } from '../member-picker-modal/member-picker-modal.token.js';
+import { UMB_MEMBER_ITEM_REPOSITORY_ALIAS, UMB_MEMBER_SEARCH_PROVIDER_ALIAS } from '../../constants.js';
 import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
 export class UmbMemberPickerInputContext extends UmbPickerInputContext {
     constructor(host) {
         super(host, UMB_MEMBER_ITEM_REPOSITORY_ALIAS, UMB_MEMBER_PICKER_MODAL);
     }
+    async openPicker(pickerData, args) {
+        const combinedPickerData = {
+            ...pickerData,
+        };
+        // transform allowedContentTypes to a pickable filter
+        combinedPickerData.pickableFilter = (item) => this.#pickableFilter(item, args?.allowedContentTypes);
+        // set default search data
+        if (!pickerData?.search) {
+            combinedPickerData.search = {
+                providerAlias: UMB_MEMBER_SEARCH_PROVIDER_ALIAS,
+                ...pickerData?.search,
+            };
+        }
+        // pass allowedContentTypes to the search request args
+        combinedPickerData.search.queryParams = {
+            allowedContentTypes: args?.allowedContentTypes,
+            ...pickerData?.search?.queryParams,
+        };
+        super.openPicker(combinedPickerData);
+    }
+    #pickableFilter = (item, allowedContentTypes) => {
+        if (allowedContentTypes && allowedContentTypes.length > 0) {
+            return allowedContentTypes
+                .map((contentTypeReference) => contentTypeReference.unique)
+                .includes(item.memberType.unique);
+        }
+        return true;
+    };
 }
 /** @deprecated Use `UmbMemberPickerInputContext` instead. This method will be removed in Umbraco 15. */
 export { UmbMemberPickerInputContext as UmbMemberPickerContext };

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

@@ -1,6 +1,5 @@
-import type { UmbMemberItemModel } from '../../repository/index.js';
+import type { UmbMemberItemModel } from '../../item/types.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-declare const elementName = "umb-input-member";
 declare const UmbInputMemberElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbInputMemberElement extends UmbInputMemberElement_base {
     #private;
@@ -36,7 +35,6 @@ export declare class UmbInputMemberElement extends UmbInputMemberElement_base {
     maxMessage: string;
     set selection(ids: Array<string>);
     get selection(): Array<string>;
-    showOpenButton?: boolean;
     allowedContentTypeIds?: string[] | undefined;
     set value(selectionString: string | undefined);
     get value(): string | undefined;
@@ -49,7 +47,6 @@ export declare class UmbInputMemberElement extends UmbInputMemberElement_base {
      */
     get readonly(): boolean;
     set readonly(value: boolean);
-    private _editMemberPath;
     private _items?;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
@@ -58,6 +55,6 @@ export declare class UmbInputMemberElement extends UmbInputMemberElement_base {
 export { UmbInputMemberElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbInputMemberElement;
+        'umb-input-member': UmbInputMemberElement;
     }
 }

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

@@ -8,12 +8,10 @@ import { UmbMemberPickerInputContext } from './input-member.context.js';
 import { css, customElement, html, nothing, property, repeat, state } 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 { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UMB_WORKSPACE_MODAL } from '../../../../core/workspace/index.js';
-import { UmbModalRouteRegistrationController } from '../../../../core/router/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
-import { UmbFormControlMixin } from '../../../../core/validation/index.js';
-const elementName = 'umb-input-member';
+import { UMB_MEMBER_TYPE_ENTITY_TYPE } from '../../../member-type/index.js';
 let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMixin(UmbLitElement) {
     #sorter;
     /**
@@ -83,7 +81,7 @@ let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMi
                 return modelEntry;
             },
             identifier: 'Umb.SorterIdentifier.InputMember',
-            itemSelector: 'uui-ref-node',
+            itemSelector: 'umb-entity-item-ref',
             containerSelector: 'uui-ref-list',
             onChange: ({ model }) => {
                 this.selection = model;
@@ -106,32 +104,20 @@ let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMi
         this.maxMessage = 'This field exceeds the allowed amount of items';
         this.filter = () => true;
         this.#readonly = false;
-        this._editMemberPath = '';
         this.#pickerContext = new UmbMemberPickerInputContext(this);
-        this.#pickableFilter = (item) => {
-            if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
-                return this.allowedContentTypeIds.includes(item.memberType.unique);
-            }
-            return true;
-        };
-        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
-            .addAdditionalPath('member')
-            .onSetup(() => {
-            return { data: { entityType: 'member', preset: {} } };
-        })
-            .observeRouteBuilder((routeBuilder) => {
-            this._editMemberPath = routeBuilder({});
-        });
         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.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
         this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observeItems');
     }
-    #pickableFilter;
     #openPicker() {
         this.#pickerContext.openPicker({
             filter: this.filter,
-            pickableFilter: this.#pickableFilter,
+        }, {
+            allowedContentTypes: this.allowedContentTypeIds?.map((id) => ({
+                unique: id,
+                entityType: UMB_MEMBER_TYPE_ENTITY_TYPE,
+            })),
         });
     }
     #onRemove(item) {
@@ -149,6 +135,15 @@ let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMi
 			</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;
@@ -166,28 +161,6 @@ let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMi
 			`;
         }
     }
-    #renderItem(item) {
-        if (!item.unique)
-            return nothing;
-        return html `
-			<uui-ref-node-member name=${item.name} id=${item.unique} ?readonly=${this.readonly}>
-				<uui-action-bar slot="actions">
-					${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)}
-				</uui-action-bar>
-			</uui-ref-node-member>
-		`;
-    }
-    #renderOpenButton(item) {
-        if (!this.showOpenButton)
-            return nothing;
-        return html `
-			<uui-button
-				href="${this._editMemberPath}edit/${item.unique}"
-				label="${this.localize.term('general_open')} ${item.name}">
-				${this.localize.term('general_open')}
-			</uui-button>
-		`;
-    }
     #renderRemoveButton(item) {
         if (this.readonly)
             return nothing;
@@ -201,7 +174,7 @@ let UmbInputMemberElement = class UmbInputMemberElement extends UmbFormControlMi
 				display: block;
 			}
 
-			uui-ref-node[drag-placeholder] {
+			umb-entity-item-ref[drag-placeholder] {
 				opacity: 0.2;
 			}
 		`,
@@ -219,9 +192,6 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'max-message' })
 ], UmbInputMemberElement.prototype, "maxMessage", void 0);
-__decorate([
-    property({ type: Boolean })
-], UmbInputMemberElement.prototype, "showOpenButton", void 0);
 __decorate([
     property({ type: Array })
 ], UmbInputMemberElement.prototype, "allowedContentTypeIds", void 0);
@@ -234,14 +204,11 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbInputMemberElement.prototype, "readonly", null);
-__decorate([
-    state()
-], UmbInputMemberElement.prototype, "_editMemberPath", void 0);
 __decorate([
     state()
 ], UmbInputMemberElement.prototype, "_items", void 0);
 UmbInputMemberElement = __decorate([
-    customElement(elementName)
+    customElement('umb-input-member')
 ], UmbInputMemberElement);
 export { UmbInputMemberElement };
 export { UmbInputMemberElement as element };

package/dist-cms/packages/members/member/components/member-picker-modal/member-picker-modal.element.d.ts

@@ -5,6 +5,7 @@ export declare class UmbMemberPickerModalElement extends UmbModalBaseElement<Umb
     #private;
     private _members;
     private _searchQuery?;
+    private _selectableFilter;
     constructor();
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
     firstUpdated(): Promise<void>;

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

@@ -15,6 +15,7 @@ let UmbMemberPickerModalElement = class UmbMemberPickerModalElement extends UmbM
     constructor() {
         super();
         this._members = [];
+        this._selectableFilter = () => true;
         this.#collectionRepository = new UmbMemberCollectionRepository(this);
         this.#pickerContext = new UmbCollectionItemPickerContext(this);
         this.observe(this.#pickerContext.selection.selection, (selection) => {
@@ -28,8 +29,21 @@ let UmbMemberPickerModalElement = class UmbMemberPickerModalElement extends UmbM
     async updated(_changedProperties) {
         super.updated(_changedProperties);
         if (_changedProperties.has('data')) {
-            this.#pickerContext.search.updateConfig({ ...this.data?.search });
             this.#pickerContext.selection.setMultiple(this.data?.multiple ?? false);
+            if (this.data?.pickableFilter) {
+                this._selectableFilter = this.data?.pickableFilter;
+            }
+            if (this.data?.search) {
+                this.#pickerContext.search.updateConfig({
+                    ...this.data.search,
+                });
+                const searchQueryParams = this.data.search.queryParams;
+                if (searchQueryParams) {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    //@ts-ignore - TODO wire up types
+                    this.#pickerContext.search.setQuery(searchQueryParams);
+                }
+            }
         }
         if (_changedProperties.has('value')) {
             this.#pickerContext.selection.setSelection(this.value?.selection);
@@ -68,14 +82,18 @@ let UmbMemberPickerModalElement = class UmbMemberPickerModalElement extends UmbM
 		`;
     }
     #renderMemberItem(item) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - TODO: MemberDetailModel does not have a name. It should have so we ignore this for now.
+        const selectable = this._selectableFilter(item);
         return html `
 			<uui-menu-item
 				label=${item.variants[0].name ?? ''}
-				selectable
+				?selectable=${selectable}
+				?disabled=${!selectable}
 				@selected=${() => this.#pickerContext.selection.select(item.unique)}
 				@deselected=${() => this.#pickerContext.selection.deselect(item.unique)}
 				?selected=${this.#pickerContext.selection.isSelected(item.unique)}>
-				<uui-icon slot="icon" name="icon-user"></uui-icon>
+				<umb-icon slot="icon" name=${item.memberType.icon}></umb-icon>
 			</uui-menu-item>
 		`;
     }
@@ -101,6 +119,9 @@ __decorate([
 __decorate([
     state()
 ], UmbMemberPickerModalElement.prototype, "_searchQuery", void 0);
+__decorate([
+    state()
+], UmbMemberPickerModalElement.prototype, "_selectableFilter", void 0);
 UmbMemberPickerModalElement = __decorate([
     customElement('umb-member-picker-modal')
 ], UmbMemberPickerModalElement);

package/dist-cms/packages/members/member/components/member-picker-modal/member-picker-modal.token.d.ts

@@ -1,12 +1,6 @@
-import type { UmbMemberItemModel } from '../../repository/index.js';
-import type { UmbPickerModalSearchConfig } from '../../../../core/modal/index.js';
+import type { UmbMemberItemModel } from '../../item/types.js';
+import type { UmbPickerModalData, UmbPickerModalValue } from '../../../../core/modal/index.js';
 import { UmbModalToken } from '../../../../core/modal/index.js';
-export interface UmbMemberPickerModalData {
-    multiple?: boolean;
-    filter?: (member: UmbMemberItemModel) => boolean;
-    search?: UmbPickerModalSearchConfig;
-}
-export interface UmbMemberPickerModalValue {
-    selection: Array<string | null>;
-}
-export declare const UMB_MEMBER_PICKER_MODAL: UmbModalToken<UmbMemberPickerModalData, UmbMemberPickerModalValue>;
+export type UmbMemberPickerModalData = UmbPickerModalData<UmbMemberItemModel>;
+export type UmbMemberPickerModalValue = UmbPickerModalValue;
+export declare const UMB_MEMBER_PICKER_MODAL: UmbModalToken<UmbMemberPickerModalData, UmbPickerModalValue>;

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

@@ -2,6 +2,7 @@ export { UMB_MEMBER_ENTITY_TYPE, UMB_MEMBER_ROOT_ENTITY_TYPE } from './entity.js
 export { UMB_MEMBER_VARIANT_CONTEXT } from './property-dataset-context/member-property-dataset.context-token.js';
 export * from './collection/constants.js';
 export * from './entity-actions/constants.js';
+export * from './item/constants.js';
 export * from './repository/constants.js';
 export * from './search/constants.js';
 export * from './workspace/constants.js';

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

@@ -2,6 +2,7 @@ export { UMB_MEMBER_ENTITY_TYPE, UMB_MEMBER_ROOT_ENTITY_TYPE } from './entity.js
 export { UMB_MEMBER_VARIANT_CONTEXT } from './property-dataset-context/member-property-dataset.context-token.js';
 export * from './collection/constants.js';
 export * from './entity-actions/constants.js';
+export * from './item/constants.js';
 export * from './repository/constants.js';
 export * from './search/constants.js';
 export * from './workspace/constants.js';

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

@@ -1,4 +1,4 @@
-import { UMB_MEMBER_ITEM_REPOSITORY_ALIAS } from '../repository/constants.js';
+import { UMB_MEMBER_ITEM_REPOSITORY_ALIAS } from '../item/constants.js';
 import { UMB_MEMBER_ENTITY_TYPE } from '../entity.js';
 import { UMB_MEMBER_DETAIL_REPOSITORY_ALIAS } from '../repository/detail/manifests.js';
 import { manifests as createManifests } from './create/manifests.js';

package/dist-cms/packages/members/member/index.d.ts

@@ -2,6 +2,7 @@ import './components/index.js';
 export * from './collection/index.js';
 export * from './components/index.js';
 export * from './constants.js';
+export * from './item/index.js';
 export * from './paths.js';
 export * from './repository/index.js';
 export type * from './types.js';

package/dist-cms/packages/members/member/index.js

@@ -2,5 +2,6 @@ import './components/index.js';
 export * from './collection/index.js';
 export * from './components/index.js';
 export * from './constants.js';
+export * from './item/index.js';
 export * from './paths.js';
 export * from './repository/index.js';

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

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

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

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

package/dist-cms/packages/members/member/item/index.d.ts

@@ -0,0 +1,2 @@
+export { UmbMemberItemRepository } from './repository/index.js';
+export type * from './types.js';

package/dist-cms/packages/members/member/item/index.js

@@ -0,0 +1 @@
+export { UmbMemberItemRepository } from './repository/index.js';

package/dist-cms/packages/members/member/item/manifests.d.ts

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

package/dist-cms/packages/members/member/item/manifests.js

@@ -0,0 +1,12 @@
+import { UMB_MEMBER_ENTITY_TYPE } from '../entity.js';
+import { manifests as repositoryManifests } from './repository/manifests.js';
+export const manifests = [
+    {
+        type: 'entityItemRef',
+        alias: 'Umb.EntityItemRef.Member',
+        name: 'Member Entity Item Reference',
+        element: () => import('./member-item-ref.element.js'),
+        forEntityTypes: [UMB_MEMBER_ENTITY_TYPE],
+    },
+    ...repositoryManifests,
+];

package/dist-cms/packages/members/member/item/member-item-ref.element.d.ts

@@ -0,0 +1,20 @@
+import type { UmbMemberItemModel } from './repository/types.js';
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
+export declare class UmbMemberItemRefElement extends UmbLitElement {
+    #private;
+    get item(): UmbMemberItemModel | undefined;
+    set item(value: UmbMemberItemModel | undefined);
+    readonly: boolean;
+    standalone: boolean;
+    _editPath: string;
+    _userHasSectionAccess: boolean;
+    constructor();
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export { UmbMemberItemRefElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-member-item-ref': UmbMemberItemRefElement;
+    }
+}

package/dist-cms/packages/members/member/item/member-item-ref.element.js

@@ -0,0 +1,93 @@
+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_MEMBER_ENTITY_TYPE } from '../entity.js';
+import { UMB_MEMBER_MANAGEMENT_SECTION_ALIAS } from '../../section/constants.js';
+import { UMB_EDIT_MEMBER_WORKSPACE_PATH_PATTERN } from '../paths.js';
+import { createExtensionApiByAlias } from '../../../core/extension-registry/index.js';
+import { customElement, html, ifDefined, nothing, property, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../core/lit-element/index.js';
+import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '../../../core/section/index.js';
+import { UMB_WORKSPACE_MODAL } from '../../../core/workspace/index.js';
+let UmbMemberItemRefElement = class UmbMemberItemRefElement extends UmbLitElement {
+    #item;
+    get item() {
+        return this.#item;
+    }
+    set item(value) {
+        this.#item = value;
+    }
+    constructor() {
+        super();
+        this.readonly = false;
+        this.standalone = false;
+        this._editPath = '';
+        this._userHasSectionAccess = false;
+        createExtensionApiByAlias(this, UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS, [
+            {
+                config: {
+                    match: UMB_MEMBER_MANAGEMENT_SECTION_ALIAS,
+                },
+                onChange: (permitted) => {
+                    this._userHasSectionAccess = permitted;
+                },
+            },
+        ]);
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .onSetup(() => {
+            return { data: { entityType: UMB_MEMBER_ENTITY_TYPE, preset: {} } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._editPath = routeBuilder({});
+        });
+    }
+    #getHref(item) {
+        if (!this._editPath)
+            return;
+        const path = UMB_EDIT_MEMBER_WORKSPACE_PATH_PATTERN.generateLocal({ unique: item.unique });
+        return `${this._editPath}/${path}`;
+    }
+    render() {
+        if (!this.item)
+            return nothing;
+        return html `
+			<uui-ref-node-member
+				name=${this.item.name}
+				href=${ifDefined(this.#getHref(this.item))}
+				?readonly=${this.readonly || !this._userHasSectionAccess}
+				?standalone=${this.standalone}>
+				<slot name="actions" slot="actions"></slot>
+				${this.#renderIcon(this.item)}
+			</uui-ref-node-member>
+		`;
+    }
+    #renderIcon(item) {
+        if (!item.memberType.icon)
+            return;
+        return html `<umb-icon slot="icon" name=${item.memberType.icon}></umb-icon>`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], UmbMemberItemRefElement.prototype, "item", null);
+__decorate([
+    property({ type: Boolean })
+], UmbMemberItemRefElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbMemberItemRefElement.prototype, "standalone", void 0);
+__decorate([
+    state()
+], UmbMemberItemRefElement.prototype, "_editPath", void 0);
+__decorate([
+    state()
+], UmbMemberItemRefElement.prototype, "_userHasSectionAccess", void 0);
+UmbMemberItemRefElement = __decorate([
+    customElement('umb-member-item-ref')
+], UmbMemberItemRefElement);
+export { UmbMemberItemRefElement };
+export { UmbMemberItemRefElement as element };

package/dist-cms/packages/members/member/item/repository/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/members/member/item/types.d.ts

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

package/dist-cms/packages/members/member/item/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/members/member/manifests.js

@@ -1,5 +1,6 @@
 import { manifests as collectionManifests } from './collection/manifests.js';
 import { manifests as entityActionManifests } from './entity-actions/manifests.js';
+import { manifests as itemManifests } from './item/manifests.js';
 import { manifests as memberPickerModalManifests } from './components/member-picker-modal/manifests.js';
 import { manifests as menuItemManifests } from './menu-item/manifests.js';
 import { manifests as pickerManifests } from './picker/manifests.js';
@@ -10,6 +11,7 @@ import { manifests as workspaceManifests } from './workspace/manifests.js';
 export const manifests = [
     ...collectionManifests,
     ...entityActionManifests,
+    ...itemManifests,
     ...memberPickerModalManifests,
     ...menuItemManifests,
     ...pickerManifests,

package/dist-cms/packages/members/member/paths.d.ts

@@ -6,3 +6,8 @@ export declare const UMB_CREATE_MEMBER_WORKSPACE_PATH_PATTERN: UmbPathPattern<{
 }, {
     memberTypeUnique: string;
 }>;
+export declare const UMB_EDIT_MEMBER_WORKSPACE_PATH_PATTERN: UmbPathPattern<{
+    unique: string;
+}, {
+    unique: string;
+}>;

package/dist-cms/packages/members/member/paths.js

@@ -11,3 +11,4 @@ export const UMB_MEMBER_ROOT_WORKSPACE_PATH = UMB_WORKSPACE_PATH_PATTERN.generat
     entityType: UMB_MEMBER_ROOT_ENTITY_TYPE,
 });
 export const UMB_CREATE_MEMBER_WORKSPACE_PATH_PATTERN = new UmbPathPattern('create/:memberTypeUnique', UMB_MEMBER_WORKSPACE_PATH);
+export const UMB_EDIT_MEMBER_WORKSPACE_PATH_PATTERN = new UmbPathPattern('edit/:unique');

package/dist-cms/packages/members/member/picker/manifests.js

@@ -5,6 +5,7 @@ export const manifests = [
         kind: 'default',
         alias: 'Umb.PickerSearchResultItem.Member',
         name: 'Member Picker Search Result Item',
+        element: () => import('./member-picker-search-result-item.element.js'),
         forEntityTypes: [UMB_MEMBER_ENTITY_TYPE],
     },
 ];

package/dist-cms/packages/members/member/picker/member-picker-search-result-item.element.d.ts

@@ -0,0 +1,12 @@
+import type { UmbMemberSearchItemModel } from '../search/types.js';
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbPickerSearchResultItemElementBase } from '../../../core/picker/index.js';
+export declare class UmbMemberPickerSearchResultItemElement extends UmbPickerSearchResultItemElementBase<UmbMemberSearchItemModel> {
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export { UmbMemberPickerSearchResultItemElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-member-picker-search-result-item': UmbMemberPickerSearchResultItemElement;
+    }
+}

package/dist-cms/packages/members/member/picker/member-picker-search-result-item.element.js

@@ -0,0 +1,32 @@
+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 { customElement, html, nothing } from '../../../../external/lit/index.js';
+import { UmbPickerSearchResultItemElementBase } from '../../../core/picker/index.js';
+let UmbMemberPickerSearchResultItemElement = class UmbMemberPickerSearchResultItemElement extends UmbPickerSearchResultItemElementBase {
+    render() {
+        if (!this.item)
+            return nothing;
+        const item = this.item;
+        return html `
+			<umb-ref-item
+				name=${item.name}
+				id=${item.unique}
+				icon=${item.memberType.icon ?? 'icon-user'}
+				select-only
+				selectable
+				?selected=${this._isSelected}
+				@deselected=${() => this.pickerContext?.selection.deselect(item.unique)}
+				@selected=${() => this.pickerContext?.selection.select(item.unique)}>
+			</umb-ref-item>
+		`;
+    }
+};
+UmbMemberPickerSearchResultItemElement = __decorate([
+    customElement('umb-member-picker-search-result-item')
+], UmbMemberPickerSearchResultItemElement);
+export { UmbMemberPickerSearchResultItemElement };
+export { UmbMemberPickerSearchResultItemElement as element };

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

@@ -1,2 +1 @@
 export * from './detail/constants.js';
-export * from './item/constants.js';

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

@@ -1,2 +1 @@
 export * from './detail/constants.js';
-export * from './item/constants.js';

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

@@ -32,6 +32,7 @@ export class UmbMemberServerDataSource {
             username: '',
             memberType: {
                 unique: '',
+                icon: '',
             },
             isApproved: false,
             isLockedOut: false,
@@ -77,6 +78,7 @@ export class UmbMemberServerDataSource {
             username: data.username,
             memberType: {
                 unique: data.memberType.id,
+                icon: data.memberType.icon,
             },
             isApproved: data.isApproved,
             isLockedOut: data.isLockedOut,