From 86ac6807c5e49cd2d38ce89dde6e25581b7564b3 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 19 Oct 2023 10:03:13 +0200
Subject: [PATCH 01/17] init

---
 .../src/mocks/data/data-type.data.ts          |  31 +++-
 .../src/mocks/data/document-type.data.ts      | 154 ++++++++++++++++++
 .../src/mocks/data/document.data.ts           |  15 +-
 .../src/mocks/data/user-group.data.ts         |   7 +
 .../src/packages/core/components/index.ts     |   1 +
 .../core/components/input-tree/index.ts       |   1 +
 .../input-tree/input-tree.context.ts          |  19 +++
 .../input-tree/input-tree.element.ts          | 150 +++++++++++++++++
 .../input-tree/input-tree.stories.ts          |  15 ++
 .../components/input-tree/input-tree.test.ts  |  18 ++
 .../property-editor-ui-tree-picker.element.ts |  55 ++++++-
 11 files changed, 460 insertions(+), 6 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.stories.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.test.ts

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
index 8c1490effe..2e68da599a 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
@@ -200,7 +200,36 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 		parentId: null,
 		propertyEditorAlias: 'Umbraco.MultiNodeTreePicker',
 		propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker',
-		values: [],
+		values: [
+			{
+				alias: 'startNode',
+				value: {
+					type: 'member',
+					query: '',
+					id: null,
+				},
+			},
+			{
+				alias: 'minNumber',
+				value: 1,
+			},
+			{
+				alias: 'maxNumber',
+				value: 10,
+			},
+			{
+				alias: 'ignoreUserStartNodes',
+				value: false,
+			},
+			{
+				alias: 'showOpenButton',
+				value: true,
+			},
+			{
+				alias: 'filter',
+				value: '',
+			},
+		],
 	},
 	{
 		type: 'data-type',
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts
index ef912e8795..868b48e5ac 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts
@@ -608,6 +608,151 @@ export const data: Array<DocumentTypeResponseModel> = [
 			keepLatestVersionPerDayForDays: null,
 		},
 	},
