Adds read-only mode to Color Picker Property Editor

src/packages/core/components/input-color/input-color.element.ts

@@ -11,6 +11,15 @@ import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui
  */
 @customElement('umb-input-color')
 export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') {
+	/**
+	 * 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;
+
 	protected override getFormElement() {
 		return undefined;
 	}

src/packages/property-editors/color-picker/manifests.ts

@@ -11,6 +11,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 			propertyEditorSchemaAlias: 'Umbraco.ColorPicker',
 			icon: 'icon-colorpicker',
 			group: 'pickers',
+			supportsReadOnly: true,
 		},
 	},
 	schemaManifest,

src/packages/property-editors/color-picker/property-editor-ui-color-picker.element.ts

@@ -25,6 +25,15 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 	}
 	#value?: UmbSwatchDetails | undefined;
 
+	/**
+	 * 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;
+
 	@state()
 	private _showLabels = this.#defaultShowLabels;
 
@@ -59,7 +68,8 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 			value=${this.value?.value ?? ''}
 			.swatches=${this._swatches}
 			?showLabels=${this._showLabels}
-			@change=${this.#onChange}></umb-input-color>`;
+			@change=${this.#onChange}
+			?readonly=${this.readonly}></umb-input-color>`;
 	}
 }