@umbraco-cms/backoffice 18.0.2 → 18.1.0-rc

package/dist-cms/packages/core/tree/tree-item-card/tree-item-card-extension.element.js

@@ -0,0 +1,74 @@
+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 { css, customElement, html, property, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbExtensionsElementAndApiInitializer } from '../../../../libs/extension-api/index.js';
+import { umbExtensionsRegistry } from '../../extension-registry/index.js';
+let UmbTreeItemCardExtensionElement = class UmbTreeItemCardExtensionElement extends UmbLitElement {
+    #extensionsController;
+    #item;
+    #api;
+    set item(value) {
+        const oldValue = this.#item;
+        this.#item = value;
+        if (value === oldValue)
+            return;
+        if (!value)
+            return;
+        if (this._component && value.entityType === oldValue?.entityType) {
+            this._component.item = value;
+            this.#api?.setTreeItem(value);
+            return;
+        }
+        this.#createController(value.entityType);
+    }
+    get item() {
+        return this.#item;
+    }
+    #createController(entityType) {
+        this.#extensionsController?.destroy();
+        this.#extensionsController = new UmbExtensionsElementAndApiInitializer(this, umbExtensionsRegistry, 'treeItemCard', undefined, (manifest) => manifest.forEntityTypes.includes(entityType), (extensionControllers) => {
+            if (this._component) {
+                this._component.remove();
+            }
+            const ctrl = extensionControllers[0];
+            if (!ctrl?.component || !ctrl?.api)
+                return;
+            const component = ctrl.component;
+            const api = ctrl.api;
+            component.item = this.#item;
+            component.api = api;
+            api.setTreeItem(this.#item);
+            this.#api = api;
+            this._component = component;
+            this.requestUpdate('_component');
+        }, undefined, undefined, undefined, { single: true });
+    }
+    render() {
+        return html `${this._component}`;
+    }
+    destroy() {
+        this.#extensionsController?.destroy();
+        super.destroy();
+    }
+    static { this.styles = css `
+		:host {
+			display: block;
+			position: relative;
+		}
+	`; }
+};
+__decorate([
+    state()
+], UmbTreeItemCardExtensionElement.prototype, "_component", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbTreeItemCardExtensionElement.prototype, "item", null);
+UmbTreeItemCardExtensionElement = __decorate([
+    customElement('umb-tree-item-card-extension')
+], UmbTreeItemCardExtensionElement);
+export { UmbTreeItemCardExtensionElement };

package/dist-cms/packages/core/tree/tree-item-card/tree-item-card.extension.d.ts

@@ -0,0 +1,11 @@
+import type { ManifestElementAndApi } from '../../../../libs/extension-api/index.js';
+import type { UmbTreeItemCardApi, UmbTreeItemCardElement } from './types.js';
+export interface ManifestTreeItemCard extends ManifestElementAndApi<UmbTreeItemCardElement, UmbTreeItemCardApi> {
+    type: 'treeItemCard';
+    forEntityTypes: Array<string>;
+}
+declare global {
+    interface UmbExtensionManifestMap {
+        umbTreeItemCard: ManifestTreeItemCard;
+    }
+}

package/dist-cms/packages/core/tree/tree-item-card/tree-item-card.extension.js

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

package/dist-cms/packages/core/tree/tree-item-card/types.d.ts

