@umbraco-cms/backoffice 17.4.0-rc3 → 18.0.0-beta1

package/dist-cms/packages/elements/search/element-search-result-item.element.js

@@ -0,0 +1,120 @@
+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 { UmbElementVariantState } from '../variant-state.js';
+import { classMap, css, customElement, html, nothing, property, state, when, } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+import { UMB_APP_LANGUAGE_CONTEXT } from '../../language/index.js';
+let UmbElementSearchResultItemElement = class UmbElementSearchResultItemElement extends UmbLitElement {
+    constructor() {
+        super();
+        this.consumeContext(UMB_APP_LANGUAGE_CONTEXT, (instance) => {
+            this.#observeAppCulture(instance);
+            this.#observeDefaultCulture(instance);
+        });
+    }
+    #observeAppCulture(context) {
+        this.observe(context?.appLanguageCulture, (value) => {
+            this._variant = this.#getVariant(value);
+        });
+    }
+    #observeDefaultCulture(context) {
+        this.observe(context?.appDefaultLanguage, (value) => {
+            this._defaultCulture = value?.unique;
+        });
+    }
+    #getVariant(culture) {
+        return this.item?.variants.find((x) => x.culture === culture);
+    }
+    #getLabel() {
+        if (this.item?.variants[0]?.culture === null) {
+            return this.item?.name ?? 'Unknown';
+        }
+        const fallbackName = this.#getVariant(this._defaultCulture)?.name ?? this.item?.name ?? 'Unknown';
+        return this._variant?.name ?? `(${fallbackName})`;
+    }
+    #getDraftState() {
+        if (this.item?.isTrashed)
+            return false;
+        return (this._variant?.state === UmbElementVariantState.DRAFT ||
+            this.item?.variants[0]?.state === UmbElementVariantState.DRAFT);
+    }
+    #getAncestorPath() {
+        return this.item?.ancestors?.map((a) => a.name).join(' / ');
+    }
+    render() {
+        if (!this.item)
+            return nothing;
+        const label = this.#getLabel();
+        const isDraft = this.#getDraftState();
+        const classes = {
+            trashed: this.item.isTrashed,
+            hasState: this.item.isTrashed || isDraft,
+        };
+        return html `
+			${when(this.item.documentType.icon ?? this.item.icon, (icon) => html `<umb-icon name=${icon}></umb-icon>`, () => html `<uui-icon name="icon-document"></uui-icon>`)}
+			<span class=${classMap(classes)}>
+				${label}
+				${when(this.item.ancestors?.length, () => html `<small class="ancestors">${this.#getAncestorPath()}</small>`)}
+			</span>
+			<div class="extra">
+				${when(this.item.isTrashed, () => html `
+						<uui-tag look="secondary">
+							<umb-localize key="mediaPicker_trashed">Trashed</umb-localize>
+						</uui-tag>
+					`)}
+				${when(!this.item.isTrashed && isDraft, () => html `<uui-tag look="secondary">Draft</uui-tag>`)}
+			</div>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				border-radius: var(--uui-border-radius);
+				outline-offset: -3px;
+				padding: var(--uui-size-space-3) var(--uui-size-space-5);
+
+				display: flex;
+				gap: var(--uui-size-space-3);
+				align-items: center;
+
+				width: 100%;
+
+				> span {
+					flex: 1;
+
+					&.hasState {
+						opacity: 0.6;
+					}
+
+					&.trashed {
+						text-decoration: line-through;
+					}
+					> .ancestors {
+						display: block;
+						opacity: 0.6;
+						font-size: 0.7rem;
+						font-weight: 400;
+					}
+				}
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Object })
+], UmbElementSearchResultItemElement.prototype, "item", void 0);
+__decorate([
+    state()
+], UmbElementSearchResultItemElement.prototype, "_defaultCulture", void 0);
+__decorate([
+    state()
+], UmbElementSearchResultItemElement.prototype, "_variant", void 0);
+UmbElementSearchResultItemElement = __decorate([
+    customElement('umb-element-search-result-item')
+], UmbElementSearchResultItemElement);
+export { UmbElementSearchResultItemElement };
+export { UmbElementSearchResultItemElement as element };

