From 0adea4134dbd805b9519ba96a97686b9f5019bed Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 17 Feb 2023 16:25:59 +0100
Subject: [PATCH] swatch model

---
 src/Umbraco.Web.UI.Client/libs/models/index.ts      |  5 +++++
 .../input-color-picker.element.ts                   |  3 ++-
 .../property-editor-ui-color-picker.element.ts      |  3 ++-
 .../modal-layout-multi-url-picker.stories.ts        | 13 ++-----------
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/libs/models/index.ts b/src/Umbraco.Web.UI.Client/libs/models/index.ts
index 4f66e3349c..157a142fbc 100644
--- a/src/Umbraco.Web.UI.Client/libs/models/index.ts
+++ b/src/Umbraco.Web.UI.Client/libs/models/index.ts
@@ -146,3 +146,8 @@ export interface DataSourceResponse<T = undefined> {
 	data?: T;
 	error?: ProblemDetailsModel;
 }
+
+export interface SwatchDetails {
+	label: string;
+	value: string;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-color-picker/input-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-color-picker/input-color-picker.element.ts
index 4ffd7b1fc0..cc2c423039 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-color-picker/input-color-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-color-picker/input-color-picker.element.ts
@@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIColorSwatchesEvent } from '@umbraco-ui/uui';
 import { UmbLitElement } from '@umbraco-cms/element';
+import type { SwatchDetails } from '@umbraco-cms/models';
 
 @customElement('umb-input-color-picker')
 export class UmbInputColorPickerElement extends FormControlMixin(UmbLitElement) {
@@ -13,7 +14,7 @@ export class UmbInputColorPickerElement extends FormControlMixin(UmbLitElement)
 	showLabels = false;
 
 	@property()
-	swatches?: any[];
+	swatches?: SwatchDetails[];
 
 	constructor() {
 		super();
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
index 3bd4b03c8c..a6fbfe8c1d 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
@@ -4,6 +4,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { UUIColorSwatchesEvent } from '@umbraco-ui/uui';
 import { UmbLitElement } from '@umbraco-cms/element';
 import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
+import type { SwatchDetails } from '@umbraco-cms/models';
 
 /**
  * @element umb-property-editor-ui-color-picker
@@ -19,7 +20,7 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement {
 	private _showLabels = false;
 
 	@state()
-	private _swatches: any[] = [];
+	private _swatches: SwatchDetails[] = [];
 
 	@property({ type: Array, attribute: false })
 	public set config(config: Array<DataTypePropertyModel>) {
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts
index f4c34cb716..6f9b80f05f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts
@@ -4,11 +4,7 @@ import './modal-layout-link-picker.element';
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 
-import type {
-	UmbModalLayoutLinkPickerElement,
-	UmbModalLinkPickerData,
-	UmbModalLinkPickerConfig,
-} from './modal-layout-link-picker.element';
+import type { UmbModalLayoutLinkPickerElement } from './modal-layout-link-picker.element';
 
 export default {
 	title: 'API/Modals/Layouts/Link Picker',
@@ -16,14 +12,9 @@ export default {
 	id: 'modal-layout-link-picker',
 } as Meta;
 
-const data: UmbModalLinkPickerConfig = {
-	hideAnchor: false,
-	ignoreUserStartNodes: false,
-};
-
 export const Overview: Story<UmbModalLayoutLinkPickerElement> = () => html`
 	<!-- TODO: figure out if generics are allowed for properties:
 	https://github.com/runem/lit-analyzer/issues/149
 	https://github.com/runem/lit-analyzer/issues/163 -->
-	<umb-modal-layout-link-picker .data=${data as any}></umb-modal-layout-link-picker>
+	<umb-modal-layout-link-picker></umb-modal-layout-link-picker>
 `;