From bb68e9f5925b137520a928f3dcec0320e3e2eb7b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 4 Jan 2023 10:54:04 +0100
Subject: [PATCH 1/6] add multi url picker

---
 .../models/Umbraco.MultiUrlPicker.ts          | 41 +++++++++++++++++++
 .../property-editors/models/manifests.ts      |  2 +
 .../property-editor-config.element.ts         |  2 +-
 .../shared/property-editors/uis/manifests.ts  |  4 ++
 .../uis/multi-url-picker/manifests.ts         | 30 ++++++++++++++
 ...erty-editor-ui-multi-url-picker.element.ts | 29 +++++++++++++
 ...erty-editor-ui-multi-url-picker.stories.ts | 15 +++++++
 ...roperty-editor-ui-multi-url-picker.test.ts | 21 ++++++++++
 .../uis/overlay-size/manifests.ts             | 14 +++++++
 ...property-editor-ui-overlay-size.element.ts | 29 +++++++++++++
 ...property-editor-ui-overlay-size.stories.ts | 15 +++++++
 .../property-editor-ui-overlay-size.test.ts   | 21 ++++++++++
 .../src/core/mocks/data/data-type.data.ts     | 19 +++++++--
 13 files changed, 238 insertions(+), 4 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultiUrlPicker.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.test.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultiUrlPicker.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultiUrlPicker.ts