package/dist-cms/packages/elements/search/element-search.repository.d.ts

@@ -0,0 +1,23 @@
+import type { UmbElementSearchItemModel } from './types.js';
+import type { UmbSearchRepository, UmbSearchRequestArgs } from '../../core/search/index.js';
+import { UmbControllerBase } from '../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
+import type { UmbApi } from '../../../libs/extension-api/index.js';
+import type { UmbPagedModel, UmbRepositoryResponse } from '../../core/repository/index.js';
+/**
+ * The element search repository
+ * @class UmbElementSearchRepository
+ * @augments {UmbControllerBase}
+ * @implements {UmbSearchRepository<UmbElementSearchItemModel>}
+ */
+export declare class UmbElementSearchRepository extends UmbControllerBase implements UmbSearchRepository<UmbElementSearchItemModel>, UmbApi {
+    #private;
+    constructor(host: UmbControllerHost);
+    /**
+     * Search for elements
+     * @param {UmbSearchRequestArgs} args - The arguments for the search
+     * @returns {Promise<UmbRepositoryResponse<UmbPagedModel<UmbElementSearchItemModel>>>} - The search results
+     * @memberof UmbElementSearchRepository
+     */
+    search(args: UmbSearchRequestArgs): Promise<UmbRepositoryResponse<UmbPagedModel<UmbElementSearchItemModel>>>;
+}

package/dist-cms/packages/elements/search/element-search.repository.js

@@ -0,0 +1,24 @@
+import { UmbElementSearchServerDataSource } from './element-search.server.data-source.js';
+import { UmbControllerBase } from '../../../libs/class-api/index.js';
+/**
+ * The element search repository
+ * @class UmbElementSearchRepository
+ * @augments {UmbControllerBase}
+ * @implements {UmbSearchRepository<UmbElementSearchItemModel>}
+ */
+export class UmbElementSearchRepository extends UmbControllerBase {
+    #dataSource;
+    constructor(host) {
+        super(host);
+        this.#dataSource = new UmbElementSearchServerDataSource(this);
+    }
+    /**
+     * Search for elements
+     * @param {UmbSearchRequestArgs} args - The arguments for the search
+     * @returns {Promise<UmbRepositoryResponse<UmbPagedModel<UmbElementSearchItemModel>>>} - The search results
+     * @memberof UmbElementSearchRepository
+     */
+    search(args) {
+        return this.#dataSource.search(args);
+    }
+}

package/dist-cms/packages/elements/search/element-search.server.data-source.d.ts

@@ -0,0 +1,33 @@
+import type { UmbElementSearchItemModel } from './types.js';
+import type { UmbSearchDataSource, UmbSearchRequestArgs } from '../../core/search/index.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
+/**
+ * A data source that fetches element search results from the server.
+ * @class UmbElementSearchServerDataSource
+ * @implements {UmbSearchDataSource<UmbElementSearchItemModel>}
+ */
+export declare class UmbElementSearchServerDataSource implements UmbSearchDataSource<UmbElementSearchItemModel> {
+    #private;
+    /**
+     * Creates an instance of UmbElementSearchServerDataSource.
+     * @param {UmbControllerHost} host - The controller host for this controller to be appended to
+     * @memberof UmbElementSearchServerDataSource
+     */
+    constructor(host: UmbControllerHost);
+    /**
+     * Search for elements matching the given query, including ancestor chains for breadcrumb rendering.
+     * @param {UmbSearchRequestArgs} args - The arguments for the search
+     * @returns {*}
+     * @memberof UmbElementSearchServerDataSource
+     */
+    search(args: UmbSearchRequestArgs): Promise<{
+        data: {
+            items: UmbElementSearchItemModel[];
+            total: number;
+        };
+        error?: undefined;
+    } | {
+        error: import("../../core/resources/index.js").UmbCancelError | import("../../core/resources/index.js").UmbApiError | undefined;
+        data?: undefined;
+    }>;
+}

package/dist-cms/packages/elements/search/element-search.server.data-source.js

