Merge pull request #1606 from umbraco/bugfix/color-picker-value-hash-prefix

Bugfix: Color Picker prefix hex values with a hash

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

@@ -1,7 +1,7 @@
 import { html, customElement, property, map, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
 import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui';
 
@@ -11,25 +11,24 @@ import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui
  */
 @customElement('umb-input-color')
 export class UmbInputColorElement extends UUIFormControlMixin(UmbLitElement, '') {
-	@property({ type: Boolean })
-	showLabels = false;
-
-	@property({ type: Array })
-	swatches?: UmbSwatchDetails[];
-
 	protected getFormElement() {
 		return undefined;
 	}
 
+	@property({ type: Boolean })
+	showLabels = false;
+
+	@property({ type: Array })
+	swatches?: Array<UmbSwatchDetails>;
+
 	#onChange(event: UUIColorSwatchesEvent) {
-		event.stopPropagation();
 		this.value = event.target.value;
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	render() {
 		return html`
-			<uui-color-swatches label="Color picker" value="#${this.value ?? ''}" @change=${this.#onChange}>
+			<uui-color-swatches label="Color picker" value=${this.value ?? ''} @change=${this.#onChange}>
 				${this.#renderColors()}
 			</uui-color-swatches>
 		`;
@@ -40,10 +39,7 @@ 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 label=${swatch.label} value=${swatch.value} .showLabel=${this.showLabels}></uui-color-swatch>
 			`,
 		);
 	}

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts

@@ -14,20 +14,38 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 	#defaultShowLabels = false;
 
 	@property({ type: Object })
-	value?: UmbSwatchDetails;
+	public set value(value: UmbSwatchDetails | undefined) {
+		if (!value) return;
+		this.#value = this.#ensureHashPrefix(value);
+	}
+	public get value(): UmbSwatchDetails | undefined {
+		return this.#value;
+	}
+	#value?: UmbSwatchDetails | undefined;
 
 	@state()
 	private _showLabels = this.#defaultShowLabels;
 
 	@state()
-	private _swatches: UmbSwatchDetails[] = [];
+	private _swatches: Array<UmbSwatchDetails> = [];
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels;
-		this._swatches = config?.getValueByAlias('items') ?? [];
+		if (!config) return;
+
+		this._showLabels = config?.getValueByAlias<boolean>('useLabel') ?? this.#defaultShowLabels;
+
+		const swatches = config?.getValueByAlias<Array<UmbSwatchDetails>>('items') ?? [];
+		this._swatches = swatches.map((swatch) => this.#ensureHashPrefix(swatch));
 	}
 
-	private _onChange(event: UUIColorSwatchesEvent) {
+	#ensureHashPrefix(swatch: UmbSwatchDetails): UmbSwatchDetails {
+		return {
+			label: swatch.label,
+			value: swatch.value.startsWith('#') ? swatch.value : `#${swatch.value}`,
+		};
+	}
+
+	#onChange(event: UUIColorSwatchesEvent) {
 		const value = event.target.value;
 		this.value = this._swatches.find((swatch) => swatch.value === value);
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
@@ -35,10 +53,10 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 
 	render() {
 		return html`<umb-input-color
-			?showLabels=${this._showLabels}
+			value=${this.value?.value ?? ''}
 			.swatches=${this._swatches}
-			.value=${this.value?.value ?? ''}
-			@change=${this._onChange}></umb-input-color>`;
+			?showLabels=${this._showLabels}
+			@change=${this.#onChange}></umb-input-color>`;
 	}
 }