Adds read-only mode to Color Picker Property Editor (#2451)

* Adds read-only mode to Color Picker Property Editor

Implemented the read-only mode of the Color Picker Property Editor UI to close https://github.com/umbraco/Umbraco-CMS/issues/17045.

* feat: forward the `readonly` attribute to the swatch* elements

* chore: rearrange properties in the element

---------

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

src/Umbraco.Web.UI.Client/src/packages/core/components/input-color/input-color.element.ts

@@ -15,6 +15,14 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '')
 		return undefined;
 	}
 
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+
 	@property({ type: Boolean })
 	showLabels = false;
 
@@ -28,7 +36,11 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '')
 
 	override render() {
 		return html`
-			<uui-color-swatches label="Color picker" value=${this.value ?? ''} @change=${this.#onChange}>
+			<uui-color-swatches
+				?readonly=${this.readonly}
+				label="Color picker"
+				value=${this.value ?? ''}
+				@change=${this.#onChange}>
 				${this.#renderColors()}
 			</uui-color-swatches>
 		`;
@@ -39,7 +51,11 @@ export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '')
 		return map(
 			this.swatches,
 			(swatch) => html`
-				<uui-color-swatch label=${swatch.label} value=${swatch.value} .showLabel=${this.showLabels}></uui-color-swatch>
+				<uui-color-swatch
+					?readonly=${this.readonly}
+					label=${swatch.label}
+					value=${swatch.value}
+					.showLabel=${this.showLabels}></uui-color-swatch>
 			`,
 		);
 	}

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