@@ -0,0 +1,79 @@
+import { UMB_ELEMENT_ENTITY_TYPE } from '../entity.js';
+import { UMB_EDIT_ELEMENT_WORKSPACE_PATH_PATTERN } from '../paths.js';
+import { ElementService } from '../../core/backend-api/index.js';
+import { tryExecute } from '../../core/resources/index.js';
+/**
+ * A data source that fetches element search results from the server.
+ * @class UmbElementSearchServerDataSource
+ * @implements {UmbSearchDataSource<UmbElementSearchItemModel>}
+ */
+export class UmbElementSearchServerDataSource {
+    #host;
+    /**
+     * Creates an instance of UmbElementSearchServerDataSource.
+     * @param {UmbControllerHost} host - The controller host for this controller to be appended to
+     * @memberof UmbElementSearchServerDataSource
+     */
+    constructor(host) {
+        this.#host = host;
+    }
+    async #fetchAncestors(ids) {
+        if (!ids.length)
+            return { data: new Map() };
+        const { data, error } = await tryExecute(this.#host, ElementService.getItemElementAncestors({ query: { id: ids } }));
+        if (error)
+            return { error };
+        const ancestorsByItemId = new Map();
+        if (data) {
+            for (const entry of data) {
+                ancestorsByItemId.set(entry.id, entry.ancestors.map((ancestor) => ({ unique: ancestor.id, name: ancestor.name })));
+            }
+        }
+        return { data: ancestorsByItemId };
+    }
+    /**
+     * Search for elements matching the given query, including ancestor chains for breadcrumb rendering.
+     * @param {UmbSearchRequestArgs} args - The arguments for the search
+     * @returns {*}
+     * @memberof UmbElementSearchServerDataSource
+     */
+    async search(args) {
+        const { data, error } = await tryExecute(this.#host, ElementService.getItemElementSearch({
+            query: {
+                query: args.query,
+                skip: args.paging?.skip,
+                take: args.paging?.take,
+            },
+        }));
+        if (data) {
+            const ids = data.items.map((item) => item.id);
+            const { data: ancestorsByItemId, error: ancestorsError } = await this.#fetchAncestors(ids);
+            if (ancestorsError)
+                return { error: ancestorsError };
+            const mappedItems = data.items.map((item) => ({
+                entityType: UMB_ELEMENT_ENTITY_TYPE,
+                unique: item.id,
+                name: item.variants[0]?.name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
+                href: UMB_EDIT_ELEMENT_WORKSPACE_PATH_PATTERN.generateAbsolute({ unique: item.id }),
+                documentType: {
+                    unique: item.documentType.id,
+                    icon: item.documentType.icon,
+                    collection: null,
+                },
+                hasChildren: item.hasChildren,
+                isTrashed: item.isTrashed,
+                parent: item.parent ? { unique: item.parent.id } : null,
+                variants: item.variants.map((variant) => ({
+                    name: variant.name,
+                    culture: variant.culture || null,
+                    state: variant.state,
+                    flags: variant.flags,
+                })),
+                flags: item.flags,
+                ancestors: ancestorsByItemId.get(item.id) ?? [],
+            }));
+            return { data: { items: mappedItems, total: data.total } };
+        }
+        return { error };
+    }
+}

package/dist-cms/packages/elements/search/element.search-provider.d.ts

@@ -0,0 +1,22 @@
+import type { UmbElementSearchItemModel } from './types.js';
+import type { UmbSearchProvider, UmbSearchRequestArgs } from '../../core/search/index.js';
+import { UmbControllerBase } from '../../../libs/class-api/index.js';
+import type { UmbPagedModel, UmbRepositoryResponse } from '../../core/repository/index.js';
+/**
+ * The element search provider
+ * @class UmbElementSearchProvider
+ * @augments {UmbControllerBase}
+ * @implements {UmbSearchProvider<UmbElementSearchItemModel>}
+ */
+export declare class UmbElementSearchProvider extends UmbControllerBase implements UmbSearchProvider<UmbElementSearchItemModel> {
+    #private;
+    /**
+     * Search for elements
+     * @param {UmbSearchRequestArgs} args - The arguments for the search
+     * @returns {Promise<UmbRepositoryResponse<UmbPagedModel<UmbElementSearchItemModel>>>} - The search results
+     * @memberof UmbElementSearchProvider
+     */
+    search(args: UmbSearchRequestArgs): Promise<UmbRepositoryResponse<UmbPagedModel<UmbElementSearchItemModel>>>;
+    destroy(): void;
+}
+export { UmbElementSearchProvider as api };