@@ -0,0 +1,10 @@
+import type { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
+import type { UmbTreeItemModel } from '../types.js';
+import type { UmbTreeItemApi } from '../tree-item-api/tree-item-api.interface.js';
+export interface UmbTreeItemCardApi extends UmbTreeItemApi {
+}
+export interface UmbTreeItemCardElement extends UmbControllerHostElement {
+    item: UmbTreeItemModel | undefined;
+    api: UmbTreeItemCardApi | undefined;
+}
+export type * from './tree-item-card.extension.js';

package/dist-cms/packages/core/tree/tree-item-card/types.js

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

package/dist-cms/packages/core/tree/tree-picker-modal/tree-picker-modal.element.d.ts

@@ -11,11 +11,20 @@ export declare class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemM
     private _createLabel?;
     private _searchQuery?;
     private _treeExpansion;
+    private _treeInteractionMemories?;
+    private _currentLocation?;
+    private _breadcrumb;
+    private _initialStartNode?;
+    private _repository?;
+    private _breadcrumbLoaded;
+    private _breadcrumbLoadPromise?;
     protected _pickerContext: UmbTreeItemPickerContext;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
 }
 export default UmbTreePickerModalElement;
 declare global {

package/dist-cms/packages/core/tree/tree-picker-modal/tree-picker-modal.element.js

@@ -5,12 +5,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbTreeItemPickerContext } from '../tree-item-picker/index.js';
-import { customElement, html, ifDefined, nothing, state } from '../../../../external/lit/index.js';
+import { UmbTreeItemOpenEvent } from '../tree-item/events/tree-item-open.event.js';
+import { css, customElement, html, ifDefined, nothing, repeat, state } from '../../../../external/lit/index.js';
 import { UmbDeselectedEvent, UmbSelectedEvent } from '../../event/index.js';
 import { UmbModalRouteRegistrationController } from '../../router/index.js';
 import { UmbPickerModalBaseElement } from '../../picker/index.js';
 import { UMB_WORKSPACE_MODAL } from '../../workspace/index.js';
+import { UmbExtensionApiInitializer } from '../../../../libs/extension-api/index.js';
+import { umbExtensionsRegistry } from '../../extension-registry/index.js';
+const TREE_MEMORY_UNIQUE = 'UmbTreeItemPickerTree';
+const LOCATION_MEMORY_UNIQUE = 'UmbTreeItemPickerLocation';
 let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPickerModalBaseElement {
+    #treeAlias;
     constructor() {
         super();
         this._selectionConfiguration = {
@@ -20,7 +26,15 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
         };
         this._hasSelection = false;
         this._treeExpansion = [];
+        this._breadcrumb = [];
+        this._breadcrumbLoaded = false;
         this._pickerContext = new UmbTreeItemPickerContext(this);
+        this.#onTreeItemOpen = async (event) => {
+            event.stopPropagation();
+            const { unique, entityType } = event;
+            await this.#navigateToLocation({ unique, entityType });
+            this.#setLocationInInteractionMemory();
+        };
         this.#searchSelectableFilter = () => true;
         this._pickerContext.selection.setSelectable(true);
         this.observe(this._pickerContext.selection.hasSelection, (hasSelection) => {
@@ -29,10 +43,16 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
         this.#observePickerSelection();
         this.#observeSearch();
         this.#observeExpansion();
+        this.#observeTreeInteractionMemories();
     }
     connectedCallback() {
         super.connectedCallback();
         this.#initCreateAction();
+        this.addEventListener(UmbTreeItemOpenEvent.TYPE, this.#onTreeItemOpen);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(UmbTreeItemOpenEvent.TYPE, this.#onTreeItemOpen);
     }
     async updated(_changedProperties) {
         super.updated(_changedProperties);
@@ -50,6 +70,18 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
                 ...this._selectionConfiguration,
                 multiple,
             };
+            if (this.data?.treeAlias && this.data.treeAlias !== this.#treeAlias) {
+                this.#treeAlias = this.data.treeAlias;
+                this._initialStartNode = this.data.startNode;
+                this._currentLocation = this.data.startNode;
+                this._breadcrumb = [];
+                this._breadcrumbLoaded = false;
+                this._breadcrumbLoadPromise = undefined;
+                this.#initRepository(this.data.treeAlias);
+            }
+            if (this.data?.treeExpansion !== undefined) {
+                this._pickerContext.expansion.setExpansion(this.data.treeExpansion);
+            }
         }
         if (_changedProperties.has('value')) {
             const selection = this.value?.selection ?? [];
@@ -60,6 +92,118 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
             };
         }
     }
