@umbraco-cms/backoffice 18.0.2 → 18.1.0-rc

package/dist-cms/packages/core/tree/default/default-tree.element.js

@@ -4,8 +4,13 @@ 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;
 };
-import { css, customElement, html, nothing, property, repeat, state } from '../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbTextStyles } from '../../style/index.js';
+import { createExtensionElement } from '../../../../libs/extension-api/index.js';
+import { UmbInteractionMemoriesChangeEvent } from '../../interaction-memory/index.js';
+import { jsonStringComparison } from '../../../../libs/observable-api/index.js';
+import '../components/tree-toolbar.element.js';
 let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
     constructor() {
         super(...arguments);
@@ -23,38 +28,71 @@ let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
         this.selectableFilter = () => true;
         this.filter = () => true;
         this.expansion = [];
-        this._rootItems = [];
-        this._currentPage = 1;
-        this._hasPreviousItems = false;
-        this._hasNextItems = false;
-        this._isLoadingPrevChildren = false;
-        this._isLoadingNextChildren = false;
+        this.showToolbar = false;
+        this.showTreeActions = false;
+        this.#lastDispatchedMemories = [];
+        this._hasItems = false;
+        this._isLoading = false;
+        this._initialLoadDone = false;
+        this.#hasBeenLoading = false;
     }
     get api() {
         return this._api;
     }
     set api(value) {
         this._api = value;
-        this.#observeData();
-    }
-    #observeData() {
-        this.observe(this._api?.treeRoot, (treeRoot) => (this._treeRoot = treeRoot), '_observeTreeRoot');
-        this.observe(this._api?.rootItems, (rootItems) => (this._rootItems = rootItems ?? []), '_observeRootItems');
-        this.observe(this._api?.pagination.currentPage, (value) => (this._currentPage = value ?? 1), '_observeCurrentPage');
-        this.observe(this._api?.isLoadingPrevChildren, (value) => (this._isLoadingPrevChildren = value ?? false), '_observeIsLoadingPrevChildren');
-        this.observe(this._api?.isLoadingNextChildren, (value) => (this._isLoadingNextChildren = value ?? false), '_observeIsLoadingNextChildren');
-        this.observe(this._api?.targetPagination?.totalPrevItems, (value) => (this._hasPreviousItems = value ? value > 0 : false), '_observeTotalPrevItems');
-        this.observe(this._api?.targetPagination?.totalNextItems, (value) => (this._hasNextItems = value ? value > 0 : false), '_observeTotalNextItems');
+        if (value) {
+            // Derive emptiness from the loaded children, not `hasChildren`: the latter is also written by the
+            // concurrent tree-root load (with the root's own child count), which can clobber the start node's value
+            // and intermittently hide the empty state.
+            this.observe(value.rootItems, (items) => (this._hasItems = (items?.length ?? 0) > 0), 'umbTreeRootItemsObserver');
+            // Track loading so the empty state isn't shown before the children have loaded, or while reloading.
+            this.observe(value.isLoading, (isLoading) => {
+                this._isLoading = isLoading ?? false;
+                if (isLoading) {
+                    this.#hasBeenLoading = true;
+                }
+                else if (this.#hasBeenLoading) {
+                    this._initialLoadDone = true;
+                }
+            }, 'umbTreeIsLoadingObserver');
+        }
+        if (value?.view) {
+            this.observe(value.view.currentView, async (manifest) => {
+                const element = manifest ? await createExtensionElement(manifest) : null;
+                if (element && 'manifest' in element) {
+                    element.manifest = manifest;
+                }
+                this._viewElement = element;
+            }, 'umbTreeCurrentViewObserver');
+        }
+        if (value?.interactionMemory) {
+            // Snapshot before forwarding so the first observer emission is not treated as a change.
+            this.#lastDispatchedMemories = this.interactionMemories ?? [];
+            this.interactionMemories?.forEach((m) => value.interactionMemory.setMemory(m));
+            this.observe(value.interactionMemory.memories, (memories) => {
+                if (!jsonStringComparison(memories, this.#lastDispatchedMemories)) {
+                    this.#lastDispatchedMemories = memories;
+                    this.dispatchEvent(new UmbInteractionMemoriesChangeEvent());
+                }
+            }, 'umbTreeInteractionMemoryObserver');
+        }
     }