package/dist-cms/packages/elements/search/element.search-provider.js

@@ -0,0 +1,24 @@
+import { UmbElementSearchRepository } from './element-search.repository.js';
+import { UmbControllerBase } from '../../../libs/class-api/index.js';
+/**
+ * The element search provider
+ * @class UmbElementSearchProvider
+ * @augments {UmbControllerBase}
+ * @implements {UmbSearchProvider<UmbElementSearchItemModel>}
+ */
+export class UmbElementSearchProvider extends UmbControllerBase {
+    #repository = new UmbElementSearchRepository(this);
+    /**
+     * Search for elements
+     * @param {UmbSearchRequestArgs} args - The arguments for the search
+     * @returns {Promise<UmbRepositoryResponse<UmbPagedModel<UmbElementSearchItemModel>>>} - The search results
+     * @memberof UmbElementSearchProvider
+     */
+    search(args) {
+        return this.#repository.search(args);
+    }
+    destroy() {
+        this.#repository.destroy();
+    }
+}
+export { UmbElementSearchProvider as api };

package/dist-cms/packages/elements/search/global-search/constants.d.ts

@@ -0,0 +1 @@
+export declare const UMB_ELEMENT_GLOBAL_SEARCH_ALIAS = "Umb.GlobalSearch.Element";

package/dist-cms/packages/elements/search/global-search/constants.js

@@ -0,0 +1 @@
+export const UMB_ELEMENT_GLOBAL_SEARCH_ALIAS = 'Umb.GlobalSearch.Element';

package/dist-cms/packages/elements/search/global-search/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/elements/search/global-search/manifests.js

@@ -0,0 +1,23 @@
+import { UMB_ELEMENT_SEARCH_PROVIDER_ALIAS } from '../constants.js';
+import { UMB_ELEMENT_GLOBAL_SEARCH_ALIAS } from './constants.js';
+import { UMB_LIBRARY_SECTION_ALIAS } from '../../../library/index.js';
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '../../../core/section/index.js';
+export const manifests = [
+    {
+        name: 'Element Global Search',
+        alias: UMB_ELEMENT_GLOBAL_SEARCH_ALIAS,
+        type: 'globalSearch',
+        weight: 700,
+        meta: {
+            label: 'Elements',
+            searchProviderAlias: UMB_ELEMENT_SEARCH_PROVIDER_ALIAS,
+            sectionAlias: UMB_LIBRARY_SECTION_ALIAS,
+        },
+        conditions: [
+            {
+                alias: UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS,
+                match: UMB_LIBRARY_SECTION_ALIAS,
+            },
+        ],
+    },
+];

package/dist-cms/packages/elements/search/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/elements/search/manifests.js

@@ -0,0 +1,23 @@
+import { UMB_ELEMENT_ENTITY_TYPE } from '../entity.js';
+import { UMB_ELEMENT_SEARCH_PROVIDER_ALIAS } from './constants.js';
+import { manifests as globalSearchManifests } from './global-search/manifests.js';
+export const manifests = [
+    {
+        name: 'Element Search Provider',
+        alias: UMB_ELEMENT_SEARCH_PROVIDER_ALIAS,
+        type: 'searchProvider',
+        api: () => import('./element.search-provider.js'),
+        weight: 700,
+        meta: {
+            label: 'Elements',
+        },
+    },
+    {
+        name: 'Element Search Result Item',
+        alias: 'Umb.SearchResultItem.Element',
+        type: 'searchResultItem',
+        element: () => import('./element-search-result-item.element.js'),
+        forEntityTypes: [UMB_ELEMENT_ENTITY_TYPE],
+    },
+    ...globalSearchManifests,
+];

package/dist-cms/packages/elements/search/types.d.ts