+    #initRepository(treeAlias) {
+        const treeManifest = umbExtensionsRegistry.getByAlias(treeAlias);
+        const repositoryAlias = treeManifest?.meta?.repositoryAlias;
+        if (!repositoryAlias)
+            return;
+        new UmbExtensionApiInitializer(this, umbExtensionsRegistry, repositoryAlias, [this], async (permitted, ctrl) => {
+            this._repository = permitted ? ctrl.api : undefined;
+            if (this._repository && !this._breadcrumbLoaded) {
+                this._breadcrumbLoaded = true;
+                this._breadcrumbLoadPromise = this.#loadInitialBreadcrumb();
+                await this._breadcrumbLoadPromise;
+                await this.#restoreLocationFromMemory();
+            }
+        });
+    }
+    async #loadInitialBreadcrumb() {
+        if (!this._repository)
+            return;
+        if (this._initialStartNode) {
+            const { data } = await this._repository.requestTreeItemAncestors({
+                treeItem: this._initialStartNode,
+            });
+            const items = data ?? [];
+            const ceilingIndex = items.findIndex((item) => item.unique === this._initialStartNode.unique);
+            const sliced = ceilingIndex >= 0 ? items.slice(ceilingIndex) : items;
+            this._breadcrumb = sliced.map((item) => ({
+                unique: item.unique,
+                entityType: item.entityType,
+                name: item.name,
+            }));
+        }
+        else {
+            const { data: root } = await this._repository.requestTreeRoot();
+            if (root) {
+                this._breadcrumb = [{ unique: null, entityType: root.entityType, name: root.name }];
+            }
+        }
+    }
+    #onTreeItemOpen;
+    async #navigateToLocation(entity) {
+        this._currentLocation = entity;
+        if (!this._repository)
+            return;
+        await this._breadcrumbLoadPromise;
+        const { data } = await this._repository.requestTreeItemAncestors({ treeItem: entity });
+        const items = data ?? [];
+        if (this._initialStartNode) {
+            const ceilingIndex = items.findIndex((item) => item.unique === this._initialStartNode.unique);
+            const sliced = ceilingIndex >= 0 ? items.slice(ceilingIndex) : items;
+            this._breadcrumb = sliced.map((item) => ({
+                unique: item.unique,
+                entityType: item.entityType,
+                name: item.name,
+            }));
+        }
+        else {
+            const root = this._breadcrumb[0];
+            this._breadcrumb = [
+                ...(root ? [root] : []),
+                ...items.map((item) => ({
+                    unique: item.unique,
+                    entityType: item.entityType,
+                    name: item.name,
+                })),
+            ];
+        }
+    }
+    #setLocationInInteractionMemory() {
+        if (!this._currentLocation) {
+            this._pickerContext.interactionMemory.deleteMemory(LOCATION_MEMORY_UNIQUE);
+            return;
+        }
+        const memory = {
+            unique: LOCATION_MEMORY_UNIQUE,
+            value: {
+                entity: {
+                    unique: this._currentLocation.unique,
+                    entityType: this._currentLocation.entityType,
+                },
+            },
+        };
+        this._pickerContext.interactionMemory.setMemory(memory);
+    }
+    #getLocationFromInteractionMemory() {
+        const memory = this._pickerContext.interactionMemory.getMemory(LOCATION_MEMORY_UNIQUE);
+        return memory?.value?.entity;
+    }
+    async #restoreLocationFromMemory() {
+        const entity = this.#getLocationFromInteractionMemory();
+        if (!entity || !this._repository)
+            return;
+        if (this._initialStartNode) {
+            const { data } = await this._repository.requestTreeItemAncestors({ treeItem: entity });
+            const isWithinStartNode = (data ?? []).some((a) => a.unique === this._initialStartNode.unique);
+            if (!isWithinStartNode)
+                return;
+        }
+        await this.#navigateToLocation(entity);
+    }
+    #onBreadcrumbItemClick(index) {
+        if (index === this._breadcrumb.length - 1)
+            return;
+        const item = this._breadcrumb[index];
+        if (index === 0 && !this._initialStartNode) {
+            this._currentLocation = undefined;
+        }
+        else {
+            this._currentLocation = { unique: item.unique, entityType: item.entityType };
+        }
+        this._breadcrumb = this._breadcrumb.slice(0, index + 1);
+        this.#setLocationInInteractionMemory();
+    }
     #observePickerSelection() {
         this.observe(this._pickerContext.selection.selection, (selection) => {
             this.updateValue({ selection });
@@ -76,6 +220,11 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
             this._treeExpansion = value;
         }, 'umbTreeItemPickerExpansionObserver');
     }
