From 539f129dcc50ccf7ab0f68ad37c2cb3c008664f2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:54:30 +0200 Subject: [PATCH 1/7] Update manifests.ts --- .../members/member/property-editor/member-picker/manifests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/manifests.ts index da67731ba6..1f8c7cfbcc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/manifests.ts @@ -12,6 +12,7 @@ export const manifests: Array = [ propertyEditorSchemaAlias: 'Umbraco.MemberPicker', icon: 'icon-user', group: 'people', + supportsReadOnly: true, }, }, memberPickerSchemaManifest, From 8c544aa228cec919d2a247ab4f268ba04f962865 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:54:47 +0200 Subject: [PATCH 2/7] pass readonly to input --- .../property-editor-ui-member-picker.element.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts index a1dc8bd3e6..0ca5e50965 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/property-editor/member-picker/property-editor-ui-member-picker.element.ts +++ b/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``; + return html``; } } From 388411b3e5a2c6464784b10f61ea61bdbaa4577c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:55:13 +0200 Subject: [PATCH 3/7] disable sorter --- .../input-member/input-member.element.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) 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 65a9d3eb64..5366938139 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 @@ -102,6 +102,27 @@ export class UmbInputMemberElement extends UmbFormControlMixin 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 = ''; From cacc22b0d03b9a77948d0f0962c32f75208557e7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:55:24 +0200 Subject: [PATCH 4/7] disable add button --- .../member/components/input-member/input-member.element.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 5366938139..d73bfea2cc 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 @@ -201,7 +201,8 @@ export class UmbInputMemberElement extends UmbFormControlMixin + label=${this.localize.term('general_choose')} + ?disabled=${this.readonly}> `; } From a944749cc7e73f9d13275f584bbb86993cfd7f04 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:55:45 +0200 Subject: [PATCH 5/7] remove remove button --- .../components/input-member/input-member.element.ts | 8 ++++++++ 1 file changed, 8 insertions(+) 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 d73bfea2cc..7e700ce362 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 @@ -213,6 +213,7 @@ export class UmbInputMemberElement extends UmbFormControlMixin ${this.#renderOpenButton(item)} this.#onRemove(item)} label=${this.localize.term('general_remove')}> + ${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)} `; @@ -229,6 +230,13 @@ export class UmbInputMemberElement extends UmbFormControlMixin this.#onRemove(item)} label=${this.localize.term('general_remove')}> + `; + } + static override styles = [ css` #btn-add { From 06efea061b7fcf448a0d3baca663e8a0903b1df8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:56:04 +0200 Subject: [PATCH 6/7] add readonly attr to ref --- .../member/components/input-member/input-member.element.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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 7e700ce362..7bca233fbb 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 @@ -209,10 +209,8 @@ export class UmbInputMemberElement extends UmbFormControlMixin + - ${this.#renderOpenButton(item)} - this.#onRemove(item)} label=${this.localize.term('general_remove')}> ${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)} From c8052388584d5a7cd02647df8d1955d02dadadb1 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 21 Aug 2024 20:58:48 +0200 Subject: [PATCH 7/7] use member ref element --- .../member/components/input-member/input-member.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 7bca233fbb..dba26465bc 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 @@ -209,11 +209,11 @@ export class UmbInputMemberElement extends UmbFormControlMixin + ${this.#renderOpenButton(item)} ${this.#renderRemoveButton(item)} - + `; }