Adds umb-input-collection-configuration component

@nielslyngsoe may have comments on how I've reused
`UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL`.

src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts

@@ -11,6 +11,7 @@ export * from './field-dropdown-list/index.js';
 export * from './footer-layout/index.js';
 export * from './header-app/index.js';
 export * from './history/index.js';
+export * from './input-collection-configuration/index.js';
 export * from './input-color/index.js';
 export * from './input-date/index.js';
 export * from './input-dropdown/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/index.ts

@@ -0,0 +1 @@
+export * from './input-collection-configuration.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts

@@ -0,0 +1,143 @@
+import { html, customElement, property, css, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
+import { UMB_DATATYPE_WORKSPACE_MODAL, UMB_DATA_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/data-type';
+import {
+	UmbModalRouteRegistrationController,
+	UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL,
+} from '@umbraco-cms/backoffice/modal';
+import type { UmbDataTypeItemModel } from '@umbraco-cms/backoffice/data-type';
+
+@customElement('umb-input-collection-configuration')
+export class UmbInputCollectionConfigurationElement extends FormControlMixin(UmbLitElement) {
+	protected getFormElement() {
+		return undefined;
+	}
+
+	#itemManager = new UmbRepositoryItemsManager<UmbDataTypeItemModel>(
+		this,
+		UMB_DATA_TYPE_ITEM_REPOSITORY_ALIAS,
+		(x) => x.unique,
+	);
+
+	#createDataTypeModal: UmbModalRouteRegistrationController;
+
+	#propertyEditorUiAlias = 'Umb.PropertyEditorUi.CollectionView';
+
+	@state()
+	private _dataTypePickerModalPath?: string;
+
+	@state()
+	private _item?: UmbDataTypeItemModel;
+
+	@property({ attribute: 'default-value' })
+	defaultValue?: string;
+
+	#setValue(value: string) {
+		this.value = value;
+		this.#itemManager.setUniques(value ? [value] : []);
+		this.dispatchEvent(new UmbChangeEvent());
+	}
+
+	constructor() {
+		super();
+
+		this.observe(this.#itemManager.items, (items) => {
+			this._item = items[0];
+		});
+
+		new UmbModalRouteRegistrationController(this, UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL)
+			.addAdditionalPath(':uiAlias')
+			.onSetup((routingInfo) => {
+				return {
+					data: {
+						propertyEditorUiAlias: routingInfo.uiAlias,
+					},
+					value: undefined,
+				};
+			})
+			.onSubmit((submitData) => {
+				if (submitData?.createNewWithPropertyEditorUiAlias) {
+					this.#createDataType();
+				} else {
+					this.#setValue(submitData?.dataTypeId ?? this.defaultValue ?? '');
+				}
+			})
+			.observeRouteBuilder((routeBuilder) => {
+				this._dataTypePickerModalPath = routeBuilder({ uiAlias: this.#propertyEditorUiAlias });
+			});
+
+		this.#createDataTypeModal = new UmbModalRouteRegistrationController(this, UMB_DATATYPE_WORKSPACE_MODAL)
+			.addAdditionalPath(':uiAlias')
+			.onSetup((params) => {
+				return { data: { entityType: 'data-type', preset: { editorUiAlias: params.uiAlias } } };
+			})
+			.onSubmit((value) => {
+				this.#setValue(value?.unique ?? this.defaultValue ?? '');
+			});
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+
+		if (this.value) {
+			this.#itemManager.setUniques([this.value as string]);
+		}
+	}
+
+	#clearDataType() {
+		this.#setValue('');
+	}
+
+	#createDataType() {
+		this.#createDataTypeModal.open({ uiAlias: this.#propertyEditorUiAlias }, 'create/null');
+	}
+
+	render() {
+		return !this.value ? this.#renderCreate() : this.#renderConfigured();
+	}
+
+	#renderCreate() {
+		if (!this._dataTypePickerModalPath) return nothing;
+		return html`<uui-button
+			id="create-button"
+			color="default"
+			look="placeholder"
+			label="Configure as a collection"
+			href=${this._dataTypePickerModalPath}></uui-button>`;
+	}
+
+	#renderConfigured() {
+		if (!this._item || !this._dataTypePickerModalPath) return nothing;
+		return html`
+			<uui-ref-list>
+				<uui-ref-node-data-type standalone name=${this._item.name} detail=${this._item.unique}>
+					<uui-action-bar slot="actions">
+						<uui-button
+							label=${this.localize.term('general_choose')}
+							href=${this._dataTypePickerModalPath}></uui-button>
+						<uui-button @click=${this.#clearDataType} label=${this.localize.term('general_remove')}></uui-button>
+					</uui-action-bar>
+				</uui-ref-node-data-type>
+			</uui-ref-list>
+		`;
+	}
+
+	static styles = [
+		css`
+			#create-button {
+				width: 100%;
+			}
+		`,
+	];
+}
+
+export default UmbInputCollectionConfigurationElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-collection-configuration': UmbInputCollectionConfigurationElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/data-type/repository/index.ts

@@ -2,3 +2,5 @@ export { UmbCopyDataTypeRepository, COPY_DATA_TYPE_REPOSITORY_ALIAS } from './co
 export { UmbDataTypeDetailRepository, UMB_DATA_TYPE_DETAIL_REPOSITORY_ALIAS } from './detail/index.js';
 export { UmbDataTypeItemRepository, UMB_DATA_TYPE_ITEM_REPOSITORY_ALIAS } from './item/index.js';
 export { UmbMoveDataTypeRepository, MOVE_DATA_TYPE_REPOSITORY_ALIAS } from './move/index.js';
+
+export type { UmbDataTypeItemModel } from './item/index.js';