Merge pull request #367 from umbraco/feature/property-editor-config-models

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',
+				},
+			],
+		},
+	},
+};

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: {},
+};

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: {},
+};

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,
+				},
+			],
+		},
+	},
+};

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,
+				},
+			],
+		},
+	},
+};

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,
+				},
+			],
+		},
+	},
+};

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',
+				},
+			],
+		},
+	},
+};

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,
+				},
+			],
+		},
+	},
+};

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts

@@ -2,6 +2,14 @@ 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 { 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 { manifest as textArea } from './Umbraco.TextArea';
 
 import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
 
@@ -9,37 +17,21 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 	colorPicker,
 	eyeDropper,
 	contentPicker,
+	dateTime,
+	emailAddress,
 	json,
-	{
-		type: 'propertyEditorModel',
-		name: 'Multi URL Picker',
-		alias: 'Umbraco.MultiUrlPicker',
-		meta: {},
-	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Multinode Treepicker',
-		alias: 'Umbraco.MultiNodeTreePicker',
-		meta: {},
-	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Date/Time',
-		alias: 'Umbraco.DateTime',
-		meta: {},
-	},
+	multiUrlPicker,
+	multiNodeTreePicker,
+	dropdownFlexible,
+	textBox,
+	multipleTextString,
+	textArea,
 	{
 		type: 'propertyEditorModel',
 		name: 'Decimal',
 		alias: 'Umbraco.Decimal',
 		meta: {},
 	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Email address',
-		alias: 'Umbraco.EmailAddress',
-		meta: {},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'Label',
@@ -64,46 +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: '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',
@@ -158,12 +110,6 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 		alias: 'Umbraco.CheckBoxList',
 		meta: {},
 	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Dropdown',
-		alias: 'Umbraco.DropDown.Flexible',
-		meta: {},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'List view',
@@ -176,12 +122,6 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
 		alias: 'Umbraco.RadioButtonList',
 		meta: {},
 	},
-	{
-		type: 'propertyEditorModel',
-		name: 'Repeatable textstrings',
-		alias: 'Umbraco.MultipleTextstring',
-		meta: {},
-	},
 	{
 		type: 'propertyEditorModel',
 		name: 'File upload',

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/shared/property-editor-config/property-editor-config.element.ts

@@ -99,7 +99,7 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement {
 	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() {

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',
+				},
+			],
+		},
+	},
+};

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;
+	}
+}

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';

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);
+  });
+});

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',
+				},
+			],
+		},
+	},
+};

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;
+	}
+}

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';

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);
+  });
+});

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts

@@ -1,14 +1,31 @@
-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 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 { 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';
 
 export const manifests: Array<ManifestPropertyEditorUI> = [
-	ColorPicker,
-	ContentPicker,
-	EyeDropper,
-	TreePicker,
+	colorPicker,
+	contentPicker,
+	datePicker,
+	eyeDropper,
+	multiUrlPicker,
+	overlaySize,
+	...textBoxes,
+	treePicker,
+	treePickerStartNode,
+	dropdown,
+	multipleTextString,
+	textArea,
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.BlockList',
@@ -45,40 +62,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',
-		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',

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',
+				},
+			],
+		},
+	},
+};

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;
+	}
+}

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';

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);
+  });
+});

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: '',
+	},
+};

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;
+	}
+}

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';

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);
+  });
+});

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: '',
+	},
+};

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;
+	}
+}

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';

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);
+  });
+});

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',
+					},
+				],
+			},
+		},
+	},
+];

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,
+				},
+			],
+		},
+	},
+};

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: '',
+	},
+};

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;
+	}
+}

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';

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);
+  });
+});

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',
+				},
+			],
+		},
 	},
 };

src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts

@@ -84,11 +84,11 @@ export const data: Array<DataTypeDetails> = [
 		data: [],
 	},
 	{
-		name: 'Umbraco.ColorPicker',
+		name: 'Color Picker',
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-7',
+		key: 'dt-colorPicker',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -97,11 +97,11 @@ export const data: Array<DataTypeDetails> = [
 		data: [],
 	},
 	{
-		name: 'Umbraco.ContentPicker',
+		name: 'Content Picker',
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-8',
+		key: 'dt-contentPicker',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -110,11 +110,11 @@ export const data: Array<DataTypeDetails> = [
 		data: [],
 	},
 	{
-		name: 'Umbraco.ColorPicker.EyeDropper',
+		name: 'Eye Dropper',
 		type: 'data-type',
 		icon: 'umb:autofill',
 		hasChildren: false,
-		key: 'dt-9',
+		key: 'dt-eyeDropper',
 		isContainer: false,
 		parentKey: null,
 		isFolder: false,
@@ -122,6 +122,110 @@ export const data: Array<DataTypeDetails> = [
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.EyeDropper',
 		data: [],
 	},
+	{
+		name: 'Multi URL Picker',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-multiUrlPicker',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.MultiUrlPicker',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.MultiUrlPicker',
+		data: [],
+	},
+	{
+		name: 'Multi Node Tree Picker',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-multiNodeTreePicker',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.MultiNodeTreePicker',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.TreePicker',
+		data: [],
+	},
+	{
+		name: 'Date Picker',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-datePicker',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.DateTime',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.DatePicker',
+		data: [],
+	},
+	{
+		name: 'Email',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-email',
+		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-textBox',
+		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-multipleTextString',
+		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-dropdown',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.DropDown.Flexible',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.Dropdown',
+		data: [],
+	},
+	{
+		name: 'Text Area',
+		type: 'data-type',
+		icon: 'umb:autofill',
+		hasChildren: false,
+		key: 'dt-textArea',
+		isContainer: false,
+		parentKey: null,
+		isFolder: false,
+		propertyEditorModelAlias: 'Umbraco.TextArea',
+		propertyEditorUIAlias: 'Umb.PropertyEditorUI.TextArea',
+		data: [],
+	},
 ];
 
 // Temp mocked database

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',