Merge pull request #1647 from umbraco/bugfix/color-picker-config-use-labels-default

Bugfix: Color Picker: default value for `useLabel` configuration

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

@@ -1,20 +1,21 @@
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
-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 { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-toggle')
 export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, '') {
-	_checked = false;
 	@property({ type: Boolean })
 	public set checked(toggle: boolean) {
-		this._checked = toggle;
+		this.#checked = toggle;
 		super.value = toggle.toString();
 		this.#updateLabel();
 	}
 	public get checked(): boolean {
-		return this._checked;
+		return this.#checked;
 	}
+	#checked = false;
 
 	@property({ type: Boolean })
 	showLabels = false;
@@ -37,10 +38,10 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, ''
 		this.#updateLabel();
 	}
 
-	#onChange(e: UUIBooleanInputEvent) {
-		this.checked = e.target.checked;
-		e.stopPropagation();
-		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+	#onChange(event: UUIBooleanInputEvent) {
+		event.stopPropagation();
+		this.checked = event.target.checked;
+		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	#updateLabel() {
@@ -49,9 +50,9 @@ export class UmbInputToggleElement extends UUIFormControlMixin(UmbLitElement, ''
 
 	render() {
 		return html`<uui-toggle
-			.checked="${this._checked}"
-			.label="${this._currentLabel}"
-			@change="${this.#onChange}"></uui-toggle>`;
+			.checked=${this.#checked}
+			.label=${this._currentLabel}
+			@change=${this.#onChange}></uui-toggle>`;
 	}
 
 	static styles = [

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

@@ -95,7 +95,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
 	readonly = false;
 
 	@property({ type: Boolean })
-	showLabels = true;
+	showLabels = false;
 
 	constructor() {
 		super();
@@ -105,8 +105,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
 			this.observe(
 				await workspace.propertyValueByAlias<boolean>('useLabel'),
 				(value) => {
-					// Only set a true/false value. If value is undefined, keep the default value of True, if value is defined, set the value but remove the undefined type from the Type Union.
-					this.showLabels = value === undefined ? true : (value as Exclude<typeof value, undefined>);
+					this.showLabels = !!value;
 				},
 				'observeUseLabel',
 			);
@@ -128,13 +127,13 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
 	private _items: Array<UmbSwatchDetails> = [];
 
 	@property({ type: Array })
-	public get items(): Array<UmbSwatchDetails> {
-		return this._items;
-	}
 	public set items(items: Array<UmbSwatchDetails>) {
 		this._items = items ?? [];
 		this.#sorter.setModel(this.items);
 	}
+	public get items(): Array<UmbSwatchDetails> {
+		return this._items;
+	}
 
 	#onAdd() {
 		this.items = [...this._items, { value: '', label: '' }];
@@ -177,43 +176,43 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
 	}
 
 	render() {
-		return html`<div id="sorter-wrapper">${this.#renderItems()}</div>
-			${this.#renderAddButton()} `;
+		return html`${this.#renderItems()} ${this.#renderAddButton()}`;
 	}
 
 	#renderItems() {
 		return html`
-			${repeat(
-				this._items,
-				(item) => item.value,
-				(item, index) => html`
-					<umb-multiple-color-picker-item-input
-						?showLabels=${this.showLabels}
-						value=${item.value}
-						label=${ifDefined(item.label)}
-						@change=${(event: UmbChangeEvent) => this.#onChange(event, index)}
-						@delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
-						?disabled=${this.disabled}
-						?readonly=${this.readonly}
-						required
-						required-message="Item ${index + 1} is missing a value">
-					</umb-multiple-color-picker-item-input>
-				`,
-			)}
+			<div id="sorter-wrapper">
+				${repeat(
+					this._items,
+					(item) => item.value,
+					(item, index) => html`
+						<umb-multiple-color-picker-item-input
+							label=${item.label}
+							value=${item.value}
+							required
+							required-message="Item ${index + 1} is missing a value"
+							?disabled=${this.disabled}
+							?readonly=${this.readonly}
+							?showLabels=${this.showLabels}
+							@change=${(event: UmbChangeEvent) => this.#onChange(event, index)}
+							@delete=${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}>
+						</umb-multiple-color-picker-item-input>
+					`,
+				)}
+			</div>
 		`;
 	}
 
 	#renderAddButton() {
+		if (this.disabled || this.readonly) return nothing;
 		return html`
-			${this.disabled || this.readonly
-				? nothing
-				: html`<uui-button
-						id="action"
-						label=${this.localize.term('general_add')}
-						look="placeholder"
-						color="default"
-						@click="${this.#onAdd}"
-						?disabled=${this.disabled}></uui-button>`}
+			<uui-button
+				id="action"
+				label=${this.localize.term('general_add')}
+				look="placeholder"
+				color="default"
+				?disabled=${this.disabled}
+				@click=${this.#onAdd}></uui-button>
 		`;
 	}
 

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

@@ -7,12 +7,13 @@ import {
 	query,
 	ifDefined,
 	state,
+	when,
 } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIColorPickerElement, UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
-import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
 import { UmbChangeEvent, UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import type { UUIColorPickerElement, UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 /**
  * @element umb-multiple-color-picker-item-input
@@ -64,7 +65,7 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 	protected _colorPicker!: UUIColorPickerElement;
 
 	@property({ type: Boolean })
-	showLabels = true;
+	showLabels = false;
 
 	async #onDelete() {
 		await umbConfirmModal(this, {
@@ -142,39 +143,45 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 							value=${this.value}
 							label=${this.localize.term('general_value')}
 							placeholder=${this.localize.term('general_value')}
-							@input="${this.#onValueInput}"
-							@change="${this.#onValueChange}"
-							required="${this.required}"
-							required-message="Value is missing">
+							required=${this.required}
+							required-message="Value is missing"
+							@input=${this.#onValueInput}
+							@change=${this.#onValueChange}>
 							<uui-color-swatch
 								slot="prepend"
 								label=${this.value}
-								value="${this._valueHex}"
+								value=${this._valueHex}
 								@click=${this.#onColorClick}></uui-color-swatch>
 						</uui-input>
 						<input aria-hidden="${true}" type="color" id="color" value=${this.value} @input=${this.#onColorInput} />
 					</div>
-					${this.showLabels
-						? html` <uui-input
+					${when(
+						this.showLabels,
+						() => html`
+							<uui-input
 								label=${this.localize.term('placeholders_label')}
 								placeholder=${this.localize.term('placeholders_label')}
 								value=${ifDefined(this.label)}
 								@input="${this.#onLabelInput}"
 								@change="${this.#onLabelChange}"
 								?disabled=${this.disabled}
-								?readonly=${this.readonly}></uui-input>`
-						: nothing}
-					${this.readonly
-						? nothing
-						: html`<uui-button
-								label="${this.localize.term('actions_delete')} ${this.value}"
-								look="primary"
+								?readonly=${this.readonly}></uui-input>
+						`,
+					)}
+					${when(
+						!this.readonly,
+						() => html`
+							<uui-button
+								compact
 								color="danger"
-								@click="${this.#onDelete}"
+								label=${this.localize.term('actions_delete')}
+								look="primary"
 								?disabled=${this.disabled}
-								compact>
+								@click=${this.#onDelete}>
 								<uui-icon name="icon-trash"></uui-icon>
-							</uui-button>`}
+							</uui-button>
+						`,
+					)}
 				</div>
 			</uui-form-validation-message>
 		`;

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

@@ -1,16 +1,17 @@
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
-import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbMultipleColorPickerInputElement } from '@umbraco-cms/backoffice/components';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
 
 /**
  * @element umb-property-editor-ui-color-swatches-editor
  */
 @customElement('umb-property-editor-ui-color-swatches-editor')
 export class UmbPropertyEditorUIColorSwatchesEditorElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-	#defaultShowLabels = true;
+	#defaultShowLabels = false;
 
 	@property({ type: Array })
 	value: Array<UmbSwatchDetails> = [];
@@ -22,16 +23,18 @@ export class UmbPropertyEditorUIColorSwatchesEditorElement extends UmbLitElement
 		this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels;
 	}
 
-	#onChange(event: CustomEvent) {
-		this.value = (event.target as UmbMultipleColorPickerInputElement).items;
-		this.dispatchEvent(new CustomEvent('property-value-change'));
+	#onChange(event: CustomEvent & { target: UmbMultipleColorPickerInputElement }) {
+		this.value = event.target.items;
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {
-		return html`<umb-multiple-color-picker-input
-			?showLabels=${this._showLabels}
-			.items="${this.value}"
-			@change=${this.#onChange}></umb-multiple-color-picker-input>`;
+		return html`
+			<umb-multiple-color-picker-input
+				.items=${this.value}
+				?showLabels=${this._showLabels}
+				@change=${this.#onChange}></umb-multiple-color-picker-input>
+		`;
 	}
 }