@umbraco-cms/backoffice 17.5.3 → 17.6.0-rc

package/dist-cms/packages/core/tree/action/create/tree-create-action.api.js

@@ -0,0 +1,55 @@
+import { UmbTreeActionBase } from '../tree-action-base.js';
+import { UMB_ENTITY_CONTEXT } from '../../../entity/index.js';
+import { UmbExtensionsApiInitializer } from '../../../../../libs/extension-api/index.js';
+import { umbExtensionsRegistry } from '../../../extension-registry/index.js';
+import { UmbArrayState, observeMultiple } from '../../../../../libs/observable-api/index.js';
+export class UmbTreeCreateActionApi extends UmbTreeActionBase {
+    #options;
+    #controllers;
+    #extensionsInitializer;
+    constructor(host) {
+        super(host);
+        this.#options = new UmbArrayState([], (x) => x.alias);
+        this.options = this.#options.asObservable();
+        this.multipleOptions = this.#options.asObservablePart((options) => options.length > 1);
+        this.#controllers = new Map();
+        this.consumeContext(UMB_ENTITY_CONTEXT, (context) => {
+            if (!context)
+                return;
+            this.observe(observeMultiple([context.entityType, context.unique]), ([entityType, unique]) => {
+                if (!entityType || unique === undefined) {
+                    this.#options.setValue([]);
+                    return;
+                }
+                this.#extensionsInitializer?.destroy();
+                this.#extensionsInitializer = new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'entityCreateOptionAction', (manifest) => [{ entityType, unique, meta: manifest.meta }], (manifest) => manifest.forEntityTypes.includes(entityType), async (controllers) => {
+                    const apiControllers = controllers;
+                    this.#controllers.clear();
+                    const options = [];
+                    for (const controller of apiControllers) {
+                        const manifest = controller.manifest;
+                        if (!manifest)
+                            continue;
+                        this.#controllers.set(manifest.alias, controller);
+                        options.push({
+                            alias: manifest.alias,
+                            label: manifest.meta.label ?? manifest.name,
+                            icon: manifest.meta.icon,
+                            href: await controller.api?.getHref(),
+                            additionalOptions: manifest.meta.additionalOptions,
+                        });
+                    }
+                    this.#options.setValue(options);
+                });
+            }, 'umbEntityContextObserver');
+        });
+    }
+    async executeByAlias(alias) {
+        const controller = this.#controllers.get(alias);
+        if (!controller?.api)
+            throw new Error('No API found');
+        await controller.api.execute();
+    }
+    async execute() { }
+}
+export { UmbTreeCreateActionApi as api };

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

@@ -0,0 +1,18 @@
+import { nothing } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+import type { UmbTreeCreateActionApi } from './tree-create-action.api.js';
+export declare class UmbTreeCreateActionButtonElement extends UmbLitElement {
+    #private;
+    private _popoverOpen;
+    private _multipleOptions;
+    private _options;
+    get api(): UmbTreeCreateActionApi | undefined;
+    set api(value: UmbTreeCreateActionApi | undefined);
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export { UmbTreeCreateActionButtonElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tree-create-action-button': UmbTreeCreateActionButtonElement;
+    }
+}

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

