From b4c326f6ed87030cb63dab80d39db6e5b331e4fe Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 3 Jan 2023 13:09:56 +0100
Subject: [PATCH] add config

---
 .../models/Umbraco.ColorPicker.ts             | 20 ++++++++++++-
 .../shared/property-editors/uis/manifests.ts  | 28 +++++++++++++------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts
index 6f7c276c34..61f0e1dfd6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.ColorPicker.ts
@@ -4,5 +4,23 @@ export const manifest: ManifestPropertyEditorModel = {
 	type: 'propertyEditorModel',
 	name: 'Color Picker',
 	alias: 'Umbraco.ColorPicker',
-	meta: {},
+	meta: {
+		config: {
+			properties: [
+				{
+					alias: 'useLabel',
+					label: 'Include labels?',
+					description:
+						'Stores colors as a Json object containing both the color hex string and label, rather than just the hex string.',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
+				},
+				{
+					alias: 'colors',
+					label: 'Colors',
+					description: 'Add, remove or sort colors',
+					propertyEditorUI: 'Umb.PropertyEditorUI.ColorPicker',
+				},
+			],
+		},
+	},
 };
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
index 9e5c5ce55b..fa3e2fb5db 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
@@ -1,6 +1,18 @@
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
 export const manifests: Array<ManifestPropertyEditorUI> = [
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.ColorPicker',
+		name: 'Color Picker Property Editor UI',
+		loader: () => import('./color-picker/property-editor-ui-color-picker.element'),
+		meta: {
+			label: 'Color Picker',
+			propertyEditorModel: 'Umbraco.ColorPicker',
+			icon: 'umb:colorpicker',
+			group: 'pickers',
+		},
+	},
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.BlockList',
@@ -9,7 +21,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 		meta: {
 			label: 'Block List',
 			icon: 'umb:thumbnail-list',
-			group: 'Lists',
+			group: 'lists',
 			propertyEditorModel: 'Umbraco.BlockList',
 		},
 	},
@@ -21,7 +33,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 		meta: {
 			label: 'Toggle',
 			icon: 'umb:checkbox',
-			group: 'Common',
+			group: 'common',
 			propertyEditorModel: 'Umbraco.TrueFalse',
 		},
 	},
@@ -33,7 +45,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 		meta: {
 			label: 'Checkbox List',
 			icon: 'umb:bulleted-list',
-			group: 'Lists',
+			group: 'lists',
 			propertyEditorModel: 'Umbraco.CheckBoxList',
 		},
 	},
@@ -45,7 +57,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 		meta: {
 			label: 'Text',
 			icon: 'umb:edit',
-			group: 'Common',
+			group: 'common',
 			propertyEditorModel: 'Umbraco.TextBox',
 		},
 	},
@@ -57,7 +69,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 		meta: {
 			label: 'Textarea',
 			icon: 'umb:edit',
-			group: 'Common',
+			group: 'common',
 			propertyEditorModel: 'Umbraco.TextArea',
 			config: {
 				properties: [
@@ -79,7 +91,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 		meta: {
 			label: 'Number',
 			icon: 'umb:autofill',
-			group: 'Common',
+			group: 'common',
 			propertyEditorModel: 'Umbraco.Integer',
 		},
 	},
@@ -92,7 +104,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 			label: 'Content Picker',
 			propertyEditorModel: 'Umbraco.ContentPicker',
 			icon: 'umb:document',
-			group: 'Common',
+			group: 'common',
 		},
 	},
 	{
@@ -104,7 +116,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 			label: 'Icon Picker',
 			propertyEditorModel: 'Umbraco.IconPicker',
 			icon: 'umb:document',
-			group: 'Common',
+			group: 'common',
 		},
 	},
 ];