@umbraco-cms/backoffice 14.0.0--preview005-d06b80f2 → 14.0.0--preview005-a87dc391

package/dist-cms/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.js

@@ -4,32 +4,34 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbPropertyEditorUITreePickerElement_instances, _UmbPropertyEditorUITreePickerElement_onChange;
+var _UmbPropertyEditorUITreePickerElement_instances, _UmbPropertyEditorUITreePickerElement_dynamicRoot, _UmbPropertyEditorUITreePickerElement_dynamicRootRepository, _UmbPropertyEditorUITreePickerElement_workspaceContext, _UmbPropertyEditorUITreePickerElement_setStartNodeId, _UmbPropertyEditorUITreePickerElement_onChange;
 import { html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbPropertyValueChangeEvent } from '../../index.js';
+import { UmbDynamicRootRepository } from '../../../../dynamic-root/index.js';
+import { UMB_WORKSPACE_CONTEXT } from '../../../workspace/index.js';
 /**
  * @element umb-property-editor-ui-tree-picker
  */
 let UmbPropertyEditorUITreePickerElement = class UmbPropertyEditorUITreePickerElement extends UmbLitElement {
-    constructor() {
-        super(...arguments);
-        _UmbPropertyEditorUITreePickerElement_instances.add(this);
-        this.value = '';
-        this.min = 0;
-        this.max = 0;
-    }
     set config(config) {
         const startNode = config?.getValueByAlias('startNode');
         if (startNode) {
             this.type = startNode.type;
             this.startNodeId = startNode.id;
+            __classPrivateFieldSet(this, _UmbPropertyEditorUITreePickerElement_dynamicRoot, startNode.dynamicRoot, "f");
         }
         this.min = Number(config?.getValueByAlias('minNumber')) || 0;
         this.max = Number(config?.getValueByAlias('maxNumber')) || 0;
@@ -37,6 +39,24 @@ let UmbPropertyEditorUITreePickerElement = class UmbPropertyEditorUITreePickerEl
         this.showOpenButton = config?.getValueByAlias('showOpenButton');
         this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes');
     }
+    constructor() {
+        super();
+        _UmbPropertyEditorUITreePickerElement_instances.add(this);
+        this.value = '';
+        this.type = 'content';
+        this.min = 0;
+        this.max = 0;
+        _UmbPropertyEditorUITreePickerElement_dynamicRoot.set(this, void 0);
+        _UmbPropertyEditorUITreePickerElement_dynamicRootRepository.set(this, new UmbDynamicRootRepository(this));
+        _UmbPropertyEditorUITreePickerElement_workspaceContext.set(this, void 0);
+        this.consumeContext(UMB_WORKSPACE_CONTEXT, (workspaceContext) => {
+            __classPrivateFieldSet(this, _UmbPropertyEditorUITreePickerElement_workspaceContext, workspaceContext, "f");
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _UmbPropertyEditorUITreePickerElement_instances, "m", _UmbPropertyEditorUITreePickerElement_setStartNodeId).call(this);
+    }
     render() {
         return html `<umb-input-tree
 			.value=${this.value}
@@ -50,7 +70,23 @@ let UmbPropertyEditorUITreePickerElement = class UmbPropertyEditorUITreePickerEl
 			@change=${__classPrivateFieldGet(this, _UmbPropertyEditorUITreePickerElement_instances, "m", _UmbPropertyEditorUITreePickerElement_onChange)}></umb-input-tree>`;
     }
 };
+_UmbPropertyEditorUITreePickerElement_dynamicRoot = new WeakMap();
+_UmbPropertyEditorUITreePickerElement_dynamicRootRepository = new WeakMap();
+_UmbPropertyEditorUITreePickerElement_workspaceContext = new WeakMap();
 _UmbPropertyEditorUITreePickerElement_instances = new WeakSet();
+_UmbPropertyEditorUITreePickerElement_setStartNodeId = async function _UmbPropertyEditorUITreePickerElement_setStartNodeId() {
+    if (this.startNodeId)
+        return;
+    const entityId = __classPrivateFieldGet(this, _UmbPropertyEditorUITreePickerElement_workspaceContext, "f")?.getEntityId();
+    // TODO: Awaiting the workspace context to have a parent entity ID value. [LK]
+    // e.g. const parentEntityId = this.#workspaceContext?.getParentEntityId();
+    if (entityId && __classPrivateFieldGet(this, _UmbPropertyEditorUITreePickerElement_dynamicRoot, "f")) {
+        const result = await __classPrivateFieldGet(this, _UmbPropertyEditorUITreePickerElement_dynamicRootRepository, "f").postDynamicRootQuery(__classPrivateFieldGet(this, _UmbPropertyEditorUITreePickerElement_dynamicRoot, "f"), entityId);
+        if (result && result.length > 0) {
+            this.startNodeId = result[0];
+        }
+    }
+};
 _UmbPropertyEditorUITreePickerElement_onChange = function _UmbPropertyEditorUITreePickerElement_onChange(e) {
     this.value = e.target.value;
     this.dispatchEvent(new UmbPropertyValueChangeEvent());

package/dist-cms/packages/core/tree/components/input-tree/input-tree.element.js

@@ -49,7 +49,7 @@ let UmbInputTreeElement = class UmbInputTreeElement extends FormControlMixin(Umb
     constructor() {
         super();
         _UmbInputTreeElement_instances.add(this);
-        this._type = undefined;
+        this._type = 'content';
         this.min = 0;
         this.max = 0;
         this._allowedContentTypeIds = [];

package/dist-cms/packages/documents/documents/components/input-document/input-document.element.d.ts

@@ -42,6 +42,7 @@ export declare class UmbInputDocumentElement extends UmbInputDocumentElement_bas
     private _editDocumentPath;
     private _items?;
     constructor();
+    connectedCallback(): void;
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];

package/dist-cms/packages/documents/documents/components/input-document/input-document.element.js

@@ -103,11 +103,14 @@ let UmbInputDocumentElement = class UmbInputDocumentElement extends FormControlM
             .observeRouteBuilder((routeBuilder) => {
             this._editDocumentPath = routeBuilder({});
         });
-        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && __classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").getSelection().length < this.min);
-        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && __classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").getSelection().length > this.max);
         this.observe(__classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").selection, (selection) => (super.value = selection.join(',')));
         this.observe(__classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").selectedItems, (selectedItems) => (this._items = selectedItems));
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && __classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").getSelection().length < this.min);
+        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && __classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").getSelection().length > this.max);
+    }
     getFormElement() {
         return undefined;
     }
@@ -121,7 +124,7 @@ _UmbInputDocumentElement_pickableFilter = new WeakMap();
 _UmbInputDocumentElement_instances = new WeakSet();
 _UmbInputDocumentElement_openPicker = function _UmbInputDocumentElement_openPicker() {
     // TODO: Configure the content picker, with `startNodeId` and `ignoreUserStartNodes` [LK]
-    console.log('_openPicker', [this.startNodeId, this.ignoreUserStartNodes]);
+    console.log('#openPicker', [this.startNodeId, this.ignoreUserStartNodes]);
     __classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").openPicker({
         hideTreeRoot: true,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/dist-cms/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.d.ts

@@ -1,15 +1,16 @@
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import type { UmbTreePickerDynamicRoot } from '../../../../core/components/index.js';
 declare const UmbInputDocumentPickerRootElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
 export declare class UmbInputDocumentPickerRootElement extends UmbInputDocumentPickerRootElement_base {
     #private;
-    get unique(): string | null | undefined;
-    set unique(unique: string | null | undefined);
-    set value(unique: string);
-    private _items?;
-    constructor();
     protected getFormElement(): undefined;
+    private _originManifests;
+    private _queryStepManifests;
+    data?: UmbTreePickerDynamicRoot | undefined;
+    constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    private _renderItem;
+    static styles: import("../../../../../external/lit/index.js").CSSResult[];
 }
 export default UmbInputDocumentPickerRootElement;
 declare global {

package/dist-cms/packages/documents/documents/components/input-document-picker-root/input-document-picker-root.element.js

@@ -4,100 +4,238 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbInputDocumentPickerRootElement_instances, _UmbInputDocumentPickerRootElement_documentPickerContext, _UmbInputDocumentPickerRootElement_dynamicRootPickerContext, _UmbInputDocumentPickerRootElement_renderButtons;
-import { UmbDocumentPickerContext } from '../input-document/input-document.context.js';
-import { html, customElement, property, state, ifDefined, repeat } from '../../../../../external/lit/index.js';
+var _UmbInputDocumentPickerRootElement_instances, _UmbInputDocumentPickerRootElement_dynamicRootOrigin, _UmbInputDocumentPickerRootElement_modalContext, _UmbInputDocumentPickerRootElement_openModal, _UmbInputDocumentPickerRootElement_sorter, _UmbInputDocumentPickerRootElement_openDynamicRootOriginPicker, _UmbInputDocumentPickerRootElement_openDynamicRootQueryStepPicker, _UmbInputDocumentPickerRootElement_updateDynamicRootOrigin, _UmbInputDocumentPickerRootElement_updateDynamicRootQuerySteps, _UmbInputDocumentPickerRootElement_getQueryStepMeta, _UmbInputDocumentPickerRootElement_removeDynamicRootQueryStep, _UmbInputDocumentPickerRootElement_clearDynamicRootQuery, _UmbInputDocumentPickerRootElement_renderAddOriginButton, _UmbInputDocumentPickerRootElement_renderOrigin, _UmbInputDocumentPickerRootElement_renderClearButton, _UmbInputDocumentPickerRootElement_renderQuerySteps, _UmbInputDocumentPickerRootElement_renderQueryStep, _UmbInputDocumentPickerRootElement_renderAddQueryStepButton;
+import { html, css, customElement, property, ifDefined, state, repeat } from '../../../../../external/lit/index.js';
 import { FormControlMixin } from '../../../../../external/uui/index.js';
+import { UmbChangeEvent } from '../../../../core/event/index.js';
+import { UmbId } from '../../../../core/id/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
+import { UMB_MODAL_MANAGER_CONTEXT } from '../../../../core/modal/index.js';
+import { UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL, UMB_DYNAMIC_ROOT_QUERY_STEP_PICKER_MODAL, } from '../../../../dynamic-root/index.js';
 let UmbInputDocumentPickerRootElement = class UmbInputDocumentPickerRootElement extends FormControlMixin(UmbLitElement) {
-    get unique() {
-        return __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_documentPickerContext, "f").getSelection()[0];
-    }
-    set unique(unique) {
-        const selection = unique ? [unique] : [];
-        __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_documentPickerContext, "f").setSelection(selection);
-    }
-    set value(unique) {
-        this.unique = unique;
+    getFormElement() {
+        return undefined;
     }
     constructor() {
         super();
         _UmbInputDocumentPickerRootElement_instances.add(this);
-        _UmbInputDocumentPickerRootElement_documentPickerContext.set(this, new UmbDocumentPickerContext(this));
-        // TODO: DynamicRoot - once feature implemented, wire up context and picker UI. [LK]
-        _UmbInputDocumentPickerRootElement_dynamicRootPickerContext.set(this, {
-            openPicker: () => {
-                throw new Error('DynamicRoot picker has not been implemented yet.');
+        this._originManifests = [];
+        this._queryStepManifests = [];
+        _UmbInputDocumentPickerRootElement_dynamicRootOrigin.set(this, void 0);
+        _UmbInputDocumentPickerRootElement_modalContext.set(this, void 0);
+        _UmbInputDocumentPickerRootElement_openModal.set(this, void 0);
+        _UmbInputDocumentPickerRootElement_sorter.set(this, new UmbSorterController(this, {
+            getUniqueOfElement: (element) => {
+                return element.id;
+            },
+            getUniqueOfModel: (modelEntry) => {
+                return modelEntry.unique;
             },
+            identifier: 'Umb.SorterIdentifier.InputDocumentPickerRoot',
+            itemSelector: 'uui-ref-node',
+            containerSelector: '#query-steps',
+            onChange: ({ model }) => {
+                if (this.data && this.data.querySteps) {
+                    const querySteps = model;
+                    __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_updateDynamicRootQuerySteps).call(this, querySteps);
+                    this.dispatchEvent(new UmbChangeEvent());
+                }
+            },
+        }));
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
+            __classPrivateFieldSet(this, _UmbInputDocumentPickerRootElement_modalContext, instance, "f");
+        });
+        this.observe(umbExtensionsRegistry.byType('dynamicRootOrigin'), (originManifests) => {
+            this._originManifests = originManifests;
+        });
+        this.observe(umbExtensionsRegistry.byType('dynamicRootQueryStep'), (queryStepManifests) => {
+            this._queryStepManifests = queryStepManifests;
         });
-        __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_documentPickerContext, "f").max = 1;
-        this.observe(__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_documentPickerContext, "f").selection, (selection) => (super.value = selection.join(',')));
-        this.observe(__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_documentPickerContext, "f").selectedItems, (selectedItems) => (this._items = selectedItems));
     }
-    getFormElement() {
-        return undefined;
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_updateDynamicRootOrigin).call(this, this.data);
+        __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_updateDynamicRootQuerySteps).call(this, this.data?.querySteps);
     }
     render() {
         return html `
-			${this._items
-            ? html ` <uui-ref-list
-						>${repeat(this._items, (item) => item.unique, (item) => this._renderItem(item))}
-				  </uui-ref-list>`
-            : ''}
-			${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_renderButtons).call(this)}
+			${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_renderAddOriginButton).call(this)}
+			<uui-ref-list>${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_renderOrigin).call(this)}</uui-ref-list>
+			<uui-ref-list id="query-steps">${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_renderQuerySteps).call(this)}</uui-ref-list>
+			${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_renderAddQueryStepButton).call(this)} ${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_renderClearButton).call(this)}
 		`;
     }
-    _renderItem(item) {
-        if (!item.unique)
-            return;
-        // TODO: get correct variant name
-        const name = item.variants[0]?.name;
-        return html `
-			<uui-ref-node name=${name} detail=${ifDefined(item.unique)}>
-				<!-- TODO: implement is trashed <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->
+};
+_UmbInputDocumentPickerRootElement_dynamicRootOrigin = new WeakMap();
+_UmbInputDocumentPickerRootElement_modalContext = new WeakMap();
+_UmbInputDocumentPickerRootElement_openModal = new WeakMap();
+_UmbInputDocumentPickerRootElement_sorter = new WeakMap();
+_UmbInputDocumentPickerRootElement_instances = new WeakSet();
+_UmbInputDocumentPickerRootElement_openDynamicRootOriginPicker = function _UmbInputDocumentPickerRootElement_openDynamicRootOriginPicker() {
+    __classPrivateFieldSet(this, _UmbInputDocumentPickerRootElement_openModal, __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_modalContext, "f")?.open(UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL, {}), "f");
+    __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_openModal, "f")?.onSubmit().then((data) => {
+        const existingData = { ...this.data };
+        existingData.originKey = undefined;
+        this.data = { ...existingData, ...data };
+        __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_updateDynamicRootOrigin).call(this, this.data);
+        this.dispatchEvent(new UmbChangeEvent());
+    });
+};
+_UmbInputDocumentPickerRootElement_openDynamicRootQueryStepPicker = function _UmbInputDocumentPickerRootElement_openDynamicRootQueryStepPicker() {
+    __classPrivateFieldSet(this, _UmbInputDocumentPickerRootElement_openModal, __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_modalContext, "f")?.open(UMB_DYNAMIC_ROOT_QUERY_STEP_PICKER_MODAL, {}), "f");
+    __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_openModal, "f")?.onSubmit().then((step) => {
+        if (this.data) {
+            const querySteps = [...(this.data.querySteps ?? []), step];
+            __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_updateDynamicRootQuerySteps).call(this, querySteps);
+            this.dispatchEvent(new UmbChangeEvent());
+        }
+    });
+};
+_UmbInputDocumentPickerRootElement_updateDynamicRootOrigin = function _UmbInputDocumentPickerRootElement_updateDynamicRootOrigin(data) {
+    if (!data)
+        return;
+    const origin = this._originManifests.find((item) => item.meta.originAlias === data.originAlias)?.meta;
+    __classPrivateFieldSet(this, _UmbInputDocumentPickerRootElement_dynamicRootOrigin, {
+        label: origin?.label ?? data.originAlias,
+        icon: origin?.icon ?? 'icon-wand',
+        description: data.originKey,
+    }, "f");
+};
+_UmbInputDocumentPickerRootElement_updateDynamicRootQuerySteps = function _UmbInputDocumentPickerRootElement_updateDynamicRootQuerySteps(querySteps) {
+    if (!this.data)
+        return;
+    if (querySteps) {
+        // NOTE: Ensure that the `unique` ID is populated for each query step. [LK]
+        querySteps = querySteps.map((item) => (item.unique ? item : { ...item, unique: UmbId.new() }));
+    }
+    __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_sorter, "f")?.setModel(querySteps ?? []);
+    this.data = { ...this.data, ...{ querySteps } };
+};
+_UmbInputDocumentPickerRootElement_getQueryStepMeta = function _UmbInputDocumentPickerRootElement_getQueryStepMeta(item) {
+    const step = this._queryStepManifests.find((step) => step.meta.queryStepAlias === item.alias)?.meta;
+    const docTypes = item.anyOfDocTypeKeys?.join(', ');
+    const description = docTypes ? this.localize.term('dynamicRoot_queryStepTypes') + docTypes : undefined;
+    return {
+        unique: item.unique,
+        label: step?.label ?? item.alias,
+        icon: step?.icon ?? 'icon-lab',
+        description,
+    };
+};
+_UmbInputDocumentPickerRootElement_removeDynamicRootQueryStep = function _UmbInputDocumentPickerRootElement_removeDynamicRootQueryStep(item) {
+    if (this.data?.querySteps) {
+        const index = this.data.querySteps.indexOf(item);
+        if (index !== -1) {
+            const querySteps = [...this.data.querySteps];
+            querySteps.splice(index, 1);
+            __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_updateDynamicRootQuerySteps).call(this, querySteps);
+            this.dispatchEvent(new UmbChangeEvent());
+        }
+    }
+};
+_UmbInputDocumentPickerRootElement_clearDynamicRootQuery = function _UmbInputDocumentPickerRootElement_clearDynamicRootQuery() {
+    this.data = undefined;
+    __classPrivateFieldSet(this, _UmbInputDocumentPickerRootElement_dynamicRootOrigin, undefined, "f");
+    this.dispatchEvent(new UmbChangeEvent());
+};
+_UmbInputDocumentPickerRootElement_renderAddOriginButton = function _UmbInputDocumentPickerRootElement_renderAddOriginButton() {
+    if (this.data?.originAlias)
+        return;
+    return html `
+			<uui-button
+				class="add-button"
+				@click=${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_openDynamicRootOriginPicker)}
+				label=${this.localize.term('contentPicker_defineDynamicRoot')}
+				look="placeholder"></uui-button>
+		`;
+};
+_UmbInputDocumentPickerRootElement_renderOrigin = function _UmbInputDocumentPickerRootElement_renderOrigin() {
+    if (!__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_dynamicRootOrigin, "f"))
+        return;
+    return html `
+			<uui-ref-node
+				border
+				standalone
+				name=${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_dynamicRootOrigin, "f").label}
+				detail=${ifDefined(__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_dynamicRootOrigin, "f").description)}>
+				<uui-icon slot="icon" name=${ifDefined(__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_dynamicRootOrigin, "f").icon)}></uui-icon>
 				<uui-action-bar slot="actions">
