rename to avoid clash with keyword 'source'

src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-content/index.ts

@@ -0,0 +1 @@
+export * from './input-content-picker-source.element.js';

src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-content/input-content-picker-source.element.ts

@@ -0,0 +1,140 @@
+import type { UmbContentPickerDynamicRoot, UmbContentPickerSourceType } from '../../types.js';
+import type { UmbInputContentPickerDocumentRootElement } from '../../dynamic-root/components/input-content-picker-document-root.element.js';
+import { html, customElement, property, css, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
+import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
+
+import '../../dynamic-root/components/input-content-picker-document-root.element.js';
+
+@customElement('umb-input-content-picker-source')
+export class UmbInputContentPickerSourceElement extends UUIFormControlMixin(UmbLitElement, '') {
+	protected override getFormElement() {
+		return undefined;
+	}
+
+	#type: UmbContentPickerSourceType = 'content';
+
+	@property()
+	public set type(value: UmbContentPickerSourceType) {
+		if (value === undefined) {
+			value = this.#type;
+		}
+
+		const oldValue = this.#type;
+
+		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(): UmbContentPickerSourceType {
+		return this.#type;
+	}
+
+	@property({ attribute: 'node-id' })
+	nodeId?: string;
+
+	@property({ attribute: false })
+	dynamicRoot?: UmbContentPickerDynamicRoot;
+
+	@state()
+	_options: Array<Option> = [
+		{ value: 'content', name: 'Content' },
+		{ value: 'media', name: 'Media' },
+		{ value: 'member', name: 'Members' },
+	];
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+
+		// HACK: Workaround consolidating the old content-picker and dynamic-root. [LK:2024-01-24]
+		if (this.nodeId && !this.dynamicRoot) {
+			this.dynamicRoot = { originAlias: 'ByKey', originKey: this.nodeId, querySteps: [] };
+		}
+	}
+
+	#onContentTypeChange(event: UUISelectEvent) {
+		event.stopPropagation();
+
+		this.type = event.target.value as UmbContentPickerSourceType;
+
+		this.nodeId = undefined;
+		this.dynamicRoot = undefined;
+
+		this.dispatchEvent(new UmbChangeEvent());
+	}
+
+	#onDocumentRootChange(event: CustomEvent & { target: UmbInputContentPickerDocumentRootElement }) {
+		switch (this.type) {
+			case 'content':
+				this.dynamicRoot = event.target.data;
+
+				// HACK: Workaround consolidating the old content-picker and dynamic-root. [LK:2024-01-24]
+				if (this.dynamicRoot?.originAlias === 'ByKey') {
+					if (!this.dynamicRoot.querySteps || this.dynamicRoot.querySteps?.length === 0) {
+						this.nodeId = this.dynamicRoot.originKey;
+					} else {
+						this.nodeId = undefined;
+					}
+				} else if (this.nodeId) {
+					this.nodeId = undefined;
+				}
+
+				break;
+			case 'media':
+			case 'member':
+			default:
+				break;
+		}
+
+		this.dispatchEvent(new UmbChangeEvent());
+	}
+
+	override render() {
+		return html`<umb-input-dropdown-list
+				@change=${this.#onContentTypeChange}
+				.options=${this._options}></umb-input-dropdown-list>
+			${this.#renderSourcePicker()}`;
+	}
+
+	#renderSourcePicker() {
+		switch (this.type) {
+			case 'content':
+				return this.#renderDocumentSourcePicker();
+			case 'media':
+			case 'member':
+			default:
+				return nothing;
+		}
+	}
+
+	#renderDocumentSourcePicker() {
+		return html`
+			<umb-input-content-picker-document-root .data=${this.dynamicRoot} @change=${this.#onDocumentRootChange}>
+			</umb-input-content-picker-document-root>
+		`;
+	}
+
+	static override readonly styles = [
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-4);
+			}
+		`,
+	];
+}
+
+export default UmbInputContentPickerSourceElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-content-picker-source': UmbInputContentPickerSourceElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-content/manifests.ts

@@ -0,0 +1,13 @@
+import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/property-editor';
+
+export const manifest: ManifestPropertyEditorUi = {
+	type: 'propertyEditorUi',
+	alias: 'Umb.PropertyEditorUi.ContentPicker.Source',
+	name: 'Content Picker Source Property Editor UI',
+	element: () => import('./property-editor-ui-content-picker-source.element.js'),
+	meta: {
+		label: 'Content Picker Source',
+		icon: 'icon-page-add',
+		group: 'pickers',
+	},
+};

src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-content/property-editor-ui-content-picker-source.element.ts

@@ -0,0 +1,52 @@
+import type { UmbContentPickerSource } from '../../types.js';
+import type { UmbInputContentPickerSourceElement } from './input-content-picker-source.element.js';
+import {
+	type UmbPropertyEditorUiElement,
+	type UmbPropertyEditorConfigCollection,
+	UmbPropertyValueChangeEvent,
+} from '@umbraco-cms/backoffice/property-editor';
+import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+// import of local component
+import './input-content-picker-source.element.js';
+
+/**
+ * @element umb-property-editor-ui-content-picker-source
+ */
+@customElement('umb-property-editor-ui-content-picker-source')
+export class UmbPropertyEditorUIContentPickerSourceElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+	@property({ type: Object })
+	value?: UmbContentPickerSource;
+
+	@property({ type: Object, attribute: false })
+	public config?: UmbPropertyEditorConfigCollection;
+
+	#onChange(event: CustomEvent) {
+		const target = event.target as UmbInputContentPickerSourceElement;
+
+		this.value = {
+			type: target.type,
+			id: target.nodeId,
+			dynamicRoot: target.dynamicRoot,
+		};
+
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
+	}
+
+	override render() {
+		return html`<umb-input-content-picker-source
+			@change=${this.#onChange}
+			.type=${this.value?.type ?? 'content'}
+			.nodeId=${this.value?.id}
+			.dynamicRoot=${this.value?.dynamicRoot}></umb-input-content-picker-source>`;
+	}
+}
+
+export default UmbPropertyEditorUIContentPickerSourceElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-content-picker-source': UmbPropertyEditorUIContentPickerSourceElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-content/property-editor-ui-content-picker-source.stories.ts

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

src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/config/source-content/property-editor-ui-content-picker-source.test.ts

@@ -0,0 +1,23 @@
+import { UmbPropertyEditorUIContentPickerSourceElement } from './property-editor-ui-content-picker-source.element.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import { type UmbTestRunnerWindow, defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+
+describe('UmbPropertyEditorUIContentPickerSourceElement', () => {
+	let element: UmbPropertyEditorUIContentPickerSourceElement;
+
+	beforeEach(async () => {
+		element = await fixture(html`
+			<umb-property-editor-ui-content-picker-source></umb-property-editor-ui-content-picker-source>
+		`);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbPropertyEditorUIContentPickerSourceElement);
+	});
+
+	if ((window as UmbTestRunnerWindow).__UMBRACO_TEST_RUN_A11Y_TEST) {
+		it('passes the a11y audit', async () => {
+			await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+		});
+	}
+});

src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/index.ts

@@ -1,4 +1,4 @@
 export * from './components/index.js';
-export * from './config/source/index.js';
+export * from './config/source-content/index.js';
 export * from './dynamic-root/index.js';
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/manifests.ts

@@ -1,4 +1,4 @@
-import { manifest as sourceManifest } from './config/source/manifests.js';
+import { manifest as sourceManifest } from './config/source-content/manifests.js';
 import { manifest as sourceTypeManifest } from './config/source-type/manifests.js';
 import { manifest as schemaManifest } from './Umbraco.MultiNodeTreePicker.js';
 import { manifests as dynamicRootManifests } from './dynamic-root/manifests.js';