@umbraco-cms/backoffice 16.3.4 → 17.0.0-rc1

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

@@ -4,11 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, ifDefined, nothing, state, repeat, property } from '../../../../../external/lit/index.js';
+import { html, ifDefined, nothing, state, repeat, property, css, } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../lit-element/index.js';
+import { UmbTextStyles } from '../../../style/index.js';
 export class UmbTreeItemElementBase extends UmbLitElement {
     constructor() {
         super(...arguments);
+        this._isLoadingPrevChildren = false;
+        this._isLoadingNextChildren = false;
         this.hideActions = false;
         this._isActive = false;
         this._isLoading = false;
@@ -16,21 +19,21 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         this._isSelectable = false;
         this._isSelected = false;
         this._hasChildren = false;
+        this._forceShowExpand = false;
         this._isOpen = false;
         this._iconSlotHasChildren = false;
         this._totalPages = 1;
         this._currentPage = 1;
-        this.#onLoadMoreClick = (event) => {
-            event.stopPropagation();
-            const next = (this._currentPage = this._currentPage + 1);
-            this.#api?.pagination.setCurrentPageNumber(next);
-        };
+        this._hasPreviousItems = false;
+        this._hasNextItems = false;
+        this._isMenu = false;
         this.#hasNodes = (e) => {
             return e.target.assignedNodes({ flatten: true }).length > 0;
         };
     }
     set item(newVal) {
         this._item = newVal;
+        this._extractFlags(newVal);
         if (this._item) {
             this._label = this.localize.string(this._item?.name ?? '');
             this.#initTreeItem();
@@ -39,9 +42,18 @@ export class UmbTreeItemElementBase extends UmbLitElement {
     get item() {
         return this._item;
     }
+    /**
+     * @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!
+     */
+    _extractFlags(item) {
+        this._flags = item?.flags ?? [];
+    }
     set api(value) {
         this.#api = value;
         if (this.#api) {
+            this.#api?.setIsMenu(this._isMenu);
             this.observe(this.#api.childItems, (value) => (this._childItems = value));
             this.observe(this.#api.hasChildren, (value) => (this._hasChildren = value));
             this.observe(this.#api.isActive, (value) => (this._isActive = value));
@@ -53,6 +65,10 @@ export class UmbTreeItemElementBase extends UmbLitElement {
             this.observe(this.#api.path, (value) => (this._href = value));
             this.observe(this.#api.pagination.currentPage, (value) => (this._currentPage = value));
             this.observe(this.#api.pagination.totalPages, (value) => (this._totalPages = value));
+            this.observe(this.#api.isLoadingPrevChildren, (value) => (this._isLoadingPrevChildren = value ?? false));
+            this.observe(this.#api.isLoadingNextChildren, (value) => (this._isLoadingNextChildren = value ?? false));
+            this.observe(this.#api.targetPagination?.totalPrevItems, (value) => (this._hasPreviousItems = value !== undefined ? value > 0 : false));
+            this.observe(this.#api.targetPagination?.totalNextItems, (value) => (this._hasNextItems = value !== undefined ? value > 0 : false));
             this.#initTreeItem();
         }
     }
@@ -60,6 +76,13 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         return this.#api;
     }
     #api;
+    set isMenu(value) {
+        this._isMenu = value;
+        this.#api?.setIsMenu(value);
+    }
+    get isMenu() {
+        return this._isMenu;
+    }
     #initTreeItem() {
         if (!this.#api)
             return;
@@ -77,13 +100,25 @@ export class UmbTreeItemElementBase extends UmbLitElement {
     }
     _onShowChildren(event) {
         event.stopPropagation();
+        // Prevent default cause we will now control the show-children state ourself.
+        event.preventDefault();
         this.#api?.showChildren();
     }
     _onHideChildren(event) {
         event.stopPropagation();
+        // Prevent default cause we will now control the show-children state ourself.
+        event.preventDefault();
         this.#api?.hideChildren();
     }
-    #onLoadMoreClick;
+    #onLoadPrev(event) {
+        event.stopPropagation();
+        this.#api?.loadPrevItems?.();
+    }
+    #onLoadNext(event) {
+        event.stopPropagation();
+        const next = (this._currentPage = this._currentPage + 1);
+        this.#api?.pagination.setCurrentPageNumber(next);
+    }
     // Note: Currently we want to prevent opening when the item is in a selectable context, but this might change in the future.
     // If we like to be able to open items in selectable context, then we might want to make it as a menu item action, so you have to click ... and chose an action called 'Edit'
     render() {
@@ -98,44 +133,59 @@ export class UmbTreeItemElementBase extends UmbLitElement {
 				?selectable=${this._isSelectable}
 				?selected=${this._isSelected}
 				.loading=${this._isLoading}
-				.hasChildren=${this._hasChildren}
+				.hasChildren=${this._forceShowExpand || this._hasChildren}
 				.showChildren=${this._isOpen}
-				.caretLabel=${this._isOpen ? this.localize.term('visuallyHiddenTexts_collapseChildItems') + ' ' + this._label : this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this._label}
-				label=${this._label}
-				href="${ifDefined(this._isSelectableContext ? undefined : this._href)}">
-				${this.renderIconContainer()} ${this.renderLabel()} ${this.#renderActions()} ${this.#renderChildItems()}
+				.caretLabel=${this._isOpen
+            ? this.localize.term('visuallyHiddenTexts_collapseChildItems') + ' ' + this._label
+            : this.localize.term('visuallyHiddenTexts_expandChildItems') + ' ' + this._label}
+				label=${ifDefined(this._label)}
+				href="${ifDefined(this._isSelectableContext ? undefined : this._href)}"
+				.renderExpandSymbol=${this._renderExpandSymbol}>
+				${this.#renderLoadPrevButton()} ${this.renderIconContainer()} ${this.renderLabel()} ${this.#renderActions()}
+				${this.#renderChildItems()}
 				<slot></slot>
-				${this.#renderPaging()}
+				${this.#renderLoadNextButton()}
 			</uui-menu-item>
 		`;
     }
     #hasNodes;
     renderIconContainer() {
         return html `
-			<slot
-				name="icon"
-				slot="icon"
-				@slotchange=${(e) => {
+			<div id="icon-container" slot="icon">
+				<slot
+					name="icon"
+					@slotchange=${(e) => {
             this._iconSlotHasChildren = this.#hasNodes(e);
         }}></slot>
-			${!this._iconSlotHasChildren ? this.#renderIcon() : nothing}
+				${this.#renderSigns()}
+			</div>
 		`;
     }
+    #renderSigns() {
+        return this._item
+            ? html `<umb-entity-sign-bundle .entityType=${this._item.entityType} .entityFlags=${this._flags}
+					>${!this._iconSlotHasChildren ? this.#renderIcon() : nothing}</umb-entity-sign-bundle
+				>`
+            : nothing;
+    }
     #renderIcon() {
-        const icon = this._item?.icon;
+        const iconName = this._getIconName();
         const isFolder = this._item?.isFolder;
-        if (icon) {
-            return html `<umb-icon slot="icon" name="${this._getIconToRender(icon)}"></umb-icon>`;
+        if (iconName) {
+            return html `<umb-icon name="${this._getIconToRender(iconName)}"></umb-icon>`;
         }
         if (isFolder) {
-            return html `<umb-icon slot="icon" name="icon-folder"></umb-icon>`;
+            return html `<umb-icon name="icon-folder"></umb-icon>`;
         }
-        return html `<umb-icon slot="icon" name="icon-circle-dotted"></umb-icon>`;
+        return html `<umb-icon name="icon-circle-dotted"></umb-icon>`;
     }
     _getIconToRender(icon) {
         const iconWithoutColor = icon.split(' ')[0];
         return this._isActive || this._isSelected ? iconWithoutColor : icon;
     }
+    _getIconName() {
+        return this._item?.icon;
+    }
     renderLabel() {
         return html `<slot name="label" slot="label"></slot>`;
     }
@@ -159,24 +209,76 @@ export class UmbTreeItemElementBase extends UmbLitElement {
             ? repeat(this._childItems, (item, index) => item.name + '___' + index, (item) => html `
 							<umb-tree-item
 								.entityType=${item.entityType}
-								.props=${{ hideActions: this.hideActions, item }}></umb-tree-item>
+								.props=${{ hideActions: this.hideActions, item, isMenu: this.isMenu }}></umb-tree-item>
 						`)
             : ''}
 		`;
     }
-    #renderPaging() {
-        if (this._totalPages <= 1 || this._currentPage === this._totalPages) {
+    #renderLoadPrevButton() {
+        if (!this._hasPreviousItems)
             return nothing;
-        }
-        return html ` <umb-tree-load-more-button @click=${this.#onLoadMoreClick}></umb-tree-load-more-button> `;
+        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 = [
+        UmbTextStyles,
+        css `
+			#icon-container {
+				position: relative;
+				font-size: 15px;
+			}
+
+			uui-menu-item {
+				--umb-sign-bundle-bg: var(--uui-color-surface);
+			}
+
+			uui-menu-item:hover {
+				--umb-sign-bundle-bg: var(--uui-color-surface-emphasis);
+			}
+
+			uui-menu-item[active],
+			uui-menu-item[selected] {
+				--umb-sign-bundle-bg: var(--uui-color-current);
+			}
+
+			uui-menu-item[selected]:hover,
+			uui-menu-item[active]:hover {
+				--umb-sign-bundle-bg: var(--uui-color-current-emphasis);
+			}
+
+			#label {
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		`,
+    ]; }
 }
 __decorate([
     property({ type: Object, attribute: false })
 ], UmbTreeItemElementBase.prototype, "item", null);
+__decorate([
+    state()
+], UmbTreeItemElementBase.prototype, "_flags", void 0);
 __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_label", void 0);
+__decorate([
+    state()
+], UmbTreeItemElementBase.prototype, "_isLoadingPrevChildren", void 0);
+__decorate([
+    state()
+], UmbTreeItemElementBase.prototype, "_isLoadingNextChildren", void 0);
 __decorate([
     property({ type: Object, attribute: false })
 ], UmbTreeItemElementBase.prototype, "api", null);
@@ -207,6 +309,9 @@ __decorate([
 __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_hasChildren", void 0);
+__decorate([
+    state()
+], UmbTreeItemElementBase.prototype, "_forceShowExpand", void 0);
 __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_isOpen", void 0);
@@ -219,3 +324,12 @@ __decorate([
 __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_currentPage", void 0);
+__decorate([
+    state()
+], UmbTreeItemElementBase.prototype, "_hasPreviousItems", void 0);
+__decorate([
+    state()
+], UmbTreeItemElementBase.prototype, "_hasNextItems", void 0);
+__decorate([
+    state()
+], UmbTreeItemElementBase.prototype, "_isMenu", void 0);

package/dist-cms/packages/core/tree/tree-item/tree-item-children.manager.d.ts

@@ -0,0 +1,107 @@
+import type { UmbTreeRootItemsRequestArgs } from '../data/index.js';
+import type { UmbTreeItemModel, UmbTreeRootModel, UmbTreeStartNode } from '../types.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import { UmbPaginationManager, UmbTargetPaginationManager } from '../../utils/index.js';
+import type { UmbEntityModel } from '../../entity/index.js';
+export declare class UmbTreeItemChildrenManager<TreeItemType extends UmbTreeItemModel = UmbTreeItemModel, TreeRootType extends UmbTreeRootModel = UmbTreeRootModel, RequestArgsType extends UmbTreeRootItemsRequestArgs = UmbTreeRootItemsRequestArgs> extends UmbControllerBase {
+    #private;
+    readonly offsetPagination: UmbPaginationManager;
+    readonly targetPagination: UmbTargetPaginationManager<UmbEntityModel>;
+    readonly children: import("rxjs").Observable<TreeItemType[]>;
+    readonly hasChildren: import("rxjs").Observable<boolean>;
+    readonly treeItem: import("rxjs").Observable<TreeItemType | TreeRootType | undefined>;
+    readonly foldersOnly: import("rxjs").Observable<boolean>;
+    readonly additionalRequestArgs: import("rxjs").Observable<object | Partial<RequestArgsType>>;
+    readonly startNode: import("rxjs").Observable<UmbTreeStartNode | undefined>;
+    readonly isLoading: import("rxjs").Observable<boolean>;
+    readonly isLoadingPrevChildren: import("rxjs").Observable<boolean>;
+    readonly isLoadingNextChildren: import("rxjs").Observable<boolean>;
+    constructor(host: UmbControllerHost);
+    setTakeSize(size: number): void;
+    setTargetTakeSize(before: number | undefined, after: number | undefined): void;
+    getTakeSize(): number;
+    setFoldersOnly(foldersOnly: boolean): void;
+    getFoldersOnly(): boolean;
+    /**
+     * Set the parent for which to load children.
+     * @param {(TreeItemType | TreeRootType | undefined)} treeItem - The tree item model
+     * @memberof UmbTreeItemChildrenManager
+     */
+    setTreeItem(treeItem: TreeItemType | TreeRootType | undefined): void;
+    /**
+     * Gets the tree item for which to load children.
+     * @returns {TreeItemType | TreeRootType | undefined} - The tree item for the children
+     * @memberof UmbTreeItemChildrenManager
+     */
+    getTreeItem(): TreeItemType | TreeRootType | undefined;
+    /**
+     * Sets additional request arguments that will be passed with the request.
+     * @param {Partial<RequestArgsType>} args - The additional request arguments
+     * @memberof UmbTreeItemChildrenManager
+     */
+    setAdditionalRequestArgs(args: Partial<RequestArgsType>): void;
+    /**
+     * Gets additional request arguments that will be passed with the request.
+     * @returns {Partial<RequestArgsType> | undefined} - The additional request arguments.
+     * @memberof UmbTreeItemChildrenManager
+     */
+    getAdditionalRequestArgs(): Partial<RequestArgsType> | undefined;
+    /**
+     * Sets the startNode config
+     * @param {(UmbTreeStartNode | undefined)} startNode - The start node
+     * @memberof UmbTreeItemChildrenManager
+     */
+    setStartNode(startNode: UmbTreeStartNode | undefined): void;
+    /**
+     * Gets the startNode config
+     * @returns {(UmbTreeStartNode | undefined)} - The start node
+     * @memberof UmbTreeItemChildrenManager
+     */
+    getStartNode(): UmbTreeStartNode | undefined;
+    /**
+     * Sets the hasChildren state
+     * @param {boolean} hasChildren
+     * @memberof UmbTreeItemChildrenManager
+     */
+    setHasChildren(hasChildren: boolean): void;
+    /**
+     * Gets the hasChildren state
+     * @returns {boolean} - True if the current tree item has children
+     * @memberof UmbTreeItemChildrenManager
+     */
+    getHasChildren(): boolean;
+    /**
+     * Loads the children for the current parent.
+     * @returns {Promise<void>}
+     * @memberof UmbTreeItemChildrenManager
+     */
+    loadChildren(): Promise<void>;
+    /**
+     * Reloads the children for the current parent.
+     * @returns {Promise<void>}
+     * @memberof UmbTreeItemChildrenManager
+     */
+    reloadChildren(): Promise<void>;
+    loadPrevChildren(): Promise<void>;
+    loadNextChildren(): Promise<void>;
+    /**
+     * Checks if a specific child is loaded
+     * @param {(UmbEntityModel | undefined)} entity
+     * @returns {boolean} - True if items has been loaded
+     * @memberof UmbRepositoryTreeItemChildrenManager
+     */
+    isChildLoaded(entity: UmbEntityModel | undefined): boolean;
+    /**
+     * Checks if any children have been loaded
+     * @returns {boolean} - True if any items has been loaded
+     * @memberof UmbRepositoryTreeItemChildrenManager
+     */
+    hasLoadedChildren(): boolean;
+    /**
+     * Clears the internal state
+     * @memberof UmbRepositoryTreeItemChildrenManager
+     */
+    clear(): void;
+    destroy(): void;
+}