-					<uui-button @click=${() => __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_documentPickerContext, "f").openPicker()} label="Edit document ${name}"
-						>Edit</uui-button
-					>
 					<uui-button
-						@click=${() => __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_documentPickerContext, "f").requestRemoveItem(item.unique)}
-						label="Remove document ${name}"
-						>Remove</uui-button
-					>
+						@click=${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_openDynamicRootOriginPicker)}
+						label="${this.localize.term('general_edit')}"></uui-button>
 				</uui-action-bar>
 			</uui-ref-node>
 		`;
-    }
 };
-_UmbInputDocumentPickerRootElement_documentPickerContext = new WeakMap();
-_UmbInputDocumentPickerRootElement_dynamicRootPickerContext = new WeakMap();
-_UmbInputDocumentPickerRootElement_instances = new WeakSet();
-_UmbInputDocumentPickerRootElement_renderButtons = function _UmbInputDocumentPickerRootElement_renderButtons() {
-    if (this.unique)
+_UmbInputDocumentPickerRootElement_renderClearButton = function _UmbInputDocumentPickerRootElement_renderClearButton() {
+    if (!__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_dynamicRootOrigin, "f"))
         return;
-    //TODO: Dynamic paths
-    return html ` <uui-button-group>
-			<uui-button
-				look="placeholder"
-				@click=${() => __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_documentPickerContext, "f").openPicker()}
-				label=${this.localize.term('contentPicker_defineRootNode')}></uui-button>
-			<uui-button
-				look="placeholder"
-				@click=${() => __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_dynamicRootPickerContext, "f").openPicker()}
-				label=${this.localize.term('contentPicker_defineDynamicRoot')}></uui-button>
-		</uui-button-group>`;
+    return html `
+			<uui-button @click=${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_clearDynamicRootQuery)}>${this.localize.term('buttons_clearSelection')}</uui-button>
+		`;
+};
+_UmbInputDocumentPickerRootElement_renderQuerySteps = function _UmbInputDocumentPickerRootElement_renderQuerySteps() {
+    if (!this.data?.querySteps)
+        return;
+    return repeat(this.data.querySteps, (item) => item.unique, (item) => __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_renderQueryStep).call(this, item));
+};
+_UmbInputDocumentPickerRootElement_renderQueryStep = function _UmbInputDocumentPickerRootElement_renderQueryStep(item) {
+    if (!item.alias)
+        return;
+    const step = __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_getQueryStepMeta).call(this, item);
+    return html `
+			<uui-ref-node border standalone id=${step.unique} name=${step.label} detail="${ifDefined(step.description)}">
+				<uui-icon slot="icon" name=${step.icon}></uui-icon>
+				<uui-action-bar slot="actions">
+					<uui-button
+						@click=${() => __classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_removeDynamicRootQueryStep).call(this, item)}
+						label=${this.localize.term('general_remove')}></uui-button>
+				</uui-action-bar>
+			</uui-ref-node>
+		`;
+};
+_UmbInputDocumentPickerRootElement_renderAddQueryStepButton = function _UmbInputDocumentPickerRootElement_renderAddQueryStepButton() {
+    if (!__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_dynamicRootOrigin, "f"))
+        return;
+    return html ` <uui-button
+			class="add-button"
+			@click=${__classPrivateFieldGet(this, _UmbInputDocumentPickerRootElement_instances, "m", _UmbInputDocumentPickerRootElement_openDynamicRootQueryStepPicker)}
+			label=${this.localize.term('dynamicRoot_addQueryStep')}
+			look="placeholder"></uui-button>`;
 };
+UmbInputDocumentPickerRootElement.styles = [
+    css `
+			.add-button {
+				width: 100%;
+			}
+
+			uui-ref-node[drag-placeholder] {
+				opacity: 0.2;
+			}
+		`,
+];
 __decorate([
-    property()
-], UmbInputDocumentPickerRootElement.prototype, "value", null);
+    state()
+], UmbInputDocumentPickerRootElement.prototype, "_originManifests", void 0);
 __decorate([
     state()
-], UmbInputDocumentPickerRootElement.prototype, "_items", void 0);
+], UmbInputDocumentPickerRootElement.prototype, "_queryStepManifests", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbInputDocumentPickerRootElement.prototype, "data", void 0);
 UmbInputDocumentPickerRootElement = __decorate([
     customElement('umb-input-document-picker-root')
 ], UmbInputDocumentPickerRootElement);

package/dist-cms/packages/dynamic-root/index.d.ts

@@ -0,0 +1,2 @@
+export * from './modals/index.js';
+export * from './repository/index.js';

package/dist-cms/packages/dynamic-root/index.js

@@ -0,0 +1,2 @@
+export * from './modals/index.js';
+export * from './repository/index.js';

package/dist-cms/packages/dynamic-root/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: (import("../core/index.js").ManifestModal | import("../core/index.js").ManifestDynamicRootOrigin | import("../core/index.js").ManifestDynamicRootQueryStep)[];

package/dist-cms/packages/dynamic-root/manifests.js

@@ -0,0 +1,6 @@
+import { manifests as modalManifests } from './modals/manifests.js';
+import { manifests as repositoryManifests } from './repository/manifests.js';
+export const manifests = [
+    ...modalManifests,
+    ...repositoryManifests,
+];

package/dist-cms/packages/dynamic-root/modals/dynamic-root-origin-picker-modal.element.d.ts

@@ -0,0 +1,14 @@
+import { UmbModalBaseElement } from '../../core/modal/index.js';
+export declare class UmbDynamicRootOriginPickerModalModalElement extends UmbModalBaseElement {
+    #private;
+    private _origins;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("../../../external/lit/index.js").CSSResult[];
+}
+export default UmbDynamicRootOriginPickerModalModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-dynamic-root-origin-picker-modal': UmbDynamicRootOriginPickerModalModalElement;
+    }
+}

package/dist-cms/packages/dynamic-root/modals/dynamic-root-origin-picker-modal.element.js

@@ -0,0 +1,105 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmbDynamicRootOriginPickerModalModalElement_instances, _UmbDynamicRootOriginPickerModalModalElement_documentPickerContext, _UmbDynamicRootOriginPickerModalModalElement_choose, _UmbDynamicRootOriginPickerModalModalElement_close, _UmbDynamicRootOriginPickerModalModalElement_openDocumentPicker, _UmbDynamicRootOriginPickerModalModalElement_submit;
+import { UmbDocumentPickerContext } from '../../documents/documents/components/input-document/input-document.context.js';
+import { UmbModalBaseElement } from '../../core/modal/index.js';
+import { css, html, customElement, map, state, ifDefined } from '../../../external/lit/index.js';
+import { umbExtensionsRegistry } from '../../core/extension-registry/index.js';
+let UmbDynamicRootOriginPickerModalModalElement = class UmbDynamicRootOriginPickerModalModalElement extends UmbModalBaseElement {
+    constructor() {
+        super();
+        _UmbDynamicRootOriginPickerModalModalElement_instances.add(this);
+        this._origins = [];
+        _UmbDynamicRootOriginPickerModalModalElement_documentPickerContext.set(this, new UmbDocumentPickerContext(this));
+        __classPrivateFieldGet(this, _UmbDynamicRootOriginPickerModalModalElement_documentPickerContext, "f").max = 1;
+        this.observe(umbExtensionsRegistry.byType('dynamicRootOrigin'), (origins) => {
+            this._origins = origins;
+        });
+    }
+    render() {
+        return html `
+			<umb-body-layout headline="${this.localize.term('dynamicRoot_pickDynamicRootOriginTitle')}">
+				<div id="main">
+					<uui-box>
+						${map(this._origins, (item) => html `
+								<uui-button @click=${() => __classPrivateFieldGet(this, _UmbDynamicRootOriginPickerModalModalElement_instances, "m", _UmbDynamicRootOriginPickerModalModalElement_choose).call(this, item)} look="placeholder" label="${ifDefined(item.meta.label)}">
+									<h3>${item.meta.label}</h3>
+									<p>${item.meta.description}</p>
+								</uui-button>
+							`)}
+					</uui-box>
+				</div>
+				<div slot="actions">
+					<uui-button @click=${__classPrivateFieldGet(this, _UmbDynamicRootOriginPickerModalModalElement_instances, "m", _UmbDynamicRootOriginPickerModalModalElement_close)} look="default" label="${this.localize.term('general_close')}"></uui-button>
+				</div>
+			</umb-body-layout>
+		`;
+    }
+};
+_UmbDynamicRootOriginPickerModalModalElement_documentPickerContext = new WeakMap();
+_UmbDynamicRootOriginPickerModalModalElement_instances = new WeakSet();
+_UmbDynamicRootOriginPickerModalModalElement_choose = function _UmbDynamicRootOriginPickerModalModalElement_choose(item) {
+    switch (item.meta.originAlias) {
+        // NOTE: Edge-case. Currently this is the only one that uses a document picker,
+        // but other custom origins may want other configuration options. [LK:2024-01-25]
+        case 'ByKey':
+            __classPrivateFieldGet(this, _UmbDynamicRootOriginPickerModalModalElement_instances, "m", _UmbDynamicRootOriginPickerModalModalElement_openDocumentPicker).call(this, item.meta.originAlias);
+            break;
+        default:
+            __classPrivateFieldGet(this, _UmbDynamicRootOriginPickerModalModalElement_instances, "m", _UmbDynamicRootOriginPickerModalModalElement_submit).call(this, { originAlias: item.meta.originAlias });
+            break;
+    }
+};
+_UmbDynamicRootOriginPickerModalModalElement_close = function _UmbDynamicRootOriginPickerModalModalElement_close() {
+    this.modalContext?.reject();
+};
+_UmbDynamicRootOriginPickerModalModalElement_openDocumentPicker = async function _UmbDynamicRootOriginPickerModalModalElement_openDocumentPicker(originAlias) {
+    await __classPrivateFieldGet(this, _UmbDynamicRootOriginPickerModalModalElement_documentPickerContext, "f").openPicker({
+        hideTreeRoot: true,
+    });
+    const selectedItems = __classPrivateFieldGet(this, _UmbDynamicRootOriginPickerModalModalElement_documentPickerContext, "f").getSelection();
+    if (selectedItems.length !== 1)
+        return;
+    __classPrivateFieldGet(this, _UmbDynamicRootOriginPickerModalModalElement_instances, "m", _UmbDynamicRootOriginPickerModalModalElement_submit).call(this, {
+        originAlias,
+        originKey: selectedItems[0],
+    });
+};
+_UmbDynamicRootOriginPickerModalModalElement_submit = function _UmbDynamicRootOriginPickerModalModalElement_submit(value) {
+    this.modalContext?.setValue(value);
+    this.modalContext?.submit();
+};
+UmbDynamicRootOriginPickerModalModalElement.styles = [
+    css `
+			uui-box > uui-button {
+				display: block;
+				--uui-button-content-align: flex-start;
+			}
+
+			uui-box > uui-button:not(:last-of-type) {
+				margin-bottom: var(--uui-size-space-5);
+			}
+
+			h3,
+			p {
+				text-align: left;
+			}
+		`,
+];
+__decorate([
+    state()
+], UmbDynamicRootOriginPickerModalModalElement.prototype, "_origins", void 0);
+UmbDynamicRootOriginPickerModalModalElement = __decorate([
+    customElement('umb-dynamic-root-origin-picker-modal')
+], UmbDynamicRootOriginPickerModalModalElement);
+export { UmbDynamicRootOriginPickerModalModalElement };
+export default UmbDynamicRootOriginPickerModalModalElement;

package/dist-cms/packages/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.d.ts

@@ -0,0 +1,14 @@
+import { UmbModalBaseElement } from '../../core/modal/index.js';
+export declare class UmbDynamicRootQueryStepPickerModalModalElement extends UmbModalBaseElement {
+    #private;
+    private _querySteps;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("../../../external/lit/index.js").CSSResult[];
+}
+export default UmbDynamicRootQueryStepPickerModalModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-dynamic-root-query-step-picker-modal': UmbDynamicRootQueryStepPickerModalModalElement;
+    }
+}