+    #lastDispatchedMemories;
+    #hasBeenLoading;
     async updated(_changedProperties) {
         super.updated(_changedProperties);
         if (this._api === undefined)
             return;
+        if (_changedProperties.has('api')) {
+            this._api.loadTree();
+        }
         if (_changedProperties.has('selectionConfiguration')) {
             this._selectionConfiguration = this.selectionConfiguration;
             this._api.selection.setMultiple(this._selectionConfiguration.multiple ?? false);
             this._api.selection.setSelectable(this._selectionConfiguration.selectable ?? true);
             this._api.selection.setSelection(this._selectionConfiguration.selection ?? []);
+            this._api.setSelectOnly(this._selectionConfiguration.selectOnly);
         }
         if (_changedProperties.has('startNode')) {
             this._api.setStartNode(this.startNode);
@@ -77,6 +115,16 @@ let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
         if (_changedProperties.has('expansion')) {
             this._api.setExpansion(this.expansion);
         }
+        if (_changedProperties.has('hideTreeItemActions')) {
+            this._api.setHideTreeItemActions?.(this.hideTreeItemActions);
+        }
+        if (_changedProperties.has('isMenu')) {
+            this._api.setIsMenu?.(this.isMenu ?? false);
+        }
+        if (_changedProperties.has('interactionMemories') && this._api?.interactionMemory) {
+            this.#lastDispatchedMemories = this.interactionMemories ?? [];
+            this.interactionMemories?.forEach((m) => this._api.interactionMemory.setMemory(m));
+        }
     }
     getSelection() {
         return this._api?.selection.getSelection();
@@ -84,67 +132,48 @@ let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
     getExpansion() {
         return this._api?.expansion.getExpansion();
     }
-    #onLoadPrev(event) {
-        event.stopPropagation();
-        this._api?.loadPrevItems?.();
-    }
-    #onLoadNext(event) {
-        event.stopPropagation();
-        const next = (this._currentPage = this._currentPage + 1);
-        this._api?.pagination.setCurrentPageNumber(next);
-    }
     render() {
-        return html ` ${this.#renderTreeRoot()} ${this.#renderRootItems()}`;
-    }
-    #renderTreeRoot() {
-        if (this.hideTreeRoot || this._treeRoot === undefined)
-            return nothing;
         return html `
-			<umb-tree-item
-				.entityType=${this._treeRoot.entityType}
-				.props=${{
-            hideActions: this.hideTreeItemActions,
-            item: this._treeRoot,
-            isMenu: this.isMenu,
-        }}></umb-tree-item>
+			${this.showToolbar
+            ? html `<umb-tree-toolbar .showTreeActions=${this.showTreeActions}></umb-tree-toolbar>`
+            : nothing}
+			${this._viewElement ?? nothing} ${this.#renderEmptyState()}
 		`;
     }
-    #renderRootItems() {
-        // only show the root items directly if the tree root is hidden
-        if (this.hideTreeRoot === true) {
-            return html `
-				${this.#renderLoadPrevButton()}
-				${repeat(this._rootItems, (item, index) => item.name + '___' + index, (item) => html `
-						<umb-tree-item
-							.entityType=${item.entityType}
-							.props=${{ hideActions: this.hideTreeItemActions, item, isMenu: this.isMenu }}></umb-tree-item>
-					`)}
-				${this.#renderLoadNextButton()}
-			`;
-        }
-        else {
+    #renderEmptyState() {
+        // The empty state belongs to the children list, not a single view, so it is presented once here — mirroring
+        // the collection pattern. It is only relevant when the children are shown on their own (root hidden or drilled
+        // into a start node) and never in the sidebar menu.
+        if (this.isMenu || !(this.hideTreeRoot || this.startNode))
             return nothing;
+        if (!this._initialLoadDone) {
+            return html `<umb-view-loader></umb-view-loader>`;
         }
-    }
-    #renderLoadPrevButton() {
-        if (!this._hasPreviousItems)
-            return nothing;
-        return html `<umb-tree-load-prev-button
-			@click=${this.#onLoadPrev}
-			.loading=${this._isLoadingPrevChildren}></umb-tree-load-prev-button>`;
-    }
-    #renderLoadNextButton() {
-        if (!this._hasNextItems)
+        if (this._isLoading || this._hasItems)
             return nothing;
