start node property

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';

src/Umbraco.Web.UI.Client/src/packages/core/components/input-start-node/index.ts

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

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;
+	}
+}

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];