diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts
index 5833ad4ba5..8f0f760e78 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/components/input-member/input-member.element.ts
@@ -1,12 +1,12 @@
import type { UmbMemberItemModel } from '../../repository/index.js';
import { UmbMemberPickerContext } from './input-member.context.js';
-import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { MemberItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
-import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbModalRouteRegistrationController, UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
@customElement('umb-input-member')
export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, '') {
@@ -88,7 +88,6 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
@property()
public set value(idsString: string) {
- // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
this.selection = splitStringToArray(idsString);
}
public get value(): string {
@@ -118,10 +117,8 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
this._editMemberPath = routeBuilder({});
});
- this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')));
- this.observe(this.#pickerContext.selectedItems, (selectedItems) => {
- this._items = selectedItems;
- });
+ this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')), '_observeSelection');
+ this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems), '_observeItems');
}
connectedCallback(): void {
@@ -140,49 +137,49 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
);
}
- protected _openPicker() {
- this.#pickerContext.openPicker({
- hideTreeRoot: true,
- });
- }
-
- protected _requestRemoveItem(item: UmbMemberItemModel) {
- this.#pickerContext.requestRemoveItem(item.unique!);
- }
-
protected getFormElement() {
return undefined;
}
+ #pickableFilter: (item: UmbMemberItemModel) => boolean = (item) => {
+ if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
+ return this.allowedContentTypeIds.includes(item.memberType.unique);
+ }
+ return true;
+ };
+
#openPicker() {
this.#pickerContext.openPicker({
filter: this.filter,
+ pickableFilter: this.#pickableFilter,
});
}
- #requestRemoveItem(item: MemberItemResponseModel) {
- this.#pickerContext.requestRemoveItem(item.id!);
+ #removeItem(item: UmbMemberItemModel) {
+ this.#pickerContext.requestRemoveItem(item.unique);
}
render() {
- return html` ${this.#renderItems()} ${this.#renderAddButton()} `;
+ return html`${this.#renderItems()} ${this.#renderAddButton()}`;
}
#renderItems() {
if (!this._items) return;
- return html`
- ${repeat(
- this._items,
- (item) => item.unique,
- (item) => this.#renderItem(item),
- )}
- `;
+ return html`
+
+ ${repeat(
+ this._items,
+ (item) => item.unique,
+ (item) => this.#renderItem(item),
+ )}
+
+ `;
}
#renderAddButton() {
if (this.max === 1 && this.selection.length >= this.max) return;
return html``;
@@ -190,18 +187,11 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
#renderItem(item: UmbMemberItemModel) {
if (!item.unique) return;
- // TODO: get the correct variant name
- const name = item.variants[0].name;
return html`
-
- ${this.#renderIsTrashed(item)}
+
${this.#renderOpenButton(item)}
- this._requestRemoveItem(item)}
- label="${this.localize.term('general_remove')} ${name}">
- ${this.localize.term('general_remove')}
-
+ this.#removeItem(item)} label=${this.localize.term('general_remove')}>
`;
@@ -209,26 +199,18 @@ export class UmbInputMemberElement extends UUIFormControlMixin(UmbLitElement, ''
#renderOpenButton(item: UmbMemberItemModel) {
if (!this.showOpenButton) return;
- // TODO: get the correct variant name
- const name = item.variants[0].name;
return html`
-
+ label="${this.localize.term('general_open')} ${item.name}">
+ ${this.localize.term('general_open')}
`;
}
- #renderIsTrashed(item: UmbMemberItemModel) {
- // TODO: Uncomment, once the Management API model support deleted members. [LK]
- // if (!item.isTrashed) return;
- // return html`Trashed`;
- }
static styles = [
css`
- #add-button {
+ #btn-add {
width: 100%;
}