@umbraco-cms/backoffice 17.5.2 → 17.6.0-rc

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

@@ -1,38 +1,23 @@
+import type { UmbTreeItemApi } from '../tree-item-api/tree-item-api.interface.js';
 import type { UmbTreeItemModel } from '../types.js';
 import type { UmbPaginationManager } from '../../utils/index.js';
 import type { Observable } from '../../../../external/rxjs/index.js';
-import type { UmbApi } from '../../../../libs/extension-api/index.js';
-import type { UmbContextMinimal } from '../../../../libs/context-api/index.js';
 import type { UmbTargetPaginationManager } from '../../utils/index.js';
-export interface UmbTreeItemContext<TreeItemType extends UmbTreeItemModel = UmbTreeItemModel> extends UmbApi, UmbContextMinimal {
-    unique?: string | null;
-    entityType?: string;
-    treeItem: Observable<TreeItemType | undefined>;
+export interface UmbTreeItemContext<TreeItemType extends UmbTreeItemModel = UmbTreeItemModel> extends UmbTreeItemApi<TreeItemType> {
     childItems: Observable<TreeItemType[]>;
     hasChildren: Observable<boolean>;
     isLoading: Observable<boolean>;
-    isSelectableContext: Observable<boolean>;
-    isSelectable: Observable<boolean>;
-    isSelected: Observable<boolean>;
-    isActive: Observable<boolean>;
     isOpen: Observable<boolean>;
-    hasActions: Observable<boolean>;
-    path: Observable<string>;
     pagination: UmbPaginationManager;
     targetPagination: UmbTargetPaginationManager;
-    getTreeItem(): TreeItemType | undefined;
-    setTreeItem(treeItem: TreeItemType | undefined): void;
-    select(): void;
-    deselect(): void;
-    constructPath(pathname: string, entityType: string, unique: string): string;
+    isLoadingPrevChildren: Observable<boolean>;
+    isLoadingNextChildren: Observable<boolean>;
     loadChildren(): void;
     reloadChildren(): void;
     showChildren(): void;
     hideChildren(): void;
     loadPrevItems(): void;
     loadNextItems(): void;
-    isLoadingPrevChildren: Observable<boolean>;
-    isLoadingNextChildren: Observable<boolean>;
     setIsMenu(isMenu: boolean): void;
     getIsMenu(): boolean;
 }

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

@@ -1,3 +1,5 @@
+import type { UmbTreeItemApi } from '../tree-item-api/tree-item-api.interface.js';
 import type { UmbTreeItemContext } from './tree-item-context.interface.js';
 import { UmbContextToken } from '../../../../libs/context-api/index.js';
-export declare const UMB_TREE_ITEM_CONTEXT: UmbContextToken<UmbTreeItemContext<import("../types.js").UmbTreeItemModel>, UmbTreeItemContext<import("../types.js").UmbTreeItemModel>>;
+export declare const UMB_TREE_ITEM_CONTEXT: UmbContextToken<UmbTreeItemApi<import("../types.js").UmbTreeItemModel, import("../../../../libs/extension-api/index.js").ManifestBase>, UmbTreeItemApi<import("../types.js").UmbTreeItemModel, import("../../../../libs/extension-api/index.js").ManifestBase>>;
+export declare const UMB_TREE_ITEM_EXPANDABLE_CONTEXT: UmbContextToken<UmbTreeItemApi<import("../types.js").UmbTreeItemModel, import("../../../../libs/extension-api/index.js").ManifestBase>, UmbTreeItemContext<import("../types.js").UmbTreeItemModel>>;

package/dist-cms/packages/core/tree/tree-item/tree-item.context.token.js

@@ -1,2 +1,3 @@
 import { UmbContextToken } from '../../../../libs/context-api/index.js';
 export const UMB_TREE_ITEM_CONTEXT = new UmbContextToken('UmbTreeItemContext');
+export const UMB_TREE_ITEM_EXPANDABLE_CONTEXT = new UmbContextToken('UmbTreeItemContext', undefined, (context) => 'loadChildren' in context);

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

@@ -0,0 +1,2 @@
+export * from './tree-item-api-context-base.js';
+export type * from './tree-item-api.interface.js';

package/dist-cms/packages/core/tree/tree-item-api/index.js

@@ -0,0 +1 @@
+export * from './tree-item-api-context-base.js';

package/dist-cms/packages/core/tree/tree-item-api/tree-item-api-context-base.d.ts

@@ -0,0 +1,61 @@
+import type { UmbTreeItemModel } from '../types.js';
+import { UMB_TREE_CONTEXT } from '../tree.context.token.js';
+import type { UmbTreeItemApi } from './tree-item-api.interface.js';
+import { UmbBooleanState, UmbObjectState } from '../../../../libs/observable-api/index.js';
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { UmbEntityModel, UmbEntityUnique } from '../../entity/index.js';
+import type { ManifestBase } from '../../../../libs/extension-api/index.js';
+/**
+ * Abstract base for tree item apis. Handles item data, selection, active state,
+ * path, and entity actions — without children, expansion, or pagination.
+ *
+ * Provides itself as `UMB_TREE_ITEM_CONTEXT` so entity action conditions
+ * can discover a tree item regardless of which tree view is active.
+ */
+export declare abstract class UmbTreeItemApiContextBase<TreeItemType extends UmbTreeItemModel = UmbTreeItemModel, ManifestType extends ManifestBase = ManifestBase> extends UmbContextBase implements UmbTreeItemApi<TreeItemType, ManifestType> {
+    #private;
+    unique: UmbEntityUnique | undefined;
+    entityType: string | undefined;
+    get manifest(): ManifestType | undefined;
+    set manifest(value: ManifestType | undefined);
+    protected _treeContext?: typeof UMB_TREE_CONTEXT.TYPE;
+    /** Exposes the tree context consumer so subclasses can call `.asPromise()` on it. */
+    protected readonly _treeContextConsumer: import("../../../../libs/context-api/index.js").UmbContextConsumerController<import("../tree.context.interface.js").UmbTreeContext<UmbTreeItemModel, import("../types.js").UmbTreeRootModel, import("../index.js").UmbTreeRootItemsRequestArgs>, import("../tree.context.interface.js").UmbTreeContext<UmbTreeItemModel, import("../types.js").UmbTreeRootModel, import("../index.js").UmbTreeRootItemsRequestArgs>>;
+    protected readonly _treeItem: UmbObjectState<TreeItemType | undefined>;
+    readonly treeItem: import("rxjs").Observable<TreeItemType | undefined>;
+    protected readonly _isSelectable: UmbBooleanState<false>;
+    readonly isSelectable: import("rxjs").Observable<boolean>;
+    readonly isSelectableContext: import("rxjs").Observable<boolean>;
+    protected readonly _isSelected: UmbBooleanState<false>;
+    readonly isSelected: import("rxjs").Observable<boolean>;
+    protected readonly _isActive: UmbBooleanState<false>;
+    readonly isActive: import("rxjs").Observable<boolean>;
+    readonly hasChildren: import("rxjs").Observable<boolean>;
+    readonly hasActiveDescendant: import("rxjs").Observable<boolean | undefined>;
+    readonly noAccess: import("rxjs").Observable<boolean>;
+    readonly hasActions: import("rxjs").Observable<boolean>;
+    protected readonly _selectOnly: UmbBooleanState<false>;
+    readonly selectOnly: import("rxjs").Observable<boolean>;
+    readonly path: import("rxjs").Observable<string>;
+    /** Public accessor for the tree context. Kept public for backward compatibility. */
+    get treeContext(): typeof UMB_TREE_CONTEXT.TYPE | undefined;
+    constructor(host: UmbControllerHost);
+    setTreeItem(item: TreeItemType | undefined): void;
+    getTreeItem(): TreeItemType | undefined;
+    getPath(): string;
+    getAscending(): Array<UmbEntityModel> | undefined;
+    protected _observeIsSelectable(): void;
+    protected _observeIsSelected(): void;
+    protected _observeSelectOnly(): void;
+    /**
+     * Hook called when the tree context is received or changes. Subclasses can override to add additional observations.
+     * @param _context
+     */
+    protected _onTreeContextChanged(_context: typeof UMB_TREE_CONTEXT.TYPE): void;
+    open(): void;
+    select(): void;
+    deselect(): void;
+    constructPath(pathname: string, entityType: string, unique: string | null): string;
+    destroy(): void;
+}

package/dist-cms/packages/core/tree/tree-item-api/tree-item-api-context-base.js

@@ -0,0 +1,248 @@
+import { UMB_TREE_CONTEXT } from '../tree.context.token.js';
+import { UMB_TREE_ITEM_CONTEXT } from '../tree-item/tree-item.context.token.js';
+import { UmbTreeItemEntityActionManager } from '../tree-item/tree-item-entity-action.manager.js';
+import { combineLatest, map } from '../../../../external/rxjs/index.js';
+import { UmbBooleanState, UmbObjectState, UmbStringState } from '../../../../libs/observable-api/index.js';
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
+import { UMB_WORKSPACE_EDIT_PATH_PATTERN } from '../../workspace/index.js';
+import { ensureSlash } from '../../router/index.js';
+import { debounce } from '../../utils/index.js';
+import { UmbEntityContext, UmbParentEntityContext } from '../../entity/index.js';
+import { UMB_SECTION_CONTEXT } from '../../section/index.js';
+/**
+ * Abstract base for tree item apis. Handles item data, selection, active state,
+ * path, and entity actions — without children, expansion, or pagination.
+ *
+ * Provides itself as `UMB_TREE_ITEM_CONTEXT` so entity action conditions
+ * can discover a tree item regardless of which tree view is active.
+ */
+export class UmbTreeItemApiContextBase extends UmbContextBase {
+    #manifest;
+    get manifest() {
+        return this.#manifest;
+    }
+    set manifest(value) {
+        if (this.#manifest === value)
+            return;
+        this.#manifest = value;
+    }
+    #gotTreeContext;
+    #isSelectableContext;
+    #hasActiveDescendant;
+    #treeItemEntityActionManager;
+    #hideTreeItemActions;
+    #path;
+    #sectionContext;
+    #entityContext;
+    #parentContext;
+    /** Public accessor for the tree context. Kept public for backward compatibility. */
+    get treeContext() {
+        return this._treeContext;
+    }
+    constructor(host) {
+        super(host, UMB_TREE_ITEM_CONTEXT);
+        this._treeItem = new UmbObjectState(undefined);
+        this.treeItem = this._treeItem.asObservable();
+        this._isSelectable = new UmbBooleanState(false);
+        this.isSelectable = this._isSelectable.asObservable();
+        this.#isSelectableContext = new UmbBooleanState(false);
+        this.isSelectableContext = this.#isSelectableContext.asObservable();
+        this._isSelected = new UmbBooleanState(false);
+        this.isSelected = this._isSelected.asObservable();
+        this._isActive = new UmbBooleanState(false);
+        this.isActive = this._isActive.asObservable();
+        this.hasChildren = this._treeItem.asObservablePart((item) => item?.hasChildren ?? false);
+        this.#hasActiveDescendant = new UmbBooleanState(undefined);
+        this.hasActiveDescendant = this.#hasActiveDescendant.asObservable();
+        this.#treeItemEntityActionManager = new UmbTreeItemEntityActionManager(this);
+        this.#hideTreeItemActions = new UmbBooleanState(false);
+        this.noAccess = this._treeItem.asObservablePart((item) => item?.noAccess ?? false);
+        this.hasActions = combineLatest([
+            this.#treeItemEntityActionManager.hasActions,
+            this.#hideTreeItemActions.asObservable(),
+        ]).pipe(map(([has, hide]) => !hide && has));
+        this._selectOnly = new UmbBooleanState(false);
+        this.selectOnly = this._selectOnly.asObservable();
+        this.#path = new UmbStringState('');
+        this.path = this.#path.asObservable();
+        this.#entityContext = new UmbEntityContext(this);
+        this.#parentContext = new UmbParentEntityContext(this);
+        this.#checkIsActive = async () => {
+            const isSelectable = this._isSelectable.getValue();
+            if (isSelectable) {
+                this._isActive.setValue(false);
+                return;
+            }
+            /* Check if the current location includes the path of this tree item.
+            We ensure that the paths ends with a slash to avoid collisions with paths like /path-1 and /path-1-2 where /path-1 is in both.
+            Instead we compare /path-1/ with /path-1-2/ which wont collide.*/
+            const path = this.#path.getValue();
+            // If the path hasn't been resolved yet (e.g. no section context in a modal), skip the check.
+            // ensureSlash('') produces '/' which matches every URL and would mark all items as active.
+            if (!path)
+                return;
+            const location = ensureSlash(window.location.pathname);
+            const comparePath = ensureSlash(path);
+            const isActive = location.includes(comparePath);
+            if (this._isActive.getValue() === isActive)
+                return;
+            if (!this.entityType || this.unique === undefined) {
+                throw new Error('Could not check active state, entity type or unique is missing');
+            }
+            const ascending = this.getAscending();
+            // Only if this type of item has ancestors...
+            if (ascending) {
+                const path = [...ascending, { entityType: this.entityType, unique: this.unique }];
+                await this.#gotTreeContext;
+                if (isActive) {
+                    this._treeContext?.activeManager.setActive(path);
+                }
+                else {
+                    // If this is the current, then remove it:
+                    // This is a hack, where we are assuming that another active item would have made its entrance and replaced the 'active' within 2 second. [NL]
+                    // The problem is that it may take some time before an item appears in the tree and communicates that its active.
+                    // And in the meantime the removal of this would have resulted in the parent closing. And since we don't use Active state to open the tree, then we have a problem.
+                    debounce(() => this._treeContext?.activeManager.removeActiveIfMatch(path), 1000);
+                }
+            }
+            this._isActive.setValue(isActive);
+        };
+        this.#debouncedCheckIsActive = debounce(this.#checkIsActive, 100);
+        this._treeContextConsumer = this.consumeContext(UMB_TREE_CONTEXT, (context) => {
+            this._treeContext = context;
+            this._observeIsSelectable();
+            this._observeIsSelected();
+            this._observeSelectOnly();
+            if (context)
+                this._onTreeContextChanged(context);
+        });
+        this.#gotTreeContext = this._treeContextConsumer.asPromise();
+        this.consumeContext(UMB_SECTION_CONTEXT, (instance) => {
+            this.#sectionContext = instance;
+            this.#observeSectionPath();
+        });
+        window.addEventListener('navigationend', this.#debouncedCheckIsActive);
+    }
+    setTreeItem(item) {
+        if (!item) {
+            this._treeItem.setValue(undefined);
+            this.#entityContext.setEntityType(undefined);
+            this.#entityContext.setUnique(null);
+            this.#treeItemEntityActionManager.setTreeItem(undefined);
+            return;
+        }
+        // Only check for undefined. The tree root has null as unique.
+        if (item.unique === undefined)
+            throw new Error('Could not set tree item, unique is missing');
+        if (!item.entityType)
+            throw new Error('Could not set tree item, entity type is missing');
+        this._treeItem.setValue(item);
+        this.unique = item.unique;
+        this.entityType = item.entityType;
+        this.#entityContext.setEntityType(item.entityType);
+        this.#entityContext.setUnique(item.unique);
+        const parentEntity = item.parent
+            ? { entityType: item.parent.entityType, unique: item.parent.unique }
+            : undefined;
+        this.#parentContext.setParent(parentEntity);
+        this.#treeItemEntityActionManager.setTreeItem(item);
+        this._observeIsSelected();
+        this._observeIsSelectable();
+        this.#observeSectionPath();
+    }
+    getTreeItem() {
+        return this._treeItem.getValue();
+    }
+    getPath() {
+        return this.#path.getValue();
+    }
+    getAscending() {
+        return this._treeItem.getValue()?.ancestors;
+    }
+    _observeIsSelectable() {
+        const ctx = this._treeContext;
+        if (!ctx)
+            return;
+        this.observe(ctx.selection.selectable, (value) => {
+            this.#isSelectableContext.setValue(value ?? false);
+            const isSelectable = value ? (ctx.selectableFilter?.(this.getTreeItem()) ?? true) : false;
+            this._isSelectable.setValue(isSelectable);
+            if (value === true) {
+                this.#checkIsActive();
+            }
+        }, '_observeIsSelectable');
+    }
+    _observeIsSelected() {
+        const ctx = this._treeContext;
+        if (!ctx || this.unique === undefined)
+            return;
+        this.observe(ctx.selection.selection.pipe(map((selection) => selection.includes(this.unique))), (isSelected) => {
+            this._isSelected.setValue(isSelected);
+        }, '_observeIsSelected');
+    }
+    _observeSelectOnly() {
+        const ctx = this._treeContext;
+        if (!ctx)
+            return;
+        this.observe(ctx.selectOnly, (value) => this._selectOnly.setValue(value ?? false), '_observeSelectOnly');
+    }
+    /**
+     * Hook called when the tree context is received or changes. Subclasses can override to add additional observations.
+     * @param _context
+     */
+    _onTreeContextChanged(_context) {
+        this.#observeActive();
+        if (_context.hideTreeItemActions) {
+            this.observe(_context.hideTreeItemActions, (value) => this.#hideTreeItemActions.setValue(value ?? false), '_observeHideTreeItemActions');
+        }
+    }
+    #observeActive() {
+        if (this.unique === undefined || this.entityType === undefined)
+            return;
+        const entity = { entityType: this.entityType, unique: this.unique };
+        this.observe(this._treeContext?.activeManager.hasActiveDescendants(entity), (hasActiveDescendant) => {
+            if (this.#hasActiveDescendant.getValue() === undefined && hasActiveDescendant === false) {
+                return;
+            }
+            this.#hasActiveDescendant.setValue(hasActiveDescendant);
+        }, 'observeActiveDescendant');
+    }
+    #observeSectionPath() {
+        this.observe(this.#sectionContext?.pathname, (pathname) => {
+            if (!pathname || !this.entityType || this.unique === undefined)
+                return;
+            const path = this.constructPath(pathname, this.entityType, this.unique);
+            this.#path.setValue(path);
+            this.#checkIsActive();
+        }, 'observeSectionPath');
+    }
+    #checkIsActive;
+    #debouncedCheckIsActive;
+    open() {
+        const item = this.getTreeItem();
+        if (!item)
+            return;
+        this._treeContext?.open?.(item);
+    }
+    select() {
+        if (this.unique === undefined)
+            throw new Error('Could not select. Unique is missing');
+        this._treeContext?.selection.select(this.unique);
+    }
+    deselect() {
+        if (this.unique === undefined)
+            throw new Error('Could not deselect. Unique is missing');
+        this._treeContext?.selection.deselect(this.unique);
+    }
+    constructPath(pathname, entityType, unique) {
+        return UMB_WORKSPACE_EDIT_PATH_PATTERN.generateAbsolute({
+            sectionName: pathname,
+            entityType,
+            unique: unique ?? 'null',
+        });
+    }
+    destroy() {
+        window.removeEventListener('navigationend', this.#debouncedCheckIsActive);
+        super.destroy();
+    }
+}

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

@@ -0,0 +1,32 @@
+import type { UmbTreeItemModel } from '../types.js';
+import type { UmbEntityUnique } from '../../entity/index.js';
+import type { Observable } from '../../../../libs/observable-api/index.js';
+import type { UmbContextMinimal } from '../../../../libs/context-api/index.js';
+import type { ManifestBase, UmbApi } from '../../../../libs/extension-api/index.js';
+/**
+ * The base tree item contract — shared by full tree item contexts and card apis —
+ * covering item data, selection, active state, path, and entity actions. Children,
+ * expansion, and pagination are not included here; they extend this contract in
+ * `UmbTreeItemContext`.
+ */
+export interface UmbTreeItemApi<TreeItemType extends UmbTreeItemModel = UmbTreeItemModel, ManifestType extends ManifestBase = ManifestBase> extends UmbApi, UmbContextMinimal {
+    unique?: UmbEntityUnique;
+    entityType?: string;
+    manifest: ManifestType | undefined;
+    readonly treeItem: Observable<TreeItemType | undefined>;
+    readonly isSelectable: Observable<boolean>;
+    readonly isSelectableContext: Observable<boolean>;
+    readonly selectOnly: Observable<boolean>;
+    readonly isSelected: Observable<boolean>;
+    readonly isActive: Observable<boolean>;
+    readonly hasChildren: Observable<boolean>;
+    readonly hasActions: Observable<boolean>;
+    readonly noAccess: Observable<boolean>;
+    readonly path: Observable<string>;
+    setTreeItem(item: TreeItemType | undefined): void;
+    getTreeItem(): TreeItemType | undefined;
+    open(): void;
+    select(): void;
+    deselect(): void;
+    constructPath(pathname: string, entityType: string, unique: string | null): string;
+}

package/dist-cms/packages/core/tree/tree-item-api/tree-item-api.interface.js

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

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

@@ -0,0 +1,6 @@
+import type { UmbTreeItemModel } from '../../types.js';
+import type { ManifestTreeItemCard } from '../tree-item-card.extension.js';
+import { UmbTreeItemApiContextBase } from '../../tree-item-api/tree-item-api-context-base.js';
+import type { UmbTreeItemCardApi } from '../types.js';
+export declare class UmbDefaultTreeItemCardApi<TreeItemType extends UmbTreeItemModel = UmbTreeItemModel> extends UmbTreeItemApiContextBase<TreeItemType, ManifestTreeItemCard> implements UmbTreeItemCardApi {
+}

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

@@ -0,0 +1,3 @@
+import { UmbTreeItemApiContextBase } from '../../tree-item-api/tree-item-api-context-base.js';
+export class UmbDefaultTreeItemCardApi extends UmbTreeItemApiContextBase {
+}

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

@@ -0,0 +1,25 @@
+import type { UmbTreeItemModel } from '../../types.js';
+import { nothing } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+import type { UmbTreeItemCardApi } from '../types.js';
+export declare class UmbDefaultTreeItemCardElement extends UmbLitElement {
+    #private;
+    set api(value: UmbTreeItemCardApi | undefined);
+    get api(): UmbTreeItemCardApi | undefined;
+    item: UmbTreeItemModel | undefined;
+    private _isSelectable;
+    private _isSelectableContext;
+    private _selectOnly;
+    private _isSelected;
+    private _isActive;
+    private _hasChildren;
+    private _noAccess;
+    private _path;
+    private _hasActions;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-default-tree-item-card': UmbDefaultTreeItemCardElement;
+    }
+}

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

