Feature: Readonly mode for Member Picker Property Editor UI

src/packages/members/member/components/input-member/input-member.element.ts

@@ -102,6 +102,27 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
  @property({ type: Object, attribute: false })
  public filter: (member: UmbMemberItemModel) => boolean = () => true;
 
+ /**
+ * 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
+ */
+ @property({ type: Boolean, reflect: true })
+ public get readonly() {
+ return this.#readonly;
+ }
+ public set readonly(value) {
+ this.#readonly = value;
+
+ if (this.#readonly) {
+ this.#sorter.disable();
+ } else {
+ this.#sorter.enable();
+ }
+ }
+ #readonly = false;
+
  @state()
  private _editMemberPath = '';
 
@@ -180,28 +201,22 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
  id="btn-add"
  look="placeholder"
  @click=${this.#openPicker}
- label=${this.localize.term('general_choose')}></uui-button>
+ label=${this.localize.term('general_choose')}
+ ?disabled=${this.readonly}></uui-button>
  `;
  }
 
  #renderItem(item: UmbMemberItemModel) {
  if (!item.unique) return nothing;
  return html`
- <uui-ref-node name=${item.name} id=${item.unique}>
- ${this.#renderIcon(item)}
+ <uui-ref-node-member name=${item.name} id=${item.unique} ?readonly=${this.readonly}>
  <uui-action-bar slot="actions">
- ${this.#renderOpenButton(item)}
- <uui-button @click=${() => this.#onRemove(item)} label=${this.localize.term('general_remove')}></uui-button>
+ ${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)}
  </uui-action-bar>
- </uui-ref-node>
+ </uui-ref-node-member>
  `;
  }
 
- #renderIcon(item: UmbMemberItemModel) {
- if (!item.memberType.icon) return;
- return html`<umb-icon slot="icon" name=${item.memberType.icon}></umb-icon>`;
- }
-
  #renderOpenButton(item: UmbMemberItemModel) {
  if (!this.showOpenButton) return nothing;
  return html`
@@ -213,6 +228,13 @@ export class UmbInputMemberElement extends UmbFormControlMixin<string | undefine
  `;
  }
 
+ #renderRemoveButton(item: UmbMemberItemModel) {
+ if (this.readonly) return nothing;
+ return html`
+ <uui-button @click=${() => this.#onRemove(item)} label=${this.localize.term('general_remove')}></uui-button>
+ `;
+ }
+
  static override styles = [
  css`
  #btn-add {

src/packages/members/member/property-editor/member-picker/manifests.ts

@@ -12,6 +12,7 @@ export const manifests: Array<ManifestTypes> = [
  propertyEditorSchemaAlias: 'Umbraco.MemberPicker',
  icon: 'icon-user',
  group: 'people',
+ supportsReadOnly: true,
  },
  },
  memberPickerSchemaManifest,

src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts

@@ -16,13 +16,27 @@ export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement implem
  @property({ attribute: false })
  public config?: UmbPropertyEditorConfigCollection;
 
+ /**
+ * 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
+ */
+ @property({ type: Boolean, reflect: true })
+ readonly = false;
+
  #onChange(event: CustomEvent & { target: UmbInputMemberElement }) {
  this.value = event.target.value;
  this.dispatchEvent(new UmbPropertyValueChangeEvent());
  }
 
  override render() {
- return html`<umb-input-member min="0" max="1" .value=${this.value} @change=${this.#onChange}></umb-input-member>`;
+ return html`<umb-input-member
+ min="0"
+ max="1"
+ .value=${this.value}
+ @change=${this.#onChange}
+ ?readonly=${this.readonly}></umb-input-member>`;
  }
 }