@umbraco-cms/backoffice 16.3.4 → 17.0.0-rc1

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

@@ -1,33 +1,38 @@
+import type { ManifestTreeItem } from '../../extensions/types.js';
 import type { UmbTreeItemContext } from '../tree-item-context.interface.js';
-import { type UmbDefaultTreeContext } from '../../default/index.js';
 import type { UmbTreeItemModel, UmbTreeRootModel } from '../../types.js';
-import type { ManifestTreeItem } from '../../extensions/types.js';
+import { UmbTreeItemChildrenManager } from '../tree-item-children.manager.js';
+import { UMB_TREE_CONTEXT } from '../../tree.context.token.js';
 import { UmbObjectState } from '../../../../../libs/observable-api/index.js';
-import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
 import { UmbContextBase } from '../../../../../libs/class-api/index.js';
-import { UmbContextToken } from '../../../../../libs/context-api/index.js';
-import { UmbPaginationManager } from '../../../utils/index.js';
-import { type UmbEntityUnique } from '../../../entity/index.js';
+import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+import type { UmbEntityModel, UmbEntityUnique } from '../../../entity/index.js';
 export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemModel, TreeRootType extends UmbTreeRootModel, ManifestType extends ManifestTreeItem = ManifestTreeItem> extends UmbContextBase implements UmbTreeItemContext<TreeItemType> {
     #private;
     unique?: UmbEntityUnique;
     entityType?: string;
-    readonly pagination: UmbPaginationManager;
     protected readonly _treeItem: UmbObjectState<TreeItemType | undefined>;
     readonly treeItem: import("rxjs").Observable<TreeItemType | undefined>;
-    readonly childItems: import("rxjs").Observable<TreeItemType[]>;
-    readonly hasChildren: import("rxjs").Observable<boolean>;
-    readonly isLoading: import("rxjs").Observable<boolean>;
     readonly isSelectable: import("rxjs").Observable<boolean>;
     readonly isSelectableContext: import("rxjs").Observable<boolean>;
     readonly isSelected: import("rxjs").Observable<boolean>;
     readonly isActive: import("rxjs").Observable<boolean>;
-    readonly hasActions: import("rxjs").Observable<boolean>;
     readonly path: import("rxjs").Observable<string>;
-    isOpen: import("rxjs").Observable<boolean>;
+    protected readonly _treeItemChildrenManager: UmbTreeItemChildrenManager<TreeItemType, TreeRootType, import("../../index.js").UmbTreeRootItemsRequestArgs>;
+    readonly childItems: import("rxjs").Observable<TreeItemType[]>;
+    readonly hasChildren: import("rxjs").Observable<boolean>;
     readonly foldersOnly: import("rxjs").Observable<boolean>;
-    treeContext?: UmbDefaultTreeContext<TreeItemType, TreeRootType>;
-    parentTreeItemContext?: UmbTreeItemContext<TreeItemType>;
+    readonly pagination: import("../../../utils/index.js").UmbPaginationManager;
+    readonly targetPagination: import("../../../utils/index.js").UmbTargetPaginationManager<UmbEntityModel>;
+    readonly isLoading: import("rxjs").Observable<boolean>;
+    readonly isLoadingPrevChildren: import("rxjs").Observable<boolean>;
+    readonly isLoadingNextChildren: import("rxjs").Observable<boolean>;
+    isOpen: import("rxjs").Observable<boolean>;
+    readonly hasActions: import("rxjs").Observable<boolean>;
+    treeContext?: typeof UMB_TREE_CONTEXT.TYPE;
+    readonly hasActiveDescendant: import("rxjs").Observable<boolean | undefined>;
+    setIsMenu(isMenu: boolean): void;
+    getIsMenu(): boolean;
     constructor(host: UmbControllerHost);
     /**
      * Sets the manifest
@@ -36,10 +41,22 @@ export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTre
      */
     set manifest(manifest: ManifestType | undefined);
     get manifest(): ManifestType | undefined;
+    /**
+     * Returns the current path value
+     * @returns {string}
+     * @memberof UmbTreeItemContextBase
+     */
+    getPath(): string;
+    /**
+     * Returns the ascending items of this tree item
+     * @returns {Array<UmbEntityModel>}
+     * @memberof UmbTreeItemContextBase
+     */
+    getAscending(): Array<UmbEntityModel> | undefined;
     /**
      * Returns the manifest.
      * @returns {ManifestCollection}
-     * @memberof UmbCollectionContext
+     * @memberof UmbTreeItemContextBase
      * @deprecated Use the `.manifest` property instead.
      */
     getManifest(): ManifestType | undefined;
@@ -47,14 +64,29 @@ export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTre
     /**
      * Load children of the tree item
      * @memberof UmbTreeItemContextBase
+     * @returns {Promise<void>}
      */
     loadChildren: () => Promise<void>;
+    reloadChildren: () => Promise<void>;
     /**
      * Load more children of the tree item
+     * @deprecated Use `loadNextItems` instead. Will be removed in v18.0.0.
      * @memberof UmbTreeItemContextBase
+     * @returns {Promise<void>}
      */
     loadMore: () => Promise<void>;
-    toggleContextMenu(): void;
+    /**
+     * Load previous items of the tree item
+     * @memberof UmbTreeItemContextBase
+     * @returns {Promise<void>}
+     */
+    loadPrevItems: () => Promise<void>;
+    /**
+     * Load next items of the tree item
+     * @memberof UmbTreeItemContextBase
+     * @returns {Promise<void>}
+     */
+    loadNextItems: () => Promise<void>;
     /**
      * Selects the tree item
      * @memberof UmbTreeItemContextBase
@@ -73,4 +105,3 @@ export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTre
     constructPath(pathname: string, entityType: string, unique: string | null): string;
     destroy(): void;
 }
-export declare const UMB_TREE_ITEM_CONTEXT: UmbContextToken<UmbTreeItemContext<any>, UmbTreeItemContext<any>>;

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

@@ -1,52 +1,39 @@
-import { UMB_TREE_CONTEXT } from '../../default/index.js';
-import { UmbRequestReloadTreeItemChildrenEvent } from '../../entity-actions/reload-tree-item-children/index.js';
+import { UmbTreeItemChildrenManager } from '../tree-item-children.manager.js';
+import { UmbTreeItemEntityActionManager } from '../tree-item-entity-action.manager.js';
+import { UmbTreeItemTargetExpansionManager } from '../tree-item-expansion.manager.js';
+import { UMB_TREE_CONTEXT } from '../../tree.context.token.js';
+import { UMB_TREE_ITEM_CONTEXT } from '../tree-item.context.token.js';
+import { ensureSlash } from '../../../router/index.js';
 import { map } from '../../../../../external/rxjs/index.js';
-import { UmbArrayState, UmbBooleanState, UmbObjectState, UmbStringState } from '../../../../../libs/observable-api/index.js';
+import { UmbBooleanState, UmbObjectState, UmbStringState } from '../../../../../libs/observable-api/index.js';
 import { UmbContextBase } from '../../../../../libs/class-api/index.js';
-import { UmbContextToken } from '../../../../../libs/context-api/index.js';
-import { UMB_SECTION_CONTEXT, UMB_SECTION_SIDEBAR_CONTEXT } from '../../../section/index.js';
-import { umbExtensionsRegistry } from '../../../extension-registry/index.js';
-import { UMB_ACTION_EVENT_CONTEXT } from '../../../action/index.js';
-import { UmbHasChildrenEntityContext, UmbRequestReloadChildrenOfEntityEvent, UmbRequestReloadStructureForEntityEvent, } from '../../../entity-action/index.js';
-import { UmbDeprecation, UmbPaginationManager, debounce } from '../../../utils/index.js';
-import { UmbChangeEvent } from '../../../event/index.js';
+import { UmbDeprecation, debounce } from '../../../utils/index.js';
 import { UmbParentEntityContext } from '../../../entity/index.js';
-import { ensureSlash } from '../../../router/index.js';
+import { UMB_SECTION_CONTEXT } from '../../../section/index.js';
 export class UmbTreeItemContextBase extends UmbContextBase {
+    #gotTreeContext;
     #manifest;
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    #childItems;
-    #hasChildren;
-    #isLoading;
     #isSelectable;
     #isSelectableContext;
     #isSelected;
     #isActive;
-    #hasActions;
     #path;
-    #isOpen;
-    #foldersOnly;
+    #treeItemExpansionManager;
+    #treeItemEntityActionManager;
     #sectionContext;
-    #sectionSidebarContext;
-    #actionEventContext;
-    #hasChildrenContext;
     #parentContext;
-    // TODO: get this from the tree context
-    #paging;
+    #hasActiveDescendant;
+    #isMenu;
+    setIsMenu(isMenu) {
+        this.#isMenu = isMenu;
+    }
+    getIsMenu() {
+        return this.#isMenu;
+    }
     constructor(host) {
         super(host, UMB_TREE_ITEM_CONTEXT);
-        this.pagination = new UmbPaginationManager();
         this._treeItem = new UmbObjectState(undefined);
         this.treeItem = this._treeItem.asObservable();
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.#childItems = new UmbArrayState([], (x) => x.unique);
-        this.childItems = this.#childItems.asObservable();
-        this.#hasChildren = new UmbBooleanState(false);
-        this.hasChildren = this.#hasChildren.asObservable();
-        this.#isLoading = new UmbBooleanState(false);
-        this.isLoading = this.#isLoading.asObservable();
         this.#isSelectable = new UmbBooleanState(false);
         this.isSelectable = this.#isSelectable.asObservable();
         this.#isSelectableContext = new UmbBooleanState(false);
@@ -55,67 +42,94 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         this.isSelected = this.#isSelected.asObservable();
         this.#isActive = new UmbBooleanState(false);
         this.isActive = this.#isActive.asObservable();
-        this.#hasActions = new UmbBooleanState(false);
-        this.hasActions = this.#hasActions.asObservable();
         this.#path = new UmbStringState('');
         this.path = this.#path.asObservable();
-        this.#isOpen = new UmbBooleanState(false);
-        this.isOpen = this.#isOpen.asObservable();
-        this.#foldersOnly = new UmbBooleanState(false);
-        this.foldersOnly = this.#foldersOnly.asObservable();
-        this.#hasChildrenContext = new UmbHasChildrenEntityContext(this);
+        this._treeItemChildrenManager = new UmbTreeItemChildrenManager(this);
+        this.childItems = this._treeItemChildrenManager.children;
+        this.hasChildren = this._treeItemChildrenManager.hasChildren;
+        this.foldersOnly = this._treeItemChildrenManager.foldersOnly;
+        this.pagination = this._treeItemChildrenManager.offsetPagination;
+        this.targetPagination = this._treeItemChildrenManager.targetPagination;
+        this.isLoading = this._treeItemChildrenManager.isLoading;
+        this.isLoadingPrevChildren = this._treeItemChildrenManager.isLoadingPrevChildren;
+        this.isLoadingNextChildren = this._treeItemChildrenManager.isLoadingNextChildren;
+        this.#treeItemExpansionManager = new UmbTreeItemTargetExpansionManager(this, {
+            childrenManager: this._treeItemChildrenManager,
+            targetPaginationManager: this.targetPagination,
+        });
+        this.isOpen = this.#treeItemExpansionManager.isExpanded;
+        this.#treeItemEntityActionManager = new UmbTreeItemEntityActionManager(this);
+        this.hasActions = this.#treeItemEntityActionManager.hasActions;
         this.#parentContext = new UmbParentEntityContext(this);
-        // TODO: get this from the tree context
-        this.#paging = {
-            skip: 0,
-            take: 50,
-        };
+        this.#hasActiveDescendant = new UmbBooleanState(undefined);
+        this.hasActiveDescendant = this.#hasActiveDescendant.asObservable();
+        this.#isMenu = false;
         /**
          * Load children of the tree item
          * @memberof UmbTreeItemContextBase
+         * @returns {Promise<void>}
          */
-        this.loadChildren = () => this.#loadChildren();
+        this.loadChildren = () => this._treeItemChildrenManager.loadChildren();
+        this.reloadChildren = () => this._treeItemChildrenManager.reloadChildren();
         /**
          * Load more children of the tree item
+         * @deprecated Use `loadNextItems` instead. Will be removed in v18.0.0.
          * @memberof UmbTreeItemContextBase
+         * @returns {Promise<void>}
          */
-        this.loadMore = () => this.#loadChildren(true);
-        this.#onReloadRequest = (event) => {
-            if (event.getUnique() !== this.unique)
-                return;
-            if (event.getEntityType() !== this.entityType)
-                return;
-            this.loadChildren();
-        };
-        this.#onReloadStructureRequest = async (event) => {
-            if (!this.unique)
-                return;
-            if (event.getUnique() !== this.unique)
+        this.loadMore = () => this._treeItemChildrenManager.loadNextChildren();
+        /**
+         * Load previous items of the tree item
+         * @memberof UmbTreeItemContextBase
+         * @returns {Promise<void>}
+         */
+        this.loadPrevItems = () => this._treeItemChildrenManager.loadPrevChildren();
+        /**
+         * Load next items of the tree item
+         * @memberof UmbTreeItemContextBase
+         * @returns {Promise<void>}
+         */
+        this.loadNextItems = () => this._treeItemChildrenManager.loadNextChildren();
+        this.#checkIsActive = async () => {
+            // don't set the active state if the item is selectable
+            const isSelectable = this.#isSelectable.getValue();
+            if (isSelectable) {
+                this.#isActive.setValue(false);
                 return;
-            if (event.getEntityType() !== this.entityType)
+            }
+            /* 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 location = ensureSlash(window.location.pathname);
+            const comparePath = ensureSlash(this.#path.getValue());
+            const isActive = location.includes(comparePath);
+            if (this.#isActive.getValue() === isActive)
                 return;
-            if (this.parentTreeItemContext) {
-                this.parentTreeItemContext.loadChildren();
+            if (!this.entityType || this.unique === undefined) {
+                throw new Error('Could not check active state, entity type or unique is missing');
             }
-            else {
-                this.treeContext?.loadTree();
+            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.#onPageChange = (event) => {
-            const target = event.target;
-            this.#paging.skip = target.getSkip();
-            this.loadMore();
-        };
-        this.#debouncedCheckIsActive = debounce(() => this.#checkIsActive(), 100);
-        this.#removeEventListeners = () => {
-            this.#actionEventContext?.removeEventListener(UmbRequestReloadTreeItemChildrenEvent.TYPE, this.#onReloadRequest);
-            this.#actionEventContext?.removeEventListener(UmbRequestReloadChildrenOfEntityEvent.TYPE, this.#onReloadRequest);
-            this.#actionEventContext?.removeEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, this.#onReloadStructureRequest);
-        };
-        this.pagination.setPageSize(this.#paging.take);
+        this.#debouncedCheckIsActive = debounce(this.#checkIsActive, 100);
+        // TODO: Get take size from Tree context
+        this._treeItemChildrenManager.setTakeSize(50);
         this.#consumeContexts();
-        // listen for page changes on the pagination manager
-        this.pagination.addEventListener(UmbChangeEvent.TYPE, this.#onPageChange);
         window.addEventListener('navigationend', this.#debouncedCheckIsActive);
     }
     /**
@@ -131,10 +145,27 @@ export class UmbTreeItemContextBase extends UmbContextBase {
     get manifest() {
         return this.#manifest;
     }
+    /**
+     * Returns the current path value
+     * @returns {string}
+     * @memberof UmbTreeItemContextBase
+     */
+    getPath() {
+        return this.#path.getValue();
+    }
+    /**
+     * Returns the ascending items of this tree item
+     * @returns {Array<UmbEntityModel>}
+     * @memberof UmbTreeItemContextBase
+     */
+    getAscending() {
+        // This should be supported for all trees.
+        return this._treeItem.getValue()?.ancestors;
+    }
     /**
      * Returns the manifest.
      * @returns {ManifestCollection}
-     * @memberof UmbCollectionContext
+     * @memberof UmbTreeItemContextBase
      * @deprecated Use the `.manifest` property instead.
      */
     getManifest() {
@@ -157,9 +188,9 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         if (!treeItem.entityType)
             throw new Error('Could not create tree item context, tree item type is missing');
         this.entityType = treeItem.entityType;
-        const hasChildren = treeItem.hasChildren || false;
-        this.#hasChildren.setValue(hasChildren);
-        this.#hasChildrenContext.setHasChildren(hasChildren);
+        this._treeItemChildrenManager.setTreeItem(treeItem);
+        this.#treeItemExpansionManager.setTreeItem(treeItem);
+        this.#treeItemEntityActionManager.setTreeItem(treeItem);
         const parentEntity = treeItem.parent
             ? {
                 entityType: treeItem.parent.entityType,
@@ -169,60 +200,10 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         this.#parentContext.setParent(parentEntity);
         this._treeItem.setValue(treeItem);
         // Update observers:
-        this.#observeActions();
         this.#observeIsSelectable();
         this.#observeIsSelected();
         this.#observeSectionPath();
     }
-    async #loadChildren(loadMore = false) {
-        if (this.unique === undefined)
-            throw new Error('Could not request children, unique key is missing');
-        if (this.entityType === undefined)
-            throw new Error('Could not request children, entity type is missing');
-        // TODO: wait for tree context to be ready
-        const repository = this.treeContext?.getRepository();
-        if (!repository)
-            throw new Error('Could not request children, repository is missing');
-        this.#isLoading.setValue(true);
-        const skip = loadMore ? this.#paging.skip : 0;
-        const take = loadMore ? this.#paging.take : this.pagination.getCurrentPageNumber() * this.#paging.take;
-        const foldersOnly = this.#foldersOnly.getValue();
-        const additionalArgs = this.treeContext?.getAdditionalRequestArgs();
-        const { data } = await repository.requestTreeItemsOf({
-            parent: {
-                unique: this.unique,
-                entityType: this.entityType,
-            },
-            foldersOnly,
-            skip,
-            take,
-            ...additionalArgs,
-        });
-        if (data) {
-            if (loadMore) {
-                const currentItems = this.#childItems.getValue();
-                this.#childItems.setValue([...currentItems, ...data.items]);
-            }
-            else {
-                this.#childItems.setValue(data.items);
-            }
-            const hasChildren = data.total > 0;
-            this.#hasChildren.setValue(hasChildren);
-            this.#hasChildrenContext.setHasChildren(hasChildren);
-            this.pagination.setTotalItems(data.total);
-        }
-        this.#isLoading.setValue(false);
-    }
-    toggleContextMenu() {
-        if (!this.getTreeItem() || !this.entityType || this.unique === undefined) {
-            throw new Error('Could not request children, tree item is not set');
-        }
-        this.#sectionSidebarContext?.toggleContextMenu(this.getHostElement(), {
-            entityType: this.entityType,
-            unique: this.unique,
-            headline: this.getTreeItem()?.name || '',
-        });
-    }
     /**
      * Selects the tree item
      * @memberof UmbTreeItemContextBase
@@ -271,28 +252,13 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             this.#sectionContext = instance;
             this.#observeSectionPath();
         });
-        this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT, (instance) => {
-            this.#sectionSidebarContext = instance;
-        });
-        this.consumeContext(UMB_TREE_CONTEXT, (treeContext) => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
+        this.#gotTreeContext = this.consumeContext(UMB_TREE_CONTEXT, (treeContext) => {
             this.treeContext = treeContext;
             this.#observeIsSelectable();
             this.#observeIsSelected();
             this.#observeFoldersOnly();
-            this.#observeExpansion();
-        });
-        this.consumeContext(UMB_TREE_ITEM_CONTEXT, (instance) => {
-            this.parentTreeItemContext = instance;
-        }).skipHost();
-        this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (instance) => {
-            this.#removeEventListeners();
-            this.#actionEventContext = instance;
-            this.#actionEventContext?.addEventListener(UmbRequestReloadTreeItemChildrenEvent.TYPE, this.#onReloadRequest);
-            this.#actionEventContext?.addEventListener(UmbRequestReloadChildrenOfEntityEvent.TYPE, this.#onReloadRequest);
-            this.#actionEventContext?.addEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, this.#onReloadStructureRequest);
-        });
+            this.#observeActive();
+        }).asPromise();
     }
     getTreeItem() {
         return this._treeItem.getValue();
@@ -321,9 +287,20 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         if (this.unique === undefined)
             return;
         this.observe(this.treeContext?.foldersOnly, (foldersOnly) => {
-            this.#foldersOnly.setValue(foldersOnly ?? false);
+            this._treeItemChildrenManager.setFoldersOnly(foldersOnly ?? false);
         }, 'observeFoldersOnly');
     }
+    #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)
@@ -333,55 +310,15 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             this.#checkIsActive();
         }, 'observeSectionPath');
     }
-    #observeActions() {
-        this.observe(umbExtensionsRegistry
-            .byType('entityAction')
-            .pipe(map((actions) => actions.filter((action) => action.forEntityTypes.includes(this.entityType)))), (actions) => {
-            this.#hasActions.setValue(actions.length > 0);
-        }, 'observeActions');
-    }
-    #observeExpansion() {
-        if (this.unique === undefined)
-            return;
-        if (!this.entityType)
-            return;
-        this.observe(this.treeContext?.expansion.isExpanded({ entityType: this.entityType, unique: this.unique }), (isExpanded) => {
-            // If this item has children, load them
-            if (isExpanded && this.#hasChildren.getValue() && this.#isOpen.getValue() === false) {
-                this.loadChildren();
-            }
-            this.#isOpen.setValue(isExpanded ?? false);
-        }, 'observeExpansion');
-    }
-    #onReloadRequest;
-    #onReloadStructureRequest;
-    #onPageChange;
+    #checkIsActive;
     #debouncedCheckIsActive;
-    #checkIsActive() {
-        // don't set the active state if the item is selectable
-        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 location = ensureSlash(window.location.pathname);
-        const comparePath = ensureSlash(this.#path.getValue());
-        const isActive = location.includes(comparePath);
-        this.#isActive.setValue(isActive);
-    }
     // TODO: use router context
     constructPath(pathname, entityType, unique) {
         // TODO: Encode uniques [NL]
         return `section/${pathname}/workspace/${entityType}/edit/${unique}`;
     }
-    #removeEventListeners;
     destroy() {
-        this.#removeEventListeners();
         window.removeEventListener('navigationend', this.#debouncedCheckIsActive);
         super.destroy();
     }
 }
-export const UMB_TREE_ITEM_CONTEXT = new UmbContextToken('UmbTreeItemContext');

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

@@ -1,12 +1,23 @@
 import type { UmbTreeItemContext } from '../index.js';
 import type { UmbTreeItemModel } from '../../types.js';
+import { type TemplateResult } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../lit-element/index.js';
+import type { UmbEntityFlag } from '../../../entity-flag/index.js';
 export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends UmbTreeItemModel, TreeItemContextType extends UmbTreeItemContext<TreeItemModelType> = UmbTreeItemContext<TreeItemModelType>> extends UmbLitElement {
     #private;
     set item(newVal: TreeItemModelType);
     get item(): TreeItemModelType | undefined;
     protected _item?: TreeItemModelType;
+    /**
+     * @param item - The item from which to extract flags.
+     * @description This method is called whenever the `item` property is set. It extracts the flags from the item and assigns them to the `_flags` state property.
+     * This method is in some cases overridden in subclasses to customize how flags are extracted!
+     */
+    protected _extractFlags(item: TreeItemModelType | undefined): void;
+    protected _flags?: Array<UmbEntityFlag>;
     private _label?;
+    private _isLoadingPrevChildren;
+    private _isLoadingNextChildren;
     set api(value: TreeItemContextType | undefined);
     get api(): TreeItemContextType | undefined;
     hideActions: boolean;
@@ -18,16 +29,25 @@ export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends U
     private _isSelectable;
     protected _isSelected: boolean;
     private _hasChildren;
+    protected _forceShowExpand: boolean;
     private _isOpen;
     private _iconSlotHasChildren;
     private _totalPages;
     private _currentPage;
+    private _hasPreviousItems;
+    private _hasNextItems;
+    protected _isMenu: boolean;
+    set isMenu(value: boolean);
+    get isMenu(): boolean;
     private _handleSelectedItem;
     private _handleDeselectedItem;
     private _onShowChildren;
     private _onHideChildren;
-    render(): import("lit-html").TemplateResult<1>;
-    renderIconContainer(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
+    renderIconContainer(): TemplateResult<1>;
+    _renderExpandSymbol?: () => HTMLElement | TemplateResult<1> | undefined;
     protected _getIconToRender(icon: string): string;
-    renderLabel(): import("lit-html").TemplateResult<1>;
+    protected _getIconName(): string | null | undefined;
+    renderLabel(): TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
 }