@@ -0,0 +1,130 @@
+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 { getItemFallbackIcon } from '../../../entity-item/index.js';
+import { customElement, html, ifDefined, nothing, property, state } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+let UmbDefaultTreeItemCardElement = class UmbDefaultTreeItemCardElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this._isSelectable = false;
+        this._isSelectableContext = false;
+        this._selectOnly = false;
+        this._isSelected = false;
+        this._isActive = false;
+        this._hasChildren = false;
+        this._noAccess = false;
+        this._path = '';
+        this._hasActions = false;
+    }
+    #api;
+    set api(value) {
+        this.#api = value;
+        if (value) {
+            this.observe(value.isSelectable, (v) => (this._isSelectable = v), '_observeIsSelectable');
+            this.observe(value.isSelectableContext, (v) => (this._isSelectableContext = v), '_observeIsSelectableContext');
+            this.observe(value.selectOnly, (v) => (this._selectOnly = v), '_observeSelectOnly');
+            this.observe(value.isSelected, (v) => (this._isSelected = v), '_observeIsSelected');
+            this.observe(value.isActive, (v) => (this._isActive = v), '_observeIsActive');
+            this.observe(value.hasChildren, (v) => (this._hasChildren = v), '_observeHasChildren');
+            this.observe(value.noAccess, (v) => (this._noAccess = v), '_observeNoAccess');
+            this.observe(value.path, (v) => (this._path = v), '_observePath');
+            this.observe(value.hasActions, (v) => (this._hasActions = v), '_observeHasActions');
+        }
+    }
+    get api() {
+        return this.#api;
+    }
+    #onSelected(e) {
+        e.stopPropagation();
+        this.#api?.select();
+    }
+    #onDeselected(e) {
+        e.stopPropagation();
+        this.#api?.deselect();
+    }
+    #onOpen(e) {
+        if (!this._hasChildren)
+            return;
+        e.stopPropagation();
+        this.#api?.open();
+    }
+    #onKeyDown(e) {
+        if (e.key === 'ArrowRight' && this._hasChildren) {
+            e.stopPropagation();
+            this.#api?.open();
+        }
+    }
+    render() {
+        if (!this.item)
+            return nothing;
+        const href = this._isSelectableContext ? undefined : this._path || undefined;
+        return html `
+			<umb-figure-card
+				name=${this.localize.string(this.item?.name ?? '')}
+				href=${ifDefined(href)}
+				?selectable=${this._isSelectable}
+				?select-only=${this._selectOnly || (!this._hasChildren && this._isSelectableContext)}
+				?selected=${this._isSelected}
+				?active=${this._isActive}
+				?has-children=${this._hasChildren}
+				?disabled=${this._noAccess}
+				background-color="var(--uui-color-surface)"
+				@selected=${this.#onSelected}
+				@deselected=${this.#onDeselected}
+				@open=${this.#onOpen}
+				@keydown=${this.#onKeyDown}>
+				${this.#renderIcon(this.item)} ${this.#renderActions()}
+			</umb-figure-card>
+		`;
+    }
+    #renderIcon(item) {
+        const icon = item.isFolder ? 'icon-folder' : item.icon || getItemFallbackIcon();
+        return html `<umb-icon name=${icon}></umb-icon>`;
+    }
+    #renderActions() {
+        if (!this._hasActions)
+            return nothing;
+        return html `<umb-entity-actions-bundle slot="actions" .label=${this.localize.string(this.item?.name ?? '')}></umb-entity-actions-bundle>`;
+    }
+};
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbDefaultTreeItemCardElement.prototype, "api", null);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbDefaultTreeItemCardElement.prototype, "item", void 0);
+__decorate([
+    state()
+], UmbDefaultTreeItemCardElement.prototype, "_isSelectable", void 0);
+__decorate([
+    state()
+], UmbDefaultTreeItemCardElement.prototype, "_isSelectableContext", void 0);
+__decorate([
+    state()
+], UmbDefaultTreeItemCardElement.prototype, "_selectOnly", void 0);
+__decorate([
+    state()
+], UmbDefaultTreeItemCardElement.prototype, "_isSelected", void 0);
+__decorate([
+    state()
+], UmbDefaultTreeItemCardElement.prototype, "_isActive", void 0);
+__decorate([
+    state()
+], UmbDefaultTreeItemCardElement.prototype, "_hasChildren", void 0);
+__decorate([
+    state()
+], UmbDefaultTreeItemCardElement.prototype, "_noAccess", void 0);
+__decorate([
+    state()
+], UmbDefaultTreeItemCardElement.prototype, "_path", void 0);
+__decorate([
+    state()
+], UmbDefaultTreeItemCardElement.prototype, "_hasActions", void 0);
+UmbDefaultTreeItemCardElement = __decorate([
+    customElement('umb-default-tree-item-card')
+], UmbDefaultTreeItemCardElement);
+export { UmbDefaultTreeItemCardElement };

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