new file mode 100644
index 0000000000..30a8bd6248
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultiUrlPicker.ts
@@ -0,0 +1,41 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Multi URL Picker',
+	alias: 'Umbraco.MultiUrlPicker',
+	meta: {
+		config: {
+			properties: [
+				{
+					alias: 'minNumber',
+					label: 'Minimum number of items',
+					description: '',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Number',
+				},
+				{
+					alias: 'maxNumber',
+					label: 'Maximum number of items',
+					description: '',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Number',
+				},
+				{
+					alias: 'ignoreUserStartNodes',
+					label: 'Ignore user start nodes',
+					description: 'Selecting this option allows a user to choose nodes that they normally dont have access to.',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
+				},
+			],
+			defaultData: [
+				{
+					alias: 'minNumber',
+					value: 0,
+				},
+				{
+					alias: 'maxNumber',
+					value: 0,
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
index 3e55ed9eb7..2d4c4572e6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
@@ -2,6 +2,7 @@ import { manifest as colorPicker } from './Umbraco.ColorPicker';
 import { manifest as eyeDropper } from './Umbraco.ColorPicker.EyeDropper';
 import { manifest as contentPicker } from './Umbraco.ContentPicker';
 import { manifest as json } from './Umbraco.JSON';
+import { manifest as multiUrlPicker } from './Umbraco.MultiUrlPicker';
 
 import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
 
@@ -10,6 +11,7 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 	eyeDropper,
 	contentPicker,
 	json,
+	multiUrlPicker,
 	{
 		type: 'propertyEditorModel',
 		name: 'Multi URL Picker',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts
index cf847b77b4..a38d6c5bee 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts
@@ -100,7 +100,7 @@ export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(UmbO
 	private _getValue(property: PropertyEditorConfigProperty) {
 		const value = this.data.find((data) => data.alias === property.alias)?.value;
 		const defaultValue = this._configDefaultData?.find((data) => data.alias === property.alias)?.value;
-		return value || defaultValue || null;
+		return value ?? defaultValue ?? null;
 	}
 
 	render() {
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 d589a42e5d..18e07fd715 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
@@ -2,6 +2,8 @@ import { manifest as ColorPicker } from './color-picker/manifests';
 import { manifest as ContentPicker } from './content-picker/manifests';
 import { manifest as EyeDropper } from './eye-dropper/manifests';
 import { manifest as TreePicker } from './tree-picker/manifests';
+import { manifest as MultiUrlPicker } from './multi-url-picker/manifests';
+import { manifest as OverlaySize } from './overlay-size/manifests';
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
 export const manifests: Array<ManifestPropertyEditorUI> = [
@@ -9,6 +11,8 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 	ContentPicker,
 	EyeDropper,
 	TreePicker,
+	MultiUrlPicker,
+	OverlaySize,
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.BlockList',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/manifests.ts
new file mode 100644
index 0000000000..90c48e605f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/manifests.ts
@@ -0,0 +1,30 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.MultiUrlPicker',
+	name: 'Multi URL Picker Property Editor UI',
+	loader: () => import('./property-editor-ui-multi-url-picker.element'),
+	meta: {
+		label: 'Multi URL Picker',
+		propertyEditorModel: 'Umbraco.MultiUrlPicker',
+		icon: 'umb:link',
+		group: 'pickers',
+		config: {
+			properties: [
+				{
+					alias: 'overlaySize',
+					label: 'Overlay Size',
+					description: 'Select the width of the overlay.',
+					propertyEditorUI: 'Umb.PropertyEditorUI.OverlaySize',
+				},
+				{
+					alias: 'hideAnchor',
+					label: 'Hide anchor/query string input',
+					description: 'Selecting this hides the anchor/query string input field in the link picker overlay.',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
new file mode 100644
index 0000000000..5e33094719
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-multi-url-picker
+ */
+@customElement('umb-property-editor-ui-multi-url-picker')
+export class UmbPropertyEditorUIMultiUrlPickerElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-multi-url-picker</div>`;
+	}
+}
+
+export default UmbPropertyEditorUIMultiUrlPickerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-multi-url-picker': UmbPropertyEditorUIMultiUrlPickerElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.stories.ts
new file mode 100644
index 0000000000..ec833487f1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIMultiUrlPickerElement } from './property-editor-ui-multi-url-picker.element';
+import './property-editor-ui-multi-url-picker.element';
+
+export default {
+	title: 'Property Editor UIs/Multi Url Picker',
+	component: 'umb-property-editor-ui-multi-url-picker',
+	id: 'umb-property-editor-ui-multi-url-picker',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIMultiUrlPickerElement> = () =>
+	html`<umb-property-editor-ui-multi-url-picker></umb-property-editor-ui-multi-url-picker>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.test.ts
new file mode 100644
index 0000000000..8e6e46f607
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUIMultiUrlPickerElement } from './property-editor-ui-multi-url-picker.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUIMultiUrlPickerElement', () => {
+  let element: UmbPropertyEditorUIMultiUrlPickerElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-multi-url-picker></umb-property-editor-ui-multi-url-picker> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUIMultiUrlPickerElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/manifests.ts
new file mode 100644
index 0000000000..2baef91ae5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/manifests.ts
@@ -0,0 +1,14 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.OverlaySize',
+	name: 'Overlay Size Property Editor UI',
+	loader: () => import('./property-editor-ui-overlay-size.element'),
+	meta: {
+		label: 'Overlay Size',
+		propertyEditorModel: '',
+		icon: 'umb:document',
+		group: '',
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
new file mode 100644
index 0000000000..8d4444dfd8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-overlay-size
+ */
+@customElement('umb-property-editor-ui-overlay-size')
+export class UmbPropertyEditorUIOverlaySizeElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-overlay-size</div>`;
+	}
+}
+
+export default UmbPropertyEditorUIOverlaySizeElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-overlay-size': UmbPropertyEditorUIOverlaySizeElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.stories.ts
new file mode 100644
index 0000000000..4ae4156e8e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIOverlaySizeElement } from './property-editor-ui-overlay-size.element';
+import './property-editor-ui-overlay-size.element';
+
+export default {
+	title: 'Property Editor UIs/Overlay Size',
+	component: 'umb-property-editor-ui-overlay-size',
+	id: 'umb-property-editor-ui-overlay-size',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIOverlaySizeElement> = () =>
+	html`<umb-property-editor-ui-overlay-size></umb-property-editor-ui-overlay-size>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.test.ts
new file mode 100644
index 0000000000..3fbca003b3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/overlay-size/property-editor-ui-overlay-size.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUIOverlaySizeElement } from './property-editor-ui-overlay-size.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUIOverlaySizeElement', () => {
+  let element: UmbPropertyEditorUIOverlaySizeElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-overlay-size></umb-property-editor-ui-overlay-size> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUIOverlaySizeElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
index 0983adf5e2..1f89a5e4a3 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
@@ -84,7 +84,7 @@ export const data: Array<DataTypeDetails> = [
 		data: [],
 	},
 	{
-		name: 'Umbraco.ColorPicker',
+		name: 'Color Picker',
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
@@ -97,7 +97,7 @@ export const data: Array<DataTypeDetails> = [
 		data: [],
 	},
 	{
-		name: 'Umbraco.ContentPicker',
+		name: 'Content Picker',
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
@@ -110,7 +110,7 @@ export const data: Array<DataTypeDetails> = [
 		data: [],
 	},
 	{
-		name: 'Umbraco.ColorPicker.EyeDropper',
+		name: 'Eye Dropper',
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
@@ -122,6 +122,19 @@ export const data: Array<DataTypeDetails> = [
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.EyeDropper',
 		data: [],
 	},
+	{
+		name: 'Multi URL Picker',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-10',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.MultiUrlPicker',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.MultiUrlPicker',
+		data: [],
+	},
 ];
 
 // Temp mocked database

From 54679ca5ac9c6d21f16921d53b9d66df7d7036c1 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 4 Jan 2023 11:43:16 +0100
Subject: [PATCH 2/6] add tree picker config

---
 .../models/Umbraco.MultiNodeTreePicker.ts     | 41 +++++++++++++++++++
 .../property-editors/models/manifests.ts      | 14 +------
 .../shared/property-editors/uis/manifests.ts  |  2 +
 .../uis/tree-picker-start-node/manifests.ts   | 14 +++++++
 ...ditor-ui-tree-picker-start-node.element.ts | 29 +++++++++++++
 ...ditor-ui-tree-picker-start-node.stories.ts | 15 +++++++
 ...y-editor-ui-tree-picker-start-node.test.ts | 21 ++++++++++
 .../uis/tree-picker/manifests.ts              | 24 ++++++++++-
 .../src/core/mocks/data/data-type.data.ts     | 13 ++++++
 9 files changed, 160 insertions(+), 13 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultiNodeTreePicker.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultiNodeTreePicker.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultiNodeTreePicker.ts
new file mode 100644
index 0000000000..d42f6f20c0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultiNodeTreePicker.ts
@@ -0,0 +1,41 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Multi Node Tree Picker',
+	alias: 'Umbraco.MultiNodeTreePicker',
+	meta: {
+		config: {
+			properties: [
+				{
+					alias: 'minNumber',
+					label: 'Minimum number of items',
+					description: '',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Number',
+				},
+				{
+					alias: 'maxNumber',
+					label: 'Maximum number of items',
+					description: '',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Number',
+				},
+				{
+					alias: 'ignoreUserStartNodes',
+					label: 'Ignore user start nodes',
+					description: 'Selecting this option allows a user to choose nodes that they normally dont have access to.',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
+				},
+			],
+			defaultData: [
+				{
+					alias: 'minNumber',
+					value: 0,
+				},
+				{
+					alias: 'maxNumber',
+					value: 0,
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
index 2d4c4572e6..b82d058bdb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
@@ -3,6 +3,7 @@ import { manifest as eyeDropper } from './Umbraco.ColorPicker.EyeDropper';
 import { manifest as contentPicker } from './Umbraco.ContentPicker';
 import { manifest as json } from './Umbraco.JSON';
 import { manifest as multiUrlPicker } from './Umbraco.MultiUrlPicker';
+import { manifest as multiNodeTreePicker } from './Umbraco.MultiNodeTreePicker';
 
 import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
 
@@ -12,18 +13,7 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 	contentPicker,
 	json,
 	multiUrlPicker,
-	{
-		type: 'propertyEditorModel',
-		name: 'Multi URL Picker',
-		alias: 'Umbraco.MultiUrlPicker',
-		meta: {},
-	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Multinode Treepicker',
-		alias: 'Umbraco.MultiNodeTreePicker',
-		meta: {},
-	},
+	multiNodeTreePicker,
 	{
 		type: 'propertyEditorModel',
 		name: 'Date/Time',
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 18e07fd715..acc65be319 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
@@ -2,6 +2,7 @@ import { manifest as ColorPicker } from './color-picker/manifests';
 import { manifest as ContentPicker } from './content-picker/manifests';
 import { manifest as EyeDropper } from './eye-dropper/manifests';
 import { manifest as TreePicker } from './tree-picker/manifests';
+import { manifest as TreePickerStartNode } from './tree-picker-start-node/manifests';
 import { manifest as MultiUrlPicker } from './multi-url-picker/manifests';
 import { manifest as OverlaySize } from './overlay-size/manifests';
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
@@ -11,6 +12,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 	ContentPicker,
 	EyeDropper,
 	TreePicker,
+	TreePickerStartNode,
 	MultiUrlPicker,
 	OverlaySize,
 	{
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/manifests.ts
new file mode 100644
index 0000000000..0d1206a872
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/manifests.ts
@@ -0,0 +1,14 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.TreePicker.StartNode',
+	name: 'Tree Picker Start Node Property Editor UI',
+	loader: () => import('./property-editor-ui-tree-picker-start-node.element'),
+	meta: {
+		label: 'Tree Picker Start Node',
+		icon: 'umb:page-add',
+		group: 'pickers',
+		propertyEditorModel: '',
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.element.ts
new file mode 100644
index 0000000000..9553a07799
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-tree-picker-start-node
+ */
+@customElement('umb-property-editor-ui-tree-picker-start-node')
+export class UmbPropertyEditorUITreePickerStartNodeElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-tree-picker-start-node</div>`;
+	}
+}
+
+export default UmbPropertyEditorUITreePickerStartNodeElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-tree-picker-start-node': UmbPropertyEditorUITreePickerStartNodeElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.stories.ts
new file mode 100644
index 0000000000..3cec8808f8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUITreePickerStartNodeElement } from './property-editor-ui-tree-picker-start-node.element';
+import './property-editor-ui-tree-picker-start-node.element';
+
+export default {
+	title: 'Property Editor UIs/Tree Picker Start Node',
+	component: 'umb-property-editor-ui-tree-picker-start-node',
+	id: 'umb-property-editor-ui-tree-picker-start-node',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUITreePickerStartNodeElement> = () =>
+	html`<umb-property-editor-ui-tree-picker-start-node></umb-property-editor-ui-tree-picker-start-node>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.test.ts
new file mode 100644
index 0000000000..8262b71d6c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker-start-node/property-editor-ui-tree-picker-start-node.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUITreePickerStartNodeElement } from './property-editor-ui-tree-picker-start-node.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUITreePickerStartNodeElement', () => {
+  let element: UmbPropertyEditorUITreePickerStartNodeElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-tree-picker-start-node></umb-property-editor-ui-tree-picker-start-node> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUITreePickerStartNodeElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts
index ea85a03b9f..fcc55d2af6 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tree-picker/manifests.ts
@@ -9,6 +9,28 @@ export const manifest: ManifestPropertyEditorUI = {
 		label: 'Tree Picker',
 		icon: 'umb:page-add',
 		group: 'pickers',
-		propertyEditorModel: 'Umbraco.JSON',
+		propertyEditorModel: 'Umbraco.MultiNodeTreePicker',
+		config: {
+			properties: [
+				{
+					alias: 'startNode',
+					label: 'Start node',
+					description: '',
+					propertyEditorUI: 'Umb.PropertyEditorUI.TreePicker.StartNode',
+				},
+				{
+					alias: 'filter',
+					label: 'Allow items of type',
+					description: '',
+					propertyEditorUI: 'Umb.PropertyEditorUI.TreePicker',
+				},
+				{
+					alias: 'showOpenButton',
+					label: 'Show open button',
+					description: 'Opens the node in a dialog',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
+				},
+			],
+		},
 	},
 };
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
index 1f89a5e4a3..61e7814186 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
@@ -135,6 +135,19 @@ export const data: Array<DataTypeDetails> = [
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.MultiUrlPicker',
 		data: [],
 	},
+	{
+		name: 'Multi Node Tree Picker',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-11',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.MultiNodeTreePicker',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.TreePicker',
+		data: [],
+	},
 ];
 
 // Temp mocked database

From a6b14319c3be4c6c61c3ce4427fc17acf15b4a59 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 4 Jan 2023 12:11:30 +0100
Subject: [PATCH 3/6] add date picker config

---
 .../models/Umbraco.DateTime.ts                | 21 +++++++++++++
 .../property-editors/models/manifests.ts      |  8 ++---
 .../uis/date-picker/manifests.ts              | 30 +++++++++++++++++++
 .../property-editor-ui-date-picker.element.ts | 29 ++++++++++++++++++
 .../property-editor-ui-date-picker.stories.ts | 15 ++++++++++
 .../property-editor-ui-date-picker.test.ts    | 21 +++++++++++++
 .../shared/property-editors/uis/manifests.ts  | 30 ++++++++++---------
 .../src/core/mocks/data/data-type.data.ts     | 13 ++++++++
 8 files changed, 147 insertions(+), 20 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.DateTime.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.DateTime.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.DateTime.ts
new file mode 100644
index 0000000000..824bbd6a2c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.DateTime.ts
@@ -0,0 +1,21 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+// TODO: We won't include momentjs anymore so we need to find a way to handle date formats
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Date/Time',
+	alias: 'Umbraco.DateTime',
+	meta: {
+		config: {
+			properties: [
+				{
+					alias: 'offsetTime',
+					label: 'Offset time',
+					description:
+						'When enabled the time displayed will be offset with the servers timezone, this is useful for scenarios like scheduled publishing when an editor is in a different timezone than the hosted server',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
index b82d058bdb..dad4a926f7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
@@ -4,6 +4,7 @@ import { manifest as contentPicker } from './Umbraco.ContentPicker';
 import { manifest as json } from './Umbraco.JSON';
 import { manifest as multiUrlPicker } from './Umbraco.MultiUrlPicker';
 import { manifest as multiNodeTreePicker } from './Umbraco.MultiNodeTreePicker';
+import { manifest as dateTime } from './Umbraco.DateTime';
 
 import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
 
@@ -11,15 +12,10 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 	colorPicker,
 	eyeDropper,
 	contentPicker,
+	dateTime,
 	json,
 	multiUrlPicker,
 	multiNodeTreePicker,
-	{
-		type: 'propertyEditorModel',
-		name: 'Date/Time',
-		alias: 'Umbraco.DateTime',
-		meta: {},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'Decimal',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/manifests.ts
new file mode 100644
index 0000000000..51139cd0ea
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/manifests.ts
@@ -0,0 +1,30 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.DatePicker',
+	name: 'Date Picker Property Editor UI',
+	loader: () => import('./property-editor-ui-date-picker.element'),
+	meta: {
+		label: 'Date Picker',
+		propertyEditorModel: 'Umbraco.DateTime',
+		icon: 'umb:time',
+		group: 'pickers',
+		config: {
+			properties: [
+				{
+					alias: 'format',
+					label: 'Date format',
+					description: 'If left empty then the format is YYYY-MM-DD. (see momentjs.com for supported formats)',
+					propertyEditorUI: 'Umb.PropertyEditorUI.TextBox',
+				},
+			],
+			defaultData: [
+				{
+					alias: 'format',
+					value: 'YYYY-MM-DD HH:mm:ss',
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
new file mode 100644
index 0000000000..dffd75b850
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-date-picker
+ */
+@customElement('umb-property-editor-ui-date-picker')
+export class UmbPropertyEditorUIDatePickerElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-date-picker</div>`;
+	}
+}
+
+export default UmbPropertyEditorUIDatePickerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-date-picker': UmbPropertyEditorUIDatePickerElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts
new file mode 100644
index 0000000000..783f397430
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui-date-picker.element';
+import './property-editor-ui-date-picker.element';
+
+export default {
+	title: 'Property Editor UIs/Date Picker',
+	component: 'umb-property-editor-ui-date-picker',
+	id: 'umb-property-editor-ui-date-picker',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIDatePickerElement> = () =>
+	html`<umb-property-editor-ui-date-picker></umb-property-editor-ui-date-picker>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts
new file mode 100644
index 0000000000..0dcd4e3a6b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/date-picker/property-editor-ui-date-picker.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUIDatePickerElement } from './property-editor-ui-date-picker.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUIDatePickerElement', () => {
+  let element: UmbPropertyEditorUIDatePickerElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-date-picker></umb-property-editor-ui-date-picker> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUIDatePickerElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
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 acc65be319..cc3e93dc94 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,20 +1,22 @@
-import { manifest as ColorPicker } from './color-picker/manifests';
-import { manifest as ContentPicker } from './content-picker/manifests';
-import { manifest as EyeDropper } from './eye-dropper/manifests';
-import { manifest as TreePicker } from './tree-picker/manifests';
-import { manifest as TreePickerStartNode } from './tree-picker-start-node/manifests';
-import { manifest as MultiUrlPicker } from './multi-url-picker/manifests';
-import { manifest as OverlaySize } from './overlay-size/manifests';
+import { manifest as colorPicker } from './color-picker/manifests';
+import { manifest as contentPicker } from './content-picker/manifests';
+import { manifest as datePicker } from './date-picker/manifests';
+import { manifest as eyeDropper } from './eye-dropper/manifests';
+import { manifest as multiUrlPicker } from './multi-url-picker/manifests';
+import { manifest as overlaySize } from './overlay-size/manifests';
+import { manifest as treePicker } from './tree-picker/manifests';
+import { manifest as treePickerStartNode } from './tree-picker-start-node/manifests';
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
 export const manifests: Array<ManifestPropertyEditorUI> = [
-	ColorPicker,
-	ContentPicker,
-	EyeDropper,
-	TreePicker,
-	TreePickerStartNode,
-	MultiUrlPicker,
-	OverlaySize,
+	colorPicker,
+	contentPicker,
+	datePicker,
+	eyeDropper,
+	multiUrlPicker,
+	overlaySize,
+	treePicker,
+	treePickerStartNode,
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.BlockList',
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
index 61e7814186..3a89a80f10 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
@@ -148,6 +148,19 @@ export const data: Array<DataTypeDetails> = [
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.TreePicker',
 		data: [],
 	},
+	{
+		name: 'Date Picker',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-12',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.DateTime',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.DatePicker',
+		data: [],
+	},
 ];
 
 // Temp mocked database

From e68406bc4a61c5648be0b94db692bd94a65d05a4 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 4 Jan 2023 14:51:38 +0100
Subject: [PATCH 4/6] set up text box, email, dropdown, and multiple text
 string

---
 .../models/Umbraco.Dropdown.Flexible.ts       |  9 ++++
 .../models/Umbraco.EmailAddress.ts            |  8 +++
 .../models/Umbraco.MultipleTextString.ts      | 35 ++++++++++++
 .../models/Umbraco.TextBox.ts                 | 25 +++++++++
 .../property-editors/models/manifests.ts      | 49 +++--------------
 .../uis/dropdown/manifests.ts                 | 28 ++++++++++
 .../property-editor-ui-dropdown.element.ts    | 29 ++++++++++
 .../property-editor-ui-dropdown.stories.ts    | 15 ++++++
 .../property-editor-ui-dropdown.test.ts       | 21 ++++++++
 .../shared/property-editors/uis/manifests.ts  | 19 +++----
 .../uis/multiple-text-string/manifests.ts     | 14 +++++
 ...-editor-ui-multiple-text-string.element.ts | 29 ++++++++++
 ...-editor-ui-multiple-text-string.stories.ts | 15 ++++++
 ...rty-editor-ui-multiple-text-string.test.ts | 21 ++++++++
 .../uis/text-box/manifests.ts                 | 54 +++++++++++++++++++
 .../src/core/mocks/data/data-type.data.ts     | 52 ++++++++++++++++++
 16 files changed, 370 insertions(+), 53 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Dropdown.Flexible.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.EmailAddress.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultipleTextString.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TextBox.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.test.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/manifests.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.test.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/manifests.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Dropdown.Flexible.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Dropdown.Flexible.ts
new file mode 100644
index 0000000000..d307758b4d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.Dropdown.Flexible.ts
@@ -0,0 +1,9 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+// TODO: We won't include momentjs anymore so we need to find a way to handle date formats
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Dropdown',
+	alias: 'Umbraco.DropDown.Flexible',
+	meta: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.EmailAddress.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.EmailAddress.ts
new file mode 100644
index 0000000000..59c5eef401
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.EmailAddress.ts
@@ -0,0 +1,8 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Email Address',
+	alias: 'Umbraco.EmailAddress',
+	meta: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultipleTextString.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultipleTextString.ts
new file mode 100644
index 0000000000..ebe32f190e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MultipleTextString.ts
@@ -0,0 +1,35 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Multiple Text String',
+	alias: 'Umbraco.MultipleTextString',
+	meta: {
+		config: {
+			properties: [
+				{
+					alias: 'minNumber',
+					label: 'Minimum',
+					description: 'Enter the minimum amount of text boxes to be displayed',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Number',
+				},
+				{
+					alias: 'maxNumber',
+					label: 'Maximum',
+					description: 'Enter the maximum amount of text boxes to be displayed, enter 0 for unlimited',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Number',
+				},
+			],
+			defaultData: [
+				{
+					alias: 'minNumber',
+					value: 0,
+				},
+				{
+					alias: 'maxNumber',
+					value: 0,
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TextBox.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TextBox.ts
new file mode 100644
index 0000000000..6996840f51
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TextBox.ts
@@ -0,0 +1,25 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Text Box',
+	alias: 'Umbraco.TextBox',
+	meta: {
+		config: {
+			properties: [
+				{
+					alias: 'maxChars',
+					label: 'Maximum allowed characters',
+					description: 'If empty, 512 character limit',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Number',
+				},
+			],
+			defaultData: [
+				{
+					alias: 'maxChars',
+					value: 512,
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
index dad4a926f7..2a6fcb626f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
@@ -5,6 +5,10 @@ import { manifest as json } from './Umbraco.JSON';
 import { manifest as multiUrlPicker } from './Umbraco.MultiUrlPicker';
 import { manifest as multiNodeTreePicker } from './Umbraco.MultiNodeTreePicker';
 import { manifest as dateTime } from './Umbraco.DateTime';
+import { manifest as emailAddress } from './Umbraco.EmailAddress';
+import { manifest as dropdownFlexible } from './Umbraco.Dropdown.Flexible';
+import { manifest as textBox } from './Umbraco.TextBox';
+import { manifest as multipleTextString } from './Umbraco.MultipleTextString';
 
 import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
 
@@ -13,21 +17,19 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 	eyeDropper,
 	contentPicker,
 	dateTime,
+	emailAddress,
 	json,
 	multiUrlPicker,
 	multiNodeTreePicker,
+	dropdownFlexible,
+	textBox,
+	multipleTextString,
 	{
 		type: 'propertyEditorModel',
 		name: 'Decimal',
 		alias: 'Umbraco.Decimal',
 		meta: {},
 	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Email address',
-		alias: 'Umbraco.EmailAddress',
-		meta: {},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'Label',
@@ -69,29 +71,6 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 			},
 		},
 	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Textbox',
-		alias: 'Umbraco.TextBox',
-		meta: {
-			config: {
-				properties: [
-					{
-						alias: 'maxChars',
-						label: 'Maximum allowed characters',
-						description: 'If empty, 512 character limit',
-						propertyEditorUI: 'Umb.PropertyEditorUI.Number',
-					},
-				],
-				defaultData: [
-					{
-						alias: 'maxChars',
-						value: 512,
-					},
-				],
-			},
-		},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'Toggle',
@@ -146,12 +125,6 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 		alias: 'Umbraco.CheckBoxList',
 		meta: {},
 	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Dropdown',
-		alias: 'Umbraco.DropDown.Flexible',
-		meta: {},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'List view',
@@ -164,12 +137,6 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 		alias: 'Umbraco.RadioButtonList',
 		meta: {},
 	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Repeatable textstrings',
-		alias: 'Umbraco.MultipleTextstring',
-		meta: {},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'File upload',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/manifests.ts
new file mode 100644
index 0000000000..3ac72d4dae
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/manifests.ts
@@ -0,0 +1,28 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.Dropdown',
+	name: 'Dropdown Property Editor UI',
+	loader: () => import('./property-editor-ui-dropdown.element'),
+	meta: {
+		label: 'Dropdown',
+		propertyEditorModel: 'Umbraco.Dropdown',
+		icon: 'umb:time',
+		group: 'pickers',
+		config: {
+			properties: [
+				{
+					alias: 'multiple',
+					label: 'Enable multiple choice',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
+				},
+				{
+					alias: 'options',
+					label: 'Add options',
+					propertyEditorUI: 'Umb.PropertyEditorUI.MultipleTextString',
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
new file mode 100644
index 0000000000..eaf3f5b229
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-dropdown
+ */
+@customElement('umb-property-editor-ui-dropdown')
+export class UmbPropertyEditorUIDropdownElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-dropdown</div>`;
+	}
+}
+
+export default UmbPropertyEditorUIDropdownElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-dropdown': UmbPropertyEditorUIDropdownElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.stories.ts
new file mode 100644
index 0000000000..790e638e37
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIDropdownElement } from './property-editor-ui-dropdown.element';
+import './property-editor-ui-dropdown.element';
+
+export default {
+	title: 'Property Editor UIs/Dropdown',
+	component: 'umb-property-editor-ui-dropdown',
+	id: 'umb-property-editor-ui-dropdown',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIDropdownElement> = () =>
+	html`<umb-property-editor-ui-dropdown></umb-property-editor-ui-dropdown>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.test.ts
new file mode 100644
index 0000000000..2e409acd72
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/dropdown/property-editor-ui-dropdown.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUIDropdownElement } from './property-editor-ui-dropdown.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUIDropdownElement', () => {
+  let element: UmbPropertyEditorUIDropdownElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-dropdown></umb-property-editor-ui-dropdown> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUIDropdownElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
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 cc3e93dc94..301506d8b1 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
@@ -6,6 +6,10 @@ import { manifest as multiUrlPicker } from './multi-url-picker/manifests';
 import { manifest as overlaySize } from './overlay-size/manifests';
 import { manifest as treePicker } from './tree-picker/manifests';
 import { manifest as treePickerStartNode } from './tree-picker-start-node/manifests';
+import { manifests as textBoxes } from './text-box/manifests';
+import { manifest as dropdown } from './dropdown/manifests';
+import { manifest as multipleTextString } from './multiple-text-string/manifests';
+
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
 export const manifests: Array<ManifestPropertyEditorUI> = [
@@ -15,8 +19,11 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 	eyeDropper,
 	multiUrlPicker,
 	overlaySize,
+	...textBoxes,
 	treePicker,
 	treePickerStartNode,
+	dropdown,
+	multipleTextString,
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.BlockList',
@@ -53,18 +60,6 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 			propertyEditorModel: 'Umbraco.CheckBoxList',
 		},
 	},
-	{
-		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.TextBox',
-		name: 'Text Property Editor UI',
-		loader: () => import('./text-box/property-editor-ui-text-box.element'),
-		meta: {
-			label: 'Text',
-			icon: 'umb:edit',
-			group: 'common',
-			propertyEditorModel: 'Umbraco.TextBox',
-		},
-	},
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.Textarea',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/manifests.ts
new file mode 100644
index 0000000000..1a74f19f80
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/manifests.ts
@@ -0,0 +1,14 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.MultipleTextString',
+	name: 'Multiple Text String Property Editor UI',
+	loader: () => import('./property-editor-ui-multiple-text-string.element'),
+	meta: {
+		label: 'Multiple Text String',
+		propertyEditorModel: 'Umbraco.MultipleTextString',
+		icon: 'umb:ordered-list',
+		group: '',
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
new file mode 100644
index 0000000000..53c035aa3a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.element.ts
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @element umb-property-editor-ui-multiple-text-string
+ */
+@customElement('umb-property-editor-ui-multiple-text-string')
+export class UmbPropertyEditorUIMultipleTextStringElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-multiple-text-string</div>`;
+	}
+}
+
+export default UmbPropertyEditorUIMultipleTextStringElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-multiple-text-string': UmbPropertyEditorUIMultipleTextStringElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.stories.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.stories.ts
new file mode 100644
index 0000000000..39f2b28be8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUIMultipleTextStringElement } from './property-editor-ui-multiple-text-string.element';
+import './property-editor-ui-multiple-text-string.element';
+
+export default {
+	title: 'Property Editor UIs/Multiple Text String',
+	component: 'umb-property-editor-ui-multiple-text-string',
+	id: 'umb-property-editor-ui-multiple-text-string',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUIMultipleTextStringElement> = () =>
+	html`<umb-property-editor-ui-multiple-text-string></umb-property-editor-ui-multiple-text-string>`;
+AAAOverview.storyName = 'Overview';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.test.ts
new file mode 100644
index 0000000000..7852945684
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multiple-text-string/property-editor-ui-multiple-text-string.test.ts
@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUIMultipleTextStringElement } from './property-editor-ui-multiple-text-string.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUIMultipleTextStringElement', () => {
+  let element: UmbPropertyEditorUIMultipleTextStringElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-multiple-text-string></umb-property-editor-ui-multiple-text-string> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUIMultipleTextStringElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/manifests.ts
new file mode 100644
index 0000000000..d600fe5b8d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/text-box/manifests.ts
@@ -0,0 +1,54 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+// TODO: we don't really want this config value to be changed from the UI. We need a way to handle hidden config properties.
+const inputTypeConfig = {
+	alias: 'inputType',
+	label: 'Input type',
+	description: 'Select input type',
+	propertyEditorUI: 'Umb.PropertyEditorUI.Dropdown',
+};
+
+export const manifests: Array<ManifestPropertyEditorUI> = [
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.TextBox',
+		name: 'Text Box Property Editor UI',
+		loader: () => import('./property-editor-ui-text-box.element'),
+		meta: {
+			label: 'Text Box',
+			propertyEditorModel: 'Umbraco.TextBox',
+			icon: 'umb:autofill',
+			group: 'common',
+			config: {
+				properties: [inputTypeConfig],
+				defaultData: [
+					{
+						alias: 'inputType',
+						value: 'text',
+					},
+				],
+			},
+		},
+	},
+	{
+		type: 'propertyEditorUI',
+		alias: 'Umb.PropertyEditorUI.Email',
+		name: 'Email Property Editor UI',
+		loader: () => import('./property-editor-ui-text-box.element'),
+		meta: {
+			label: 'Email',
+			propertyEditorModel: 'Umbraco.EmailAddress',
+			icon: 'umb:message',
+			group: 'common',
+			config: {
+				properties: [inputTypeConfig],
+				defaultData: [
+					{
+						alias: 'inputType',
+						value: 'text',
+					},
+				],
+			},
+		},
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
index 3a89a80f10..3688aad757 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
@@ -161,6 +161,58 @@ export const data: Array<DataTypeDetails> = [
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.DatePicker',
 		data: [],
 	},
+	{
+		name: 'Email',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-13',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.EmailAddress',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.Email',
+		data: [],
+	},
+	{
+		name: 'Text Box',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-14',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.TextBox',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.TextBox',
+		data: [],
+	},
+	{
+		name: 'Multiple Text String',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-15',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.MultipleTextString',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.MultipleTextString',
+		data: [],
+	},
+	{
+		name: 'Dropdown',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-16',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.DropDown.Flexible',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.Dropdown',
+		data: [],
+	},
 ];
 
 // Temp mocked database

From 161ecec6ea83f8c95e0d6bd115272394802c66fd Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 4 Jan 2023 15:06:08 +0100
Subject: [PATCH 5/6] add text area config

---
 .../models/Umbraco.TextArea.ts                | 19 ++++++++++++
 .../property-editors/models/manifests.ts      | 19 ++----------
 .../shared/property-editors/uis/manifests.ts  | 24 ++-------------
 .../uis/textarea/manifests.ts                 | 30 +++++++++++++++++++
 .../src/core/mocks/data/data-type.data.ts     | 13 ++++++++
 5 files changed, 66 insertions(+), 39 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TextArea.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/manifests.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TextArea.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TextArea.ts
new file mode 100644
index 0000000000..c03cc34174
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TextArea.ts
@@ -0,0 +1,19 @@
+import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorModel = {
+	type: 'propertyEditorModel',
+	name: 'Textarea',
+	alias: 'Umbraco.TextArea',
+	meta: {
+		config: {
+			properties: [
+				{
+					alias: 'maxChars',
+					label: 'Maximum allowed characters',
+					description: 'If empty - no character limit',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Number',
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
index 2a6fcb626f..de0a8a07f0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
@@ -9,6 +9,7 @@ import { manifest as emailAddress } from './Umbraco.EmailAddress';
 import { manifest as dropdownFlexible } from './Umbraco.Dropdown.Flexible';
 import { manifest as textBox } from './Umbraco.TextBox';
 import { manifest as multipleTextString } from './Umbraco.MultipleTextString';
+import { manifest as textArea } from './Umbraco.TextArea';
 
 import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
 
@@ -24,6 +25,7 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 	dropdownFlexible,
 	textBox,
 	multipleTextString,
+	textArea,
 	{
 		type: 'propertyEditorModel',
 		name: 'Decimal',
@@ -54,23 +56,6 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 		alias: 'Umbraco.Tags',
 		meta: {},
 	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Textarea',
-		alias: 'Umbraco.TextArea',
-		meta: {
-			config: {
-				properties: [
-					{
-						alias: 'maxChars',
-						label: 'Maximum allowed characters',
-						description: 'If empty - no character limit',
-						propertyEditorUI: 'Umb.PropertyEditorUI.Number',
-					},
-				],
-			},
-		},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'Toggle',
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 301506d8b1..a8a0b54985 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
@@ -9,6 +9,7 @@ import { manifest as treePickerStartNode } from './tree-picker-start-node/manife
 import { manifests as textBoxes } from './text-box/manifests';
 import { manifest as dropdown } from './dropdown/manifests';
 import { manifest as multipleTextString } from './multiple-text-string/manifests';
+import { manifest as textArea } from './textarea/manifests';
 
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
@@ -24,6 +25,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 	treePickerStartNode,
 	dropdown,
 	multipleTextString,
+	textArea,
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.BlockList',
@@ -60,28 +62,6 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 			propertyEditorModel: 'Umbraco.CheckBoxList',
 		},
 	},
-	{
-		type: 'propertyEditorUI',
-		alias: 'Umb.PropertyEditorUI.Textarea',
-		name: 'Textarea Property Editor UI',
-		loader: () => import('./textarea/property-editor-ui-textarea.element'),
-		meta: {
-			label: 'Textarea',
-			icon: 'umb:edit',
-			group: 'common',
-			propertyEditorModel: 'Umbraco.TextArea',
-			config: {
-				properties: [
-					{
-						alias: 'rows',
-						label: 'Number of rows',
-						description: 'If empty - 10 rows would be set as the default value',
-						propertyEditorUI: 'Umb.PropertyEditorUI.Number',
-					},
-				],
-			},
-		},
-	},
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.Number',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/manifests.ts
new file mode 100644
index 0000000000..337454010b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/textarea/manifests.ts
@@ -0,0 +1,30 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.TextArea',
+	name: 'Text Area Property Editor UI',
+	loader: () => import('./property-editor-ui-textarea.element'),
+	meta: {
+		label: 'Text Area',
+		propertyEditorModel: 'Umbraco.TextArea',
+		icon: 'umb:edit',
+		group: 'common',
+		config: {
+			properties: [
+				{
+					alias: 'rows',
+					label: 'Number of rows',
+					description: 'If empty - 10 rows would be set as the default value',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Number',
+				},
+			],
+			defaultData: [
+				{
+					alias: 'rows',
+					value: 10,
+				},
+			],
+		},
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
index 3688aad757..e90888cf12 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
@@ -213,6 +213,19 @@ export const data: Array<DataTypeDetails> = [
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.Dropdown',
 		data: [],
 	},
+	{
+		name: 'Text Area',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-17',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.TextArea',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.TextArea',
+		data: [],
+	},
 ];
 
 // Temp mocked database

From 7fc356aa12b18af5fb33016ee789fbfea8b1f608 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 4 Jan 2023 15:33:36 +0100
Subject: [PATCH 6/6] add document with currently created property editors

---
 .../src/core/mocks/data/data-type.data.ts     | 22 +++---
 .../src/core/mocks/data/document.data.ts      | 78 +++++++++++++++++++
 2 files changed, 89 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
index e90888cf12..744762d3ba 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
@@ -88,7 +88,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-7',
+		key: 'dt-colorPicker',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -101,7 +101,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-8',
+		key: 'dt-contentPicker',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -114,7 +114,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-9',
+		key: 'dt-eyeDropper',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -127,7 +127,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-10',
+		key: 'dt-multiUrlPicker',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -140,7 +140,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-11',
+		key: 'dt-multiNodeTreePicker',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -153,7 +153,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-12',
+		key: 'dt-datePicker',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -166,7 +166,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-13',
+		key: 'dt-email',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -179,7 +179,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-14',
+		key: 'dt-textBox',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -192,7 +192,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-15',
+		key: 'dt-multipleTextString',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -205,7 +205,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-16',
+		key: 'dt-dropdown',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -218,7 +218,7 @@ export const data: Array<DataTypeDetails> = [
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-17',
+		key: 'dt-textArea',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
index dd6365b725..8405ec0fb0 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
@@ -4,6 +4,84 @@ import { DocumentTreeItem, PagedDocumentTreeItem } from '@umbraco-cms/backend-ap
 import type { DocumentDetails } from '@umbraco-cms/models';
 
 export const data: Array<DocumentDetails> = [
+	{
+		name: 'All Property Editors',
+		type: 'document',
+		icon: 'favorite',
+		hasChildren: false,
+		key: '6f31e382-458c-4f96-97ea-cc26c41009d4',
+		isContainer: false,
+		parentKey: null,
+		noAccess: false,
+		isProtected: false,
+		isPublished: false,
+		isEdited: false,
+		isTrashed: false,
+		properties: [
+			{
+				alias: 'colorPicker',
+				label: 'Color Picker',
+				description: '',
+				dataTypeKey: 'dt-colorPicker',
+			},
+			{
+				alias: 'contentPicker',
+				label: 'Content Picker',
+				description: '',
+				dataTypeKey: 'dt-contentPicker',
+			},
+			{
+				alias: 'eyeDropper',
+				label: 'Eye Dropper',
+				description: '',
+				dataTypeKey: 'dt-eyeDropper',
+			},
+			{
+				alias: 'multiUrlPicker',
+				label: 'Multi URL Picker',
+				description: '',
+				dataTypeKey: 'dt-multiUrlPicker',
+			},
+			{
+				alias: 'multiNodeTreePicker',
+				label: 'Multi Node Tree Picker',
+				description: '',
+				dataTypeKey: 'dt-multiNodeTreePicker',
+			},
+			{
+				alias: 'datePicker',
+				label: 'Date Picker',
+				description: '',
+				dataTypeKey: 'dt-datePicker',
+			},
+			{
+				alias: 'email',
+				label: 'Email',
+				description: '',
+				dataTypeKey: 'dt-email',
+			},
+			{
+				alias: 'textBox',
+				label: 'Text Box',
+				description: '',
+				dataTypeKey: 'dt-textBox',
+			},
+			{
+				alias: 'dropdown',
+				label: 'Dropdown',
+				description: '',
+				dataTypeKey: 'dt-dropdown',
+			},
+			{
+				alias: 'textArea',
+				label: 'Text Area',
+				description: '',
+				dataTypeKey: 'dt-textArea',
+			},
+		],
+		data: [],
+		variants: [],
+	},
 	{
 		name: 'Document 1',
 		type: 'document',