+    #observeTreeInteractionMemories() {
+        this.observe(this._pickerContext.interactionMemory.memory(TREE_MEMORY_UNIQUE), (memory) => {
+            this._treeInteractionMemories = memory?.memories;
+        }, 'umbTreePickerInteractionMemoriesObserver');
+    }
     // Tree Selection
     #onTreeItemSelected(event) {
         event.stopPropagation();
@@ -124,10 +273,21 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
         const expansion = target.getExpansion();
         this._pickerContext.expansion.setExpansion(expansion);
     }
+    #onTreeInteractionMemoriesChange(event) {
+        event.stopPropagation();
+        const tree = event.currentTarget;
+        const memories = tree.interactionMemories;
+        if (memories.length > 0) {
+            this._pickerContext.interactionMemory.setMemory({ unique: TREE_MEMORY_UNIQUE, memories });
+        }
+        else {
+            this._pickerContext.interactionMemory.deleteMemory(TREE_MEMORY_UNIQUE);
+        }
+    }
     #searchSelectableFilter;
     render() {
         return html `
-			<umb-body-layout headline=${this.localize.term('general_choose')}>
+			<umb-body-layout headline=${this.localize.string(this.data?.headline ?? '#general_choose')}>
 				${this.#renderSearch()} ${this.#renderTree()} ${this.#renderActions()}
 			</umb-body-layout>
 		`;
@@ -144,24 +304,43 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
             return nothing;
         }
         return html `
-			<uui-box>
-				<umb-tree
-					alias=${ifDefined(this.data?.treeAlias)}
-					.props=${{
+			${this.#renderBreadcrumb()}
+			<umb-tree
+				alias=${ifDefined(this.data?.treeAlias)}
+				.props=${{
+            showToolbar: true,
             hideTreeItemActions: true,
             hideTreeRoot: this.data?.hideTreeRoot,
             expandTreeRoot: this.data?.expandTreeRoot,
             selectionConfiguration: this._selectionConfiguration,
             filter: this.data?.filter,
             selectableFilter: this.data?.pickableFilter,
-            startNode: this.data?.startNode,
+            startNode: this._currentLocation,
             foldersOnly: this.data?.foldersOnly,
             expansion: this._treeExpansion,
+            interactionMemories: this._treeInteractionMemories,
         }}
-					@selected=${this.#onTreeItemSelected}
-					@deselected=${this.#onTreeItemDeselected}
-					@expansion-change=${this.#onTreeItemExpansionChange}></umb-tree
-			></uui-box>
+				@selected=${this.#onTreeItemSelected}
+				@deselected=${this.#onTreeItemDeselected}
+				@expansion-change=${this.#onTreeItemExpansionChange}
+				@interaction-memories-change=${this.#onTreeInteractionMemoriesChange}></umb-tree>
+		`;
+    }
+    #renderBreadcrumb() {
+        if (!this._breadcrumb.length)
+            return nothing;
+        return html `
+			<div id="breadcrumb">
+				<uui-breadcrumbs>
+					${repeat(this._breadcrumb, (item) => item.unique ?? 'root', (item, index) => html `
+							<uui-breadcrumb-item
+								?last-item=${index === this._breadcrumb.length - 1}
+								@click=${() => this.#onBreadcrumbItemClick(index)}>
+								${this.localize.string(item.name)}
+							</uui-breadcrumb-item>
+						`)}
+				</uui-breadcrumbs>
+			</div>
 		`;
     }
     #renderActions() {