-        return html `<umb-tree-load-more-button
-			@click=${this.#onLoadNext}
-			.loading=${this._isLoadingNextChildren}></umb-tree-load-more-button> `;
+        return html `<div id="empty-state" class="uui-text"><h4>${this.localize.term('tree_noItems')}</h4></div>`;
     }
-    static { this.styles = css `
-		#load-more {
-			width: 100%;
-		}
-	`; }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: contents;
+			}
+
+			#empty-state {
+				text-align: center;
+				padding: var(--uui-size-layout-1);
+				opacity: 0;
+				animation: fadeIn 100ms 100ms forwards;
+			}
+
+			@keyframes fadeIn {
+				100% {
+					opacity: 1;
+				}
+			}
+		`,
+    ]; }
 };
 __decorate([
     property({ type: Object, attribute: false })
@@ -180,26 +209,26 @@ __decorate([
     property({ attribute: false })
 ], UmbDefaultTreeElement.prototype, "expansion", void 0);
 __decorate([
-    state()
-], UmbDefaultTreeElement.prototype, "_rootItems", void 0);
+    property({ type: Boolean, attribute: 'show-toolbar' })
+], UmbDefaultTreeElement.prototype, "showToolbar", void 0);
 __decorate([
-    state()
-], UmbDefaultTreeElement.prototype, "_treeRoot", void 0);
+    property({ type: Boolean, attribute: 'show-tree-actions' })
+], UmbDefaultTreeElement.prototype, "showTreeActions", void 0);
 __decorate([
-    state()
-], UmbDefaultTreeElement.prototype, "_currentPage", void 0);
+    property({ attribute: false })
+], UmbDefaultTreeElement.prototype, "interactionMemories", void 0);
 __decorate([
     state()
-], UmbDefaultTreeElement.prototype, "_hasPreviousItems", void 0);
+], UmbDefaultTreeElement.prototype, "_viewElement", void 0);
 __decorate([
     state()
-], UmbDefaultTreeElement.prototype, "_hasNextItems", void 0);
+], UmbDefaultTreeElement.prototype, "_hasItems", void 0);
 __decorate([
     state()
-], UmbDefaultTreeElement.prototype, "_isLoadingPrevChildren", void 0);
+], UmbDefaultTreeElement.prototype, "_isLoading", void 0);
 __decorate([
     state()
-], UmbDefaultTreeElement.prototype, "_isLoadingNextChildren", void 0);
+], UmbDefaultTreeElement.prototype, "_initialLoadDone", void 0);
 UmbDefaultTreeElement = __decorate([
     customElement('umb-default-tree')
 ], UmbDefaultTreeElement);

package/dist-cms/packages/core/tree/entity-actions/duplicate-to/duplicate-to.action.js

@@ -1,23 +1,30 @@
-import { UMB_DUPLICATE_TO_MODAL } from './modal/duplicate-to-modal.token.js';
+import { UMB_TREE_PICKER_MODAL } from '../../tree-picker-modal/index.js';
 import { UmbEntityActionBase, UmbRequestReloadStructureForEntityEvent } from '../../../entity-action/index.js';
 import { umbOpenModal } from '../../../modal/index.js';
 import { createExtensionApiByAlias } from '../../../extension-registry/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../action/index.js';
+import { linkEntityExpansionEntries } from '../../../utils/index.js';
 export class UmbDuplicateToEntityAction extends UmbEntityActionBase {
     async execute() {
         if (!this.args.unique)
             throw new Error('Unique is not available');
         if (!this.args.entityType)
             throw new Error('Entity Type is not available');
-        const value = await umbOpenModal(this, UMB_DUPLICATE_TO_MODAL, {
+        const ancestors = await this.#requestAncestors();
+        const value = await umbOpenModal(this, UMB_TREE_PICKER_MODAL, {
             data: {
-                unique: this.args.unique,
-                entityType: this.args.entityType,
+                headline: '#actions_copyTo',
+                confirmLabel: '#general_copy',
                 treeAlias: this.args.meta.treeAlias,
                 foldersOnly: this.args.meta.foldersOnly,
+                expandTreeRoot: true,
+                treeExpansion: ancestors.length ? linkEntityExpansionEntries(ancestors) : undefined,
             },
-        });
-        const destinationUnique = value.destination.unique;
+        }).catch(() => undefined);
+        // The modal was cancelled.
+        if (!value)
+            return;
+        const destinationUnique = value.selection[0];
         if (destinationUnique === undefined)
             throw new Error('Destination Unique is not available');
         const duplicateRepository = await createExtensionApiByAlias(this, this.args.meta.duplicateRepositoryAlias);
@@ -32,6 +39,20 @@ export class UmbDuplicateToEntityAction extends UmbEntityActionBase {
         }
         this.#reloadMenu();
     }
+    async #requestAncestors() {
+        try {
+            const treeRepository = await createExtensionApiByAlias(this, this.args.meta.treeRepositoryAlias);
+            const { data } = (await treeRepository?.requestTreeItemAncestors({
+                treeItem: { unique: this.args.unique, entityType: this.args.entityType },
+            })) ?? {};
+            // Exclude self — the API returns the descendant as part of the ancestors list, but we only want to expand its parents.
+            return data?.filter((item) => item.unique !== this.args.unique) ?? [];
+        }
+        catch {
+            // Tree pre-expansion is a UX convenience — if it fails the modal still opens normally.
+            return [];
+        }
+    }
     async #reloadMenu() {
         const actionEventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
         if (!actionEventContext)

package/dist-cms/packages/core/tree/entity-actions/duplicate-to/modal/duplicate-to-modal.element.d.ts

@@ -2,9 +2,14 @@ import type { UmbDuplicateToModalData, UmbDuplicateToModalValue } from './duplic
 import { nothing } from '../../../../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../../../modal/index.js';
 declare const elementName = "umb-duplicate-to-modal";
+/**
+ * @deprecated Deprecated since v17. The "Duplicate to" entity action now uses the shared `UMB_TREE_PICKER_MODAL`. Scheduled for removal in Umbraco 19.
+ */
 export declare class UmbDuplicateToModalElement extends UmbModalBaseElement<UmbDuplicateToModalData, UmbDuplicateToModalValue> {
     #private;
     private _destinationUnique?;
+    constructor();
+    private get _treeExpansion();
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/core/tree/entity-actions/duplicate-to/modal/duplicate-to-modal.element.js

@@ -7,8 +7,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, customElement, nothing, state } from '../../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../style/index.js';
 import { UmbModalBaseElement } from '../../../../modal/index.js';
+import { UmbDeprecation } from '../../../../utils/index.js';
 const elementName = 'umb-duplicate-to-modal';
+/**
+ * @deprecated Deprecated since v17. The "Duplicate to" entity action now uses the shared `UMB_TREE_PICKER_MODAL`. Scheduled for removal in Umbraco 19.
+ */
 let UmbDuplicateToModalElement = class UmbDuplicateToModalElement extends UmbModalBaseElement {
+    constructor() {
+        super();
+        new UmbDeprecation({
+            deprecated: 'UmbDuplicateToModalElement (umb-duplicate-to-modal / Umb.Modal.DuplicateTo)',
+            removeInVersion: '19.0.0',
+            solution: 'Use the shared UMB_TREE_PICKER_MODAL instead, passing `headline` and `confirmLabel`.',
+        }).warn();
+    }
+    get _treeExpansion() {
+        return this.data?.treeExpansion ?? [];
+    }
     #onTreeSelectionChange(event) {
         const target = event.target;
         const selection = target.getSelection();
@@ -22,23 +37,24 @@ let UmbDuplicateToModalElement = class UmbDuplicateToModalElement extends UmbMod
             return nothing;
         return html `
 			<umb-body-layout headline=${this.localize.term('actions_copyTo')}>