@@ -0,0 +1,118 @@
+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 { customElement, html, ifDefined, nothing, state } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../lit-element/index.js';
+let UmbTreeCreateActionButtonElement = class UmbTreeCreateActionButtonElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this._popoverOpen = false;
+        this._multipleOptions = false;
+        this._options = [];
+        this.#createLabel = this.localize.term('general_create');
+    }
+    #createLabel;
+    #api;
+    get api() {
+        return this.#api;
+    }
+    set api(value) {
+        this.#api = value;
+        this.observe(this.#api?.options, (options) => {
+            this._options = options ?? [];
+        });
+        this.observe(this.#api?.multipleOptions, (multipleOptions) => {
+            this._multipleOptions = multipleOptions ?? false;
+        });
+    }
+    #onPopoverToggle(event) {
+        // TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS yet.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this._popoverOpen = event.newState === 'open';
+    }
+    async #onClick(event, alias, href) {
+        if (href)
+            return;
+        event.stopPropagation();
+        await this.#api?.executeByAlias(alias).catch(() => { });
+    }
+    #getTarget(href) {
+        if (href?.startsWith('http'))
+            return '_blank';
+        return '_self';
+    }
+    render() {
+        if (this._options.length === 0)
+            return nothing;
+        return this._multipleOptions ? this.#renderMultiOptionAction() : this.#renderSingleOptionAction();
+    }
+    #renderSingleOptionAction() {
+        const option = this._options[0];
+        return html `
+			<uui-button
+				label=${this.#createLabel}
+				color="default"
+				look="outline"
+				href=${ifDefined(option?.href)}
+				target=${this.#getTarget(option?.href)}
+				@click=${(event) => this.#onClick(event, option?.alias, option?.href)}></uui-button>
+		`;
+    }
+    #renderMultiOptionAction() {
+        return html `
+			<uui-button
+				popovertarget="tree-create-action-menu-popover"
+				label=${this.#createLabel}
+				color="default"
+				look="outline">
+				${this.#createLabel}
+				<uui-symbol-expand .open=${this._popoverOpen}></uui-symbol-expand>
+			</uui-button>
+			${this.#renderDropdown()}
+		`;
+    }
+    #renderDropdown() {
+        return html `
+			<uui-popover-container
+				id="tree-create-action-menu-popover"
+				placement="bottom-start"
+				@toggle=${this.#onPopoverToggle}>
+				<umb-popover-layout>
+					<uui-scroll-container>
+						${this._options.map((option) => this.#renderMenuItem(option))}
+					</uui-scroll-container>
+				</umb-popover-layout>
+			</uui-popover-container>
+		`;
+    }
+    #renderMenuItem(option) {
+        const label = option.label ? this.localize.string(option.label) : option.alias;
+        return html `
+			<uui-menu-item
+				label=${option.additionalOptions ? label + '...' : label}
+				href=${ifDefined(option.href)}
+				target=${this.#getTarget(option.href)}
+				@click=${(event) => this.#onClick(event, option.alias, option.href)}>
+				<umb-icon slot="icon" .name=${option.icon}></umb-icon>
+			</uui-menu-item>
+		`;
+    }
+};
+__decorate([
+    state()
+], UmbTreeCreateActionButtonElement.prototype, "_popoverOpen", void 0);
+__decorate([
+    state()
+], UmbTreeCreateActionButtonElement.prototype, "_multipleOptions", void 0);
+__decorate([
+    state()
+], UmbTreeCreateActionButtonElement.prototype, "_options", void 0);
+UmbTreeCreateActionButtonElement = __decorate([
+    customElement('umb-tree-create-action-button')
+], UmbTreeCreateActionButtonElement);
+export { UmbTreeCreateActionButtonElement };
+export { UmbTreeCreateActionButtonElement as element };

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

@@ -0,0 +1,17 @@
+import type { ManifestTreeAction } from '../tree-action.extension.js';
+export interface ManifestTreeActionCreateKind extends ManifestTreeAction {
+    type: 'treeAction';
+    kind: 'create';
+}
+export interface UmbTreeCreateOption {
+    alias: string;
+    label: string;
+    icon?: string;
+    href?: string;
+    additionalOptions?: boolean;
+}
+declare global {
+    interface UmbExtensionManifestMap {
+        umbTreeActionCreateKind: ManifestTreeActionCreateKind;
+    }
+}

package/dist-cms/packages/core/tree/action/create/types.js

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

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

@@ -0,0 +1,6 @@
+export { UmbTreeActionBase } from './tree-action-base.js';
+export type { UmbTreeAction } from './tree-action-base.js';
+export type { ManifestTreeAction, MetaTreeAction } from './tree-action.extension.js';
+export { UmbTreeCreateActionApi } from './create/tree-create-action.api.js';
+export { UmbTreeCreateActionButtonElement } from './create/tree-create-action.element.js';
+export type { UmbTreeCreateOption, ManifestTreeActionCreateKind } from './create/types.js';

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

@@ -0,0 +1,3 @@
+export { UmbTreeActionBase } from './tree-action-base.js';
+export { UmbTreeCreateActionApi } from './create/tree-create-action.api.js';
+export { UmbTreeCreateActionButtonElement } from './create/tree-create-action.element.js';

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

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

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

