From a68971360efcd9823806cd0bab56ddd4460108fb Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 22 Feb 2024 17:07:21 +0100
Subject: [PATCH 01/15] Feature: System and DT fields component

---
 .../field-dropdown-list.element.ts            | 144 ++++++++++++++++++
 .../field-dropdown-list.stories.ts            |  50 ++++++
 .../field-dropdown-list.test.ts               |  20 +++
 .../core/components/field-list-input/index.ts |   1 +
 .../src/packages/core/components/index.ts     |   1 +
 ...lating-page-field-builder-modal.element.ts |   8 +-
 .../umbraco-news-dashboard.element.ts         |   1 +
 7 files changed, 224 insertions(+), 1 deletion(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.test.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/index.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.element.ts
new file mode 100644
index 0000000000..627eb7e158
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.element.ts
@@ -0,0 +1,144 @@
+import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
+import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { css, html, customElement, property, repeat, state, query } from '@umbraco-cms/backoffice/external/lit';
+import type { UUIComboboxElement, UUIComboboxEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_DOCUMENT_TYPE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import { UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+
+@customElement('umb-field-dropdown-list')
+export class UmbFieldDropdownListElement extends UmbLitElement {
+	@property({ type: String })
+	public value = '';
+
+	#documentTypeDetailRepository = new UmbDocumentTypeDetailRepository(this);
+
+	#unique = new UmbStringState<string>('');
+	readonly unique = this.#unique.asObservable();
+
+	@property({ type: String })
+	set documentTypeUnique(value: string) {
+		this.#unique.setValue(value);
+	}
+	get documentTypeUnique(): string | null | undefined {
+		return this.#unique.getValue();
+	}
+
+	@state()
+	private _documentTypeName?: string;
+
+	@state()
+	private _documentTypeIcon?: string;
+
+	@state()
+	private _customFields: Array<UmbPropertyTypeModel> = [];
+
+	@query('uui-combobox')
+	private _combobox!: UUIComboboxElement;
+
+	private _systemFields = [
+		{ value: 'sortOrder', name: this.localize.term('general_sort'), group: 'System Fields' },
+		{ value: 'updateDate', name: this.localize.term('content_updateDate'), group: 'System Fields' },
+		{ value: 'updater', name: this.localize.term('content_updatedBy'), group: 'System Fields' },
+		{ value: 'createDate', name: this.localize.term('content_createDate'), group: 'System Fields' },
+		{ value: 'owner', name: this.localize.term('content_createBy'), group: 'System Fields' },
+		{ value: 'published', name: this.localize.term('content_isPublished'), group: 'System Fields' },
+		{ value: 'contentTypeAlias', name: this.localize.term('content_documentType'), group: 'System Fields' },
+		{ value: 'email', name: this.localize.term('general_email'), group: 'System Fields' },
+		{ value: 'username', name: this.localize.term('general_username'), group: 'System Fields' },
+	];
+
+	constructor() {
+		super();
+		this.observe(this.unique, async (unique) => {
+			if (unique) {
+				const { data } = await this.#documentTypeDetailRepository.requestByUnique(unique);
+				this._customFields = data?.properties ?? [];
+				this._documentTypeName = data?.name;
+				this._documentTypeIcon = data?.icon;
+			} else {
+				this._customFields = [];
+				this._documentTypeIcon = undefined;
+				this._documentTypeName = undefined;
+			}
+			this.value = '';
+			this.dispatchEvent(new UmbChangeEvent());
+		});
+	}
+
+	#changeFieldType() {
+		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, async (modalManager) => {
+			if (modalManager) {
+				// TODO: Make as mode for the Picker Modal, so the click to select immediately submits the modal(And in that mode we do not want to see a Submit button).
+				const modalContext = modalManager.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, {
+					data: {
+						hideTreeRoot: true,
+						multiple: false,
+					},
+					value: {
+						selection: this.documentTypeUnique ? [this.documentTypeUnique] : [],
+					},
+				});
+
+				const modalValue = await modalContext?.onSubmit();
+				this.documentTypeUnique = modalValue.selection[0] ?? '';
+			}
+		});
+	}
+
+	#onChange(e: UUIComboboxEvent) {
+		e.stopPropagation();
+		const alias = (e.composedPath()[0] as UUIComboboxElement).value as string;
+		this.value = alias;
+		this.dispatchEvent(new UmbChangeEvent());
+	}
+
+	render() {
+		return html`
+			<uui-ref-node
+				@open=${this.#changeFieldType}
+				.name=${this._documentTypeName ?? 'System Field'}
+				@change=${this.#onChange}>
+				<uui-icon name=${this._documentTypeIcon ?? 'icon-database'} slot="icon"></uui-icon>
+				<uui-combobox slot="tag" .value=${this.value}>
+					<uui-combobox-list>
+						${this.documentTypeUnique
+							? repeat(
+									this._customFields,
+									(item) => item.id,
+									(item) =>
+										html`<uui-combobox-list-option .value=${item.alias}>${item.alias}</uui-combobox-list-option>`,
+							  )
+							: repeat(
+									this._systemFields,
+									(item) => item.value,
+									(item) =>
+										html`<uui-combobox-list-option .value=${item.value}>${item.name}</uui-combobox-list-option>`,
+							  )}
+					</uui-combobox-list>
+				</uui-combobox>
+			</uui-ref-node>
+		`;
+	}
+
+	static styles = [
+		css`
+			uui-ref-node {
+				width: auto;
+			}
+
+			uui-combobox-list-option {
+				padding: calc(var(--uui-size-2, 6px) + 1px);
+			}
+		`,
+	];
+}
+
+export default UmbFieldDropdownListElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-field-dropdown-list': UmbFieldDropdownListElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.stories.ts
new file mode 100644
index 0000000000..3f689947cd
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.stories.ts
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './field-dropdown-list.element.js';
+import type { UmbFieldDropdownListElement } from './field-dropdown-list.element.js';
+
+const meta: Meta<UmbFieldDropdownListElement> = {
+	title: 'Components/Inputs/Field Dropdown List',
+	component: 'umb-field-dropdown-list',
+};
+
+export default meta;
+type Story = StoryObj<UmbFieldDropdownListElement>;
+
+export const Overview: Story = {
+	args: {
+		options: [
+			{
+				name: 'One',
+				value: 'One',
+			},
+			{
+				name: 'Two',
+				value: 'Two',
+			},
+			{
+				name: 'Three',
+				value: 'Three',
+			},
+		],
+	},
+};
+
+export const WithSelectedValue: Story = {
+	args: {
+		options: [
+			{
+				name: 'One',
+				value: 'One',
+			},
+			{
+				name: 'Two',
+				value: 'Two',
+				selected: true,
+			},
+			{
+				name: 'Three',
+				value: 'Three',
+			},
+		],
+	},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.test.ts
new file mode 100644
index 0000000000..2f741562a7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.test.ts
@@ -0,0 +1,20 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbFieldDropdownListElement } from './field-dropdown-list.element.js';
+import { type UmbTestRunnerWindow, defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+describe('UmbInputDateElement', () => {
+	let element: UmbFieldDropdownListElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-field-dropdown-list></umb-field-dropdown-list> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbFieldDropdownListElement);
+	});
+
+	if ((window as UmbTestRunnerWindow).__UMBRACO_TEST_RUN_A11Y_TEST) {
+		it('passes the a11y audit', async () => {
+			await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+		});
+	}
+});
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/index.ts
new file mode 100644
index 0000000000..2864ccf8fc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/index.ts
@@ -0,0 +1 @@
+export * from './field-dropdown-list.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
index 50727337dc..27c0026b8e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
@@ -8,6 +8,7 @@ export * from './dropdown/index.js';
 export * from './empty-state/index.js';
 export * from './entity-actions-bundle/index.js';
 export * from './extension-slot/index.js';
