add tags

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

@@ -17,7 +17,7 @@ export const manifest: ManifestPropertyEditorModel = {
 					alias: 'storageType',
 					label: 'Storage Type',
 					description: '',
-					propertyEditorUI: 'Umb.PropertyEditorUI.Dropdown',
+					propertyEditorUI: 'Umb.PropertyEditorUI.Tags.StorageType',
 				},
 			],
 			defaultData: [

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

@@ -11,7 +11,7 @@ import { manifest as multipleTextString } from './multiple-text-string/manifests
 import { manifest as textArea } from './textarea/manifests';
 import { manifest as slider } from './slider/manifests';
 import { manifest as toggle } from './toggle/manifests';
-import { manifest as tags } from './tags/manifests';
+import { manifests as tags } from './tags/manifests';
 import { manifest as markdownEditor } from './markdown-editor/manifests';
 import { manifest as radioButtonList } from './radio-button-list/manifests';
 import { manifest as checkboxList } from './checkbox-list/manifests';
@@ -42,7 +42,6 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 	textArea,
 	slider,
 	toggle,
-	tags,
 	markdownEditor,
 	radioButtonList,
 	checkboxList,
@@ -61,6 +60,7 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
 	...blockGrid,
 	...collectionView,
 	...tinyMCE,
+	...tags,
 	{
 		type: 'propertyEditorUI',
 		alias: 'Umb.PropertyEditorUI.Number',

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/manifests.ts

@@ -0,0 +1,14 @@
+import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
+
+export const manifest: ManifestPropertyEditorUI = {
+	type: 'propertyEditorUI',
+	alias: 'Umb.PropertyEditorUI.Tags.StorageType',
+	name: 'Tags Storage Type Property Editor UI',
+	loader: () => import('./property-editor-ui-tags-storage-type.element'),
+	meta: {
+		label: 'Tags Storage Type',
+		propertyEditorModel: '',
+		icon: 'umb:autofill',
+		group: 'common',
+	},
+};

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.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-tags-storage-type
+ */
+@customElement('umb-property-editor-ui-tags-storage-type')
+export class UmbPropertyEditorUITagsStorageTypeElement extends LitElement {
+	static styles = [UUITextStyles];
+
+	@property()
+	value = '';
+
+	@property({ type: Array, attribute: false })
+	public config = [];
+
+	render() {
+		return html`<div>umb-property-editor-ui-tags-storage-type</div>`;
+	}
+}
+
+export default UmbPropertyEditorUITagsStorageTypeElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-tags-storage-type': UmbPropertyEditorUITagsStorageTypeElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.stories.ts

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbPropertyEditorUITagsStorageTypeElement } from './property-editor-ui-tags-storage-type.element';
+import './property-editor-ui-tags-storage-type.element';
+
+export default {
+	title: 'Property Editor UIs/Tags Storage Type',
+	component: 'umb-property-editor-ui-tags-storage-type',
+	id: 'umb-property-editor-ui-tags-storage-type',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUITagsStorageTypeElement> = () =>
+	html`<umb-property-editor-ui-tags-storage-type></umb-property-editor-ui-tags-storage-type>`;
+AAAOverview.storyName = 'Overview';

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tags/config/storage-type/property-editor-ui-tags-storage-type.test.ts

@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUITagsStorageTypeElement } from './property-editor-ui-tags-storage-type.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+
+describe('UmbPropertyEditorUITagsStorageTypeElement', () => {
+  let element: UmbPropertyEditorUITagsStorageTypeElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-property-editor-ui-tags-storage-type></umb-property-editor-ui-tags-storage-type> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbPropertyEditorUITagsStorageTypeElement);
+  });
+
+  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/tags/manifests.ts

@@ -1,6 +1,7 @@
+import { manifest as storageType } from './config/storage-type/manifests';
 import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
 
-export const manifest: ManifestPropertyEditorUI = {
+const manifest: ManifestPropertyEditorUI = {
 	type: 'propertyEditorUI',
 	alias: 'Umb.PropertyEditorUI.Tags',
 	name: 'Tags Property Editor UI',
@@ -12,3 +13,7 @@ export const manifest: ManifestPropertyEditorUI = {
 		group: 'common',
 	},
 };
+
+const config: Array<ManifestPropertyEditorUI> = [storageType];
+
+export const manifests = [manifest, ...config];