@@ -0,0 +1,28 @@
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbApi } from '../../../../libs/extension-api/index.js';
+/**
+ * A tree-level action, rendered in the tree's header to operate on the tree as a whole.
+ */
+export interface UmbTreeAction extends UmbApi {
+    /**
+     * The href location, the action will act as a link.
+     * @returns {undefined | Promise<string | undefined>}
+     */
+    getHref?: () => Promise<string | undefined>;
+    /**
+     * Determine if the UI should indicate that more options will appear when interacting with this.
+     * @returns {undefined | Promise<boolean | undefined>}
+     */
+    hasAdditionalOptions?: () => Promise<boolean | undefined>;
+    /**
+     * The `execute` method, the action will act as a button.
+     * @returns {Promise<void>}
+     */
+    execute(): Promise<void>;
+}
+/**
+ * Base class for {@link UmbTreeAction} implementations.
+ */
+export declare abstract class UmbTreeActionBase extends UmbControllerBase implements UmbTreeAction {
+    abstract execute(): Promise<void>;
+}

package/dist-cms/packages/core/tree/action/tree-action-base.js

@@ -0,0 +1,6 @@
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+/**
+ * Base class for {@link UmbTreeAction} implementations.
+ */
+export class UmbTreeActionBase extends UmbControllerBase {
+}

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

@@ -0,0 +1,17 @@
+import type { UmbTreeAction } from './tree-action-base.js';
+import type { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
+import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '../../../../libs/extension-api/index.js';
+export interface ManifestTreeAction extends ManifestElementAndApi<UmbControllerHostElement, UmbTreeAction>, ManifestWithDynamicConditions<UmbExtensionConditionConfig> {
+    type: 'treeAction';
+    meta: MetaTreeAction;
+}
+export interface MetaTreeAction {
+    label: string;
+    href?: string;
+    additionalOptions?: boolean;
+}
+declare global {
+    interface UmbExtensionManifestMap {
+        umbTreeAction: ManifestTreeAction;
+    }
+}

package/dist-cms/packages/core/tree/action/tree-action.extension.js

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

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

@@ -1,2 +1,6 @@
+export * from './tree-action-bundle.element.js';
 export * from './tree-load-more-button.element.js';
 export * from './tree-load-prev-button.element.js';
+export * from './tree-pagination.element.js';
+export * from './tree-toolbar.element.js';
+export * from './tree-view-bundle.element.js';

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

@@ -1,2 +1,6 @@
+export * from './tree-action-bundle.element.js';
 export * from './tree-load-more-button.element.js';
 export * from './tree-load-prev-button.element.js';
+export * from './tree-pagination.element.js';
+export * from './tree-toolbar.element.js';
+export * from './tree-view-bundle.element.js';

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

@@ -0,0 +1,10 @@
+import { UmbLitElement } from '../../lit-element/index.js';
+export declare class UmbTreeActionBundleElement extends UmbLitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tree-action-bundle': UmbTreeActionBundleElement;
+    }
+}

package/dist-cms/packages/core/tree/components/tree-action-bundle.element.js

