@umbraco-cms/backoffice 18.0.1 → 18.1.0-rc

package/dist-cms/packages/core/tree/view/classic/classic-tree-view.element.d.ts

@@ -0,0 +1,23 @@
+import { UmbTreeViewElementBase } from '../tree-view-element-base.js';
+import { nothing } from '../../../../../external/lit/index.js';
+export declare class UmbClassicTreeViewElement extends UmbTreeViewElementBase {
+    #private;
+    private _rootItems;
+    private _hasPreviousItems;
+    private _hasNextItems;
+    private _isLoadingPrevChildren;
+    private _isLoadingNextChildren;
+    private _hideTreeRoot;
+    private _hideTreeItemActions;
+    private _isMenu;
+    private _startNode?;
+    protected _gotTreeContext(): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UmbClassicTreeViewElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-classic-tree-view': UmbClassicTreeViewElement;
+    }
+}

package/dist-cms/packages/core/tree/view/classic/classic-tree-view.element.js

@@ -0,0 +1,139 @@
+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;
+};
+import { UmbTreeViewElementBase } from '../tree-view-element-base.js';
+import { css, customElement, html, nothing, repeat, state } from '../../../../../external/lit/index.js';
+let UmbClassicTreeViewElement = class UmbClassicTreeViewElement extends UmbTreeViewElementBase {
+    constructor() {
+        super(...arguments);
+        this._rootItems = [];
+        this._hasPreviousItems = false;
+        this._hasNextItems = false;
+        this._isLoadingPrevChildren = false;
+        this._isLoadingNextChildren = false;
+        this._hideTreeRoot = false;
+        this._hideTreeItemActions = false;
+        this._isMenu = false;
+    }
+    _gotTreeContext() {
+        super._gotTreeContext();
+        this.observe(this._treeContext?.rootItems, (rootItems) => (this._rootItems = rootItems ?? []), '_observeRootItems');
+        this.observe(this._treeContext?.isLoadingPrevChildren, (value) => (this._isLoadingPrevChildren = value ?? false), '_observeIsLoadingPrevChildren');
+        this.observe(this._treeContext?.isLoadingNextChildren, (value) => (this._isLoadingNextChildren = value ?? false), '_observeIsLoadingNextChildren');
+        this.observe(this._treeContext?.targetPagination?.totalPrevItems, (value) => (this._hasPreviousItems = value ? value > 0 : false), '_observeTotalPrevItems');
+        this.observe(this._treeContext?.targetPagination?.totalNextItems, (value) => (this._hasNextItems = value ? value > 0 : false), '_observeTotalNextItems');
+        this.observe(this._treeContext?.hideTreeRoot, (value) => (this._hideTreeRoot = value ?? false), '_observeHideTreeRoot');
+        this.observe(this._treeContext?.hideTreeItemActions, (value) => (this._hideTreeItemActions = value ?? false), '_observeHideTreeItemActions');
+        this.observe(this._treeContext?.isMenu, (value) => (this._isMenu = value ?? false), '_observeIsMenu');
+        this.observe(this._treeContext?.startNode, (value) => (this._startNode = value), '_observeStartNode');
+    }
+    #onLoadPrev(event) {
+        event.stopPropagation();
+        this._treeContext?.loadPrevItems?.();
+    }
+    #onLoadNext(event) {
+        event.stopPropagation();
+        this._treeContext?.loadMore?.();
+    }
+    render() {
+        if (this._isMenu) {
+            return html `${this.#renderTreeRoot()} ${this.#renderRootItems()}`;
+        }
+        // When the tree root is hidden or we are drilled into a start node only the children are shown.
+        // With no children there is nothing to frame, so render nothing and let the tree host present the empty state.
+        if ((this._hideTreeRoot || this._startNode) && this._rootItems.length === 0) {
+            return nothing;
+        }
+        return html `
+			<uui-box>
+				${this.#renderTreeRoot()} ${this.#renderRootItems()}
+			</uui-box>
+		`;
+    }
+    #renderTreeRoot() {
+        // When drilled into a start node, the root node is replaced by the drilled children via #renderRootItems.
+        if (this._hideTreeRoot || this._startNode || 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>
+		`;
+    }
+    #renderRootItems() {
+        // Render when hideTreeRoot is true, OR when drilled into a start node (startNode replaces the root node).
+        if (!this._hideTreeRoot && !this._startNode)
+            return nothing;
+        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()}
+		`;
+    }
+    #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)
+            return nothing;
+        return html `<umb-tree-load-more-button
+			@click=${this.#onLoadNext}
+			.loading=${this._isLoadingNextChildren}></umb-tree-load-more-button>`;
+    }
+    static { this.styles = css `
+		:host {
+			display: contents;
+		}
+	`; }
+};
+__decorate([
+    state()
+], UmbClassicTreeViewElement.prototype, "_rootItems", void 0);
+__decorate([
+    state()
+], UmbClassicTreeViewElement.prototype, "_hasPreviousItems", void 0);
+__decorate([
+    state()
+], UmbClassicTreeViewElement.prototype, "_hasNextItems", void 0);
+__decorate([
+    state()
+], UmbClassicTreeViewElement.prototype, "_isLoadingPrevChildren", void 0);
+__decorate([
+    state()
+], UmbClassicTreeViewElement.prototype, "_isLoadingNextChildren", void 0);
+__decorate([
+    state()
+], UmbClassicTreeViewElement.prototype, "_hideTreeRoot", void 0);
+__decorate([
+    state()
+], UmbClassicTreeViewElement.prototype, "_hideTreeItemActions", void 0);
+__decorate([
+    state()
+], UmbClassicTreeViewElement.prototype, "_isMenu", void 0);
+__decorate([
+    state()
+], UmbClassicTreeViewElement.prototype, "_startNode", void 0);
+UmbClassicTreeViewElement = __decorate([
+    customElement('umb-classic-tree-view')
+], UmbClassicTreeViewElement);
+export { UmbClassicTreeViewElement };
+export default UmbClassicTreeViewElement;