@@ -0,0 +1,10 @@
+import type { UmbElementItemModel } from '../item/repository/types.js';
+export interface UmbElementSearchItemModel extends UmbElementItemModel {
+    name: string;
+    href: string;
+    ancestors: Array<UmbElementSearchAncestorModel>;
+}
+export interface UmbElementSearchAncestorModel {
+    unique: string;
+    name: string;
+}

package/dist-cms/packages/elements/search/types.js

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

package/dist-cms/packages/elements/tree/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const UMB_ELEMENT_TREE_ALIAS = "Umb.Tree.Element";
+export declare const UMB_ELEMENT_TREE_REPOSITORY_ALIAS = "Umb.Repository.Element.Tree";

package/dist-cms/packages/elements/tree/constants.js

@@ -0,0 +1,2 @@
+export const UMB_ELEMENT_TREE_ALIAS = 'Umb.Tree.Element';
+export const UMB_ELEMENT_TREE_REPOSITORY_ALIAS = 'Umb.Repository.Element.Tree';

package/dist-cms/packages/elements/tree/element-tree-item.context.d.ts

@@ -0,0 +1,15 @@
+import type { UmbElementTreeItemModel, UmbElementTreeRootModel } from './types.js';
+import { UmbDefaultTreeItemContext } from '../../core/tree/index.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
+export declare class UmbElementTreeItemContext extends UmbDefaultTreeItemContext<UmbElementTreeItemModel, UmbElementTreeRootModel> {
+    #private;
+    readonly name: import("rxjs").Observable<string | undefined>;
+    readonly icon: import("rxjs").Observable<string | undefined>;
+    readonly typeUnique: import("rxjs").Observable<string | undefined>;
+    readonly isDraft: import("rxjs").Observable<boolean | undefined>;
+    readonly flags: import("rxjs").Observable<import("../../core/entity-flag/index.js").UmbEntityFlag[]>;
+    readonly isTrashed: import("rxjs").Observable<boolean>;
+    constructor(host: UmbControllerHost);
+    setTreeItem(treeItem: UmbElementTreeItemModel | undefined): void;
+}
+export { UmbElementTreeItemContext as api };

package/dist-cms/packages/elements/tree/element-tree-item.context.js

@@ -0,0 +1,29 @@
+import { UmbElementItemDataResolver } from '../item/data-resolver/element-item-data-resolver.js';
+import { UmbDefaultTreeItemContext } from '../../core/tree/index.js';
+import { UmbIsTrashedEntityContext } from '../../core/recycle-bin/index.js';
+export class UmbElementTreeItemContext extends UmbDefaultTreeItemContext {
+    // TODO: Provide this together with the EntityContext, ideally this takes part via a extension-type [NL]
+    #isTrashedContext;
+    #item;
+    constructor(host) {
+        super(host);
+        // TODO: Provide this together with the EntityContext, ideally this takes part via a extension-type [NL]
+        this.#isTrashedContext = new UmbIsTrashedEntityContext(this);
+        this.#item = new UmbElementItemDataResolver(this);
+        this.name = this.#item.name;
+        this.icon = this.#item.icon;
+        this.typeUnique = this.#item.typeUnique;
+        this.isDraft = this.#item.isDraft;
+        this.flags = this.#item.flags;
+        // TODO: Move to API
+        this.isTrashed = this._treeItem.asObservablePart((item) => item?.isTrashed ?? false);
+        this.observe(this.isTrashed, (isTrashed) => {
+            this.#isTrashedContext.setIsTrashed(isTrashed);
+        });
+    }
+    setTreeItem(treeItem) {
+        super.setTreeItem(treeItem);
+        this.#item.setData(treeItem);
+    }
+}
+export { UmbElementTreeItemContext as api };

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

@@ -0,0 +1,24 @@
+import type { UmbElementTreeItemModel } from './types.js';
+import type { UmbElementTreeItemContext } from './element-tree-item.context.js';
+import { UmbTreeItemElementBase } from '../../core/tree/index.js';
+export declare class UmbElementTreeItemElement extends UmbTreeItemElementBase<UmbElementTreeItemModel, UmbElementTreeItemContext> {
+    #private;
+    set api(value: UmbElementTreeItemContext | undefined);
+    get api(): UmbElementTreeItemContext | undefined;
+    private _name;
+    /**
+     * @internal
+     * Indicates whether the document is a draft, this is controlled internally but present as an attribute as it affects styling.
+     */
+    protected _isDraft: boolean;
+    protected _extractFlags(item: UmbElementTreeItemModel | undefined): void;
+    protected _getIconName(): string | null | undefined;
+    renderLabel(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UmbElementTreeItemElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-element-tree-item': UmbElementTreeItemElement;
+    }
+}