@@ -0,0 +1,24 @@
+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 } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+let UmbTreeActionBundleElement = class UmbTreeActionBundleElement extends UmbLitElement {
+    render() {
+        return html `<umb-extension-with-api-slot type="treeAction"></umb-extension-with-api-slot>`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: contents;
+			}
+		`,
+    ]; }
+};
+UmbTreeActionBundleElement = __decorate([
+    customElement('umb-tree-action-bundle')
+], UmbTreeActionBundleElement);
+export { UmbTreeActionBundleElement };

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

@@ -0,0 +1,15 @@
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+export declare class UmbTreePaginationElement extends UmbLitElement {
+    #private;
+    private _totalPages;
+    private _currentPage;
+    constructor();
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tree-pagination': UmbTreePaginationElement;
+    }
+}

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

@@ -0,0 +1,62 @@
+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 { UMB_TREE_CONTEXT } from '../tree.context.token.js';
+import { UmbTextStyles } from '../../style/index.js';
+import { css, customElement, html, nothing, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+let UmbTreePaginationElement = class UmbTreePaginationElement extends UmbLitElement {
+    #treeContext;
+    constructor() {
+        super();
+        this._totalPages = 1;
+        this._currentPage = 1;
+        this.consumeContext(UMB_TREE_CONTEXT, (context) => {
+            this.#treeContext = context;
+            this.observe(context?.pagination.currentPage, (currentPage) => (this._currentPage = currentPage ?? 1), '_observeCurrentPage');
+            this.observe(context?.pagination.totalPages, (totalPages) => (this._totalPages = totalPages ?? 1), '_observeTotalPages');
+        });
+    }
+    #onChange(event) {
+        this.#treeContext?.loadPage?.(event.target.current);
+    }
+    render() {
+        if (this._totalPages <= 1)
+            return nothing;
+        return html `<uui-pagination
+			.current=${this._currentPage}
+			.total=${this._totalPages}
+			firstlabel=${this.localize.term('general_first')}
+			previouslabel=${this.localize.term('general_previous')}
+			nextlabel=${this.localize.term('general_next')}
+			lastlabel=${this.localize.term('general_last')}
+			@change=${this.#onChange}></uui-pagination>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: block;
+				text-align: center;
+			}
+
+			uui-pagination {
+				display: block;
+				margin-top: var(--uui-size-layout-1);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbTreePaginationElement.prototype, "_totalPages", void 0);
+__decorate([
+    state()
+], UmbTreePaginationElement.prototype, "_currentPage", void 0);
+UmbTreePaginationElement = __decorate([
+    customElement('umb-tree-pagination')
+], UmbTreePaginationElement);
+export { UmbTreePaginationElement };

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

@@ -0,0 +1,17 @@
+import { UmbLitElement } from '../../lit-element/index.js';
+import './tree-action-bundle.element.js';
+import './tree-view-bundle.element.js';
+export declare class UmbTreeToolbarElement extends UmbLitElement {
+    /**
+     * When true the tree actions are shown.
+     * Defaults to false — tree actions are not shown unless explicitly opted in with show-tree-actions.
+     */
+    showTreeActions: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tree-toolbar': UmbTreeToolbarElement;
+    }
+}

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

@@ -0,0 +1,57 @@
+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 { UmbTextStyles } from '../../style/index.js';
+import { css, html, customElement, nothing, property } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+import './tree-action-bundle.element.js';
+import './tree-view-bundle.element.js';
+let UmbTreeToolbarElement = class UmbTreeToolbarElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * When true the tree actions are shown.
+         * Defaults to false — tree actions are not shown unless explicitly opted in with show-tree-actions.
+         */
+        this.showTreeActions = false;
+    }
+    render() {
+        return html `
+			<div id="toolbar">
+				${this.showTreeActions ? html `<umb-tree-action-bundle></umb-tree-action-bundle>` : nothing}
+				<umb-tree-view-bundle></umb-tree-view-bundle>
+			</div>
+		`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: contents;
+			}
+
+			#toolbar {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				padding: 0 0 var(--uui-size-layout-1) 0;
+				box-sizing: border-box;
+			}
+
+			umb-tree-view-bundle {
+				display: inline-block;
+				margin-left: auto;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'show-tree-actions' })
+], UmbTreeToolbarElement.prototype, "showTreeActions", void 0);
+UmbTreeToolbarElement = __decorate([
+    customElement('umb-tree-toolbar')
+], UmbTreeToolbarElement);
+export { UmbTreeToolbarElement };

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

@@ -0,0 +1,16 @@
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+export declare class UmbTreeViewBundleElement extends UmbLitElement {
+    #private;
+    private _views;
+    private _currentView?;
+    constructor();
+    private _popover?;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-tree-view-bundle': UmbTreeViewBundleElement;
+    }
+}

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

