Merge pull request #2228 from umbraco/v14/feature/readonly-member-picker

Feature: Readonly mode for Member Picker Property Editor UI

src/Umbraco.Web.UI.Client/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/Umbraco.Web.UI.Client/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/Umbraco.Web.UI.Client/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>`;
 	}
 }