UmbPropertyEditorUIDocumentTypePickerElement

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/manifests.ts

@@ -0,0 +1,23 @@
+import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifest: ManifestPropertyEditorUi = {
+	type: 'propertyEditorUi',
+	alias: 'Umb.PropertyEditorUi.DocumentTypePicker',
+	name: 'Document Type Picker Property Editor UI',
+	js: () => import('./property-editor-ui-document-type-picker.element.js'),
+	meta: {
+		label: 'Document Type Picker',
+		icon: 'icon-document-dashed-line',
+		group: 'advanced',
+		settings: {
+			properties: [
+				{
+					alias: 'showOpenButton',
+					label: 'Show open button',
+					description: 'Opens the node in a dialog',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+				},
+			],
+		},
+	},
+};

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts

@@ -0,0 +1,57 @@
+import type { UmbInputDocumentTypeElement } from '../../components/input-document-type/input-document-type.element.js';
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+
+@customElement('umb-property-editor-ui-document-type-picker')
+export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+	private _value: Array<string> = [];
+
+	@property({ type: Array })
+	public get value(): Array<string> {
+		return this._value;
+	}
+	public set value(value: Array<string>) {
+		this._value = value || [];
+	}
+
+	@property({ attribute: false })
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		const validationLimit = config?.find((x) => x.alias === 'validationLimit');
+
+		this._limitMin = (validationLimit?.value as any)?.min;
+		this._limitMax = (validationLimit?.value as any)?.max;
+	}
+
+	@state()
+	private _limitMin?: number;
+	@state()
+	private _limitMax?: number;
+
+	private _onChange(event: CustomEvent) {
+		this.value = (event.target as UmbInputDocumentTypeElement).selectedIds;
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
+
+	// TODO: Implement mandatory?
+	render() {
+		return html`
+			<umb-input-document-type
+				@change=${this._onChange}
+				.selectedIds=${this._value}
+				.min=${this._limitMin ?? 0}
+				.max=${this._limitMax ?? Infinity}
+				>Add</umb-input-document-type
+			>
+		`;
+	}
+}
+
+export default UmbPropertyEditorUIDocumentTypePickerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-document-type-picker': UmbPropertyEditorUIDocumentTypePickerElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.stories.ts

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

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/manifests.ts

@@ -0,0 +1,4 @@
+import { manifest as documentTypePickerUI } from './document-type-picker/manifests.js';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestTypes> = [documentTypePickerUI];

src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.stories.ts

@@ -5,7 +5,7 @@ import { html } from '@umbraco-cms/backoffice/external/lit';
 import './property-editor-ui-document-picker.element.js';
 
 export default {
-	title: 'Property Editor UIs/Content Picker',
+	title: 'Property Editor UIs/Document Picker',
 	component: 'umb-property-editor-ui-document-picker',
 	id: 'umb-property-editor-ui-document-picker',
 } as Meta;