From 2e9883e3cacc541051368ea1f110b9620c097715 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Thu, 29 Feb 2024 17:23:59 +0000
Subject: [PATCH] Tidy-up/refactoring of
 `umb-property-editor-ui-color-swatches-editor`

Reviewing the code, the `items` config didn't make sense,
as it attempts to populate the `value`, which isn't a configuration.
e.g. what would be populating it (rather than setting the value)?

As far as I could find in the codebase, nothing was using the `items` option.
---
 .../multiple-color-picker-input.element.ts    | 34 ++++++++-----------
 ...editor-ui-color-swatches-editor.element.ts |  4 ---
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts
index 261d39ef7a..619a58c0cc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts
@@ -1,32 +1,21 @@
 import type { UmbMultipleColorPickerItemInputElement } from './multiple-color-picker-item-input.element.js';
-import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
 import {
 	css,
+	customElement,
 	html,
+	ifDefined,
 	nothing,
 	repeat,
-	customElement,
 	property,
 	state,
-	ifDefined,
 } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
-import { type UmbInputEvent, UmbChangeEvent, type UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
-
-const SORTER_CONFIG: UmbSorterConfig<UmbSwatchDetails, UmbMultipleColorPickerItemInputElement> = {
-	getUniqueOfElement: (element) => {
-		return element.value.toString();
-	},
-	getUniqueOfModel: (modelEntry) => {
-		return modelEntry.value;
-	},
-	identifier: 'Umb.SorterIdentifier.ColorEditor',
-	itemSelector: 'umb-multiple-color-picker-item-input',
-	containerSelector: '#sorter-wrapper',
-};
+import type { UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
+import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
 
 /**
  * @element umb-multiple-color-picker-input
@@ -34,7 +23,15 @@ const SORTER_CONFIG: UmbSorterConfig<UmbSwatchDetails, UmbMultipleColorPickerIte
 @customElement('umb-multiple-color-picker-input')
 export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitElement) {
 	#sorter = new UmbSorterController(this, {
-		...SORTER_CONFIG,
+		getUniqueOfElement: (element: UmbMultipleColorPickerItemInputElement) => {
+			return element.value.toString();
+		},
+		getUniqueOfModel: (modelEntry: UmbSwatchDetails) => {
+			return modelEntry.value;
+		},
+		identifier: 'Umb.SorterIdentifier.ColorEditor',
+		itemSelector: 'umb-multiple-color-picker-item-input',
+		containerSelector: '#sorter-wrapper',
 		onChange: ({ model }) => {
 			const oldValue = this._items;
 			this._items = model;
@@ -194,7 +191,6 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE
 						?showLabels=${this.showLabels}
 						value=${item.value}
 						label=${ifDefined(item.label)}
-						name="item-${index}"
 						@change=${(event: UmbChangeEvent) => this.#onChange(event, index)}
 						@delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
 						?disabled=${this.disabled}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts
index eee1b042aa..d2d4f13a77 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts
@@ -21,10 +21,6 @@ export class UmbPropertyEditorUIColorSwatchesEditorElement extends UmbLitElement
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels;
-		const items = config?.getValueByAlias('items') as typeof this.value;
-		if (items) {
-			this.value = items;
-		}
 	}
 
 	#onChange(event: CustomEvent) {