@@ -0,0 +1,95 @@
+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 { UMB_TREE_CONTEXT } from '../tree.context.token.js';
+import { UmbTextStyles } from '../../style/index.js';
+import { css, customElement, html, nothing, query, repeat, state } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+let UmbTreeViewBundleElement = class UmbTreeViewBundleElement extends UmbLitElement {
+    #treeContext;
+    constructor() {
+        super();
+        this._views = [];
+        this.consumeContext(UMB_TREE_CONTEXT, (context) => {
+            this.#treeContext = context;
+            this.#observeViews();
+        });
+    }
+    #observeViews() {
+        if (!this.#treeContext?.view)
+            return;
+        this.observe(this.#treeContext.view.views, (views) => {
+            this._views = views;
+        }, 'umbTreeViewsObserver');
+        this.observe(this.#treeContext.view.currentView, (currentView) => {
+            this._currentView = currentView;
+        }, 'umbTreeCurrentViewObserver');
+    }
+    #onClick(view) {
+        this.#treeContext?.view?.setCurrentView(view);
+        setTimeout(() => {
+            // TODO: This ignorer is just needed for JSON SCHEMA TO WORK, As its not updated with latest TS yet.
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            this._popover?.hidePopover();
+        }, 100);
+    }
+    render() {
+        if (!this._currentView)
+            return nothing;
+        if (this._views.length <= 1)
+            return nothing;
+        return html `
+			<uui-button compact popovertarget="tree-view-bundle-popover" label=${this.localize.term('general_switchView')}>
+				<umb-icon name=${this._currentView.meta.icon}></umb-icon>
+			</uui-button>
+			<uui-popover-container id="tree-view-bundle-popover" placement="bottom-end">
+				<umb-popover-layout>
+					<div class="view-dropdown">
+						${repeat(this._views, (view) => view.alias, (view) => this.#renderItem(view))}
+					</div>
+				</umb-popover-layout>
+			</uui-popover-container>
+		`;
+    }
+    #renderItem(view) {
+        return html `
+			<uui-menu-item
+				label=${this.localize.string(view.meta.label)}
+				@click-label=${() => this.#onClick(view)}
+				?active=${view.alias === this._currentView?.alias}>
+				<umb-icon slot="icon" name=${view.meta.icon}></umb-icon>
+			</uui-menu-item>
+		`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				--uui-button-content-align: left;
+				--uui-menu-item-flat-structure: 1;
+				display: contents;
+			}
+
+			.view-dropdown {
+				padding: var(--uui-size-space-3);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbTreeViewBundleElement.prototype, "_views", void 0);
+__decorate([
+    state()
+], UmbTreeViewBundleElement.prototype, "_currentView", void 0);
+__decorate([
+    query('#tree-view-bundle-popover')
+], UmbTreeViewBundleElement.prototype, "_popover", void 0);
+UmbTreeViewBundleElement = __decorate([
+    customElement('umb-tree-view-bundle')
+], UmbTreeViewBundleElement);
+export { UmbTreeViewBundleElement };

package/dist-cms/packages/core/tree/conditions/constants.d.ts

@@ -0,0 +1 @@
+export declare const UMB_TREE_ALIAS_CONDITION = "Umb.Condition.TreeAlias";

package/dist-cms/packages/core/tree/conditions/constants.js

@@ -0,0 +1 @@
+export const UMB_TREE_ALIAS_CONDITION = 'Umb.Condition.TreeAlias';

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

@@ -0,0 +1,3 @@
+export { UmbTreeAliasCondition } from './tree-alias.condition.js';
+export { UMB_TREE_ALIAS_CONDITION } from './constants.js';
+export type { TreeAliasConditionConfig } from './types.js';

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

@@ -0,0 +1,2 @@
+export { UmbTreeAliasCondition } from './tree-alias.condition.js';
+export { UMB_TREE_ALIAS_CONDITION } from './constants.js';

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

@@ -0,0 +1,2 @@
+import type { ManifestCondition } from '../../../../libs/extension-api/index.js';
+export declare const manifests: Array<ManifestCondition>;

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

@@ -0,0 +1,10 @@
+import { UmbTreeAliasCondition } from './tree-alias.condition.js';
+import { UMB_TREE_ALIAS_CONDITION } from './constants.js';
+export const manifests = [
+    {
+        type: 'condition',
+        name: 'Tree Alias Condition',
+        alias: UMB_TREE_ALIAS_CONDITION,
+        api: UmbTreeAliasCondition,
+    },
+];