-				<uui-box>
-					<umb-tree
-						alias=${this.data.treeAlias}
-						.props=${{
+				<umb-tree
+					alias=${this.data.treeAlias}
+					.props=${{
             foldersOnly: this.data?.foldersOnly,
             expandTreeRoot: true,
+            expansion: this._treeExpansion,
         }}
-						@selection-change=${this.#onTreeSelectionChange}></umb-tree>
-				</uui-box>
-
+					@selection-change=${this.#onTreeSelectionChange}></umb-tree>
 				${this.#renderActions()}
 			</umb-body-layout>
 		`;
     }
     #renderActions() {
         return html `
-			<uui-button slot="actions" label=${this.localize.term('general_cancel')} @click="${this._rejectModal}"></uui-button>
+			<uui-button
+				slot="actions"
+				label=${this.localize.term('general_cancel')}
+				@click="${this._rejectModal}"></uui-button>
 			<uui-button
 				slot="actions"
 				color="positive"

package/dist-cms/packages/core/tree/entity-actions/duplicate-to/modal/duplicate-to-modal.token.d.ts

@@ -1,13 +1,24 @@
 import type { UmbEntityModel } from '../../../../entity/index.js';
 import { UmbModalToken } from '../../../../modal/index.js';
+import type { UmbEntityExpansionModel } from '../../../../utils/index.js';
 export declare const UMB_DUPLICATE_TO_MODAL_ALIAS = "Umb.Modal.DuplicateTo";
+/**
+ * @deprecated Deprecated since v17. The "Duplicate to" entity action now uses the shared `UMB_TREE_PICKER_MODAL`. Scheduled for removal in Umbraco 19.
+ */
 export interface UmbDuplicateToModalData extends UmbEntityModel {
     treeAlias: string;
     foldersOnly?: boolean;
+    treeExpansion?: UmbEntityExpansionModel;
 }
+/**
+ * @deprecated Deprecated since v17. The "Duplicate to" entity action now uses the shared `UMB_TREE_PICKER_MODAL`. Scheduled for removal in Umbraco 19.
+ */
 export interface UmbDuplicateToModalValue {
     destination: {
         unique: string | null;
     };
 }
+/**
+ * @deprecated Deprecated since v17. Use the shared `UMB_TREE_PICKER_MODAL` instead, passing `headline` and `confirmLabel`. Scheduled for removal in Umbraco 19.
+ */
 export declare const UMB_DUPLICATE_TO_MODAL: UmbModalToken<UmbDuplicateToModalData, UmbDuplicateToModalValue>;

package/dist-cms/packages/core/tree/entity-actions/duplicate-to/modal/duplicate-to-modal.token.js

@@ -1,5 +1,8 @@
 import { UmbModalToken } from '../../../../modal/index.js';
 export const UMB_DUPLICATE_TO_MODAL_ALIAS = 'Umb.Modal.DuplicateTo';
+/**
+ * @deprecated Deprecated since v17. Use the shared `UMB_TREE_PICKER_MODAL` instead, passing `headline` and `confirmLabel`. Scheduled for removal in Umbraco 19.
+ */
 export const UMB_DUPLICATE_TO_MODAL = new UmbModalToken(UMB_DUPLICATE_TO_MODAL_ALIAS, {
     modal: {
         type: 'sidebar',

package/dist-cms/packages/core/tree/entity-actions/duplicate-to/modal/manifests.js

@@ -1,5 +1,6 @@
 import { UMB_DUPLICATE_TO_MODAL_ALIAS } from './constants.js';
 import { UmbDuplicateToModalElement } from './duplicate-to-modal.element.js';
+// TODO (V19): Remove this modal registration. The "Duplicate to" entity action now uses the shared UMB_TREE_PICKER_MODAL.
 export const manifests = [
     {
         type: 'modal',

package/dist-cms/packages/core/tree/entity-actions/move/move-to.action.js

@@ -3,23 +3,40 @@ import { UmbEntityActionBase, UmbRequestReloadStructureForEntityEvent } from '..
 import { umbOpenModal } from '../../../modal/index.js';
 import { createExtensionApiByAlias } from '../../../extension-registry/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../action/index.js';
+import { linkEntityExpansionEntries } from '../../../utils/index.js';
 export class UmbMoveToEntityAction extends UmbEntityActionBase {
     async _getPickableFilter(unique) {
         return (treeItem) => treeItem.unique !== unique;
     }
+    #searchConfig() {
+        const alias = this.args.meta.searchProviderAlias;
+        return alias ? { providerAlias: alias } : undefined;
+    }
     async execute() {
         if (!this.args.unique)
             throw new Error('Unique is not available');
         if (!this.args.entityType)
             throw new Error('Entity Type is not available');
+        const [ancestors, pickableFilter] = await Promise.all([
+            this.#requestAncestors(),
+            this._getPickableFilter(this.args.unique),
+        ]);
+        const treeExpansion = ancestors.length ? linkEntityExpansionEntries(ancestors) : undefined;
         const value = await umbOpenModal(this, UMB_TREE_PICKER_MODAL, {
             data: {
+                headline: '#actions_move',
+                confirmLabel: '#general_move',
                 treeAlias: this.args.meta.treeAlias,
                 foldersOnly: this.args.meta.foldersOnly,
                 expandTreeRoot: true,
-                pickableFilter: await this._getPickableFilter(this.args.unique),
+                treeExpansion,
+                pickableFilter,
+                search: this.#searchConfig(),
             },
-        });
+        }).catch(() => undefined);
+        // The modal was cancelled.
+        if (!value)
+            return;
         const destinationUnique = value.selection[0];
         if (destinationUnique === undefined)
             throw new Error('Destination Unique is not available');
@@ -35,6 +52,20 @@ export class UmbMoveToEntityAction extends UmbEntityActionBase {
         }
         this.#reloadMenu();
     }
+    async #requestAncestors() {
+        try {
+            const treeRepository = await createExtensionApiByAlias(this, this.args.meta.treeRepositoryAlias);
+            const { data } = (await treeRepository?.requestTreeItemAncestors({
+                treeItem: { unique: this.args.unique, entityType: this.args.entityType },
+            })) ?? {};
+            // Exclude self — the API returns the descendant as part of the ancestors list, but we only want to expand its parents.
+            return data?.filter((item) => item.unique !== this.args.unique) ?? [];
+        }
+        catch {
+            // Tree pre-expansion is a UX convenience — if it fails the modal still opens normally.
+            return [];
+        }
+    }
     async #reloadMenu() {
         const actionEventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
         if (!actionEventContext)

package/dist-cms/packages/core/tree/entity-actions/move/types.d.ts

@@ -16,6 +16,10 @@ export interface MetaEntityActionMoveToKind extends MetaEntityActionDefaultKind
     treeRepositoryAlias: string;
     treeAlias: string;
     foldersOnly?: boolean;
+    /**
+     * The alias of a search provider used to enable search in the destination picker.
+     */
+    searchProviderAlias?: string;
 }
 declare global {
     interface UmbExtensionManifestMap {

package/dist-cms/packages/core/tree/entity-actions/sort-children-of/modal/sort-children-of-modal.element.d.ts

@@ -1,9 +1,8 @@
 import type { UmbTreeItemModel } from '../../../types.js';
 import type { UmbSortChildrenOfModalData, UmbSortChildrenOfModalValue } from './sort-children-of-modal.token.js';
-import type { PropertyValueMap } from '../../../../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../../../modal/index.js';
+import type { PropertyValueMap } from '../../../../../../external/lit/index.js';
 import type { UmbTableColumn, UmbTableItem } from '../../../../components/index.js';
-declare const elementName = "umb-sort-children-of-modal";
 export declare class UmbSortChildrenOfModalElement<TreeItemModelType extends UmbTreeItemModel = UmbTreeItemModel> extends UmbModalBaseElement<UmbSortChildrenOfModalData, UmbSortChildrenOfModalValue> {
     #private;
     protected _children: Array<TreeItemModelType>;
@@ -13,12 +12,13 @@ export declare class UmbSortChildrenOfModalElement<TreeItemModelType extends Umb
     private _tableConfig;
     protected _tableItems: Array<UmbTableItem>;
     private _sortable;
+    private _loading;
     private _submitButtonState?;
     protected _sortedUniques: Set<string>;
     constructor();
     protected _setTableColumns(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
-    protected _createTableItems(): void;
+    protected _createTableItems(): void | Promise<void>;
     protected _hasMorePages(): boolean;
     protected _onLoadMore(event: PointerEvent): void;
     protected _sortCompare(columnAlias: string, valueA: unknown, valueB: unknown): number;
@@ -28,6 +28,6 @@ export declare class UmbSortChildrenOfModalElement<TreeItemModelType extends Umb
 export { UmbSortChildrenOfModalElement as element };
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbSortChildrenOfModalElement;
+        'umb-sort-children-of-modal': UmbSortChildrenOfModalElement;
     }
 }