package/dist-cms/packages/core/tree/view/classic/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/tree/view/classic/manifests.js

@@ -0,0 +1,18 @@
+import UmbClassicTreeViewElement from './classic-tree-view.element.js';
+export const manifests = [
+    {
+        type: 'kind',
+        alias: 'Umb.Kind.TreeView.Classic',
+        matchKind: 'classic',
+        matchType: 'treeView',
+        manifest: {
+            type: 'treeView',
+            element: UmbClassicTreeViewElement,
+            weight: 1000,
+            meta: {
+                label: '#tree_classicViewLabel',
+                icon: 'icon-blockquote',
+            },
+        },
+    },
+];

package/dist-cms/packages/core/tree/view/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './types.js';
+export * from './tree-view.manager.js';
+export * from './tree-view-element-base.js';

package/dist-cms/packages/core/tree/view/index.js

@@ -0,0 +1,2 @@
+export * from './tree-view.manager.js';
+export * from './tree-view-element-base.js';

package/dist-cms/packages/core/tree/view/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/tree/view/manifests.js

@@ -0,0 +1,8 @@
+import { manifests as classicManifests } from './classic/manifests.js';
+import { manifests as cardManifests } from './card/manifests.js';
+import { manifests as tableManifests } from './table/manifests.js';
+export const manifests = [
+    ...classicManifests,
+    ...cardManifests,
+    ...tableManifests,
+];

package/dist-cms/packages/core/tree/view/table/index.d.ts

@@ -0,0 +1 @@
+export type * from './types.js';

package/dist-cms/packages/core/tree/view/table/index.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/tree/view/table/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../../extension-registry/index.js';
+export declare const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind>;

package/dist-cms/packages/core/tree/view/table/manifests.js