+export * from './field-list-input/index.js';
 export * from './footer-layout/index.js';
 export * from './header-app/index.js';
 export * from './history/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
index 37afe148ca..de2866283f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
@@ -6,6 +6,8 @@ import type {
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+import { UmbFieldDropdownListElement } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-templating-page-field-builder-modal')
 export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseElement<
@@ -36,6 +38,10 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
 
 	/** TODO: Implement "Choose field" */
 
+	#onChangeFieldValue(e: Event) {
+		this._field = (e.target as UmbFieldDropdownListElement).value;
+	}
+
 	render() {
 		return html`
 			<umb-body-layout headline=${this.localize.term('template_insert')}>
@@ -44,7 +50,7 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
 						<uui-label for="page-field-value">
 							<umb-localize key="templateEditor_chooseField">Choose field</umb-localize>
 						</uui-label>
-						(Not implemented yet)
+						<umb-field-dropdown-list @change=${this.#onChangeFieldValue}></umb-field-dropdown-list>
 
 						<uui-label for="page-field-default-value">
 							<umb-localize key="templateEditor_defaultValue">Default value</umb-localize>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts
index e22db293ed..4d03dfacd4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts
@@ -28,6 +28,7 @@ export class UmbUmbracoNewsDashboardElement extends UmbLitElement {
 	render() {
 		return html`
 			<uui-box class="uui-text">
+				<umb-field-dropdown-list></umb-field-dropdown-list>
 				<h1 class="uui-h2" style="margin-top: var(--uui-size-layout-1);">Welcome, ${this.name}</h1>
 				<p class="uui-lead">
 					This is a preview version of Umbraco, where you can have a first-hand look at the new Backoffice.

From c727fad693b1bcedfed66667f5f0a54b36a81509 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 23 Feb 2024 10:02:48 +0100
Subject: [PATCH 02/15] change from ref node to button

---
 .../field-dropdown-list.element.ts            | 62 +++++++++----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.element.ts
index 627eb7e158..be1e04ad8e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.element.ts
@@ -1,7 +1,7 @@
 import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { css, html, customElement, property, repeat, state, query } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIComboboxElement, UUIComboboxEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_DOCUMENT_TYPE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
@@ -34,9 +34,6 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 	@state()
 	private _customFields: Array<UmbPropertyTypeModel> = [];
 
-	@query('uui-combobox')
-	private _combobox!: UUIComboboxElement;
-
 	private _systemFields = [
 		{ value: 'sortOrder', name: this.localize.term('general_sort'), group: 'System Fields' },
 		{ value: 'updateDate', name: this.localize.term('content_updateDate'), group: 'System Fields' },
@@ -70,7 +67,6 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 	#changeFieldType() {
 		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, async (modalManager) => {
 			if (modalManager) {
-				// TODO: Make as mode for the Picker Modal, so the click to select immediately submits the modal(And in that mode we do not want to see a Submit button).
 				const modalContext = modalManager.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, {
 					data: {
 						hideTreeRoot: true,
@@ -96,38 +92,42 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<uui-ref-node
-				@open=${this.#changeFieldType}
-				.name=${this._documentTypeName ?? 'System Field'}
-				@change=${this.#onChange}>
-				<uui-icon name=${this._documentTypeIcon ?? 'icon-database'} slot="icon"></uui-icon>
-				<uui-combobox slot="tag" .value=${this.value}>
-					<uui-combobox-list>
-						${this.documentTypeUnique
-							? repeat(
-									this._customFields,
-									(item) => item.id,
-									(item) =>
-										html`<uui-combobox-list-option .value=${item.alias}>${item.alias}</uui-combobox-list-option>`,
-							  )
-							: repeat(
-									this._systemFields,
-									(item) => item.value,
-									(item) =>
-										html`<uui-combobox-list-option .value=${item.value}>${item.name}</uui-combobox-list-option>`,
-							  )}
-					</uui-combobox-list>
-				</uui-combobox>
-			</uui-ref-node>
+			<uui-button look="outline" @click=${this.#changeFieldType} compact>
+				<uui-icon
+					.name=${this.documentTypeUnique
+						? this._documentTypeIcon
+							? this._documentTypeIcon
+							: 'icon-circle-dotted'
+						: 'icon-database'}></uui-icon>
+				${this.documentTypeUnique ? this._documentTypeName : this.localize.term('formSettings_systemFields')}
+			</uui-button>
+
+			<uui-combobox slot="tag" .value=${this.value} @change=${this.#onChange}>
+				<uui-combobox-list>
+					${this.documentTypeUnique
+						? repeat(
+								this._customFields,
+								(item) => item.id,
+								(item) => html`<uui-combobox-list-option .value=${item.alias}>${item.alias}</uui-combobox-list-option>`,
+						  )
+						: repeat(
+								this._systemFields,
+								(item) => item.value,
+								(item) => html`<uui-combobox-list-option .value=${item.value}>${item.name}</uui-combobox-list-option>`,
+						  )}
+				</uui-combobox-list>
+			</uui-combobox>
 		`;
 	}
 
 	static styles = [
 		css`
-			uui-ref-node {
-				width: auto;
+			:host {
+				display: flex;
+			}
+			:host > * {
+				flex: 1;
 			}
-
 			uui-combobox-list-option {
 				padding: calc(var(--uui-size-2, 6px) + 1px);
 			}

From e73a3dbe837e8e639280735d1af9ec4b9f934cb4 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Mon, 26 Feb 2024 10:12:46 +0100
Subject: [PATCH 03/15] rename

---
 .../field-dropdown-list.element.ts                              | 0
 .../field-dropdown-list.stories.ts                              | 0
 .../field-dropdown-list.test.ts                                 | 0
 .../{field-list-input => field-dropdown-list}/index.ts          | 0
 src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts | 2 +-
 5 files changed, 1 insertion(+), 1 deletion(-)
 rename src/Umbraco.Web.UI.Client/src/packages/core/components/{field-list-input => field-dropdown-list}/field-dropdown-list.element.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/core/components/{field-list-input => field-dropdown-list}/field-dropdown-list.stories.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/core/components/{field-list-input => field-dropdown-list}/field-dropdown-list.test.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/core/components/{field-list-input => field-dropdown-list}/index.ts (100%)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.stories.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.stories.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.stories.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.test.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/field-dropdown-list.test.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.test.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/components/field-list-input/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
index 27c0026b8e..a4b3fa82cd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts
@@ -8,7 +8,7 @@ export * from './dropdown/index.js';
 export * from './empty-state/index.js';
 export * from './entity-actions-bundle/index.js';
 export * from './extension-slot/index.js';
-export * from './field-list-input/index.js';
+export * from './field-dropdown-list/index.js';
 export * from './footer-layout/index.js';
 export * from './header-app/index.js';
 export * from './history/index.js';

From db0485546c2e8feee03fb82eebc097007c2c57f7 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Mon, 26 Feb 2024 10:16:47 +0100
Subject: [PATCH 04/15] import type

---
 .../templating-page-field-builder-modal.element.ts             | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
index de2866283f..7ed3415e9f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
@@ -6,8 +6,7 @@ import type {
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { UmbFieldDropdownListElement } from '@umbraco-cms/backoffice/components';
+import type { UmbFieldDropdownListElement } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-templating-page-field-builder-modal')
 export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseElement<

From 40467a5cb070753dd4733eaca4e82dbb73ee9802 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Mon, 26 Feb 2024 15:10:00 +0100
Subject: [PATCH 05/15] add bulk actions for publish and unpublish on documents

---
 .../publish/publish.action.ts                 | 11 ++-
 .../unpublish/unpublish.action.ts             | 11 ++-
 .../document-variant-manager.context.ts       | 72 ++++++++++++++++++-
 3 files changed, 89 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/publish/publish.action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/publish/publish.action.ts
index c20657de25..6c1ddffc5f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/publish/publish.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/publish/publish.action.ts
@@ -1,14 +1,21 @@
 import type { UmbDocumentDetailRepository } from '../../repository/index.js';
+import { UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT } from '../../global-contexts/index.js';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-bulk-action';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbDocumentPublishEntityBulkAction extends UmbEntityBulkActionBase<UmbDocumentDetailRepository> {
+	#variantManagerContext?: typeof UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT.TYPE;
+
 	constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array<string>) {
 		super(host, repositoryAlias, selection);
+
+		this.consumeContext(UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT, (context) => {
+			this.#variantManagerContext = context;
+		});
 	}
 
 	async execute() {
-		console.log(`execute publish for: ${this.selection}`);
-		//await this.repository?.publish();
+		if (!this.#variantManagerContext) throw new Error('Variant manager context is missing');
+		await this.#variantManagerContext.publishIndescriminate(this.selection);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/unpublish/unpublish.action.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/unpublish/unpublish.action.ts
index 03e9d01c7a..d6d42ec456 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/unpublish/unpublish.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/unpublish/unpublish.action.ts
@@ -1,14 +1,21 @@
 import type { UmbDocumentDetailRepository } from '../../repository/index.js';
+import { UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT } from '../../global-contexts/index.js';
 import { UmbEntityBulkActionBase } from '@umbraco-cms/backoffice/entity-bulk-action';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbDocumentUnpublishEntityBulkAction extends UmbEntityBulkActionBase<UmbDocumentDetailRepository> {
+	#variantManagerContext?: typeof UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT.TYPE;
+
 	constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array<string>) {
 		super(host, repositoryAlias, selection);
+
+		this.consumeContext(UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT, (context) => {
+			this.#variantManagerContext = context;
+		});
 	}
 
 	async execute() {
-		console.log(`execute unpublish for: ${this.selection}`);
-		//await this.repository?.unpublish();
+		if (!this.#variantManagerContext) throw new Error('Variant manager context is missing');
+		await this.#variantManagerContext.unpublishIndescriminate(this.selection);
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/global-contexts/document-variant-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/global-contexts/document-variant-manager.context.ts
index d0cababfed..b0e04e27f6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/global-contexts/document-variant-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/global-contexts/document-variant-manager.context.ts
@@ -11,7 +11,11 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
-import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
+import {
+	UMB_APP_LANGUAGE_CONTEXT,
+	UmbLanguageCollectionRepository,
+	type UmbLanguageDetailModel,
+} from '@umbraco-cms/backoffice/language';
 
 export class UmbDocumentVariantManagerContext
 	extends UmbContextBase<UmbDocumentVariantManagerContext>
@@ -19,8 +23,10 @@ export class UmbDocumentVariantManagerContext
 {
 	#publishingRepository = new UmbDocumentPublishingRepository(this);
 	#documentRepository = new UmbDocumentDetailRepository(this);
+	#languageRepository = new UmbLanguageCollectionRepository(this);
 	#modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE;
 	#appLanguageCulture?: string;
+	#languageCollection: Array<UmbLanguageDetailModel> = [];
 
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT);
@@ -34,6 +40,10 @@ export class UmbDocumentVariantManagerContext
 				this.#appLanguageCulture = culture?.toLowerCase();
 			});
 		});
+
+		this.#languageRepository.requestCollection({}).then(({ data }) => {
+			this.#languageCollection = data?.items ?? [];
+		});
 	}
 
 	/**
@@ -112,6 +122,66 @@ export class UmbDocumentVariantManagerContext
 			await this.#publishingRepository.unpublish(documentUnique, variantIds);
 		}
 	}
+
+	/**
+	 * Publish the latest version of documents indescriminately allowing the user to choose between all languages.
+	 * @param documentUniques The unique identifiers of the documents.
+	 */
+	async publishIndescriminate(documentUniques: Array<string>) {
+		// Map to UmbDocumentVariantModel for now, until we have a proper variant model for the variant picker.
+		const variants: Array<UmbDocumentVariantModel> = this.#languageCollection.map((x) => ({
+			culture: x.unique,
+			segment: null,
+			name: x.name,
+			isMandatory: x.isMandatory,
+			state: UmbDocumentVariantState.PUBLISHED,
+			createDate: '',
+			updateDate: '',
+			publishDate: '',
+		}));
+
+		const variantIds = await this.pickVariants(
+			variants,
+			'publish',
+			this.#appLanguageCulture ? [this.#appLanguageCulture] : undefined,
+		);
+
+		if (variantIds.length) {
+			for (const documentUnique of documentUniques) {
+				await this.#publishingRepository.publish(documentUnique, variantIds);
+			}
+		}
+	}
+
+	/**
+	 * Unpublish the latest version of documents indescriminately allowing the user to choose between all languages.
+	 * @param documentUniques The unique identifiers of the documents.
+	 */
+	async unpublishIndescriminate(documentUniques: Array<string>) {
+		// Map to UmbDocumentVariantModel for now, until we have a proper variant model for the variant picker.
+		const variants: Array<UmbDocumentVariantModel> = this.#languageCollection.map((x) => ({
+			culture: x.unique,
+			segment: null,
+			name: x.name,
+			isMandatory: x.isMandatory,
+			state: UmbDocumentVariantState.PUBLISHED,
+			createDate: '',
+			updateDate: '',
+			publishDate: '',
+		}));
+
+		const variantIds = await this.pickVariants(
+			variants,
+			'unpublish',
+			this.#appLanguageCulture ? [this.#appLanguageCulture] : undefined,
+		);
+
+		if (variantIds.length) {
+			for (const documentUnique of documentUniques) {
+				await this.#publishingRepository.unpublish(documentUnique, variantIds);
+			}
+		}
+	}
 }
 
 export default UmbDocumentVariantManagerContext;

From f33498d38ed5965468eba1d6e1f9500eded88141 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 27 Feb 2024 09:19:05 +0100
Subject: [PATCH 06/15] new ui

---
 .../field-dropdown-list.element.ts            | 141 +++++++++++-------
 1 file changed, 89 insertions(+), 52 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
index be1e04ad8e..056e3cce2f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
@@ -1,11 +1,27 @@
 import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { css, html, customElement, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property, repeat, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIComboboxElement, UUIComboboxEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_DOCUMENT_TYPE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
-import { UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbMediaTypeDetailRepository } from '@umbraco-cms/backoffice/media-type';
+import {
+	UMB_DOCUMENT_TYPE_PICKER_MODAL,
+	UMB_MODAL_MANAGER_CONTEXT,
+	type UmbModalManagerContext,
+} from '@umbraco-cms/backoffice/modal';
+import { UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+
+enum FieldType {
+	MEDIA_TYPE = 'media-type',
+	DOCUMENT_TYPE = 'document-type',
+	SYSTEM = 'system',
+}
+
+interface FieldPicker {
+	unique: string;
+	type: FieldType;
+}
 
 @customElement('umb-field-dropdown-list')
 export class UmbFieldDropdownListElement extends UmbLitElement {
@@ -13,15 +29,17 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 	public value = '';
 
 	#documentTypeDetailRepository = new UmbDocumentTypeDetailRepository(this);
+	#mediaTypeDetailRepository = new UmbMediaTypeDetailRepository(this);
+	#modalManager?: UmbModalManagerContext;
 
-	#unique = new UmbStringState<string>('');
+	#unique = new UmbObjectState<{ unique: string; type: FieldType }>({ unique: '', type: FieldType.SYSTEM });
 	readonly unique = this.#unique.asObservable();
 
-	@property({ type: String })
-	set documentTypeUnique(value: string) {
+	@property({ type: Object })
+	set documentTypeUnique(value: FieldPicker) {
 		this.#unique.setValue(value);
 	}
-	get documentTypeUnique(): string | null | undefined {
+	get documentTypeUnique(): FieldPicker | null | undefined {
 		return this.#unique.getValue();
 	}
 
@@ -34,6 +52,12 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 	@state()
 	private _customFields: Array<UmbPropertyTypeModel> = [];
 
+	@state()
+	private _type?: FieldType = FieldType.SYSTEM;
+
+	@state()
+	private _previewString?: string;
+
 	private _systemFields = [
 		{ value: 'sortOrder', name: this.localize.term('general_sort'), group: 'System Fields' },
 		{ value: 'updateDate', name: this.localize.term('content_updateDate'), group: 'System Fields' },
@@ -62,61 +86,74 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 			this.value = '';
 			this.dispatchEvent(new UmbChangeEvent());
 		});
+
+		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (modalManager) => {
+			this.#modalManager = modalManager;
+		});
 	}
 
-	#changeFieldType() {
-		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, async (modalManager) => {
-			if (modalManager) {
-				const modalContext = modalManager.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, {
-					data: {
-						hideTreeRoot: true,
-						multiple: false,
-					},
-					value: {
-						selection: this.documentTypeUnique ? [this.documentTypeUnique] : [],
-					},
-				});
+	async #changeFieldType() {
+		if (!this.#modalManager) return;
 
-				const modalValue = await modalContext?.onSubmit();
-				this.documentTypeUnique = modalValue.selection[0] ?? '';
-			}
+		const modalContext = this.#modalManager.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, {
+			data: {
+				hideTreeRoot: true,
+				multiple: false,
+			},
+			value: {
+				selection: this.documentTypeUnique ? [this.documentTypeUnique] : [],
+			},
 		});
+
+		const modalValue = await modalContext.onSubmit();
+		this.documentTypeUnique = modalValue.selection[0] ?? '';
+
+		this._previewString = 'System Fields';
 	}
 
 	#onChange(e: UUIComboboxEvent) {
 		e.stopPropagation();
-		const alias = (e.composedPath()[0] as UUIComboboxElement).value as string;
-		this.value = alias;
-		this.dispatchEvent(new UmbChangeEvent());
+		const type = (e.composedPath()[0] as UUIComboboxElement).value as FieldType;
+		switch (type) {
+			case FieldType.DOCUMENT_TYPE:
+				this.#changeFieldType();
+				break;
+			case FieldType.MEDIA_TYPE:
+				console.log(type);
+				this.documentTypeUnique = '';
+				break;
+			default:
+				this._previewString = 'System Fields';
+				break;
+		}
+		//const alias = (e.composedPath()[0] as UUIComboboxElement).value as string;
+		//this.documentTypeUnique = alias;
+		//this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	render() {
 		return html`
-			<uui-button look="outline" @click=${this.#changeFieldType} compact>
-				<uui-icon
-					.name=${this.documentTypeUnique
-						? this._documentTypeIcon
-							? this._documentTypeIcon
-							: 'icon-circle-dotted'
-						: 'icon-database'}></uui-icon>
-				${this.documentTypeUnique ? this._documentTypeName : this.localize.term('formSettings_systemFields')}
-			</uui-button>
-
-			<uui-combobox slot="tag" .value=${this.value} @change=${this.#onChange}>
-				<uui-combobox-list>
-					${this.documentTypeUnique
-						? repeat(
-								this._customFields,
-								(item) => item.id,
-								(item) => html`<uui-combobox-list-option .value=${item.alias}>${item.alias}</uui-combobox-list-option>`,
-						  )
-						: repeat(
-								this._systemFields,
-								(item) => item.value,
-								(item) => html`<uui-combobox-list-option .value=${item.value}>${item.name}</uui-combobox-list-option>`,
-						  )}
-				</uui-combobox-list>
-			</uui-combobox>
+			<div>
+				<uui-combobox value="preview">
+					<uui-combobox-list @change=${this.#onChange}>
+						<uui-combobox-list-option value="preview" style="display:none">
+							${this._previewString}
+						</uui-combobox-list-option>
+						<uui-combobox-list-option value="system"><strong>System Field</strong></uui-combobox-list-option>
+						<uui-combobox-list-option value="document-type">
+							<strong>Document Type</strong>Pick a document type...
+						</uui-combobox-list-option>
+						<uui-combobox-list-option value="media-type">
+							<strong>Media Type</strong>Pick a media type...
+						</uui-combobox-list-option>
+					</uui-combobox-list>
+				</uui-combobox>
+				<uui-combobox>
+					<uui-combobox-list>
+						<uui-combobox-list-option>Cookies</uui-combobox-list-option>
+					</uui-combobox-list>
+				</uui-combobox>
+			</div>
 		`;
 	}
 