@@ -175,7 +354,7 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
 							href=${this._createPath}></uui-button>`
             : nothing}
 				<uui-button
-					label=${this.localize.term('general_choose')}
+					label=${this.localize.string(this.data?.confirmLabel ?? '#general_choose')}
 					look="primary"
 					color="positive"
 					@click=${this._submitModal}
@@ -183,6 +362,20 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
 			</div>
 		`;
     }
+    static { this.styles = css `
+		#breadcrumb {
+			margin-bottom: var(--uui-size-space-4);
+		}
+
+		uui-breadcrumbs {
+			overflow: hidden;
+			min-width: 0;
+		}
+
+		uui-breadcrumb-item:not([last-item]) {
+			cursor: pointer;
+		}
+	`; }
 };
 __decorate([
     state()
@@ -202,6 +395,15 @@ __decorate([
 __decorate([
     state()
 ], UmbTreePickerModalElement.prototype, "_treeExpansion", void 0);
+__decorate([
+    state()
+], UmbTreePickerModalElement.prototype, "_treeInteractionMemories", void 0);
+__decorate([
+    state()
+], UmbTreePickerModalElement.prototype, "_currentLocation", void 0);
+__decorate([
+    state()
+], UmbTreePickerModalElement.prototype, "_breadcrumb", void 0);
 UmbTreePickerModalElement = __decorate([
     customElement('umb-tree-picker-modal')
 ], UmbTreePickerModalElement);

package/dist-cms/packages/core/tree/tree-picker-modal/types.d.ts

@@ -2,6 +2,7 @@ import type { UmbTreeItemModel, UmbTreeStartNode } from '../types.js';
 import type { UmbPathPattern, UmbPathPatternParamsType } from '../../router/index.js';
 import type { UmbModalToken, UmbPickerModalData, UmbPickerModalValue } from '../../modal/index.js';
 import type { UmbWorkspaceModalData } from '../../workspace/index.js';
+import type { UmbEntityExpansionModel } from '../../utils/index.js';
 export interface UmbTreePickerModalCreateActionData<PathPatternParamsType extends UmbPathPatternParamsType> {
     label: string;
     modalData: UmbWorkspaceModalData;
@@ -10,8 +11,11 @@ export interface UmbTreePickerModalCreateActionData<PathPatternParamsType extend
     extendWithPathParams: PathPatternParamsType;
 }
 export interface UmbTreePickerModalData<TreeItemType = UmbTreeItemModel, PathPatternParamsType extends UmbPathPatternParamsType = UmbPathPatternParamsType> extends UmbPickerModalData<TreeItemType> {
+    headline?: string;
+    confirmLabel?: string;
     hideTreeRoot?: boolean;
     expandTreeRoot?: boolean;
+    treeExpansion?: UmbEntityExpansionModel;
     treeAlias?: string;
     createAction?: UmbTreePickerModalCreateActionData<PathPatternParamsType>;
     startNode?: UmbTreeStartNode;

package/dist-cms/packages/core/tree/tree.context.interface.d.ts

@@ -4,36 +4,53 @@ import type { UmbTreeExpansionModel } from './expansion-manager/types.js';
 import type { UmbTreeItemActiveManager } from './active-manager/tree-active-manager.js';
 import type { UmbTreeRepository } from './data/tree-repository.interface.js';
 import type { UmbTreeRootItemsRequestArgs } from './data/types.js';
+import type { UmbTreeViewManager } from './view/tree-view.manager.js';
 import type { UmbContextBase } from '../../../libs/class-api/index.js';
+import type { UmbInteractionMemoryManager } from '../interaction-memory/index.js';
 import type { Observable } from '../../../libs/observable-api/index.js';
 import type { UmbPaginationManager, UmbSelectionManager, UmbTargetPaginationManager } from '../utils/index.js';
 export interface UmbTreeContext<TreeItemType extends UmbTreeItemModel = UmbTreeItemModel, TreeRootType extends UmbTreeRootModel = UmbTreeRootModel, RequestArgsType extends UmbTreeRootItemsRequestArgs = UmbTreeRootItemsRequestArgs> extends UmbContextBase {
     manifest: ManifestTree | undefined;
     readonly activeManager: UmbTreeItemActiveManager;
+    readonly interactionMemory?: UmbInteractionMemoryManager;
+    readonly view?: UmbTreeViewManager;
     readonly treeRoot: Observable<TreeRootType | undefined>;
     readonly hideTreeRoot: Observable<boolean | undefined>;
     readonly expandTreeRoot: Observable<boolean | undefined>;
+    readonly hideTreeItemActions?: Observable<boolean>;
+    readonly isMenu?: Observable<boolean | undefined>;
+    readonly selectOnly?: Observable<boolean | undefined>;
     selectableFilter?(item: TreeItemType): boolean;
     filter?(item: TreeItemType): boolean;
     readonly selection: UmbSelectionManager;
     readonly expansion: UmbTreeExpansionManager;
     readonly rootItems: Observable<TreeItemType[]>;
+    readonly currentPageItems?: Observable<TreeItemType[]>;
     readonly hasChildren: Observable<boolean>;
     readonly pagination: UmbPaginationManager;
     readonly targetPagination: UmbTargetPaginationManager;
     readonly startNode: Observable<UmbTreeStartNode | undefined>;
     readonly foldersOnly: Observable<boolean>;
     readonly additionalRequestArgs: Observable<Partial<RequestArgsType> | object>;
+    readonly isLoading?: Observable<boolean>;
     readonly isLoadingPrevChildren: Observable<boolean>;
     readonly isLoadingNextChildren: Observable<boolean>;
     getRepository(): UmbTreeRepository | undefined;
+    open?(item: TreeItemType): void;
     loadTree(): void;
     reloadTree(): void;
+    loadPage?(pageNumber: number): void;
     loadMore(): void;
     loadPrevItems(): void;
     loadNextItems(): void;
     setHideTreeRoot(hideTreeRoot: boolean): void;
     getHideTreeRoot(): boolean;
+    setHideTreeItemActions?(value: boolean): void;
+    getHideTreeItemActions?(): boolean;
+    setSelectOnly?(value: boolean | undefined): void;
+    getSelectOnly?(): boolean;
+    setIsMenu?(value: boolean): void;
+    getIsMenu?(): boolean;
     setStartNode(startNode: UmbTreeStartNode | undefined): void;
     getStartNode(): UmbTreeStartNode | undefined;
     setFoldersOnly(foldersOnly: boolean): void;

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

@@ -1,6 +1,8 @@
 import type { ManifestTree } from './extensions/types.js';
+import type { UmbInteractionMemoryModel } from '../interaction-memory/index.js';
 import { UmbExtensionElementAndApiSlotElementBase } from '../extension-registry/index.js';
 export declare class UmbTreeElement extends UmbExtensionElementAndApiSlotElementBase<ManifestTree> {
+    get interactionMemories(): Array<UmbInteractionMemoryModel>;
     getExtensionType(): string;
     getDefaultElementName(): string;
     getSelection(): any;

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

@@ -7,6 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '../../../external/lit/index.js';
 import { UmbExtensionElementAndApiSlotElementBase } from '../extension-registry/index.js';
 let UmbTreeElement = class UmbTreeElement extends UmbExtensionElementAndApiSlotElementBase {
+    get interactionMemories() {
+        return this._api?.interactionMemory?.getAllMemories() ?? [];
+    }
     getExtensionType() {
         return 'tree';
     }

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

@@ -4,11 +4,15 @@ export type * from './entity-actions/types.js';
 export type * from './extensions/types.js';
 export type * from './folder/types.js';
 export type * from './tree-menu-item/types.js';
+export type * from './tree-item-card/types.js';
+export type * from './workspace-view/types.js';
+export type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker-modal/index.js';
 export interface UmbTreeItemModelBase extends UmbEntityWithOptionalFlags {
     name: string;
     hasChildren: boolean;
     isFolder: boolean;
     icon?: string | null;
+    noAccess?: boolean;
 }
 export interface UmbTreeItemModel extends UmbTreeItemModelBase {
     unique: string;
@@ -20,6 +24,7 @@ export interface UmbTreeRootModel extends UmbTreeItemModelBase {
 export type UmbTreeSelectionConfiguration = {
     multiple?: boolean;
     selectable?: boolean;
+    selectOnly?: boolean;
     selection?: Array<string | null>;
 };
 export interface UmbTreeStartNode {

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

@@ -0,0 +1,16 @@
+import type { UmbTreeItemModel } from '../../types.js';
+import { UmbTreeViewElementBase } from '../tree-view-element-base.js';
+import { nothing } from '../../../../../external/lit/index.js';
+import '../../tree-item-card/tree-item-card-extension.element.js';
+export declare class UmbCardTreeViewElement extends UmbTreeViewElementBase<UmbTreeItemModel> {
+    private _items;
+    protected _gotTreeContext(): void;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default UmbCardTreeViewElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-card-tree-view': UmbCardTreeViewElement;
+    }
+}

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

@@ -0,0 +1,50 @@
+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';
+import '../../tree-item-card/tree-item-card-extension.element.js';
+let UmbCardTreeViewElement = class UmbCardTreeViewElement extends UmbTreeViewElementBase {
+    constructor() {
+        super(...arguments);
+        this._items = [];
+    }
+    _gotTreeContext() {
+        super._gotTreeContext();
+        this.observe(this._treeContext?.currentPageItems, (items) => (this._items = items ?? []), '_observeCurrentPageItems');
+    }
+    render() {
+        if (!this._items.length)
+            return nothing;
+        return html `
+			<div id="grid">
+				${repeat(this._items, (item) => item.unique, (item) => html `
+						<umb-tree-item-card-extension .entityType=${item.entityType} .item=${item}></umb-tree-item-card-extension>
+					`)}
+			</div>
+			<umb-tree-pagination></umb-tree-pagination>
+		`;
+    }
+    static { this.styles = css `
+		:host {
+			display: block;
+		}
+
+		#grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+			gap: var(--uui-size-space-4);
+		}
+	`; }
+};
+__decorate([
+    state()
+], UmbCardTreeViewElement.prototype, "_items", void 0);
+UmbCardTreeViewElement = __decorate([
+    customElement('umb-card-tree-view')
+], UmbCardTreeViewElement);
+export { UmbCardTreeViewElement };
+export default UmbCardTreeViewElement;

package/dist-cms/packages/core/tree/view/card/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/card/manifests.js

@@ -0,0 +1,18 @@
+import UmbCardTreeViewElement from './card-tree-view.element.js';
+export const manifests = [
+    {
+        type: 'kind',
+        alias: 'Umb.Kind.TreeView.Card',
+        matchKind: 'card',
+        matchType: 'treeView',
+        manifest: {
+            type: 'treeView',
+            element: UmbCardTreeViewElement,
+            weight: 800,
+            meta: {
+                label: '#tree_cardViewLabel',
+                icon: 'icon-grid',
+            },
+        },
+    },
+];