@@ -0,0 +1,18 @@
+import { UmbTableTreeViewElement } from './table-tree-view.element.js';
+export const manifests = [
+    {
+        type: 'kind',
+        alias: 'Umb.Kind.TreeView.Table',
+        matchKind: 'table',
+        matchType: 'treeView',
+        manifest: {
+            type: 'treeView',
+            element: UmbTableTreeViewElement,
+            weight: 900,
+            meta: {
+                label: '#tree_tableViewLabel',
+                icon: 'icon-table',
+            },
+        },
+    },
+];

package/dist-cms/packages/core/tree/view/table/table-tree-view-row.controller.d.ts

@@ -0,0 +1,30 @@
+import type { UmbTreeItemModel } from '../../types.js';
+import { UmbControllerBase } from '../../../../../libs/class-api/index.js';
+export interface UmbTableTreeViewRowChangeCallbacks {
+    onNoAccessChange: () => void;
+    onPathChange: () => void;
+    onActiveChange: () => void;
+}
+/**
+ * Owns the per-row resources of a table tree view: the element-backed host that
+ * provides the entity and tree-item-api contexts onto the row, the api itself,
+ * and the observers that track the row's access, path and active state.
+ *
+ * Destroying the controller tears down everything it owns in a single call.
+ */
+export declare class UmbTableTreeViewRowController extends UmbControllerBase {
+    #private;
+    get currentNoAccess(): boolean;
+    get currentPath(): string;
+    get currentIsActive(): boolean;
+    constructor(element: HTMLElement, entityType: string | undefined, unique: string, treeItem: UmbTreeItemModel | undefined);
+    /**
+     * Starts observing the api. Call this only after the controller has been
+     * registered by its owner, so the synchronous initial emissions can resolve
+     * the controller while updating the row.
+     * @param {UmbTableTreeViewRowChangeCallbacks} callbacks - invoked when the observed values change.
+     */
+    observeApi(callbacks: UmbTableTreeViewRowChangeCallbacks): void;
+    setItem(entityType: string | undefined, unique: string, treeItem: UmbTreeItemModel | undefined): void;
+    destroy(): void;
+}

package/dist-cms/packages/core/tree/view/table/table-tree-view-row.controller.js

@@ -0,0 +1,73 @@
+import { UmbTreeItemApiContextBase } from '../../tree-item-api/tree-item-api-context-base.js';
+import { UmbControllerBase } from '../../../../../libs/class-api/index.js';
+import { UmbElementControllerHost } from '../../../../../libs/controller-api/index.js';
+import { UmbEntityContext } from '../../../entity/index.js';
+class UmbTableTreeViewItemApi extends UmbTreeItemApiContextBase {
+}
+/**
+ * Owns the per-row resources of a table tree view: the element-backed host that
+ * provides the entity and tree-item-api contexts onto the row, the api itself,
+ * and the observers that track the row's access, path and active state.
+ *
+ * Destroying the controller tears down everything it owns in a single call.
+ */
+export class UmbTableTreeViewRowController extends UmbControllerBase {
+    #elementHost;
+    #entityContext;
+    #api;
+    #currentNoAccess = false;
+    #currentPath = '';
+    #currentIsActive = false;
+    get currentNoAccess() {
+        return this.#currentNoAccess;
+    }
+    get currentPath() {
+        return this.#currentPath;
+    }
+    get currentIsActive() {
+        return this.#currentIsActive;
+    }
+    constructor(element, entityType, unique, treeItem) {
+        const elementHost = new UmbElementControllerHost(element);
+        super(elementHost);
+        this.#elementHost = elementHost;
+        this.#elementHost.hostConnected();
+        this.#entityContext = new UmbEntityContext(this);
+        this.#entityContext.setEntityType(entityType);
+        this.#entityContext.setUnique(unique);
+        this.#api = new UmbTableTreeViewItemApi(this);
+        if (treeItem)
+            this.#api.setTreeItem(treeItem);
+    }
+    /**
+     * Starts observing the api. Call this only after the controller has been
+     * registered by its owner, so the synchronous initial emissions can resolve
+     * the controller while updating the row.
+     * @param {UmbTableTreeViewRowChangeCallbacks} callbacks - invoked when the observed values change.
+     */
+    observeApi(callbacks) {
+        this.observe(this.#api.noAccess, (noAccess) => {
+            this.#currentNoAccess = noAccess ?? false;
+            callbacks.onNoAccessChange();
+        }, null);
+        this.observe(this.#api.path, (path) => {
+            this.#currentPath = path ?? '';
+            callbacks.onPathChange();
+        }, null);
+        this.observe(this.#api.isActive, (isActive) => {
+            this.#currentIsActive = isActive ?? false;
+            callbacks.onActiveChange();
+        }, null);
+    }
+    setItem(entityType, unique, treeItem) {
+        this.#entityContext.setEntityType(entityType);
+        this.#entityContext.setUnique(unique);
+        if (treeItem)
+            this.#api.setTreeItem(treeItem);
+    }
+    destroy() {
+        super.destroy();
+        this.#elementHost?.destroy();
+        this.#elementHost = undefined;
+    }
+}