@@ -125,8 +162,8 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 			:host {
 				display: flex;
 			}
-			:host > * {
-				flex: 1;
+			strong {
+				display: block;
 			}
 			uui-combobox-list-option {
 				padding: calc(var(--uui-size-2, 6px) + 1px);

From 5314a878e2eed9128f8e52f66d932d8cf606f6f3 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 27 Feb 2024 14:13:24 +0100
Subject: [PATCH 07/15] handle media types

---
 .../field-dropdown-list.element.ts            | 220 ++++++++++--------
 ...lating-page-field-builder-modal.element.ts |   4 +-
 2 files changed, 125 insertions(+), 99 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
index 056e3cce2f..82df65876e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
@@ -1,16 +1,30 @@
 import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-import { css, html, customElement, property, repeat, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIComboboxElement, UUIComboboxEvent } from '@umbraco-cms/backoffice/external/uui';
+import {
+	css,
+	html,
+	customElement,
+	property,
+	state,
+	repeat,
+	ifDefined,
+	nothing,
+} from '@umbraco-cms/backoffice/external/lit';
+import type { UUIComboboxEvent, UUIComboboxElement } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbMediaTypeDetailRepository } from '@umbraco-cms/backoffice/media-type';
 import {
 	UMB_DOCUMENT_TYPE_PICKER_MODAL,
+	UMB_MEDIA_TYPE_PICKER_MODAL,
 	UMB_MODAL_MANAGER_CONTEXT,
 	type UmbModalManagerContext,
 } from '@umbraco-cms/backoffice/modal';
-import { UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+
+interface FieldPickerValue {
+	alias: string;
+	label: string;
+}
 
 enum FieldType {
 	MEDIA_TYPE = 'media-type',
@@ -18,149 +32,161 @@ enum FieldType {
 	SYSTEM = 'system',
 }
 
-interface FieldPicker {
-	unique: string;
-	type: FieldType;
-}
-
 @customElement('umb-field-dropdown-list')
 export class UmbFieldDropdownListElement extends UmbLitElement {
-	@property({ type: String })
-	public value = '';
+	@property({ type: Boolean, attribute: 'exclude-media-type', reflect: true })
+	public excludeMediaType = false;
+
+	@property({ type: Object })
+	public value?: FieldPickerValue;
+
+	@state()
+	private _type?: FieldType;
+
+	@state()
+	private _uniqueName?: string;
+
+	@state()
+	private _unique?: string;
 
 	#documentTypeDetailRepository = new UmbDocumentTypeDetailRepository(this);
 	#mediaTypeDetailRepository = new UmbMediaTypeDetailRepository(this);
 	#modalManager?: UmbModalManagerContext;
 
-	#unique = new UmbObjectState<{ unique: string; type: FieldType }>({ unique: '', type: FieldType.SYSTEM });
-	readonly unique = this.#unique.asObservable();
-
-	@property({ type: Object })
-	set documentTypeUnique(value: FieldPicker) {
-		this.#unique.setValue(value);
-	}
-	get documentTypeUnique(): FieldPicker | null | undefined {
-		return this.#unique.getValue();
-	}
-
 	@state()
-	private _documentTypeName?: string;
+	private _customFields: Array<Partial<UmbPropertyTypeModel>> = [];
 
-	@state()
-	private _documentTypeIcon?: string;
-
-	@state()
-	private _customFields: Array<UmbPropertyTypeModel> = [];
-
-	@state()
-	private _type?: FieldType = FieldType.SYSTEM;
-
-	@state()
-	private _previewString?: string;
-
-	private _systemFields = [
-		{ value: 'sortOrder', name: this.localize.term('general_sort'), group: 'System Fields' },
-		{ value: 'updateDate', name: this.localize.term('content_updateDate'), group: 'System Fields' },
-		{ value: 'updater', name: this.localize.term('content_updatedBy'), group: 'System Fields' },
-		{ value: 'createDate', name: this.localize.term('content_createDate'), group: 'System Fields' },
-		{ value: 'owner', name: this.localize.term('content_createBy'), group: 'System Fields' },
-		{ value: 'published', name: this.localize.term('content_isPublished'), group: 'System Fields' },
-		{ value: 'contentTypeAlias', name: this.localize.term('content_documentType'), group: 'System Fields' },
-		{ value: 'email', name: this.localize.term('general_email'), group: 'System Fields' },
-		{ value: 'username', name: this.localize.term('general_username'), group: 'System Fields' },
+	private _systemFields: Array<Partial<UmbPropertyTypeModel>> = [
+		{ alias: 'sortOrder', name: this.localize.term('general_sort') },
+		{ alias: 'updateDate', name: this.localize.term('content_updateDate') },
+		{ alias: 'updater', name: this.localize.term('content_updatedBy') },
+		{ alias: 'createDate', name: this.localize.term('content_createDate') },
+		{ alias: 'owner', name: this.localize.term('content_createBy') },
+		{ alias: 'published', name: this.localize.term('content_isPublished') },
+		{ alias: 'contentTypeAlias', name: this.localize.term('content_documentType') },
+		{ alias: 'email', name: this.localize.term('general_email') },
+		{ alias: 'username', name: this.localize.term('general_username') },
 	];
 
 	constructor() {
 		super();
-		this.observe(this.unique, async (unique) => {
-			if (unique) {
-				const { data } = await this.#documentTypeDetailRepository.requestByUnique(unique);
-				this._customFields = data?.properties ?? [];
-				this._documentTypeName = data?.name;
-				this._documentTypeIcon = data?.icon;
-			} else {
-				this._customFields = [];
-				this._documentTypeIcon = undefined;
-				this._documentTypeName = undefined;
-			}
-			this.value = '';
-			this.dispatchEvent(new UmbChangeEvent());
-		});
-
 		this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (modalManager) => {
 			this.#modalManager = modalManager;
 		});
 	}
 
-	async #changeFieldType() {
+	async #getDocumentTypeFields() {
 		if (!this.#modalManager) return;
-
 		const modalContext = this.#modalManager.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, {
 			data: {
 				hideTreeRoot: true,
 				multiple: false,
 			},
-			value: {
-				selection: this.documentTypeUnique ? [this.documentTypeUnique] : [],
+		});
+
+		const modalValue = await modalContext.onSubmit();
+		const unique = modalValue.selection[0] ?? '';
+
+		const { data } = await this.#documentTypeDetailRepository.requestByUnique(unique);
+		if (!data) return;
+
+		this._unique = data.unique;
+		this._uniqueName = data.name;
+		this._customFields = data.properties;
+	}
+
+	async #getMediaTypeFields() {
+		if (!this.#modalManager) return;
+		const modalContext = this.#modalManager.open(UMB_MEDIA_TYPE_PICKER_MODAL, {
+			data: {
+				hideTreeRoot: true,
+				multiple: false,
 			},
 		});
 
 		const modalValue = await modalContext.onSubmit();
-		this.documentTypeUnique = modalValue.selection[0] ?? '';
+		const unique = modalValue.selection[0] ?? '';
 
-		this._previewString = 'System Fields';
+		const { data } = await this.#mediaTypeDetailRepository.requestByUnique(unique);
+		if (!data) return;
+
+		this._unique = data.unique;
+		this._uniqueName = data.name;
+		this._customFields = data.properties;
 	}
 
 	#onChange(e: UUIComboboxEvent) {
 		e.stopPropagation();
-		const type = (e.composedPath()[0] as UUIComboboxElement).value as FieldType;
-		switch (type) {
+		this._type = (e.composedPath()[0] as UUIComboboxElement).value as FieldType;
+		this.value = undefined;
+
+		switch (this._type) {
 			case FieldType.DOCUMENT_TYPE:
-				this.#changeFieldType();
+				this.#getDocumentTypeFields();
 				break;
 			case FieldType.MEDIA_TYPE:
-				console.log(type);
-				this.documentTypeUnique = '';
+				this.#getMediaTypeFields();
 				break;
 			default:
-				this._previewString = 'System Fields';
+				this._customFields = this._systemFields;
+				this.value = undefined;
 				break;
 		}
-		//const alias = (e.composedPath()[0] as UUIComboboxElement).value as string;
-		//this.documentTypeUnique = alias;
-		//this.dispatchEvent(new UmbChangeEvent());
+		this.dispatchEvent(new UmbChangeEvent());
+	}
+
+	#onChangeValue(e: UUIComboboxEvent) {
+		e.stopPropagation();
+		const alias = (e.composedPath()[0] as UUIComboboxElement).value as FieldType;
+		this.value = this._customFields.find((field) => field.alias === alias) as FieldPickerValue;
+
+		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	render() {
 		return html`
-			<div>
-				<uui-combobox value="preview">
-					<uui-combobox-list @change=${this.#onChange}>
-						<uui-combobox-list-option value="preview" style="display:none">
-							${this._previewString}
-						</uui-combobox-list-option>
-						<uui-combobox-list-option value="system"><strong>System Field</strong></uui-combobox-list-option>
-						<uui-combobox-list-option value="document-type">
-							<strong>Document Type</strong>Pick a document type...
-						</uui-combobox-list-option>
-						<uui-combobox-list-option value="media-type">
-							<strong>Media Type</strong>Pick a media type...
-						</uui-combobox-list-option>
-					</uui-combobox-list>
-				</uui-combobox>
-				<uui-combobox>
-					<uui-combobox-list>
-						<uui-combobox-list-option>Cookies</uui-combobox-list-option>
-					</uui-combobox-list>
-				</uui-combobox>
-			</div>
+			<uui-combobox id="preview">
+				<uui-combobox-list @change=${this.#onChange}>
+					<uui-combobox-list-option value="system">
+						<strong>${this.localize.term('formSettings_systemFields')}</strong>
+					</uui-combobox-list-option>
+					<uui-combobox-list-option value="document-type" display-value=${this.localize.term('content_documentType')}>
+						<strong> ${this.localize.term('content_documentType')} </strong>
+						${this.localize.term('defaultdialogs_treepicker')}
+					</uui-combobox-list-option>
+					${!this.excludeMediaType
+						? html`<uui-combobox-list-option
+								value="media-type"
+								display-value=${this.localize.term('content_mediatype')}>
+								<strong> ${this.localize.term('content_mediatype')} </strong>
+								${this.localize.term('defaultdialogs_treepicker')}
+						  </uui-combobox-list-option>`
+						: nothing}
+				</uui-combobox-list>
+			</uui-combobox>
+			${this.#renderAliasDropdown()}
 		`;
 	}
 
+	#renderAliasDropdown() {
+		if (this._type !== FieldType.SYSTEM && !this._unique) return;
+		return html`<strong>${this._uniqueName}</strong>
+			<uui-combobox id="value" value=${ifDefined(this.value?.alias)}>
+				<uui-combobox-list @change=${this.#onChangeValue}>
+					${repeat(
+						this._customFields,
+						(field) => field.alias,
+						(field) =>
+							html`<uui-combobox-list-option value=${ifDefined(field.alias)}>${field.alias}</uui-combobox-list-option>`,
+					)}
+				</uui-combobox-list>
+			</uui-combobox>`;
+	}
+
 	static styles = [
 		css`
-			:host {
-				display: flex;
+			uui-combobox {
+				width: 100%;
 			}
 			strong {
 				display: block;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
index 7ed3415e9f..da381042ae 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts
@@ -38,7 +38,7 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
 	/** TODO: Implement "Choose field" */
 
 	#onChangeFieldValue(e: Event) {
-		this._field = (e.target as UmbFieldDropdownListElement).value;
+		this._field = (e.target as UmbFieldDropdownListElement).value?.alias;
 	}
 
 	render() {
@@ -49,7 +49,7 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
 						<uui-label for="page-field-value">
 							<umb-localize key="templateEditor_chooseField">Choose field</umb-localize>
 						</uui-label>
-						<umb-field-dropdown-list @change=${this.#onChangeFieldValue}></umb-field-dropdown-list>
+						<umb-field-dropdown-list @change=${this.#onChangeFieldValue} exclude-media-type></umb-field-dropdown-list>
 
 						<uui-label for="page-field-default-value">
 							<umb-localize key="templateEditor_defaultValue">Default value</umb-localize>

From 819144a52033b20cd50333c5bb8bd9e1f87e8dd0 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 27 Feb 2024 14:22:00 +0100
Subject: [PATCH 08/15] fix

---
 .../field-dropdown-list/field-dropdown-list.element.ts    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
index 82df65876e..ef9cc5d325 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
@@ -10,6 +10,7 @@ import {
 	repeat,
 	ifDefined,
 	nothing,
+	query,
 } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIComboboxEvent, UUIComboboxElement } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -49,6 +50,9 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 	@state()
 	private _unique?: string;
 
+	@query('#value')
+	private _valueElement?: UUIComboboxElement;
+
 	#documentTypeDetailRepository = new UmbDocumentTypeDetailRepository(this);
 	#mediaTypeDetailRepository = new UmbMediaTypeDetailRepository(this);
 	#modalManager?: UmbModalManagerContext;
@@ -116,9 +120,9 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 	}
 
 	#onChange(e: UUIComboboxEvent) {
-		e.stopPropagation();
 		this._type = (e.composedPath()[0] as UUIComboboxElement).value as FieldType;
 		this.value = undefined;
+		if (this._valueElement) this._valueElement.value = '';
 
 		switch (this._type) {
 			case FieldType.DOCUMENT_TYPE:
@@ -128,6 +132,8 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 				this.#getMediaTypeFields();
 				break;
 			default:
+				this._uniqueName = '';
+				this._unique = '';
 				this._customFields = this._systemFields;
 				this.value = undefined;
 				break;

From c354ccc61d0c26c21109b44bd47c2c1c24e27578 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 28 Feb 2024 08:53:07 +0100
Subject: [PATCH 09/15] remove test from dashboard

---
 .../src/packages/umbraco-news/umbraco-news-dashboard.element.ts  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts
index 4d03dfacd4..e22db293ed 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts
@@ -28,7 +28,6 @@ export class UmbUmbracoNewsDashboardElement extends UmbLitElement {
 	render() {
 		return html`
 			<uui-box class="uui-text">
-				<umb-field-dropdown-list></umb-field-dropdown-list>
 				<h1 class="uui-h2" style="margin-top: var(--uui-size-layout-1);">Welcome, ${this.name}</h1>
 				<p class="uui-lead">
 					This is a preview version of Umbraco, where you can have a first-hand look at the new Backoffice.

From 31320a97cccc9f54b7cc283e35e5284ef2e052b1 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 28 Feb 2024 08:54:53 +0100
Subject: [PATCH 10/15] storybook

---
 .../field-dropdown-list.stories.ts            | 35 +------------------
 1 file changed, 1 insertion(+), 34 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.stories.ts
index 3f689947cd..f9e84c4665 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.stories.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.stories.ts
@@ -12,39 +12,6 @@ type Story = StoryObj<UmbFieldDropdownListElement>;
 
 export const Overview: Story = {
 	args: {
-		options: [
-			{
-				name: 'One',
-				value: 'One',
-			},
-			{
-				name: 'Two',
-				value: 'Two',
-			},
-			{
-				name: 'Three',
-				value: 'Three',
-			},
-		],
-	},
-};
-
-export const WithSelectedValue: Story = {
-	args: {
-		options: [
-			{
-				name: 'One',
-				value: 'One',
-			},
-			{
-				name: 'Two',
-				value: 'Two',
-				selected: true,
-			},
-			{
-				name: 'Three',
-				value: 'Three',
-			},
-		],
+		excludeMediaType: false,
 	},
 };

From 586efbb99b80883291a1f35ce5e27e90fb9b6cd4 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 28 Feb 2024 08:55:17 +0100
Subject: [PATCH 11/15] remove extra fields

---
 .../field-dropdown-list/field-dropdown-list.element.ts          | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
index ef9cc5d325..e9c61471c6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
@@ -68,8 +68,6 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 		{ alias: 'owner', name: this.localize.term('content_createBy') },
 		{ alias: 'published', name: this.localize.term('content_isPublished') },
 		{ alias: 'contentTypeAlias', name: this.localize.term('content_documentType') },
-		{ alias: 'email', name: this.localize.term('general_email') },
-		{ alias: 'username', name: this.localize.term('general_username') },
 	];
 
 	constructor() {

From f89f14adc2b8b623ad0482dd13a99f260292108d Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 28 Feb 2024 08:57:46 +0100
Subject: [PATCH 12/15] dispatch event

---
 .../field-dropdown-list.element.ts                | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
index e9c61471c6..4cb214447d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
@@ -38,8 +38,17 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 	@property({ type: Boolean, attribute: 'exclude-media-type', reflect: true })
 	public excludeMediaType = false;
 
+	private _value: FieldPickerValue = { alias: '', label: '' };
 	@property({ type: Object })
-	public value?: FieldPickerValue;
+	public get value(): FieldPickerValue {
+		return this._value;
+	}
+	public set value(val: FieldPickerValue) {
+		const oldVal = this._value;
+		this._value = val;
+		this.requestUpdate('value', oldVal);
+		this.dispatchEvent(new UmbChangeEvent());
+	}
 
 	@state()
 	private _type?: FieldType;
@@ -133,18 +142,14 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 				this._uniqueName = '';
 				this._unique = '';
 				this._customFields = this._systemFields;
-				this.value = undefined;
 				break;
 		}