package/dist-cms/packages/elements/tree/element-tree-item.element.js

@@ -0,0 +1,69 @@
+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 { classMap, css, customElement, html, property, state } from '../../../external/lit/index.js';
+import { UmbTreeItemElementBase } from '../../core/tree/index.js';
+let UmbElementTreeItemElement = class UmbElementTreeItemElement extends UmbTreeItemElementBase {
+    constructor() {
+        super(...arguments);
+        this._name = '';
+        /**
+         * @internal
+         * Indicates whether the document is a draft, this is controlled internally but present as an attribute as it affects styling.
+         */
+        this._isDraft = false;
+    }
+    #api;
+    set api(value) {
+        this.#api = value;
+        if (this.#api) {
+            this.observe(this.#api.name, (name) => (this._name = name || ''));
+            this.observe(this.#api.isDraft, (isDraft) => (this._isDraft = isDraft || false));
+            this.observe(this.#api.icon, (icon) => (this.#icon = icon || ''));
+            this.observe(this.#api.flags, (flags) => (this._flags = flags ?? []));
+        }
+        super.api = value;
+    }
+    get api() {
+        return this.#api;
+    }
+    #icon;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _extractFlags(item) {
+        // Empty on purpose and NOT calling super to prevent doing what the base does. [NL]
+    }
+    _getIconName() {
+        return this.#icon;
+    }
+    renderLabel() {
+        return html `<span id="label" slot="label" class=${classMap({ draft: this._isDraft })}>${this._name}</span>`;
+    }
+    static { this.styles = [
+        ...UmbTreeItemElementBase.styles,
+        css `
+			:host([draft]) #label {
+				opacity: 0.6;
+			}
+			:host([draft]) umb-icon {
+				opacity: 0.6;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbElementTreeItemElement.prototype, "api", null);
+__decorate([
+    state()
+], UmbElementTreeItemElement.prototype, "_name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'draft' })
+], UmbElementTreeItemElement.prototype, "_isDraft", void 0);
+UmbElementTreeItemElement = __decorate([
+    customElement('umb-element-tree-item')
+], UmbElementTreeItemElement);
+export { UmbElementTreeItemElement };
+export default UmbElementTreeItemElement;

package/dist-cms/packages/elements/tree/element-tree.repository.d.ts

@@ -0,0 +1,11 @@
+import type { UmbElementTreeChildrenOfRequestArgs, UmbElementTreeItemModel, UmbElementTreeRootItemsRequestArgs, UmbElementTreeRootModel } from './types.js';
+import { UmbTreeRepositoryBase } from '../../core/tree/index.js';
+import type { UmbApi } from '../../../libs/extension-api/index.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
+export declare class UmbElementTreeRepository extends UmbTreeRepositoryBase<UmbElementTreeItemModel, UmbElementTreeRootModel, UmbElementTreeRootItemsRequestArgs, UmbElementTreeChildrenOfRequestArgs> implements UmbApi {
+    constructor(host: UmbControllerHost);
+    requestTreeRoot(): Promise<{
+        data: UmbElementTreeRootModel;
+    }>;
+}
+export { UmbElementTreeRepository as api };

package/dist-cms/packages/elements/tree/element-tree.repository.js

@@ -0,0 +1,21 @@
+import { UMB_ELEMENT_ROOT_ENTITY_TYPE } from '../entity.js';
+import { UmbElementTreeServerDataSource } from './element.tree.server.data-source.js';
+import { UmbTreeRepositoryBase } from '../../core/tree/index.js';
+export class UmbElementTreeRepository extends UmbTreeRepositoryBase {
+    constructor(host) {
+        super(host, UmbElementTreeServerDataSource);
+    }
+    async requestTreeRoot() {
+        const { data: treeRootData } = await this._treeSource.getRootItems({ paging: { skip: 0, take: 0 } });
+        const hasChildren = treeRootData ? treeRootData.total > 0 : false;
+        const data = {
+            unique: null,
+            entityType: UMB_ELEMENT_ROOT_ENTITY_TYPE,
+            name: '#general_elements',
+            hasChildren,
+            isFolder: true,
+        };
+        return { data };
+    }
+}
+export { UmbElementTreeRepository as api };

package/dist-cms/packages/elements/tree/element-tree.server.request-manager.d.ts

@@ -0,0 +1,18 @@
+import type { UmbElementTreeChildrenOfRequestArgs, UmbElementTreeRootItemsRequestArgs } from './types.js';
+import { UmbManagementApiTreeDataRequestManager } from '../../management-api/index.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
+import type { ElementTreeItemResponseModel, PagedElementTreeItemResponseModel, SubsetElementTreeItemResponseModel } from '../../core/backend-api/index.js';
+import type { UmbManagementApiTreeAncestorsOfRequestArgs, UmbManagementApiTreeChildrenOfRequestArgs, UmbManagementApiTreeRootItemsRequestArgs, UmbManagementApiTreeSiblingsFromRequestArgs } from '../../management-api/index.js';
+interface UmbManagementApiElementTreeRootItemsRequestArgs extends UmbManagementApiTreeRootItemsRequestArgs, Pick<UmbElementTreeRootItemsRequestArgs, 'dataType'> {
+}
+interface UmbManagementApiElementTreeChildrenOfRequestArgs extends UmbManagementApiTreeChildrenOfRequestArgs, Pick<UmbElementTreeChildrenOfRequestArgs, 'dataType'> {
+}
+interface UmbManagementApiElementTreeSiblingsFromRequestArgs extends UmbManagementApiTreeSiblingsFromRequestArgs {
+    dataType?: {
+        unique: string;
+    };
+}
+export declare class UmbManagementApiElementTreeDataRequestManager extends UmbManagementApiTreeDataRequestManager<ElementTreeItemResponseModel, UmbManagementApiElementTreeRootItemsRequestArgs, PagedElementTreeItemResponseModel, UmbManagementApiElementTreeChildrenOfRequestArgs, PagedElementTreeItemResponseModel, UmbManagementApiTreeAncestorsOfRequestArgs, Array<ElementTreeItemResponseModel>, UmbManagementApiElementTreeSiblingsFromRequestArgs, SubsetElementTreeItemResponseModel> {
+    constructor(host: UmbControllerHost);
+}
+export {};

package/dist-cms/packages/elements/tree/element-tree.server.request-manager.js

@@ -0,0 +1,40 @@
+/* eslint-disable local-rules/no-direct-api-import */
+import { ElementService } from '../../core/backend-api/index.js';
+import { UmbManagementApiTreeDataRequestManager } from '../../management-api/index.js';
+export class UmbManagementApiElementTreeDataRequestManager extends UmbManagementApiTreeDataRequestManager {
+    constructor(host) {
+        super(host, {
+            getRootItems: (args) => ElementService.getTreeElementRoot({
+                query: {
+                    dataTypeId: args.dataType?.unique,
+                    foldersOnly: args.foldersOnly,
+                    skip: args.paging.skip,
+                    take: args.paging.take,
+                },
+            }),
+            getChildrenOf: (args) => ElementService.getTreeElementChildren({
+                query: {
+                    parentId: args.parent.unique,
+                    dataTypeId: args.dataType?.unique,
+                    foldersOnly: args.foldersOnly,
+                    skip: args.paging.skip,
+                    take: args.paging.take,
+                },
+            }),
+            getAncestorsOf: (args) => ElementService.getTreeElementAncestors({
+                query: {
+                    descendantId: args.treeItem.unique,
+                },
+            }),
+            getSiblingsFrom: (args) => ElementService.getTreeElementSiblings({
+                query: {
+                    dataTypeId: args.dataType?.unique,
+                    foldersOnly: args.foldersOnly,
+                    target: args.paging.target.unique,
+                    before: args.paging.takeBefore,
+                    after: args.paging.takeAfter,
+                },
+            }),
+        });
+    }
+}