diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts
index 595996c49c..121447158b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/components/input-member-group/input-member-group.element.ts
@@ -1,13 +1,12 @@
import type { UmbMemberGroupItemModel } from '../../repository/index.js';
import { UmbMemberPickerContext } from './input-member-group.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 { 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 { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+import { UmbModalRouteRegistrationController, UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
@customElement('umb-input-member-group')
export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElement, '') {
@@ -89,7 +88,6 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
@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 {
@@ -110,7 +108,6 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
constructor() {
super();
- // TODO: This would have to be more specific if used in a property editor context... [NL]
new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
.addAdditionalPath('member-group')
.onSetup(() => {
@@ -120,10 +117,8 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
this._editMemberGroupPath = 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 {
@@ -142,16 +137,6 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
);
}
- protected _openPicker() {
- this.#pickerContext.openPicker({
- hideTreeRoot: true,
- });
- }
-
- protected _requestRemoveItem(item: UmbMemberGroupItemModel) {
- this.#pickerContext.requestRemoveItem(item.unique!);
- }
-
protected getFormElement() {
return undefined;
}
@@ -162,29 +147,31 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
});
}
- #requestRemoveItem(item: MemberItemResponseModel) {
- this.#pickerContext.requestRemoveItem(item.id!);
+ #removeItem(item: UmbMemberGroupItemModel) {
+ 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``;
@@ -192,17 +179,11 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
#renderItem(item: UmbMemberGroupItemModel) {
if (!item.unique) return;
- // TODO: get the correct variant name
- const name = item.name;
return html`
${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')}>
`;
@@ -210,21 +191,18 @@ export class UmbInputMemberGroupElement extends UUIFormControlMixin(UmbLitElemen
#renderOpenButton(item: UmbMemberGroupItemModel) {
if (!this.showOpenButton) return;
- // TODO: get the correct variant name
- const name = item.name;
return html`
-
+ label="${this.localize.term('general_open')} ${item.name}">
+ ${this.localize.term('general_open')}
`;
}
static styles = [
css`
- #add-button {
+ #btn-add {
width: 100%;
}