@@ -0,0 +1,2 @@
+import { manifest as kindManifest } from './tree-item-card-default.kind.js';
+export const manifests = [kindManifest];

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

@@ -0,0 +1,2 @@
+import type { UmbExtensionManifestKind } from '../../../extension-registry/index.js';
+export declare const manifest: UmbExtensionManifestKind;

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

@@ -0,0 +1,13 @@
+import { UmbDefaultTreeItemCardElement } from './default-tree-item-card.element.js';
+import { UmbDefaultTreeItemCardApi } from './default-tree-item-card.api.js';
+export const manifest = {
+    type: 'kind',
+    alias: 'Umb.Kind.TreeItemCard.Default',
+    matchKind: 'default',
+    matchType: 'treeItemCard',
+    manifest: {
+        type: 'treeItemCard',
+        element: UmbDefaultTreeItemCardElement,
+        api: UmbDefaultTreeItemCardApi,
+    },
+};

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

@@ -0,0 +1,2 @@
+import { manifests as defaultManifests } from './default/manifests.js';
+export const manifests = [...defaultManifests];

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

@@ -0,0 +1,17 @@
+import type { UmbTreeItemModel } from '../types.js';
+import type { UmbTreeItemCardElement } from './types.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+export declare class UmbTreeItemCardExtensionElement extends UmbLitElement {
+    #private;
+    protected _component?: UmbTreeItemCardElement;
+    set item(value: UmbTreeItemModel | undefined);
+    get item(): UmbTreeItemModel | undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    destroy(): void;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tree-item-card-extension': UmbTreeItemCardExtensionElement;
+    }
+}