From 849741d358e779db536fd0d0058d29e5a02edda3 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 20 Aug 2024 10:05:40 +0200
Subject: [PATCH 1/4] readonly property editor ui

---
 .../property-editor-ui-dropdown.element.ts         | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts
index f40a833119..ca47be30e2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts
@@ -21,6 +21,15 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
 		return this.#selection;
 	}
 
+	/**
+	 * 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;
+
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 
@@ -80,7 +89,10 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
 
 	#renderDropdownSingle() {
 		return html`
-			<umb-input-dropdown-list .options=${this._options} @change=${this.#onChange}></umb-input-dropdown-list>
+			<umb-input-dropdown-list
+				.options=${this._options}
+				@change=${this.#onChange}
+				?readonly=${this.readonly}></umb-input-dropdown-list>
 		`;
 	}
 

From 8b3d91757e609084c69247414e3b012215eba246 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 20 Aug 2024 10:05:53 +0200
Subject: [PATCH 2/4] readonly single select input

---
 .../input-dropdown/input-dropdown-list.element.ts    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts
index e58983e34e..d9867b0796 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-dropdown/input-dropdown-list.element.ts
@@ -16,6 +16,15 @@ export class UmbInputDropdownListElement extends UUIFormControlMixin(UmbLitEleme
 	@property({ type: Boolean })
 	public multiple?: boolean;
 
+	/**
+	 * 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;
+
 	@query('uui-select')
 	private selectEle!: HTMLInputElement;
 
@@ -34,7 +43,8 @@ export class UmbInputDropdownListElement extends UUIFormControlMixin(UmbLitEleme
 			label=${this.localize.term('formProviderFieldTypes_dropdownName')}
 			.placeholder=${this.placeholder ?? ''}
 			.options=${this.options ?? []}
-			@change=${this.#onChange}></uui-select>`;
+			@change=${this.#onChange}
+			?readonly=${this.readonly}></uui-select>`;
 	}
 
 	static override styles = [

From 68a78c79e9dbc9ce9e83f632e606a83d4b7da95e Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 20 Aug 2024 10:16:19 +0200
Subject: [PATCH 3/4] add readonly mode to multi select

---
 .../dropdown/property-editor-ui-dropdown.element.ts           | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts
index ca47be30e2..04099c6889 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/property-editor-ui-dropdown.element.ts
@@ -77,6 +77,10 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
 	}
 
 	#renderDropdownMultiple() {
+		if (this.readonly) {
+			return html`<div>${this.value?.join(', ')}</div>`;
+		}
+
 		return html`
 			<select id="native" multiple @change=${this.#onChangeMulitple}>
 				${map(

From 4867c95bf250c940b706746438e60fdede7fe5e9 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 20 Aug 2024 10:16:57 +0200
Subject: [PATCH 4/4] update manifest

---
 .../src/packages/property-editors/dropdown/manifests.ts          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/manifests.ts
index e0be2a8a08..0c73c72290 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/dropdown/manifests.ts
@@ -12,6 +12,7 @@ export const manifests: Array<ManifestTypes> = [
 			propertyEditorSchemaAlias: 'Umbraco.DropDown.Flexible',
 			icon: 'icon-list',
 			group: 'lists',
+			supportsReadOnly: true,
 		},
 	},
 	schemaManifest,