package/dist-cms/packages/core/tree/view/table/table-tree-view.element.d.ts

@@ -0,0 +1,25 @@
+import type { UmbTreeItemModel } from '../../types.js';
+import { UmbTreeViewElementBase } from '../tree-view-element-base.js';
+import type { ManifestTreeViewTableKind } from './types.js';
+import { nothing, type PropertyValues } from '../../../../../external/lit/index.js';
+import './tree-name-table-column-layout.element.js';
+import '../../../entity-action/index.js';
+export declare class UmbTableTreeViewElement extends UmbTreeViewElementBase<UmbTreeItemModel> {
+    #private;
+    private _items;
+    private _hideTreeItemActions;
+    private _tableRows;
+    set manifest(value: ManifestTreeViewTableKind | undefined);
+    get manifest(): ManifestTreeViewTableKind | undefined;
+    protected _gotTreeContext(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UmbTableTreeViewElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-table-tree-view': UmbTableTreeViewElement;
+    }
+}

package/dist-cms/packages/core/tree/view/table/table-tree-view.element.js

@@ -0,0 +1,275 @@
+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;
+};
+import { UmbTreeViewElementBase } from '../tree-view-element-base.js';
+import { UmbTableTreeViewRowController } from './table-tree-view-row.controller.js';
+import { css, customElement, html, nothing, property, state, } from '../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../style/index.js';
+import { getItemFallbackIcon } from '../../../entity-item/index.js';
+import './tree-name-table-column-layout.element.js';
+import '../../../entity-action/index.js';
+let UmbTableTreeViewElement = class UmbTableTreeViewElement extends UmbTreeViewElementBase {
+    constructor() {
+        super(...arguments);
+        this._items = [];
+        this._hideTreeItemActions = false;
+        this._tableRows = [];
+        this.#tableConfig = { allowSelection: false, allowSelectAll: false, selectOnly: false };
+        this.#itemMap = new Map();
+        this.#rows = new Map();
+        this.#onRowRendered = (element, item) => {
+            if (!element) {
+                this.#rows.get(item.id)?.destroy();
+                this.#rows.delete(item.id);
+                return;
+            }
+            const existing = this.#rows.get(item.id);
+            if (existing) {
+                existing.setItem(item.entityType, item.id, this.#itemMap.get(item.id));
+                return;
+            }
+            const row = new UmbTableTreeViewRowController(element, item.entityType, item.id, this.#itemMap.get(item.id));
+            // Register before observers so synchronous emissions see the row.
+            this.#rows.set(item.id, row);
+            row.observeApi({
+                onNoAccessChange: () => this.#updateRowSelectable(item.id),
+                onPathChange: () => {
+                    const updated = this.#updateRowHref(item.id);
+                    if (updated)
+                        this._tableRows = updated;
+                },
+                onActiveChange: () => this.#updateRowActive(item.id),
+            });
+        };
+    }
+    #manifest;
+    set manifest(value) {
+        this.#manifest = value;
+        this.#createTableRows();
+    }
+    get manifest() {
+        return this.#manifest;
+    }
+    #tableConfig;
+    get #manifestColumns() {
+        return this.#manifest?.meta?.columns ?? [];
+    }
+    #itemMap;
+    #rows;
+    #onRowRendered;
+    #updateRowSelectable(id) {
+        const idx = this._tableRows.findIndex((r) => r.id === id);
+        if (idx === -1)
+            return;
+        const row = this.#rows.get(id);
+        const treeItem = this.#itemMap.get(id);
+        const selectable = !(row?.currentNoAccess ?? false) && (treeItem ? this._isSelectableItem(treeItem) : false);
+        if (this._tableRows[idx].selectable === selectable)
+            return;
+        this._tableRows = [
+            ...this._tableRows.slice(0, idx),
+            { ...this._tableRows[idx], selectable },
+            ...this._tableRows.slice(idx + 1),
+        ];
+    }
+    #updateRowHref(id, rows = this._tableRows) {
+        const idx = rows.findIndex((r) => r.id === id);
+        if (idx === -1)
+            return null;
+        const row = this.#rows.get(id);
+        const treeItem = this.#itemMap.get(id);
+        if (!treeItem)
+            return null;
+        const href = this._selectable ? undefined : row?.currentPath || undefined;
+        const nameData = rows[idx].data.find((d) => d.columnAlias === 'name');
+        if (nameData?.value?.href === href)
+            return null;
+        const childrenIndicator = rows[idx].childrenIndicator;
+        return [
+            ...rows.slice(0, idx),
+            {
+                ...rows[idx],
+                childrenIndicator: childrenIndicator ? { ...childrenIndicator, href } : undefined,
+                data: rows[idx].data.map((d) => (d.columnAlias === 'name' ? { ...d, value: { ...d.value, href } } : d)),
+            },
+            ...rows.slice(idx + 1),
+        ];
+    }
+    #updateRowActive(id) {
+        const idx = this._tableRows.findIndex((r) => r.id === id);
+        if (idx === -1)
+            return;
+        const isActive = this.#rows.get(id)?.currentIsActive ?? false;
+        if (this._tableRows[idx].active === isActive)
+            return;
+        this._tableRows = [
+            ...this._tableRows.slice(0, idx),
+            { ...this._tableRows[idx], active: isActive },
+            ...this._tableRows.slice(idx + 1),
+        ];
+    }
+    _gotTreeContext() {
+        super._gotTreeContext();
+        this.observe(this._treeContext?.currentPageItems, (items) => {
+            this._items = items ?? [];
+            this.#createTableRows();
+        }, '_observeCurrentPageItems');
+        this.observe(this._treeContext?.hideTreeItemActions, (value) => (this._hideTreeItemActions = value ?? false), '_observeHideTreeItemActions');
+    }
+    #buildTableColumns() {
+        const nameColumn = {
+            name: this.localize.term('general_name'),
+            alias: 'name',
+            elementName: 'umb-tree-name-table-column-layout',
+        };
+        const manifestColumns = this.#manifestColumns.map((col) => ({
+            name: this.localize.string(col.label),
+            alias: col.field,
+        }));
+        const entityActionsColumn = {
+            name: '',
+            alias: 'entityActions',
+            align: 'right',
+            elementName: 'umb-entity-actions-table-column-view',
+        };
+        return [nameColumn, ...manifestColumns, ...(this._hideTreeItemActions ? [] : [entityActionsColumn])];
+    }
+    #toTableRow(item) {
+        const id = item.unique;
+        const icon = item.isFolder ? 'icon-folder' : (item.icon ?? getItemFallbackIcon());
+        const row = this.#rows.get(id);
+        const noAccess = row?.currentNoAccess ?? false;
+        const href = this._selectable ? undefined : row?.currentPath || undefined;
+        const isActive = row?.currentIsActive ?? false;
+        const name = item.name;
+        const manifestColumnData = this.#manifestColumns.map((col) => {
+            const rawValue = item[col.field];
+            if (col.valueType) {
+                return {
+                    columnAlias: col.field,
+                    value: html `<umb-value-summary-extension
+						.valueType=${col.valueType}
+						.value=${rawValue}></umb-value-summary-extension>`,
+                };
+            }
+            return { columnAlias: col.field, value: rawValue };
+        });
+        const onOpen = item.hasChildren ? () => this._treeContext?.open?.(item) : undefined;
+        return {
+            id,
+            icon,
+            entityType: item.entityType,
+            childrenIndicator: item.hasChildren ? { href, onOpen } : undefined,
+            selectable: !noAccess && this._isSelectableItem(item),
+            active: isActive,
+            data: [
+                {
+                    columnAlias: 'name',
+                    value: {
+                        name,
+                        href,
+                        onOpen,
+                    },
+                },
+                ...manifestColumnData,
+                ...(this._hideTreeItemActions ? [] : [{ columnAlias: 'entityActions', value: { name } }]),
+            ],
+        };
+    }
+    #createTableRows() {
+        const items = this._items;
+        this.#itemMap.clear();
+        for (const item of items) {
+            this.#itemMap.set(item.unique, item);
+        }
+        this._tableRows = items.map((item) => this.#toTableRow(item));
+        const currentIds = new Set(this._tableRows.map((row) => row.id));
+        for (const [id, row] of this.#rows) {
+            if (!currentIds.has(id)) {
+                row.destroy();
+                this.#rows.delete(id);
+            }
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('_selectable') || changedProperties.has('_selectOnly')) {
+            this.#tableConfig = {
+                allowSelection: this._selectable,
+                allowSelectAll: false,
+                selectOnly: this._selectOnly,
+            };
+        }
+        if (changedProperties.has('_selectable')) {
+            let rows = this._tableRows;
+            for (const id of this.#itemMap.keys()) {
+                rows = this.#updateRowHref(id, rows) ?? rows;
+            }
+            if (rows !== this._tableRows)
+                this._tableRows = rows;
+        }
+        if (changedProperties.has('_hideTreeItemActions')) {
+            this.#createTableRows();
+        }
+    }
+    #onSelected(event) {
+        event.stopPropagation();
+        const itemId = event.getItemId();
+        if (itemId)
+            this._selectItem(itemId);
+    }
+    #onDeselected(event) {
+        event.stopPropagation();
+        const itemId = event.getItemId();
+        if (itemId)
+            this._deselectItem(itemId);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        for (const row of this.#rows.values()) {
+            row.destroy();
+        }
+        this.#rows.clear();
+        this.#itemMap.clear();
+    }
+    render() {
+        if (!this._tableRows.length)
+            return nothing;
+        return html `
+			<umb-table
+				.config=${this.#tableConfig}
+				.columns=${this.#buildTableColumns()}
+				.items=${this._tableRows}
+				.selection=${this._selection}
+				.onRowRendered=${this.#onRowRendered}
+				@selected=${this.#onSelected}
+				@deselected=${this.#onDeselected}></umb-table>
+			<umb-tree-pagination></umb-tree-pagination>
+		`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: block;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbTableTreeViewElement.prototype, "_hideTreeItemActions", void 0);
+__decorate([
+    state()
+], UmbTableTreeViewElement.prototype, "_tableRows", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbTableTreeViewElement.prototype, "manifest", null);
+UmbTableTreeViewElement = __decorate([
+    customElement('umb-table-tree-view')
+], UmbTableTreeViewElement);
+export { UmbTableTreeViewElement };
+export default UmbTableTreeViewElement;

package/dist-cms/packages/core/tree/view/table/tree-name-table-column-layout.element.d.ts

@@ -0,0 +1,21 @@
+import { nothing } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '../../../components/index.js';
+export interface UmbTreeNameTableColumnValue {
+    name: string;
+    href?: string;
+    onOpen?: () => void;
+}
+export declare class UmbTreeNameTableColumnLayoutElement extends UmbLitElement implements UmbTableColumnLayoutElement {
+    #private;
+    column: UmbTableColumn;
+    item: UmbTableItem;
+    value: UmbTreeNameTableColumnValue;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tree-name-table-column-layout': UmbTreeNameTableColumnLayoutElement;
+    }
+}