+	{
+		allowedTemplateIds: [],
+		defaultTemplateId: null,
+		id: 'simple-document-type-id',
+		alias: 'blogPost',
+		name: 'All property editors document type',
+		description: null,
+		icon: 'umb:item-arrangement',
+		allowedAsRoot: true,
+		variesByCulture: true,
+		variesBySegment: false,
+		isElement: false,
+		properties: [
+			{
+				id: '6',
+				containerId: 'all-properties-group-key',
+				alias: 'multiNodeTreePicker',
+				name: 'Multi Node Tree Picker',
+				description: '',
+				dataTypeId: 'dt-multiNodeTreePicker',
+				variesByCulture: false,
+				variesBySegment: false,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+			{
+				id: '3',
+				containerId: 'all-properties-group-key',
+				alias: 'contentPicker',
+				name: 'Content Picker',
+				description: '',
+				dataTypeId: 'dt-contentPicker',
+				variesByCulture: false,
+				variesBySegment: false,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+			{
+				id: '19',
+				containerId: 'all-properties-group-key',
+				alias: 'mediaPicker',
+				name: 'Media Picker',
+				description: '',
+				dataTypeId: 'dt-mediaPicker',
+				variesByCulture: false,
+				variesBySegment: false,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+			{
+				id: '30',
+				containerId: 'all-properties-group-key',
+				alias: 'memberPicker',
+				name: 'Member Picker',
+				description: '',
+				dataTypeId: 'dt-memberPicker',
+				variesByCulture: false,
+				variesBySegment: false,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+			{
+				id: '31',
+				containerId: 'all-properties-group-key',
+				alias: 'memberGroupPicker',
+				name: 'Member Group Picker',
+				description: '',
+				dataTypeId: 'dt-memberGroupPicker',
+				variesByCulture: false,
+				variesBySegment: false,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+			{
+				id: '32',
+				containerId: 'all-properties-group-key',
+				alias: 'userPicker',
+				name: 'User Picker',
+				description: '',
+				dataTypeId: 'dt-userPicker',
+				variesByCulture: false,
+				variesBySegment: false,
+				validation: {
+					mandatory: true,
+					mandatoryMessage: null,
+					regEx: null,
+					regExMessage: null,
+				},
+				appearance: {
+					labelOnTop: false,
+				},
+			},
+		],
+		containers: [
+			{
+				id: 'all-properties-group-key',
+				parentId: null,
+				name: 'Content',
+				type: 'Group',
+				sortOrder: 0,
+			},
+		],
+		allowedContentTypes: [],
+		compositions: [],
+		cleanup: {
+			preventCleanup: false,
+			keepAllVersionsNewerThanDays: null,
+			keepLatestVersionPerDayForDays: null,
+		},
+	},
 
 	{
 		allowedTemplateIds: [],
@@ -1008,6 +1153,15 @@ export const treeData: Array<DocumentTypeTreeItemResponseModel> = [
 		parentId: null,
 		icon: '',
 	},
+	{
+		name: 'Simple document type',
+		type: 'document-type',
+		hasChildren: false,
+		id: 'simple-document-type-id',
+		isContainer: false,
+		parentId: null,
+		icon: '',
+	},
 	{
 		name: 'Page Document Type',
 		type: 'document-type',
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts
index 5c4edfb0d2..640d4d7fec 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts
@@ -462,7 +462,12 @@ export const data: Array<DocumentResponseModel> = [
 		],
 	},
 	{
-		urls: [],
+		urls: [
+			{
+				culture: 'en-US',
+				url: '/',
+			},
+		],
 		templateId: null,
 		id: 'simple-document-id',
 		contentTypeId: 'simple-document-type-id',
@@ -477,6 +482,14 @@ export const data: Array<DocumentResponseModel> = [
 				updateDate: '2023-02-06T15:32:24.957009',
 			},
 		],
+		values: [
+			{
+				alias: 'multiNodeTreePicker',
+				culture: null,
+				segment: null,
+				value: null,
+			},
+		],
 	},
 ];
 
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/user-group.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/user-group.data.ts
index 1fd17caccf..0adf2a7ea6 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/user-group.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/user-group.data.ts
@@ -50,6 +50,13 @@ export const data: Array<UserGroupResponseModel> = [
 		documentStartNodeId: 'all-property-editors-document-id',
 		permissions: [UMB_USER_PERMISSION_DOCUMENT_CREATE, UMB_USER_PERMISSION_DOCUMENT_DELETE],
 	},
+	{
+		id: 'c630d49e-4e7b-42ea-b2bc-edc0edacb6b2',
+		name: 'Something',
+		icon: 'umb:medal',
+		documentStartNodeId: 'simple-document-id',
+		permissions: [UMB_USER_PERMISSION_DOCUMENT_CREATE, UMB_USER_PERMISSION_DOCUMENT_DELETE],
+	},
 	{
 		id: '9d24dc47-a4bf-427f-8a4a-b900f03b8a12',
 		name: 'User Group 1',
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 d212570fa6..007aa9e0e6 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
@@ -26,6 +26,7 @@ export * from './input-radio-button-list/index.js';
 export * from './input-section/index.js';
 export * from './input-slider/index.js';
 export * from './input-toggle/index.js';
+export * from './input-tree/index.js';
 export * from './input-upload-field/index.js';
 export * from './property-editor-config/index.js';
 export * from './property-type-based-property/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/index.ts
new file mode 100644
index 0000000000..490f084b27
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/index.ts
@@ -0,0 +1 @@
+export * from './input-tree.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
new file mode 100644
index 0000000000..c962361b93
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
@@ -0,0 +1,19 @@
+import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
+import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { UMB_DOCUMENT_PICKER_MODAL, UMB_MEDIA_TREE_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
+import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
+
+export type NodeType = 'content' | 'member' | 'media';
+
+export class UmbNodePickerContext extends UmbPickerInputContext<ItemResponseModelBaseModel> {
+	#type: NodeType = 'content';
+	readonly nodeType = this.#type;
+
+	constructor(host: UmbControllerHostElement, type?: NodeType) {
+		super(host, 'Umb.Repository.Media', UMB_MEDIA_TREE_PICKER_MODAL);
+	}
+
+	setNodeType(newNodeType: NodeType) {
+		this.#type = newNodeType;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
new file mode 100644
index 0000000000..dac0e15073
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
@@ -0,0 +1,150 @@
+import { NodeType, UmbNodePickerContext } from './input-tree.context.js';
+import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { ItemResponseModelBaseModel, MediaItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+
+@customElement('umb-input-tree')
+export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
+	protected getFormElement() {
+		return undefined;
+	}
+
+	/**
+	 * This is a minimum amount of selected items in this input.
+	 * @type {number}
+	 * @attr
+	 * @default 0
+	 */
+	@property({ type: Number })
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
+	public set min(value: number) {
+		this.#pickerContext.min = value;
+	}
+
+	/**
+	 * Min validation message.
+	 * @type {boolean}
+	 * @attr
+	 * @default
+	 */
+	@property({ type: String, attribute: 'min-message' })
+	minMessage = 'This field need more items';
+
+	/**
+	 * This is a maximum amount of selected items in this input.
+	 * @type {number}
+	 * @attr
+	 * @default Infinity
+	 */
+	@property({ type: Number })
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
+	public set max(value: number) {
+		this.#pickerContext.max = value;
+	}
+
+	/**
+	 * Max validation message.
+	 * @type {boolean}
+	 * @attr
+	 * @default
+	 */
+	@property({ type: String, attribute: 'min-message' })
+	maxMessage = 'This field exceeds the allowed amount of items';
+
+	public get selectedIds(): Array<string> {
+		return this.#pickerContext.getSelection();
+	}
+	public set selectedIds(ids: Array<string>) {
+		this.#pickerContext.setSelection(ids);
+	}
+
+	@property()
+	public set value(idsString: string) {
+		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
+		this.selectedIds = idsString.split(/[ ,]+/);
+	}
+
+	@property()
+	public set type(value: NodeType) {
+		this.#pickerContext.setNodeType(value);
+	}
+	public get type(): NodeType {
+		return this.#pickerContext.nodeType;
+	}
+
+	@state()
+	private _items?: Array<ItemResponseModelBaseModel>;
+
+	#pickerContext: UmbNodePickerContext;
+
+	constructor() {
+		super();
+
+		this.addValidator(
+			'rangeUnderflow',
+			() => this.minMessage,
+			() => !!this.min && this.#pickerContext.getSelection().length < this.min,
+		);
+
+		this.addValidator(
+			'rangeOverflow',
+			() => this.maxMessage,
+			() => !!this.max && this.#pickerContext.getSelection().length > this.max,
+		);
+
+		this.#pickerContext = new UmbNodePickerContext(this);
+
+		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
+		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+	}
+
+	render() {
+		return html` ${this._items?.map((item) => this.#renderItem(item))} ${this.#renderButton()} `;
+	}
+
+	#renderButton() {
+		if (this._items && this.max && this._items.length >= this.max) return;
+		return html`
+			<uui-button
+				id="add-button"
+				look="placeholder"
+				@click=${() => this.#pickerContext.openPicker()}
+				label=${this.localize.term('general_add')}>
+				Add
+			</uui-button>
+		`;
+	}
+
+	#renderItem(item: ItemResponseModelBaseModel) {
+		const icon = this.type === 'media' ? 'umb:picture' : this.type === 'member' ? 'umb:user' : 'umb:document';
+		return html`<uui-ref-node .name=${item.name ?? ''} .detail=${item.id ?? ''}>
+			<uui-icon slot="icon" name=${icon}></uui-icon>
+		</uui-ref-node>`;
+	}
+
+	static styles = [
+		css`
+			#add-button {
+				width: 100%;
+			}
+
+			uui-icon {
+				display: block;
+				margin: 0 auto;
+			}
+		`,
+	];
+}
+
+export default UmbInputTreeElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-tree': UmbInputTreeElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.stories.ts
new file mode 100644
index 0000000000..940a620ac8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import './input-tree.element.js';
+import type { UmbInputTreeElement } from './input-tree.element.js';
+
+const meta: Meta<UmbInputTreeElement> = {
+	title: 'Components/Inputs/Tree',
+	component: 'umb-input-tree',
+};
+
+export default meta;
+type Story = StoryObj<UmbInputTreeElement>;
+
+export const Overview: Story = {
+	args: {},
+};
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.test.ts
new file mode 100644
index 0000000000..a037ab8754
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.test.ts
@@ -0,0 +1,18 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbInputTreeElement } from './input-tree.element.js';
+import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+describe('UmbInputTreeElement', () => {
+	let element: UmbInputTreeElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-input-tree></umb-input-tree> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbInputTreeElement);
+	});
+
+	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/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index 85a503542f..4bd02f1018 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -1,22 +1,69 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UmbInputTreeElement } from '@umbraco-cms/backoffice/components';
 
 /**
  * @element umb-property-editor-ui-tree-picker
  */
+
+interface StartNode {
+	type: 'content' | 'member' | 'media';
+	query: string | null;
+	id: string | null;
+}
+
 @customElement('umb-property-editor-ui-tree-picker')
 export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property()
 	value = '';
 
+	@state()
+	startNode?: StartNode;
+
+	@state()
+	filter?: string;
+
+	@state()
+	ignoreUserStartNodes?: boolean;
+
+	@state()
+	showOpenButton?: boolean;
+
+	@state()
+	minNumber?: number;
+
+	@state()
+	maxNumber?: number;
+
 	@property({ attribute: false })
-	public config?: UmbPropertyEditorConfigCollection;
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		this.startNode = config?.getValueByAlias('startNode');
+
+		this.filter = config?.getValueByAlias('filter');
+		this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes');
+		this.showOpenButton = config?.getValueByAlias('showOpenButton');
+
+		this.minNumber = config?.getValueByAlias('minNumber');
+		this.maxNumber = config?.getValueByAlias('maxNumber');
+	}
+
+	#onChange(e: CustomEvent) {
+		this.value = (e.target as UmbInputTreeElement).value;
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
 
 	render() {
-		return html`<div>umb-property-editor-ui-tree-picker</div>`;
+		return html`<umb-input-tree
+			.startNode=${this.startNode}
+			.filter=${this.filter}
+			.min=${this.minNumber ?? 0}
+			.max=${this.maxNumber ?? 0}
+			?ignoreUserStartNodes=${this.ignoreUserStartNodes}
+			?showOpenButton=${this.showOpenButton}
+			@change=${this.#onChange}></umb-input-tree>`;
 	}
 
 	static styles = [UmbTextStyles];

From e593f195c6f003b3c8021c3594ba79b0036b9284 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 19 Oct 2023 10:24:24 +0200
Subject: [PATCH 02/17] context

---
 .../src/mocks/data/data-type.data.ts          |  2 +-
 .../input-tree/input-tree.context.ts          | 29 +++++++++++++++++--
 .../input-tree/input-tree.element.ts          |  4 +--
 .../property-editor-ui-tree-picker.element.ts | 11 ++-----
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
index 2e68da599a..de4a10e552 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
@@ -204,7 +204,7 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 			{
 				alias: 'startNode',
 				value: {
-					type: 'member',
+					type: 'media',
 					query: '',
 					id: null,
 				},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
index c962361b93..5a37bd3c09 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
@@ -1,16 +1,41 @@
 import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
-import { UMB_DOCUMENT_PICKER_MODAL, UMB_MEDIA_TREE_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
+import { UMB_DOCUMENT_PICKER_MODAL, UMB_MEDIA_TREE_PICKER_MODAL, UmbModalToken } from '@umbraco-cms/backoffice/modal';
 import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 
 export type NodeType = 'content' | 'member' | 'media';
 
+export type StartNode = {
+	type?: NodeType;
+	query?: string | null;
+	id?: string | null;
+};
+
+type ContextCreator = {
+	repository?: string;
+	token?: UmbModalToken;
+};
+
 export class UmbNodePickerContext extends UmbPickerInputContext<ItemResponseModelBaseModel> {
 	#type: NodeType = 'content';
 	readonly nodeType = this.#type;
 
 	constructor(host: UmbControllerHostElement, type?: NodeType) {
-		super(host, 'Umb.Repository.Media', UMB_MEDIA_TREE_PICKER_MODAL);
+		const context: ContextCreator = {};
+
+		context.repository = 'Umb.Repository.Document';
+		context.token = UMB_DOCUMENT_PICKER_MODAL;
+
+		if (type === 'media') {
+			context.repository = 'Umb.Repository.Media';
+			context.token = UMB_MEDIA_TREE_PICKER_MODAL;
+		}
+		if (type === 'member') {
+			//context.repository = 'Umb.Repository.Member';
+			//context.token = UMB_MEMBER_TREE_PICKER_MODAL;
+		}
+
+		super(host, context.repository, context.token);
 	}
 
 	setNodeType(newNodeType: NodeType) {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
index dac0e15073..db51e70fdd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
@@ -2,7 +2,7 @@ import { NodeType, UmbNodePickerContext } from './input-tree.context.js';
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import type { ItemResponseModelBaseModel, MediaItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import type { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-input-tree')
 export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
@@ -115,7 +115,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 				look="placeholder"
 				@click=${() => this.#pickerContext.openPicker()}
 				label=${this.localize.term('general_add')}>
-				Add
+				${this.localize.term('general_add')}
 			</uui-button>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index 4bd02f1018..d6527aa80d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -1,4 +1,5 @@
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { StartNode } from '../../../components/input-tree/input-tree.context.js';
+import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -9,12 +10,6 @@ import { UmbInputTreeElement } from '@umbraco-cms/backoffice/components';
  * @element umb-property-editor-ui-tree-picker
  */
 
-interface StartNode {
-	type: 'content' | 'member' | 'media';
-	query: string | null;
-	id: string | null;
-}
-
 @customElement('umb-property-editor-ui-tree-picker')
 export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	@property()
@@ -57,7 +52,7 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 
 	render() {
 		return html`<umb-input-tree
-			.startNode=${this.startNode}
+			type=${ifDefined(this.startNode?.type)}
 			.filter=${this.filter}
 			.min=${this.minNumber ?? 0}
 			.max=${this.maxNumber ?? 0}

From 1ec382b853d9fd330a2d15582386f25e6b527191 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 19 Oct 2023 12:53:25 +0200
Subject: [PATCH 03/17] config directly into input

---
 .../src/mocks/data/data-type.data.ts          |  6 +-
 .../input-tree/input-tree.context.ts          | 30 ++++------
 .../input-tree/input-tree.element.ts          | 60 ++++++++++++-------
 .../property-editor-ui-tree-picker.element.ts | 15 ++---
 4 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
index de4a10e552..3898b179fd 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
@@ -204,18 +204,18 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 			{
 				alias: 'startNode',
 				value: {
-					type: 'media',
+					type: 'content',
 					query: '',
 					id: null,
 				},
 			},
 			{
 				alias: 'minNumber',
-				value: 1,
+				value: 0,
 			},
 			{
 				alias: 'maxNumber',
-				value: 10,
+				value: 3,
 			},
 			{
 				alias: 'ignoreUserStartNodes',
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
index 5a37bd3c09..d3ffc05b8e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
@@ -1,6 +1,6 @@
 import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
-import { UMB_DOCUMENT_PICKER_MODAL, UMB_MEDIA_TREE_PICKER_MODAL, UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import { UMB_DOCUMENT_PICKER_MODAL, UMB_MEDIA_TREE_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
 import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 
 export type NodeType = 'content' | 'member' | 'media';
@@ -11,34 +11,26 @@ export type StartNode = {
 	id?: string | null;
 };
 
-type ContextCreator = {
-	repository?: string;
-	token?: UmbModalToken;
-};
-
-export class UmbNodePickerContext extends UmbPickerInputContext<ItemResponseModelBaseModel> {
+export class UmbNodeTreePickerContext extends UmbPickerInputContext<ItemResponseModelBaseModel> {
 	#type: NodeType = 'content';
-	readonly nodeType = this.#type;
 
-	constructor(host: UmbControllerHostElement, type?: NodeType) {
-		const context: ContextCreator = {};
+	constructor(host: UmbControllerHostElement, type: 'content' | 'media' | 'member' = 'content') {
+		const context = {
+			repository: 'Umb.Repository.Document',
+			token: UMB_DOCUMENT_PICKER_MODAL,
+		};
 
-		context.repository = 'Umb.Repository.Document';
-		context.token = UMB_DOCUMENT_PICKER_MODAL;
+		// TODO => if member
 
 		if (type === 'media') {
 			context.repository = 'Umb.Repository.Media';
 			context.token = UMB_MEDIA_TREE_PICKER_MODAL;
 		}
-		if (type === 'member') {
-			//context.repository = 'Umb.Repository.Member';
-			//context.token = UMB_MEMBER_TREE_PICKER_MODAL;
-		}
-
 		super(host, context.repository, context.token);
+		this.#type = type;
 	}
 
-	setNodeType(newNodeType: NodeType) {
-		this.#type = newNodeType;
+	getType() {
+		return this.#type;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
index db51e70fdd..e9f8d5e235 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
@@ -1,8 +1,9 @@
-import { NodeType, UmbNodePickerContext } from './input-tree.context.js';
+import { NodeType, StartNode, UmbNodeTreePickerContext } from './input-tree.context.js';
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 
 @customElement('umb-input-tree')
 export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
@@ -16,12 +17,13 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	 * @attr
 	 * @default 0
 	 */
-	@property({ type: Number })
 	public get min(): number {
-		return this.#pickerContext.min;
+		return this.#pickerContext?.min || 0;
 	}
 	public set min(value: number) {
-		this.#pickerContext.min = value;
+		if (this.#pickerContext) {
+			this.#pickerContext.min = value;
+		}
 	}
 
 	/**
@@ -39,12 +41,13 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	 * @attr
 	 * @default Infinity
 	 */
-	@property({ type: Number })
 	public get max(): number {
-		return this.#pickerContext.max;
+		return this.#pickerContext?.max || 0;
 	}
 	public set max(value: number) {
-		this.#pickerContext.max = value;
+		if (this.#pickerContext) {
+			this.#pickerContext.max = value;
+		}
 	}
 
 	/**
@@ -57,10 +60,14 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	maxMessage = 'This field exceeds the allowed amount of items';
 
 	public get selectedIds(): Array<string> {
-		return this.#pickerContext.getSelection();
+		return this.#pickerContext?.getSelection() ?? [];
 	}
 	public set selectedIds(ids: Array<string>) {
-		this.#pickerContext.setSelection(ids);
+		this.#pickerContext?.setSelection(ids);
+	}
+
+	public get type(): NodeType | undefined {
+		return this.#pickerContext?.getType();
 	}
 
 	@property()
@@ -69,22 +76,33 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 		this.selectedIds = idsString.split(/[ ,]+/);
 	}
 
-	@property()
-	public set type(value: NodeType) {
-		this.#pickerContext.setNodeType(value);
-	}
-	public get type(): NodeType {
-		return this.#pickerContext.nodeType;
+	@property({ attribute: false })
+	public set configuration(value: UmbPropertyEditorConfigCollection | undefined) {
+		const config: Record<string, any> = {
+			...(value ? value.toObject() : {}),
+		};
+
+		this.#setup(config.startNode.type);
+		this.min = config.minNumber;
+		this.max = config.maxNumber;
 	}
 
 	@state()
 	private _items?: Array<ItemResponseModelBaseModel>;
 
-	#pickerContext: UmbNodePickerContext;
+	#pickerContext?: UmbNodeTreePickerContext;
+
+	#setup(type: NodeType = 'content') {
+		this.#pickerContext = new UmbNodeTreePickerContext(this, type);
+		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
+		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+	}
 
 	constructor() {
 		super();
 
+		/*
+		TODO => only if pickrecontext exists
 		this.addValidator(
 			'rangeUnderflow',
 			() => this.minMessage,
@@ -96,11 +114,12 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 			() => this.maxMessage,
 			() => !!this.max && this.#pickerContext.getSelection().length > this.max,
 		);
+		*/
 
-		this.#pickerContext = new UmbNodePickerContext(this);
+		//this.#pickerContext = new UmbNodePickerContext(this, this.type);
 
-		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
-		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+		//this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
+		//this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
 	}
 
 	render() {
@@ -110,10 +129,11 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	#renderButton() {
 		if (this._items && this.max && this._items.length >= this.max) return;
 		return html`
+			items: ${this._items?.length} - max: ${this.max}
 			<uui-button
 				id="add-button"
 				look="placeholder"
-				@click=${() => this.#pickerContext.openPicker()}
+				@click=${() => this.#pickerContext?.openPicker()}
 				label=${this.localize.term('general_add')}>
 				${this.localize.term('general_add')}
 			</uui-button>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index d6527aa80d..00c12e846f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -1,5 +1,5 @@
 import { StartNode } from '../../../components/input-tree/input-tree.context.js';
-import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -33,8 +33,12 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	@state()
 	maxNumber?: number;
 
+	#configuration?: UmbPropertyEditorConfigCollection;
+
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		this.#configuration = config;
+
 		this.startNode = config?.getValueByAlias('startNode');
 
 		this.filter = config?.getValueByAlias('filter');
@@ -51,14 +55,7 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	}
 
 	render() {
-		return html`<umb-input-tree
-			type=${ifDefined(this.startNode?.type)}
-			.filter=${this.filter}
-			.min=${this.minNumber ?? 0}
-			.max=${this.maxNumber ?? 0}
-			?ignoreUserStartNodes=${this.ignoreUserStartNodes}
-			?showOpenButton=${this.showOpenButton}
-			@change=${this.#onChange}></umb-input-tree>`;
+		return html`<umb-input-tree .configuration=${this.#configuration} @change=${this.#onChange}></umb-input-tree>`;
 	}
 
 	static styles = [UmbTextStyles];

From bc4c6355a363947a8d39cecab92f5cbeeece6520 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 19 Oct 2023 16:24:17 +0200
Subject: [PATCH 04/17] load element depends on type

---
 .../input-tree/input-tree.context.ts          |  36 ---
 .../input-tree/input-tree.element.ts          | 220 +++++++++---------
 .../property-editor-ui-tree-picker.element.ts |  36 +--
 3 files changed, 112 insertions(+), 180 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
deleted file mode 100644
index d3ffc05b8e..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.context.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
-import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
-import { UMB_DOCUMENT_PICKER_MODAL, UMB_MEDIA_TREE_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
-import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
-
-export type NodeType = 'content' | 'member' | 'media';
-
-export type StartNode = {
-	type?: NodeType;
-	query?: string | null;
-	id?: string | null;
-};
-
-export class UmbNodeTreePickerContext extends UmbPickerInputContext<ItemResponseModelBaseModel> {
-	#type: NodeType = 'content';
-
-	constructor(host: UmbControllerHostElement, type: 'content' | 'media' | 'member' = 'content') {
-		const context = {
-			repository: 'Umb.Repository.Document',
-			token: UMB_DOCUMENT_PICKER_MODAL,
-		};
-
-		// TODO => if member
-
-		if (type === 'media') {
-			context.repository = 'Umb.Repository.Media';
-			context.token = UMB_MEDIA_TREE_PICKER_MODAL;
-		}
-		super(host, context.repository, context.token);
-		this.#type = type;
-	}
-
-	getType() {
-		return this.#type;
-	}
-}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
index e9f8d5e235..2c63053e83 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
@@ -1,9 +1,16 @@
-import { NodeType, StartNode, UmbNodeTreePickerContext } from './input-tree.context.js';
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import type { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
+
+export type NodeType = 'content' | 'member' | 'media';
+
+export type StartNode = {
+	type?: NodeType;
+	query?: string | null;
+	id?: string | null;
+};
 
 @customElement('umb-input-tree')
 export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
@@ -11,70 +18,29 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 		return undefined;
 	}
 
-	/**
-	 * This is a minimum amount of selected items in this input.
-	 * @type {number}
-	 * @attr
-	 * @default 0
-	 */
-	public get min(): number {
-		return this.#pickerContext?.min || 0;
-	}
-	public set min(value: number) {
-		if (this.#pickerContext) {
-			this.#pickerContext.min = value;
-		}
-	}
+	@state()
+	type?: StartNode['type'];
 
-	/**
-	 * Min validation message.
-	 * @type {boolean}
-	 * @attr
-	 * @default
-	 */
-	@property({ type: String, attribute: 'min-message' })
-	minMessage = 'This field need more items';
+	@state()
+	query?: string;
 
-	/**
-	 * This is a maximum amount of selected items in this input.
-	 * @type {number}
-	 * @attr
-	 * @default Infinity
-	 */
-	public get max(): number {
-		return this.#pickerContext?.max || 0;
-	}
-	public set max(value: number) {
-		if (this.#pickerContext) {
-			this.#pickerContext.max = value;
-		}
-	}
+	@state()
+	startId?: string;
 
-	/**
-	 * Max validation message.
-	 * @type {boolean}
-	 * @attr
-	 * @default
-	 */
-	@property({ type: String, attribute: 'min-message' })
-	maxMessage = 'This field exceeds the allowed amount of items';
+	@state()
+	min = 0;
 
-	public get selectedIds(): Array<string> {
-		return this.#pickerContext?.getSelection() ?? [];
-	}
-	public set selectedIds(ids: Array<string>) {
-		this.#pickerContext?.setSelection(ids);
-	}
+	@state()
+	max = 0;
 
-	public get type(): NodeType | undefined {
-		return this.#pickerContext?.getType();
-	}
+	@state()
+	filter?: string;
 
-	@property()
-	public set value(idsString: string) {
-		// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
-		this.selectedIds = idsString.split(/[ ,]+/);
-	}
+	@state()
+	showOpenButton?: boolean;
+
+	@state()
+	ignoreUserStartNodes?: boolean;
 
 	@property({ attribute: false })
 	public set configuration(value: UmbPropertyEditorConfigCollection | undefined) {
@@ -82,80 +48,108 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 			...(value ? value.toObject() : {}),
 		};
 
-		this.#setup(config.startNode.type);
+		this.type = config.startNode.type.toLowerCase() as StartNode['type'];
+		this.query = config.query;
+		this.startId = config.startNode.id;
+
 		this.min = config.minNumber;
 		this.max = config.maxNumber;
+
+		this.filter = config.filter;
+		this.showOpenButton = config.showOpenButton;
+		this.ignoreUserStartNodes = config.ignoreUserStartNodes;
+	}
+
+	@property()
+	set value(newValue: string | string[]) {
+		super.value = newValue;
+		this.items = newValue.split(',');
+	}
+	get value(): string {
+		return super.value as string;
 	}
 
 	@state()
-	private _items?: Array<ItemResponseModelBaseModel>;
+	items: Array<string> = [];
 
-	#pickerContext?: UmbNodeTreePickerContext;
-
-	#setup(type: NodeType = 'content') {
-		this.#pickerContext = new UmbNodeTreePickerContext(this, type);
-		this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
-		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+	#onChange(event: CustomEvent) {
+		this.items = (event.target as UmbInputDocumentElement).selectedIds;
+		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
 	}
 
 	constructor() {
 		super();
-
-		/*
-		TODO => only if pickrecontext exists
-		this.addValidator(
-			'rangeUnderflow',
-			() => this.minMessage,
-			() => !!this.min && this.#pickerContext.getSelection().length < this.min,
-		);
-
-		this.addValidator(
-			'rangeOverflow',
-			() => this.maxMessage,
-			() => !!this.max && this.#pickerContext.getSelection().length > this.max,
-		);
-		*/
-
-		//this.#pickerContext = new UmbNodePickerContext(this, this.type);
-
-		//this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
-		//this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
 	}
 
 	render() {
-		return html` ${this._items?.map((item) => this.#renderItem(item))} ${this.#renderButton()} `;
+		return html`${this.#renderElement()}
+			<p>${this.#renderTip()}</p>`;
 	}
 
-	#renderButton() {
-		if (this._items && this.max && this._items.length >= this.max) return;
-		return html`
-			items: ${this._items?.length} - max: ${this.max}
-			<uui-button
-				id="add-button"
-				look="placeholder"
-				@click=${() => this.#pickerContext?.openPicker()}
-				label=${this.localize.term('general_add')}>
-				${this.localize.term('general_add')}
-			</uui-button>
-		`;
+	#renderTip() {
+		if (this.items.length && this.items.length !== this.max) {
+			if (this.items.length > this.max) {
+				return `You can only have up to ${this.max} item(s) selected`;
+			}
+			if (this.min === this.max && this.min !== 0) {
+				return `Add ${this.min - this.items.length} more item(s)`;
+			}
+			if (this.min === 0 && this.max) {
+				return `Add up to ${this.max} items`;
+			}
+			if (this.min > 0 && this.max > 0) {
+				return `Add between ${this.min} and ${this.max} item(s)`;
+			}
+			if (this.items.length < this.min) {
+				return `You need to add at least ${this.min} items`;
+			}
+		}
+		return '';
 	}
 
-	#renderItem(item: ItemResponseModelBaseModel) {
-		const icon = this.type === 'media' ? 'umb:picture' : this.type === 'member' ? 'umb:user' : 'umb:document';
-		return html`<uui-ref-node .name=${item.name ?? ''} .detail=${item.id ?? ''}>
-			<uui-icon slot="icon" name=${icon}></uui-icon>
-		</uui-ref-node>`;
+	#renderElement() {
+		switch (this.type) {
+			case 'content':
+				return html`<umb-input-document
+					.selectedIds=${this.items}
+					.query=${this.query}
+					.node-start-id=${this.startId}
+					.filter=${this.filter}
+					.min=${this.min}
+					.max=${this.max}
+					?show-open-button=${this.showOpenButton}
+					?ignore-user-start-nodes=${this.ignoreUserStartNodes}
+					@change=${this.#onChange}></umb-input-document>`;
+			case 'media':
+				return html`<umb-input-media
+					.selectedIds=${this.items}
+					.node-start-id=${this.startId}
+					.filter=${this.filter}
+					.min=${this.min}
+					.max=${this.max}
+					?show-open-button=${this.showOpenButton}
+					?ignore-user-start-nodes=${this.ignoreUserStartNodes}
+					@change=${this.#onChange}></umb-input-media>`;
+			case 'member':
+				return html`<umb-input-member
+					.selectedIds=${this.items}
+					.filter=${this.filter}
+					.min=${this.min}
+					.max=${this.max}
+					?show-open-button=${this.showOpenButton}
+					?ignore-user-start-nodes=${this.ignoreUserStartNodes}
+					@change=${this.#onChange}>
+				</umb-input-member>`;
+			default:
+				return html`Type not found`;
+		}
 	}
 
 	static styles = [
 		css`
-			#add-button {
-				width: 100%;
-			}
-
-			uui-icon {
-				display: block;
-				margin: 0 auto;
+			p {
+				margin: 0;
+				color: var(--uui-color-border-emphasis);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index 00c12e846f..58cec9ee8e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -1,5 +1,4 @@
-import { StartNode } from '../../../components/input-tree/input-tree.context.js';
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -15,47 +14,22 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	@property()
 	value = '';
 
-	@state()
-	startNode?: StartNode;
-
-	@state()
-	filter?: string;
-
-	@state()
-	ignoreUserStartNodes?: boolean;
-
-	@state()
-	showOpenButton?: boolean;
-
-	@state()
-	minNumber?: number;
-
-	@state()
-	maxNumber?: number;
-
 	#configuration?: UmbPropertyEditorConfigCollection;
 
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		this.#configuration = config;
-
-		this.startNode = config?.getValueByAlias('startNode');
-
-		this.filter = config?.getValueByAlias('filter');
-		this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes');
-		this.showOpenButton = config?.getValueByAlias('showOpenButton');
-
-		this.minNumber = config?.getValueByAlias('minNumber');
-		this.maxNumber = config?.getValueByAlias('maxNumber');
 	}
 
 	#onChange(e: CustomEvent) {
-		this.value = (e.target as UmbInputTreeElement).value;
+		this.value = (e.target as UmbInputTreeElement).items.join(',');
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
 	render() {
-		return html`<umb-input-tree .configuration=${this.#configuration} @change=${this.#onChange}></umb-input-tree>`;
+		return html`${this.value}<umb-input-tree
+				.configuration=${this.#configuration}
+				@change=${this.#onChange}></umb-input-tree>`;
 	}
 
 	static styles = [UmbTextStyles];

From 0cedaa068f91579db2d7da235dcfb6bf9845d210 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 20 Oct 2023 10:01:40 +0200
Subject: [PATCH 05/17] move config

---
 .../input-tree/input-tree.element.ts          | 75 ++++++++-----------
 .../property-editor-ui-tree-picker.element.ts | 57 ++++++++++++--
 2 files changed, 81 insertions(+), 51 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
index 2c63053e83..191da563ac 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
@@ -1,7 +1,6 @@
 import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
 
 export type NodeType = 'content' | 'member' | 'media';
@@ -18,54 +17,44 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 		return undefined;
 	}
 
-	@state()
+	@property()
 	type?: StartNode['type'];
 
-	@state()
+	@property()
 	query?: string;
 
-	@state()
-	startId?: string;
+	@property({ type: String })
+	startNodeId?: string;
 
-	@state()
+	@property({ type: Number })
 	min = 0;
 
-	@state()
+	@property({ type: Number })
 	max = 0;
 
-	@state()
-	filter?: string;
+	private _filter: Array<string> = [];
+	@property()
+	public set filter(value: string) {
+		this._filter = value.split(',');
+	}
+	public get filter(): string {
+		return this._filter.join(',');
+	}
 
-	@state()
+	@property({ type: Boolean })
 	showOpenButton?: boolean;
 
-	@state()
+	@property({ type: Boolean })
 	ignoreUserStartNodes?: boolean;
 
-	@property({ attribute: false })
-	public set configuration(value: UmbPropertyEditorConfigCollection | undefined) {
-		const config: Record<string, any> = {
-			...(value ? value.toObject() : {}),
-		};
-
-		this.type = config.startNode.type.toLowerCase() as StartNode['type'];
-		this.query = config.query;
-		this.startId = config.startNode.id;
-
-		this.min = config.minNumber;
-		this.max = config.maxNumber;
-
-		this.filter = config.filter;
-		this.showOpenButton = config.showOpenButton;
-		this.ignoreUserStartNodes = config.ignoreUserStartNodes;
-	}
-
 	@property()
-	set value(newValue: string | string[]) {
-		super.value = newValue;
-		this.items = newValue.split(',');
+	public set value(newValue: string) {
+		if (newValue) {
+			super.value = newValue;
+			this.items = newValue.split(',');
+		}
 	}
-	get value(): string {
+	public get value(): string {
 		return super.value as string;
 	}
 
@@ -73,7 +62,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	items: Array<string> = [];
 
 	#onChange(event: CustomEvent) {
-		this.items = (event.target as UmbInputDocumentElement).selectedIds;
+		this.value = (event.target as UmbInputDocumentElement).selectedIds.join(',');
 		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
 	}
 
@@ -113,22 +102,22 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 				return html`<umb-input-document
 					.selectedIds=${this.items}
 					.query=${this.query}
-					.node-start-id=${this.startId}
+					.startNodeId=${this.startNodeId}
 					.filter=${this.filter}
 					.min=${this.min}
 					.max=${this.max}
-					?show-open-button=${this.showOpenButton}
-					?ignore-user-start-nodes=${this.ignoreUserStartNodes}
+					?showOpenButton=${this.showOpenButton}
+					?ignoreUserStartNodes=${this.ignoreUserStartNodes}
 					@change=${this.#onChange}></umb-input-document>`;
 			case 'media':
 				return html`<umb-input-media
 					.selectedIds=${this.items}
-					.node-start-id=${this.startId}
+					.startNodeId=${this.startNodeId}
 					.filter=${this.filter}
 					.min=${this.min}
 					.max=${this.max}
-					?show-open-button=${this.showOpenButton}
-					?ignore-user-start-nodes=${this.ignoreUserStartNodes}
+					?showOpenButton=${this.showOpenButton}
+					?ignoreUserStartNodes=${this.ignoreUserStartNodes}
 					@change=${this.#onChange}></umb-input-media>`;
 			case 'member':
 				return html`<umb-input-member
@@ -136,12 +125,12 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 					.filter=${this.filter}
 					.min=${this.min}
 					.max=${this.max}
-					?show-open-button=${this.showOpenButton}
-					?ignore-user-start-nodes=${this.ignoreUserStartNodes}
+					?showOpenButton=${this.showOpenButton}
+					?ignoreUserStartNodes=${this.ignoreUserStartNodes}
 					@change=${this.#onChange}>
 				</umb-input-member>`;
 			default:
-				return html`Type not found`;
+				return html`Node type could not be found`;
 		}
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index 58cec9ee8e..a77cc3854a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -1,9 +1,9 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { UmbInputTreeElement } from '@umbraco-cms/backoffice/components';
+import { StartNode, UmbInputTreeElement } from '@umbraco-cms/backoffice/components';
 
 /**
  * @element umb-property-editor-ui-tree-picker
@@ -14,11 +14,45 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	@property()
 	value = '';
 
-	#configuration?: UmbPropertyEditorConfigCollection;
+	@state()
+	type?: StartNode['type'];
+
+	@state()
+	query?: string | null;
+
+	@state()
+	startNodeId?: string | null;
+
+	@state()
+	min = 0;
+
+	@state()
+	max = 0;
+
+	@state()
+	filter?: string | null;
+
+	@state()
+	showOpenButton?: boolean;
+
+	@state()
+	ignoreUserStartNodes?: boolean;
 
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		this.#configuration = config;
+		const startNode: StartNode | undefined = config?.getValueByAlias('startNode');
+		if (startNode) {
+			this.type = startNode.type;
+			this.query = startNode.query;
+			this.startNodeId = startNode.id;
+		}
+
+		this.min = config?.getValueByAlias('minNumber') || 0;
+		this.max = config?.getValueByAlias('maxNumber') || 0;
+
+		this.filter = config?.getValueByAlias('filter');
+		this.showOpenButton = config?.getValueByAlias('showOpenButton');
+		this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes');
 	}
 
 	#onChange(e: CustomEvent) {
@@ -27,11 +61,18 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	}
 
 	render() {
-		return html`${this.value}<umb-input-tree
-				.configuration=${this.#configuration}
-				@change=${this.#onChange}></umb-input-tree>`;
+		return html`<umb-input-tree
+			.value=${this.value}
+			.type=${this.type}
+			.query=${this.query ?? ''}
+			.startNodeId=${this.startNodeId ?? ''}
+			.min=${this.min}
+			.max=${this.max}
+			.filter=${this.filter ?? ''}
+			?showOpenButton=${this.showOpenButton}
+			?ignoreUserStartNodes=${this.ignoreUserStartNodes}
+			@change=${this.#onChange}></umb-input-tree>`;
 	}
-
 	static styles = [UmbTextStyles];
 }
 

From 8789bfddd8f5f9d52d3a24d9fc422c2f6e235445 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 20 Oct 2023 10:53:11 +0200
Subject: [PATCH 06/17] value handling

---
 .../input-tree/input-tree.element.ts          | 54 +++++++------------
 .../property-editor-ui-tree-picker.element.ts | 24 ++++-----
 2 files changed, 30 insertions(+), 48 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
index 191da563ac..86be8fef13 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
@@ -3,8 +3,7 @@ import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
 
-export type NodeType = 'content' | 'member' | 'media';
-
+type NodeType = 'content' | 'member' | 'media';
 export type StartNode = {
 	type?: NodeType;
 	query?: string | null;
@@ -17,8 +16,16 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 		return undefined;
 	}
 
+	private _type: StartNode['type'] = undefined;
 	@property()
-	type?: StartNode['type'];
+	public set type(newType: StartNode['type']) {
+		if (newType !== this._type) {
+			this._type = newType?.toLowerCase() as StartNode['type'];
+		}
+	}
+	public get type(): StartNode['type'] {
+		return this._type;
+	}
 
 	@property()
 	query?: string;
@@ -49,17 +56,18 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 
 	@property()
 	public set value(newValue: string) {
+		super.value = newValue;
 		if (newValue) {
-			super.value = newValue;
-			this.items = newValue.split(',');
+			this.selectedIds = newValue.split(',');
+		} else {
+			this.selectedIds = [];
 		}
 	}
 	public get value(): string {
 		return super.value as string;
 	}
 
-	@state()
-	items: Array<string> = [];
+	selectedIds: Array<string> = [];
 
 	#onChange(event: CustomEvent) {
 		this.value = (event.target as UmbInputDocumentElement).selectedIds.join(',');
@@ -71,36 +79,10 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	render() {
-		return html`${this.#renderElement()}
-			<p>${this.#renderTip()}</p>`;
-	}
-
-	#renderTip() {
-		if (this.items.length && this.items.length !== this.max) {
-			if (this.items.length > this.max) {
-				return `You can only have up to ${this.max} item(s) selected`;
-			}
-			if (this.min === this.max && this.min !== 0) {
-				return `Add ${this.min - this.items.length} more item(s)`;
-			}
-			if (this.min === 0 && this.max) {
-				return `Add up to ${this.max} items`;
-			}
-			if (this.min > 0 && this.max > 0) {
-				return `Add between ${this.min} and ${this.max} item(s)`;
-			}
-			if (this.items.length < this.min) {
-				return `You need to add at least ${this.min} items`;
-			}
-		}
-		return '';
-	}
-
-	#renderElement() {
 		switch (this.type) {
 			case 'content':
 				return html`<umb-input-document
-					.selectedIds=${this.items}
+					.selectedIds=${this.selectedIds}
 					.query=${this.query}
 					.startNodeId=${this.startNodeId}
 					.filter=${this.filter}
@@ -111,7 +93,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 					@change=${this.#onChange}></umb-input-document>`;
 			case 'media':
 				return html`<umb-input-media
-					.selectedIds=${this.items}
+					.selectedIds=${this.selectedIds}
 					.startNodeId=${this.startNodeId}
 					.filter=${this.filter}
 					.min=${this.min}
@@ -121,7 +103,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 					@change=${this.#onChange}></umb-input-media>`;
 			case 'member':
 				return html`<umb-input-member
-					.selectedIds=${this.items}
+					.selectedIds=${this.selectedIds}
 					.filter=${this.filter}
 					.min=${this.min}
 					.max=${this.max}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index a77cc3854a..1ab5ed851f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -56,22 +56,22 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	}
 
 	#onChange(e: CustomEvent) {
-		this.value = (e.target as UmbInputTreeElement).items.join(',');
+		this.value = (e.target as UmbInputTreeElement).value as string;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
 	render() {
-		return html`<umb-input-tree
-			.value=${this.value}
-			.type=${this.type}
-			.query=${this.query ?? ''}
-			.startNodeId=${this.startNodeId ?? ''}
-			.min=${this.min}
-			.max=${this.max}
-			.filter=${this.filter ?? ''}
-			?showOpenButton=${this.showOpenButton}
-			?ignoreUserStartNodes=${this.ignoreUserStartNodes}
-			@change=${this.#onChange}></umb-input-tree>`;
+		return html`${this.value}<umb-input-tree
+				.value=${this.value}
+				.type=${this.type}
+				.query=${this.query ?? ''}
+				.startNodeId=${this.startNodeId ?? ''}
+				.min=${this.min}
+				.max=${this.max}
+				.filter=${this.filter ?? ''}
+				?showOpenButton=${this.showOpenButton}
+				?ignoreUserStartNodes=${this.ignoreUserStartNodes}
+				@change=${this.#onChange}></umb-input-tree>`;
 	}
 	static styles = [UmbTextStyles];
 }

From d4fcf8f07da5d40eb4e64d1303073f22ff7c39e3 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 20 Oct 2023 12:19:04 +0200
Subject: [PATCH 07/17] start node picker

---
 .../input-tree/input-tree.element.ts          |  2 +-
 ...ditor-ui-tree-picker-start-node.element.ts | 72 +++++++++++++++++--
 .../uis/tree-picker/manifests.ts              | 12 +++-
 3 files changed, 77 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
index 86be8fef13..54bb7ece29 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
@@ -1,4 +1,4 @@
-import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
index 743c8525f4..bbc99ff003 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
@@ -1,5 +1,10 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { StartNode } from '@umbraco-cms/backoffice/components';
+import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
+import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 /**
@@ -7,14 +12,67 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
  */
 @customElement('umb-property-editor-ui-tree-picker-start-node')
 export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement {
-	@property()
-	value = '';
+	@property({ type: Object })
+	value: StartNode = {
+		type: 'content',
+	};
 
-	@property({ type: Array, attribute: false })
-	public config = [];
+	@state()
+	private _list: Array<Option> = [];
+
+	@property({ attribute: false })
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		if (!config) return;
+
+		const listData = config.getValueByAlias('items') as Array<Option>;
+		if (!listData.length) return;
+
+		this._list = listData.map((item): Option => {
+			const option: Option = { value: item.value, name: item.name, selected: false };
+			if (item.value === this.value.type) {
+				option.selected = true;
+			}
+			return option;
+		});
+	}
+
+	#onChangeType(event: UUISelectEvent) {
+		this.value = { ...this.value, type: event.target.value as StartNode['type'] };
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
+	#onChangeId(event: CustomEvent) {
+		this.value = {
+			...this.value,
+			id: (event.target as UmbInputDocumentElement | UmbInputMediaElement).selectedIds.join() as StartNode['id'],
+		};
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
 
 	render() {
-		return html`<div>umb-property-editor-ui-tree-picker-start-node</div>`;
+		return html`<umb-input-dropdown-list
+				@change="${this.#onChangeType}"
+				.options="${this._list}"></umb-input-dropdown-list>
+			${this.renderOption()}`;
+	}
+
+	renderOption() {
+		switch (this.value.type) {
+			case 'content':
+				return this.renderContentOption();
+			case 'media':
+				return this.renderMediaOption();
+			default:
+				return '';
+		}
+	}
+
+	renderContentOption() {
+		return html`<umb-input-document max="1" @change=${this.#onChangeId}></umb-input-document>`;
+	}
+
+	renderMediaOption() {
+		//TODO: Media Type picker
+		return html`<umb-input-media-types>umb-input-media-types</umb-input-media-types>`;
 	}
 
 	static styles = [UmbTextStyles];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
index 0553ae2034..1af17811d0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
@@ -15,9 +15,19 @@ const manifest: ManifestPropertyEditorUi = {
 			properties: [
 				{
 					alias: 'startNode',
-					label: 'Start node',
+					label: 'Node type',
 					description: '',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker.StartNode',
+					config: [
+						{
+							alias: 'items',
+							value: [
+								{ value: 'content', name: 'Content' },
+								{ value: 'member', name: 'Members' },
+								{ value: 'media', name: 'Media' },
+							],
+						},
+					],
 				},
 				{
 					alias: 'filter',

From e20d86f85f5f48af1223c0bd3a6fa59ffbcefa8a Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 20 Oct 2023 15:19:40 +0200
Subject: [PATCH 08/17] start node property

---
 .../src/packages/core/components/index.ts     |   1 +
 .../core/components/input-start-node/index.ts |   1 +
 .../input-start-node.element.ts               | 156 ++++++++++++++++++
 ...ditor-ui-tree-picker-start-node.element.ts |  47 ++----
 4 files changed, 168 insertions(+), 37 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.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 007aa9e0e6..ffed7a48de 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
@@ -25,6 +25,7 @@ export * from './input-number-range/index.js';
 export * from './input-radio-button-list/index.js';
 export * from './input-section/index.js';
 export * from './input-slider/index.js';
+export * from './input-start-node/index.js';
 export * from './input-toggle/index.js';
 export * from './input-tree/index.js';
 export * from './input-upload-field/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts
new file mode 100644
index 0000000000..a712befd6d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts
@@ -0,0 +1 @@
+export * from './input-start-node.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
new file mode 100644
index 0000000000..5f10765103
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
@@ -0,0 +1,156 @@
+import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
+import { html, customElement, property, state, css, ifDefined, query } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin, UUIInputElement, UUIInputEvent, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
+import { StartNode } from '@umbraco-cms/backoffice/components';
+
+@customElement('umb-input-start-node')
+export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
+	protected getFormElement() {
+		return undefined;
+	}
+	private _startNodeQuery = '';
+
+	@state()
+	private queryTyping?: boolean;
+
+	@property()
+	startNodeType?: StartNode['type'];
+
+	@property({ attribute: 'start-node-id' })
+	startNodeId?: string;
+
+	@property()
+	public get startNodeQuery(): string {
+		return this._startNodeQuery;
+	}
+	public set startNodeQuery(query: string) {
+		this._startNodeQuery = query;
+		query ? (this.queryTyping = true) : (this.queryTyping = false);
+	}
+
+	@property({ type: Array })
+	options: Array<Option> = [];
+
+	@query('#query')
+	queryInput!: UUIInputElement;
+
+	#onTypeChange(event: UUISelectEvent) {
+		this.startNodeType = event.target.value as StartNode['type'];
+
+		// Clear others
+		this.startNodeQuery = '';
+		this.startNodeId = '';
+		this.dispatchEvent(new CustomEvent('change'));
+	}
+
+	#onIdChange(event: CustomEvent) {
+		this.startNodeId = (event.target as UmbInputDocumentElement | UmbInputMediaElement).selectedIds.join('');
+		this.dispatchEvent(new CustomEvent('change'));
+	}
+
+	#onQueryChange(event: UUIInputEvent) {
+		this.startNodeQuery = event.target.value as string;
+		this.dispatchEvent(new CustomEvent('change'));
+	}
+
+	#onQueryCancel() {
+		this.queryTyping = false;
+		this.queryInput.value = '';
+		if (this.startNodeQuery) {
+			this.startNodeQuery = '';
+			this.dispatchEvent(new CustomEvent('change'));
+		}
+	}
+
+	render() {
+		return html`<umb-input-dropdown-list
+				.options=${this.options}
+				@change="${this.#onTypeChange}"></umb-input-dropdown-list>
+			${this.renderType()}`;
+	}
+
+	renderType() {
+		switch (this.startNodeType) {
+			case 'content':
+				return this.renderTypeContent();
+			case 'media':
+				return this.renderTypeMedia();
+			case 'member':
+				return this.renderTypeMember();
+			default:
+				return 'No type found';
+		}
+	}
+
+	renderTypeContent() {
+		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
+
+		if (this.startNodeQuery || this.queryTyping) {
+			return html`<uui-input
+					id="query"
+					label="query"
+					placeholder="Enter XPath query"
+					@change=${this.#onQueryChange}
+					value=${ifDefined(this.startNodeQuery)}>
+				</uui-input>
+				<uui-button label="Show XPath query help">
+					<uui-icon name="umb:info" title="Show XPath query help"></uui-icon>Show XPath query help
+				</uui-button>
+				<uui-button label="Cancel and clear query" @click=${this.#onQueryCancel}>
+					<uui-icon name="umb:backspace"></uui-icon>
+					Clear & Cancel
+				</uui-button>`;
+		}
+
+		return html`
+			<umb-input-document
+				@change=${this.#onIdChange}
+				.selectedIds=${startNodeId}
+				.query=${this.startNodeQuery}
+				max="1"></umb-input-document>
+			${!startNodeId.length ? this.renderQueryButton() : ''}
+		`;
+	}
+
+	renderQueryButton() {
+		return html`<uui-button
+			label="Query for root node with XPath"
+			@click=${() => (this.queryTyping = !this.queryTyping)}>
+			<uui-icon name="umb:search"></uui-icon>Query for root node with XPath
+		</uui-button>`;
+	}
+
+	renderTypeMedia() {
+		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
+		//TODO => MediaTypes
+		return html` <umb-input-media @change=${this.#onIdChange} .selectedIds=${startNodeId} max="1"></umb-input-media> `;
+	}
+
+	renderTypeMember() {
+		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
+		//TODO => Members
+		return html`
+			<umb-input-member @change=${this.#onIdChange} .selectedIds=${startNodeId} max="1"></umb-input-member>
+		`;
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-4);
+			}
+		`,
+	];
+}
+
+export default UmbInputStartNodeElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-start-node': UmbInputStartNodeElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
index bbc99ff003..8ca2b6e0a2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
@@ -1,6 +1,6 @@
-import { StartNode } from '@umbraco-cms/backoffice/components';
+import { StartNode, UmbInputStartNodeElement } from '@umbraco-cms/backoffice/components';
 import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
 import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -18,7 +18,7 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 	};
 
 	@state()
-	private _list: Array<Option> = [];
+	private _options: Array<Option> = [];
 
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
@@ -27,7 +27,7 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 		const listData = config.getValueByAlias('items') as Array<Option>;
 		if (!listData.length) return;
 
-		this._list = listData.map((item): Option => {
+		this._options = listData.map((item): Option => {
 			const option: Option = { value: item.value, name: item.name, selected: false };
 			if (item.value === this.value.type) {
 				option.selected = true;
@@ -36,43 +36,16 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 		});
 	}
 
-	#onChangeType(event: UUISelectEvent) {
-		this.value = { ...this.value, type: event.target.value as StartNode['type'] };
-		this.dispatchEvent(new CustomEvent('property-value-change'));
-	}
-	#onChangeId(event: CustomEvent) {
-		this.value = {
-			...this.value,
-			id: (event.target as UmbInputDocumentElement | UmbInputMediaElement).selectedIds.join() as StartNode['id'],
-		};
+	#onChange(event: CustomEvent) {
+		//this.value = { ...this.value, ...((event.target as UmbInputStartNodeElement).startNode as StartNode) };
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
 	render() {
-		return html`<umb-input-dropdown-list
-				@change="${this.#onChangeType}"
-				.options="${this._list}"></umb-input-dropdown-list>
-			${this.renderOption()}`;
-	}
-
-	renderOption() {
-		switch (this.value.type) {
-			case 'content':
-				return this.renderContentOption();
-			case 'media':
-				return this.renderMediaOption();
-			default:
-				return '';
-		}
-	}
-
-	renderContentOption() {
-		return html`<umb-input-document max="1" @change=${this.#onChangeId}></umb-input-document>`;
-	}
-
-	renderMediaOption() {
-		//TODO: Media Type picker
-		return html`<umb-input-media-types>umb-input-media-types</umb-input-media-types>`;
+		return html`<umb-input-start-node
+			@change="${this.#onChange}"
+			.options="${this._options}"
+			.startNodeType=${this.value.type}></umb-input-start-node>`;
 	}
 
 	static styles = [UmbTextStyles];

From f701cb67664d1aef5d39f5256747d508756e817a Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 20 Oct 2023 15:22:19 +0200
Subject: [PATCH 09/17] property editor value

---
 ...perty-editor-ui-tree-picker-start-node.element.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
index 8ca2b6e0a2..f604f15498 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
@@ -1,8 +1,5 @@
 import { StartNode, UmbInputStartNodeElement } from '@umbraco-cms/backoffice/components';
-import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
 import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
-import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
-import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -37,7 +34,14 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 	}
 
 	#onChange(event: CustomEvent) {
-		//this.value = { ...this.value, ...((event.target as UmbInputStartNodeElement).startNode as StartNode) };
+		const target = event.target as UmbInputStartNodeElement;
+
+		this.value = {
+			type: target.startNodeType,
+			id: target.startNodeId,
+			query: target.startNodeQuery,
+		};
+
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 

From 256fee09d952ddf55a5a01c2fd484d606a884dfa Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Mon, 23 Oct 2023 09:52:05 +0200
Subject: [PATCH 10/17] remove query

---
 .../src/mocks/data/data-type.data.ts          |  1 -
 .../src/mocks/data/document-type.data.ts      | 95 -------------------
 .../input-start-node.element.ts               | 68 +------------
 .../input-tree/input-tree.element.ts          |  7 +-
 ...ditor-ui-tree-picker-start-node.element.ts |  3 +-
 .../property-editor-ui-tree-picker.element.ts |  5 -
 6 files changed, 5 insertions(+), 174 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
index 3898b179fd..c82392c7a4 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type.data.ts
@@ -205,7 +205,6 @@ export const data: Array<DataTypeResponseModel | FolderTreeItemResponseModel> =
 				alias: 'startNode',
 				value: {
 					type: 'content',
-					query: '',
 					id: null,
 				},
 			},
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts
index 868b48e5ac..5eb3eca13d 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type.data.ts
@@ -640,101 +640,6 @@ export const data: Array<DocumentTypeResponseModel> = [
 					labelOnTop: false,
 				},
 			},
-			{
-				id: '3',
-				containerId: 'all-properties-group-key',
-				alias: 'contentPicker',
-				name: 'Content Picker',
-				description: '',
-				dataTypeId: 'dt-contentPicker',
-				variesByCulture: false,
-				variesBySegment: false,
-				validation: {
-					mandatory: true,
-					mandatoryMessage: null,
-					regEx: null,
-					regExMessage: null,
-				},
-				appearance: {
-					labelOnTop: false,
-				},
-			},
-			{
-				id: '19',
-				containerId: 'all-properties-group-key',
-				alias: 'mediaPicker',
-				name: 'Media Picker',
-				description: '',
-				dataTypeId: 'dt-mediaPicker',
-				variesByCulture: false,
-				variesBySegment: false,
-				validation: {
-					mandatory: true,
-					mandatoryMessage: null,
-					regEx: null,
-					regExMessage: null,
-				},
-				appearance: {
-					labelOnTop: false,
-				},
-			},
-			{
-				id: '30',
-				containerId: 'all-properties-group-key',
-				alias: 'memberPicker',
-				name: 'Member Picker',
-				description: '',
-				dataTypeId: 'dt-memberPicker',
-				variesByCulture: false,
-				variesBySegment: false,
-				validation: {
-					mandatory: true,
-					mandatoryMessage: null,
-					regEx: null,
-					regExMessage: null,
-				},
-				appearance: {
-					labelOnTop: false,
-				},
-			},
-			{
-				id: '31',
-				containerId: 'all-properties-group-key',
-				alias: 'memberGroupPicker',
-				name: 'Member Group Picker',
-				description: '',
-				dataTypeId: 'dt-memberGroupPicker',
-				variesByCulture: false,
-				variesBySegment: false,
-				validation: {
-					mandatory: true,
-					mandatoryMessage: null,
-					regEx: null,
-					regExMessage: null,
-				},
-				appearance: {
-					labelOnTop: false,
-				},
-			},
-			{
-				id: '32',
-				containerId: 'all-properties-group-key',
-				alias: 'userPicker',
-				name: 'User Picker',
-				description: '',
-				dataTypeId: 'dt-userPicker',
-				variesByCulture: false,
-				variesBySegment: false,
-				validation: {
-					mandatory: true,
-					mandatoryMessage: null,
-					regEx: null,
-					regExMessage: null,
-				},
-				appearance: {
-					labelOnTop: false,
-				},
-			},
 		],
 		containers: [
 			{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
index 5f10765103..45b8964d86 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
@@ -1,6 +1,6 @@
 import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
-import { html, customElement, property, state, css, ifDefined, query } from '@umbraco-cms/backoffice/external/lit';
-import { FormControlMixin, UUIInputElement, UUIInputEvent, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
 import { StartNode } from '@umbraco-cms/backoffice/components';
@@ -10,10 +10,6 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 	protected getFormElement() {
 		return undefined;
 	}
-	private _startNodeQuery = '';
-
-	@state()
-	private queryTyping?: boolean;
 
 	@property()
 	startNodeType?: StartNode['type'];
@@ -21,26 +17,13 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 	@property({ attribute: 'start-node-id' })
 	startNodeId?: string;
 
-	@property()
-	public get startNodeQuery(): string {
-		return this._startNodeQuery;
-	}
-	public set startNodeQuery(query: string) {
-		this._startNodeQuery = query;
-		query ? (this.queryTyping = true) : (this.queryTyping = false);
-	}
-
 	@property({ type: Array })
 	options: Array<Option> = [];
 
-	@query('#query')
-	queryInput!: UUIInputElement;
-
 	#onTypeChange(event: UUISelectEvent) {
 		this.startNodeType = event.target.value as StartNode['type'];
 
 		// Clear others
-		this.startNodeQuery = '';
 		this.startNodeId = '';
 		this.dispatchEvent(new CustomEvent('change'));
 	}
@@ -50,20 +33,6 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 		this.dispatchEvent(new CustomEvent('change'));
 	}
 
-	#onQueryChange(event: UUIInputEvent) {
-		this.startNodeQuery = event.target.value as string;
-		this.dispatchEvent(new CustomEvent('change'));
-	}
-
-	#onQueryCancel() {
-		this.queryTyping = false;
-		this.queryInput.value = '';
-		if (this.startNodeQuery) {
-			this.startNodeQuery = '';
-			this.dispatchEvent(new CustomEvent('change'));
-		}
-	}
-
 	render() {
 		return html`<umb-input-dropdown-list
 				.options=${this.options}
@@ -86,42 +55,11 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 
 	renderTypeContent() {
 		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
-
-		if (this.startNodeQuery || this.queryTyping) {
-			return html`<uui-input
-					id="query"
-					label="query"
-					placeholder="Enter XPath query"
-					@change=${this.#onQueryChange}
-					value=${ifDefined(this.startNodeQuery)}>
-				</uui-input>
-				<uui-button label="Show XPath query help">
-					<uui-icon name="umb:info" title="Show XPath query help"></uui-icon>Show XPath query help
-				</uui-button>
-				<uui-button label="Cancel and clear query" @click=${this.#onQueryCancel}>
-					<uui-icon name="umb:backspace"></uui-icon>
-					Clear & Cancel
-				</uui-button>`;
-		}
-
 		return html`
-			<umb-input-document
-				@change=${this.#onIdChange}
-				.selectedIds=${startNodeId}
-				.query=${this.startNodeQuery}
-				max="1"></umb-input-document>
-			${!startNodeId.length ? this.renderQueryButton() : ''}
+			<umb-input-document @change=${this.#onIdChange} .selectedIds=${startNodeId} max="1"></umb-input-document>
 		`;
 	}
 
-	renderQueryButton() {
-		return html`<uui-button
-			label="Query for root node with XPath"
-			@click=${() => (this.queryTyping = !this.queryTyping)}>
-			<uui-icon name="umb:search"></uui-icon>Query for root node with XPath
-		</uui-button>`;
-	}
-
 	renderTypeMedia() {
 		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
 		//TODO => MediaTypes
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
index 54bb7ece29..2cdfd4c1c8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
@@ -6,7 +6,6 @@ import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
 type NodeType = 'content' | 'member' | 'media';
 export type StartNode = {
 	type?: NodeType;
-	query?: string | null;
 	id?: string | null;
 };
 
@@ -19,7 +18,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	private _type: StartNode['type'] = undefined;
 	@property()
 	public set type(newType: StartNode['type']) {
-		if (newType !== this._type) {
+		if (newType?.toLowerCase() !== this._type) {
 			this._type = newType?.toLowerCase() as StartNode['type'];
 		}
 	}
@@ -27,9 +26,6 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 		return this._type;
 	}
 
-	@property()
-	query?: string;
-
 	@property({ type: String })
 	startNodeId?: string;
 
@@ -83,7 +79,6 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 			case 'content':
 				return html`<umb-input-document
 					.selectedIds=${this.selectedIds}
-					.query=${this.query}
 					.startNodeId=${this.startNodeId}
 					.filter=${this.filter}
 					.min=${this.min}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
index f604f15498..1480d98758 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
@@ -1,5 +1,5 @@
 import { StartNode, UmbInputStartNodeElement } from '@umbraco-cms/backoffice/components';
-import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -39,7 +39,6 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 		this.value = {
 			type: target.startNodeType,
 			id: target.startNodeId,
-			query: target.startNodeQuery,
 		};
 
 		this.dispatchEvent(new CustomEvent('property-value-change'));
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index 1ab5ed851f..95e0520290 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -17,9 +17,6 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	@state()
 	type?: StartNode['type'];
 
-	@state()
-	query?: string | null;
-
 	@state()
 	startNodeId?: string | null;
 
@@ -43,7 +40,6 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 		const startNode: StartNode | undefined = config?.getValueByAlias('startNode');
 		if (startNode) {
 			this.type = startNode.type;
-			this.query = startNode.query;
 			this.startNodeId = startNode.id;
 		}
 
@@ -64,7 +60,6 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 		return html`${this.value}<umb-input-tree
 				.value=${this.value}
 				.type=${this.type}
-				.query=${this.query ?? ''}
 				.startNodeId=${this.startNodeId ?? ''}
 				.min=${this.min}
 				.max=${this.max}

From ac6536d089fcdaa2af968e884793989917b3e60f Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 8 Nov 2023 12:45:58 +0100
Subject: [PATCH 11/17] make private

---
 .../input-start-node/input-start-node.element.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
index 45b8964d86..91ddc2cdf5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
@@ -37,36 +37,36 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 		return html`<umb-input-dropdown-list
 				.options=${this.options}
 				@change="${this.#onTypeChange}"></umb-input-dropdown-list>
-			${this.renderType()}`;
+			${this.#renderType()}`;
 	}
 
-	renderType() {
+	#renderType() {
 		switch (this.startNodeType) {
 			case 'content':
-				return this.renderTypeContent();
+				return this.#renderTypeContent();
 			case 'media':
-				return this.renderTypeMedia();
+				return this.#renderTypeMedia();
 			case 'member':
-				return this.renderTypeMember();
+				return this.#renderTypeMember();
 			default:
 				return 'No type found';
 		}
 	}
 
-	renderTypeContent() {
+	#renderTypeContent() {
 		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
 		return html`
 			<umb-input-document @change=${this.#onIdChange} .selectedIds=${startNodeId} max="1"></umb-input-document>
 		`;
 	}
 
-	renderTypeMedia() {
+	#renderTypeMedia() {
 		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
 		//TODO => MediaTypes
 		return html` <umb-input-media @change=${this.#onIdChange} .selectedIds=${startNodeId} max="1"></umb-input-media> `;
 	}
 
-	renderTypeMember() {
+	#renderTypeMember() {
 		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
 		//TODO => Members
 		return html`

From b4d7ce788917d074767b79f3654a1e8124acfeac Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 8 Nov 2023 12:46:50 +0100
Subject: [PATCH 12/17] change event

---
 .../components/input-start-node/input-start-node.element.ts    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
index 91ddc2cdf5..0bbb853025 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
@@ -4,6 +4,7 @@ import { FormControlMixin, UUISelectEvent } from '@umbraco-cms/backoffice/extern
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
 import { StartNode } from '@umbraco-cms/backoffice/components';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 @customElement('umb-input-start-node')
 export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
@@ -25,7 +26,7 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 
 		// Clear others
 		this.startNodeId = '';
-		this.dispatchEvent(new CustomEvent('change'));
+		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	#onIdChange(event: CustomEvent) {

From 900cd9ede9a8857997bc1203e2f2b384d3699297 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 8 Nov 2023 13:08:04 +0100
Subject: [PATCH 13/17] change evnet

---
 .../packages/core/components/input-tree/input-tree.element.ts  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
index 2cdfd4c1c8..699b1bcafb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
@@ -2,6 +2,7 @@ import { css, html, customElement, property } from '@umbraco-cms/backoffice/exte
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 type NodeType = 'content' | 'member' | 'media';
 export type StartNode = {
@@ -67,7 +68,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 
 	#onChange(event: CustomEvent) {
 		this.value = (event.target as UmbInputDocumentElement).selectedIds.join(',');
-		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	constructor() {

From 4a465e4dd2d87b4bd15f83f7aae8e3453c3a9e75 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 8 Nov 2023 14:07:26 +0100
Subject: [PATCH 14/17] move components

---
 .../src/packages/core/components/index.ts     |  2 --
 .../core/components/input-start-node/index.ts |  1 -
 .../core/content-type/components/index.ts     |  1 +
 .../components/input-content-type/index.ts    |  1 +
 .../input-content-type.element.ts}            | 16 +++++++++----
 .../src/packages/core/content-type/index.ts   |  1 +
 ...ditor-ui-tree-picker-start-node.element.ts |  8 +++----
 .../property-editor-ui-tree-picker.element.ts | 23 ++++++++++---------
 .../packages/core/tree/components/index.ts    |  1 +
 .../{ => tree}/components/input-tree/index.ts |  0
 .../input-tree/input-tree.element.ts          |  9 ++------
 .../input-tree/input-tree.stories.ts          |  0
 .../components/input-tree/input-tree.test.ts  |  0
 .../src/packages/core/tree/index.ts           |  1 +
 14 files changed, 34 insertions(+), 30 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/index.ts
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/index.ts
 rename src/Umbraco.Web.UI.Client/src/packages/core/{components/input-start-node/input-start-node.element.ts => content-type/components/input-content-type/input-content-type.element.ts} (87%)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/tree/components/index.ts
 rename src/Umbraco.Web.UI.Client/src/packages/core/{ => tree}/components/input-tree/index.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/core/{ => tree}/components/input-tree/input-tree.element.ts (94%)
 rename src/Umbraco.Web.UI.Client/src/packages/core/{ => tree}/components/input-tree/input-tree.stories.ts (100%)
 rename src/Umbraco.Web.UI.Client/src/packages/core/{ => tree}/components/input-tree/input-tree.test.ts (100%)

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 ffed7a48de..d212570fa6 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
@@ -25,9 +25,7 @@ export * from './input-number-range/index.js';
 export * from './input-radio-button-list/index.js';
 export * from './input-section/index.js';
 export * from './input-slider/index.js';
-export * from './input-start-node/index.js';
 export * from './input-toggle/index.js';
-export * from './input-tree/index.js';
 export * from './input-upload-field/index.js';
 export * from './property-editor-config/index.js';
 export * from './property-type-based-property/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts
deleted file mode 100644
index a712befd6d..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './input-start-node.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/index.ts
new file mode 100644
index 0000000000..d377387e83
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/index.ts
@@ -0,0 +1 @@
+export * from './input-content-type/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/index.ts
new file mode 100644
index 0000000000..b5bcade1c2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/index.ts
@@ -0,0 +1 @@
+export * from './input-content-type.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/input-content-type.element.ts
similarity index 87%
rename from src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/input-content-type.element.ts
index 0bbb853025..72a05ff523 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/input-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/input-content-type.element.ts
@@ -3,11 +3,17 @@ import { html, customElement, property, css } from '@umbraco-cms/backoffice/exte
 import { FormControlMixin, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
-import { StartNode } from '@umbraco-cms/backoffice/components';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
-@customElement('umb-input-start-node')
-export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
+export type ContentType = 'content' | 'member' | 'media';
+
+export type StartNode = {
+	type?: ContentType;
+	id?: string | null;
+};
+
+@customElement('umb-input-content-type')
+export class UmbInputContentTypeElement extends FormControlMixin(UmbLitElement) {
 	protected getFormElement() {
 		return undefined;
 	}
@@ -86,10 +92,10 @@ export class UmbInputStartNodeElement extends FormControlMixin(UmbLitElement) {
 	];
 }
 
-export default UmbInputStartNodeElement;
+export default UmbInputContentTypeElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-input-start-node': UmbInputStartNodeElement;
+		'umb-input-content-type': UmbInputContentTypeElement;
 	}
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/index.ts
index c587218a3d..6535bc4f1c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/index.ts
@@ -1,3 +1,4 @@
 export * from './content-type-container-structure-helper.class.js';
 export * from './content-type-property-structure-helper.class.js';
 export * from './content-type-structure-manager.class.js';
+export * from './components/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
index 1480d98758..c45b9e6483 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
@@ -1,4 +1,4 @@
-import { StartNode, UmbInputStartNodeElement } from '@umbraco-cms/backoffice/components';
+import { StartNode, UmbInputContentTypeElement } from '@umbraco-cms/backoffice/content-type';
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -34,7 +34,7 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 	}
 
 	#onChange(event: CustomEvent) {
-		const target = event.target as UmbInputStartNodeElement;
+		const target = event.target as UmbInputContentTypeElement;
 
 		this.value = {
 			type: target.startNodeType,
@@ -45,10 +45,10 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 	}
 
 	render() {
-		return html`<umb-input-start-node
+		return html`<umb-input-content-type
 			@change="${this.#onChange}"
 			.options="${this._options}"
-			.startNodeType=${this.value.type}></umb-input-start-node>`;
+			.startNodeType=${this.value.type}></umb-input-content-type>`;
 	}
 
 	static styles = [UmbTextStyles];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
index 95e0520290..eb89ced60f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
@@ -3,7 +3,8 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
-import { StartNode, UmbInputTreeElement } from '@umbraco-cms/backoffice/components';
+import { StartNode } from '@umbraco-cms/backoffice/content-type';
+import { UmbInputTreeElement } from '@umbraco-cms/backoffice/tree';
 
 /**
  * @element umb-property-editor-ui-tree-picker
@@ -57,16 +58,16 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
 	}
 
 	render() {
-		return html`${this.value}<umb-input-tree
-				.value=${this.value}
-				.type=${this.type}
-				.startNodeId=${this.startNodeId ?? ''}
-				.min=${this.min}
-				.max=${this.max}
-				.filter=${this.filter ?? ''}
-				?showOpenButton=${this.showOpenButton}
-				?ignoreUserStartNodes=${this.ignoreUserStartNodes}
-				@change=${this.#onChange}></umb-input-tree>`;
+		return html`<umb-input-tree
+			.value=${this.value}
+			.type=${this.type}
+			.startNodeId=${this.startNodeId ?? ''}
+			.min=${this.min}
+			.max=${this.max}
+			.filter=${this.filter ?? ''}
+			?showOpenButton=${this.showOpenButton}
+			?ignoreUserStartNodes=${this.ignoreUserStartNodes}
+			@change=${this.#onChange}></umb-input-tree>`;
 	}
 	static styles = [UmbTextStyles];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/index.ts
new file mode 100644
index 0000000000..e8fa7cda1c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/index.ts
@@ -0,0 +1 @@
+export * from './input-tree/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/index.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/index.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
similarity index 94%
rename from src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
index 699b1bcafb..9e5dde1088 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
@@ -3,12 +3,7 @@ import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
-
-type NodeType = 'content' | 'member' | 'media';
-export type StartNode = {
-	type?: NodeType;
-	id?: string | null;
-};
+import { StartNode } from '@umbraco-cms/backoffice/content-type';
 
 @customElement('umb-input-tree')
 export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
@@ -108,7 +103,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 					@change=${this.#onChange}>
 				</umb-input-member>`;
 			default:
-				return html`Node type could not be found`;
+				return html`Type could not be found`;
 		}
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.stories.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.stories.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.stories.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.test.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/components/input-tree/input-tree.test.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.test.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts
index 59a6bca6f3..459db5fb37 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts
@@ -5,6 +5,7 @@ export * from './tree-item-base/index.js';
 export * from './tree-menu-item/index.js';
 export * from './tree.context.js';
 export * from './tree.element.js';
+export * from './components/index.js';
 
 export interface UmbTreeRootModel {
 	type: string;

From 479dbb6a77896f295718d485f394bea6d921f00d Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 8 Nov 2023 15:45:50 +0100
Subject: [PATCH 15/17] update

---
 .../core/tree/components/input-tree/input-tree.element.ts     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
index 9e5dde1088..8b5b2870db 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/components/input-tree/input-tree.element.ts
@@ -14,8 +14,10 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	private _type: StartNode['type'] = undefined;
 	@property()
 	public set type(newType: StartNode['type']) {
+		const oldType = this._type;
 		if (newType?.toLowerCase() !== this._type) {
 			this._type = newType?.toLowerCase() as StartNode['type'];
+			this.requestUpdate('type', oldType);
 		}
 	}
 	public get type(): StartNode['type'] {
@@ -71,7 +73,7 @@ export class UmbInputTreeElement extends FormControlMixin(UmbLitElement) {
 	}
 
 	render() {
-		switch (this.type) {
+		switch (this._type) {
 			case 'content':
 				return html`<umb-input-document
 					.selectedIds=${this.selectedIds}

From f54f60d6ad007a3922c78c95b0d209e6e357cf89 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 8 Nov 2023 15:47:48 +0100
Subject: [PATCH 16/17] input document dont render add if max reached

---
 .../input-document/input-document.element.ts        | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
index 01df812944..24e5bfc7a8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
@@ -96,12 +96,19 @@ export class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
 	render() {
 		return html`
 			<uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
-			<uui-button id="add-button" look="placeholder" @click=${() => this.#pickerContext.openPicker()} label="open"
-				>Add</uui-button
-			>
+			${this.#renderAddButton()}
 		`;
 	}
 
+	#renderAddButton() {
+		if (this.max > 0 && this.selectedIds.length >= this.max) return;
+		return html`<uui-button
+			id="add-button"
+			look="placeholder"
+			@click=${() => this.#pickerContext.openPicker()}
+			label=${this.localize.term('general_add')}></uui-button>`;
+	}
+
 	private _renderItem(item: DocumentItemResponseModel) {
 		if (!item.id) return;
 		return html`

From 48812c3ab8ef2be24a97de11b00fbb1b8b86ff2e Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 9 Nov 2023 12:03:31 +0100
Subject: [PATCH 17/17] move array from config into element

---
 .../input-content-type.element.ts             | 60 ++++++++++++-------
 ...ditor-ui-tree-picker-start-node.element.ts | 34 ++---------
 .../uis/tree-picker/manifests.ts              | 10 ----
 3 files changed, 45 insertions(+), 59 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/input-content-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/input-content-type.element.ts
index 72a05ff523..3a51a0941a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/input-content-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/components/input-content-type/input-content-type.element.ts
@@ -1,5 +1,5 @@
 import { UmbInputDocumentElement } from '@umbraco-cms/backoffice/document';
-import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, css, state } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin, UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbInputMediaElement } from '@umbraco-cms/backoffice/media';
@@ -10,6 +10,7 @@ export type ContentType = 'content' | 'member' | 'media';
 export type StartNode = {
 	type?: ContentType;
 	id?: string | null;
+	query?: string | null;
 };
 
 @customElement('umb-input-content-type')
@@ -18,37 +19,57 @@ export class UmbInputContentTypeElement extends FormControlMixin(UmbLitElement)
 		return undefined;
 	}
 
+	private _type: StartNode['type'] = 'content';
 	@property()
-	startNodeType?: StartNode['type'];
+	public set type(value: StartNode['type']) {
+		const oldValue = this._type;
 
-	@property({ attribute: 'start-node-id' })
-	startNodeId?: string;
+		this._options = this._options.map((option) =>
+			option.value === value ? { ...option, selected: true } : { ...option, selected: false },
+		);
+		this._type = value;
+		this.requestUpdate('type', oldValue);
+	}
+	public get type(): StartNode['type'] {
+		return this._type;
+	}
 
-	@property({ type: Array })
-	options: Array<Option> = [];
+	@property({ attribute: 'node-id' })
+	nodeId = '';
+
+	@property({ attribute: 'dynamic-path' })
+	dynamicPath = '';
+
+	@state()
+	_options: Array<Option> = [
+		{ value: 'content', name: 'Content' },
+		{ value: 'member', name: 'Members' },
+		{ value: 'media', name: 'Media' },
+	];
 
 	#onTypeChange(event: UUISelectEvent) {
-		this.startNodeType = event.target.value as StartNode['type'];
+		this.type = event.target.value as StartNode['type'];
 
 		// Clear others
-		this.startNodeId = '';
+		this.nodeId = '';
+		this.dynamicPath = '';
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
 	#onIdChange(event: CustomEvent) {
-		this.startNodeId = (event.target as UmbInputDocumentElement | UmbInputMediaElement).selectedIds.join('');
+		this.nodeId = (event.target as UmbInputDocumentElement | UmbInputMediaElement).selectedIds.join('');
 		this.dispatchEvent(new CustomEvent('change'));
 	}
 
 	render() {
 		return html`<umb-input-dropdown-list
-				.options=${this.options}
+				.options=${this._options}
 				@change="${this.#onTypeChange}"></umb-input-dropdown-list>
 			${this.#renderType()}`;
 	}
 
 	#renderType() {
-		switch (this.startNodeType) {
+		switch (this.type) {
 			case 'content':
 				return this.#renderTypeContent();
 			case 'media':
@@ -61,24 +82,21 @@ export class UmbInputContentTypeElement extends FormControlMixin(UmbLitElement)
 	}
 
 	#renderTypeContent() {
-		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
-		return html`
-			<umb-input-document @change=${this.#onIdChange} .selectedIds=${startNodeId} max="1"></umb-input-document>
-		`;
+		const nodeId = this.nodeId ? [this.nodeId] : [];
+		//TODO: Dynamic paths
+		return html` <umb-input-document @change=${this.#onIdChange} .selectedIds=${nodeId} max="1"></umb-input-document> `;
 	}
 
 	#renderTypeMedia() {
-		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
+		const nodeId = this.nodeId ? [this.nodeId] : [];
 		//TODO => MediaTypes
-		return html` <umb-input-media @change=${this.#onIdChange} .selectedIds=${startNodeId} max="1"></umb-input-media> `;
+		return html` <umb-input-media @change=${this.#onIdChange} .selectedIds=${nodeId} max="1"></umb-input-media> `;
 	}
 
 	#renderTypeMember() {
-		const startNodeId = this.startNodeId ? [this.startNodeId] : [];
+		const nodeId = this.nodeId ? [this.nodeId] : [];
 		//TODO => Members
-		return html`
-			<umb-input-member @change=${this.#onIdChange} .selectedIds=${startNodeId} max="1"></umb-input-member>
-		`;
+		return html` <umb-input-member @change=${this.#onIdChange} .selectedIds=${nodeId} max="1"></umb-input-member> `;
 	}
 
 	static styles = [
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
index c45b9e6483..6700ad85d1 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/config/start-node/property-editor-ui-tree-picker-start-node.element.ts
@@ -1,6 +1,5 @@
 import { StartNode, UmbInputContentTypeElement } from '@umbraco-cms/backoffice/content-type';
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -10,35 +9,15 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 @customElement('umb-property-editor-ui-tree-picker-start-node')
 export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement {
 	@property({ type: Object })
-	value: StartNode = {
-		type: 'content',
-	};
-
-	@state()
-	private _options: Array<Option> = [];
-
-	@property({ attribute: false })
-	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		if (!config) return;
-
-		const listData = config.getValueByAlias('items') as Array<Option>;
-		if (!listData.length) return;
-
-		this._options = listData.map((item): Option => {
-			const option: Option = { value: item.value, name: item.name, selected: false };
-			if (item.value === this.value.type) {
-				option.selected = true;
-			}
-			return option;
-		});
-	}
+	value?: StartNode;
 
 	#onChange(event: CustomEvent) {
 		const target = event.target as UmbInputContentTypeElement;
 
 		this.value = {
-			type: target.startNodeType,
-			id: target.startNodeId,
+			type: target.type,
+			id: target.nodeId,
+			query: target.dynamicPath,
 		};
 
 		this.dispatchEvent(new CustomEvent('property-value-change'));
@@ -47,8 +26,7 @@ export class UmbPropertyEditorUITreePickerStartNodeElement extends UmbLitElement
 	render() {
 		return html`<umb-input-content-type
 			@change="${this.#onChange}"
-			.options="${this._options}"
-			.startNodeType=${this.value.type}></umb-input-content-type>`;
+			.type=${this.value?.type}></umb-input-content-type>`;
 	}
 
 	static styles = [UmbTextStyles];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
index 1af17811d0..d3f7da54aa 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/manifests.ts
@@ -18,16 +18,6 @@ const manifest: ManifestPropertyEditorUi = {
 					label: 'Node type',
 					description: '',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker.StartNode',
-					config: [
-						{
-							alias: 'items',
-							value: [
-								{ value: 'content', name: 'Content' },
-								{ value: 'member', name: 'Members' },
-								{ value: 'media', name: 'Media' },
-							],
-						},
-					],
 				},
 				{
 					alias: 'filter',