Merge pull request #1680 from umbraco/feature/property-editor-ui/select

Feature: "Select" Property Editor UI

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/schemas/Umbraco.Tags.ts

@@ -18,7 +18,7 @@ export const manifest: ManifestPropertyEditorSchema = {
 					alias: 'storageType',
 					label: 'Storage Type',
 					description: '',
-					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Dropdown',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Select',
 					config: [
 						{
 							alias: 'items',

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts

@@ -14,6 +14,7 @@ import { manifest as numberRange } from './number-range/manifests.js';
 import { manifest as orderDirection } from './order-direction/manifests.js';
 import { manifest as overlaySize } from './overlay-size/manifests.js';
 import { manifest as radioButtonList } from './radio-button-list/manifests.js';
+import { manifest as select } from './select/manifests.js';
 import { manifest as slider } from './slider/manifests.js';
 import { manifest as textArea } from './textarea/manifests.js';
 import { manifest as toggle } from './toggle/manifests.js';
@@ -43,6 +44,7 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 	orderDirection,
 	overlaySize,
 	radioButtonList,
+	select,
 	slider,
 	textArea,
 	toggle,

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/select/manifests.ts

@@ -0,0 +1,22 @@
+import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: ManifestPropertyEditorUi = {
+	type: 'propertyEditorUi',
+	alias: 'Umb.PropertyEditorUi.Select',
+	name: 'Select Property Editor UI',
+	element: () => import('./property-editor-ui-select.element.js'),
+	meta: {
+		label: 'Select',
+		icon: 'icon-list',
+		group: 'pickers',
+		settings: {
+			properties: [
+				{
+					alias: 'items',
+					label: 'Add options',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.MultipleTextString',
+				},
+			],
+		},
+	},
+};

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/select/property-editor-ui-select.element.ts

@@ -0,0 +1,42 @@
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+
+/**
+ * @element umb-property-editor-ui-select
+ */
+@customElement('umb-property-editor-ui-select')
+export class UmbPropertyEditorUISelectElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+	@property()
+	value?: string = '';
+
+	@state()
+	private _list: Array<Option> = [];
+
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		if (!config) return;
+
+		const listData = config.getValueByAlias<string[]>('items');
+		this._list = listData?.map((option) => ({ value: option, name: option, selected: option === this.value })) ?? [];
+	}
+
+	#onChange(event: UUISelectEvent) {
+		this.value = event.target.value as string;
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
+	}
+
+	render() {
+		return html`<uui-select .options=${this._list} @change=${this.#onChange}></uui-select>`;
+	}
+}
+
+export default UmbPropertyEditorUISelectElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-select': UmbPropertyEditorUISelectElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/select/property-editor-ui-select.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, Story } from '@storybook/web-components';
+import type { UmbPropertyEditorUISelectElement } from './property-editor-ui-select.element.js';
+import { html } from '@umbraco-cms/backoffice/external/lit';
+
+import './property-editor-ui-select.element.js';
+
+export default {
+	title: 'Property Editor UIs/Select',
+	component: 'umb-property-editor-ui-select',
+	id: 'umb-property-editor-ui-select',
+} as Meta;
+
+export const AAAOverview: Story<UmbPropertyEditorUISelectElement> = () =>
+	html`<umb-property-editor-ui-select></umb-property-editor-ui-select>`;
+AAAOverview.storyName = 'Overview';

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/select/property-editor-ui-select.test.ts

@@ -0,0 +1,21 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbPropertyEditorUISelectElement } from './property-editor-ui-select.element.js';
+import { type UmbTestRunnerWindow, defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+
+describe('UmbPropertyEditorUISelectElement', () => {
+	let element: UmbPropertyEditorUISelectElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-property-editor-ui-select></umb-property-editor-ui-select> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbPropertyEditorUISelectElement);
+	});
+
+	if ((window as UmbTestRunnerWindow).__UMBRACO_TEST_RUN_A11Y_TEST) {
+		it('passes the a11y audit', async () => {
+			await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+		});
+	}
+});