-		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	#onChangeValue(e: UUIComboboxEvent) {
 		e.stopPropagation();
 		const alias = (e.composedPath()[0] as UUIComboboxElement).value as FieldType;
 		this.value = this._customFields.find((field) => field.alias === alias) as FieldPickerValue;
-
-		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	render() {

From 75a8338be2226d95b761f1c44246c4f3d9371e45 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 28 Feb 2024 09:02:04 +0100
Subject: [PATCH 13/15] allow undefined

---
 .../field-dropdown-list/field-dropdown-list.element.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
index 4cb214447d..d8cc4208c3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
@@ -38,7 +38,7 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 	@property({ type: Boolean, attribute: 'exclude-media-type', reflect: true })
 	public excludeMediaType = false;
 
-	private _value: FieldPickerValue = { alias: '', label: '' };
+	private _value?: FieldPickerValue;
 	@property({ type: Object })
 	public get value(): FieldPickerValue {
 		return this._value;

From edf1e5d75725d6401e6c0841e217a6f1cd1ce9e1 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 28 Feb 2024 09:05:20 +0100
Subject: [PATCH 14/15] undefined fieldvalue

---
 .../field-dropdown-list/field-dropdown-list.element.ts        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
index d8cc4208c3..22189c9c11 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
@@ -40,10 +40,10 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 
 	private _value?: FieldPickerValue;
 	@property({ type: Object })
-	public get value(): FieldPickerValue {
+	public get value(): FieldPickerValue | undefined {
 		return this._value;
 	}
-	public set value(val: FieldPickerValue) {
+	public set value(val: FieldPickerValue | undefined) {
 		const oldVal = this._value;
 		this._value = val;
 		this.requestUpdate('value', oldVal);

From eee8099d2e0a4b3536b701f0b2f6d9ad08869176 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 28 Feb 2024 09:05:41 +0100
Subject: [PATCH 15/15] undefined fieldvalue

---
 .../field-dropdown-list/field-dropdown-list.element.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
index 22189c9c11..f469b3953d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/field-dropdown-list/field-dropdown-list.element.ts
@@ -38,7 +38,7 @@ export class UmbFieldDropdownListElement extends UmbLitElement {
 	@property({ type: Boolean, attribute: 'exclude-media-type', reflect: true })
 	public excludeMediaType = false;
 
-	private _value?: FieldPickerValue;
+	private _value: FieldPickerValue | undefined;
 	@property({ type: Object })
 	public get value(): FieldPickerValue | undefined {
 		return this._value;