@umbraco-cms/backoffice 16.3.3 → 16.4.0-rc

package/dist-cms/packages/documents/documents/item/document-item-data-resolver.d.ts

@@ -1,7 +1,9 @@
 import type { UmbDocumentItemModel } from './types.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { UmbEntityFlag } from '../../../core/entity-flag/index.js';
 import type { DocumentVariantStateModel } from '../../../core/backend-api/index.js';
+import { type Observable } from '../../../../libs/observable-api/index.js';
 type UmbDocumentItemDataResolverModel = Omit<UmbDocumentItemModel, 'parent' | 'hasChildren'>;
 /**
  * A controller for resolving data for a document item
@@ -11,12 +13,13 @@ type UmbDocumentItemDataResolverModel = Omit<UmbDocumentItemModel, 'parent' | 'h
  */
 export declare class UmbDocumentItemDataResolver<DataType extends UmbDocumentItemDataResolverModel> extends UmbControllerBase {
     #private;
-    readonly unique: import("rxjs").Observable<string | undefined>;
-    readonly icon: import("rxjs").Observable<string | undefined>;
-    readonly isTrashed: import("rxjs").Observable<boolean | undefined>;
-    readonly name: import("rxjs").Observable<string | undefined>;
-    readonly state: import("rxjs").Observable<string | undefined>;
-    readonly isDraft: import("rxjs").Observable<boolean | undefined>;
+    readonly unique: Observable<string | undefined>;
+    readonly icon: Observable<string | undefined>;
+    readonly isTrashed: Observable<boolean | undefined>;
+    readonly name: Observable<string | undefined>;
+    readonly state: Observable<DocumentVariantStateModel | null | undefined>;
+    readonly isDraft: Observable<boolean | undefined>;
+    readonly flags: Observable<UmbEntityFlag[]>;
     constructor(host: UmbControllerHost);
     /**
      * Get the current item

package/dist-cms/packages/documents/documents/item/document-item-data-resolver.js

@@ -1,7 +1,13 @@
 import { UmbDocumentVariantState } from '../types.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
-import { UmbBooleanState, UmbObjectState, UmbStringState } from '../../../../libs/observable-api/index.js';
+import { UmbArrayState, UmbBooleanState, UmbObjectState, UmbStringState, } from '../../../../libs/observable-api/index.js';
 import { UMB_VARIANT_CONTEXT } from '../../../core/variant/index.js';
+function isVariantsInvariant(variants) {
+    return variants?.[0]?.culture === null;
+}
+function findVariant(variants, culture) {
+    return variants.find((x) => x.culture === culture);
+}
 /**
  * A controller for resolving data for a document item
  * @exports
@@ -13,6 +19,7 @@ export class UmbDocumentItemDataResolver extends UmbControllerBase {
     #name;
     #state;
     #isDraft;
+    #flags;
     #variantContext;
     #fallbackCulture;
     #displayCulture;
@@ -28,6 +35,8 @@ export class UmbDocumentItemDataResolver extends UmbControllerBase {
         this.state = this.#state.asObservable();
         this.#isDraft = new UmbBooleanState(undefined);
         this.isDraft = this.#isDraft.asObservable();
+        this.#flags = new UmbArrayState([], (data) => data.alias);
+        this.flags = this.#flags.asObservable();
         this.consumeContext(UMB_VARIANT_CONTEXT, (context) => {
             this.#variantContext = context;
             this.#observeVariantContext();
@@ -94,8 +103,7 @@ export class UmbDocumentItemDataResolver extends UmbControllerBase {
      * @memberof UmbDocumentItemDataResolver
      */
     async getState() {
-        const variant = await this.#getCurrentVariant();
-        return variant?.state;
+        return await this.observe(this.state).asPromise();
     }
     /**
      * Get the isDraft of the item
@@ -125,36 +133,50 @@ export class UmbDocumentItemDataResolver extends UmbControllerBase {
         this.#setName();
         this.#setIsDraft();
         this.#setState();
+        this.#setFlags();
     }
-    async #setName() {
-        const variant = await this.#getCurrentVariant();
+    #setName() {
+        const variant = this.#getCurrentVariant();
         if (variant) {
             this.#name.setValue(variant.name);
             return;
         }
-        const fallbackName = this.#findVariant(this.#fallbackCulture)?.name;
-        this.#name.setValue(`(${fallbackName})`);
+        const variants = this.getData()?.variants;
+        if (variants) {
+            const fallbackName = findVariant(variants, this.#fallbackCulture)?.name;
+            this.#name.setValue(`(${fallbackName})`);
+        }
+        else {
+            this.#name.setValue(undefined);
+        }
     }
-    async #setIsDraft() {
-        const variant = await this.#getCurrentVariant();
+    #setIsDraft() {
+        const variant = this.#getCurrentVariant();
         const isDraft = variant?.state === UmbDocumentVariantState.DRAFT || false;
         this.#isDraft.setValue(isDraft);
     }
-    async #setState() {
-        const variant = await this.#getCurrentVariant();
+    #setState() {
+        const variant = this.#getCurrentVariant();
         const state = variant?.state || UmbDocumentVariantState.NOT_CREATED;
         this.#state.setValue(state);
     }
-    #findVariant(culture) {
-        return this.getData()?.variants.find((x) => x.culture === culture);
-    }
-    async #getCurrentVariant() {
-        if (this.#isInvariant()) {
-            return this.getData()?.variants?.[0];
+    #setFlags() {
+        const data = this.getData();
+        if (!data) {
+            this.#flags.setValue([]);
+            return;
         }
-        return this.#findVariant(this.#displayCulture);
-    }
-    #isInvariant() {
-        return this.getData()?.variants?.[0]?.culture === null;
+        const flags = data.flags ?? [];
+        const variantFlags = this.#getCurrentVariant()?.flags ?? [];
+        this.#flags.setValue([...flags, ...variantFlags]);
+    }
+    #getCurrentVariant() {
+        const variants = this.getData()?.variants;
+        if (!variants)
+            return undefined;
+        if (isVariantsInvariant(variants)) {
+            return variants[0];
+        }
+        return findVariant(variants, this.#displayCulture);
     }
 }

package/dist-cms/packages/documents/documents/item/repository/document-item.server.cache-invalidation.manager.js

@@ -7,6 +7,7 @@ export class UmbManagementApiDocumentItemDataCacheInvalidationManager extends Um
             /* The Document item model includes info about the Document Type.
             We need to invalidate the cache for both Document and DocumentType events. */
             eventSources: ['Umbraco:CMS:Document', 'Umbraco:CMS:DocumentType'],
+            eventTypes: ['Updated', 'Deleted', 'Trashed'],
         });
     }
     _onServerEvent(event) {

package/dist-cms/packages/documents/documents/item/repository/document-item.server.data-source.js

@@ -44,7 +44,9 @@ const mapper = (item) => {
                 culture: variant.culture || null,
                 name: variant.name,
                 state: variant.state,
+                flags: variant.flags,
             };
         }),
+        flags: item.flags,
     };
 };

package/dist-cms/packages/documents/documents/item/repository/types.d.ts

@@ -1,8 +1,9 @@
 import type { UmbDocumentEntityType } from '../../entity.js';
 import type { UmbEntityUnique } from '../../../../core/entity/index.js';
+import type { UmbEntityFlag, UmbEntityWithFlags } from '../../../../core/entity-flag/index.js';
 import type { DocumentVariantStateModel } from '../../../../core/backend-api/index.js';
 import type { UmbReferenceByUnique } from '../../../../core/models/index.js';
-export interface UmbDocumentItemModel {
+export interface UmbDocumentItemModel extends UmbEntityWithFlags {
     documentType: {
         unique: string;
         icon: string;
@@ -23,4 +24,5 @@ export interface UmbDocumentItemVariantModel {
     name: string;
     culture: string | null;
     state: DocumentVariantStateModel | null;
+    flags: Array<UmbEntityFlag>;
 }

package/dist-cms/packages/documents/documents/manifests.js

@@ -2,6 +2,7 @@ import { manifests as auditLogManifests } from './audit-log/manifests.js';
 import { manifests as collectionManifests } from './collection/manifests.js';
 import { manifests as entityActionManifests } from './entity-actions/manifests.js';
 import { manifests as entityBulkActionManifests } from './entity-bulk-actions/manifests.js';
+import { manifests as entitySignManifests } from './entity-sign/manifests.js';
 import { manifests as globalContextManifests } from './global-contexts/manifests.js';
 import { manifests as itemManifests } from './item/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
@@ -23,6 +24,7 @@ export const manifests = [
     ...collectionManifests,
     ...entityActionManifests,
     ...entityBulkActionManifests,
+    ...entitySignManifests,
     ...globalContextManifests,
     ...itemManifests,
     ...menuManifests,

package/dist-cms/packages/documents/documents/publishing/publish/entity-bulk-action/publish.bulk-action.js

@@ -49,6 +49,7 @@ export class UmbDocumentPublishEntityBulkAction extends UmbEntityBulkActionBase
                 segment: null,
                 scheduledPublishDate: null,
                 scheduledUnpublishDate: null,
+                flags: [],
             },
             unique: new UmbVariantId(language.unique, null).toString(),
             culture: language.unique,

package/dist-cms/packages/documents/documents/publishing/repository/document-publishing.server.data-source.js

@@ -135,6 +135,7 @@ export class UmbDocumentPublishingServerDataSource {
                     updateDate: variant.updateDate,
                     scheduledPublishDate: variant.scheduledPublishDate || null,
                     scheduledUnpublishDate: variant.scheduledUnpublishDate || null,
+                    flags: variant.flags,
                 };
             }),
             template: data.template ? { unique: data.template.id } : null,
@@ -144,6 +145,7 @@ export class UmbDocumentPublishingServerDataSource {
                 icon: data.documentType.icon,
             },
             isTrashed: data.isTrashed,
+            flags: data.flags,
         };
         return { data: document };
     }

package/dist-cms/packages/documents/documents/publishing/unpublish/entity-bulk-action/unpublish.bulk-action.js

@@ -48,6 +48,7 @@ export class UmbDocumentUnpublishEntityBulkAction extends UmbEntityBulkActionBas
                 segment: null,
                 scheduledPublishDate: null,
                 scheduledUnpublishDate: null,
+                flags: [],
             },
             unique: new UmbVariantId(language.unique, null).toString(),
             culture: language.unique,

package/dist-cms/packages/documents/documents/recycle-bin/tree/data/document-recycle-bin-tree.server.data-source.js

@@ -64,10 +64,13 @@ const mapper = (item) => {
                 culture: variant.culture || null,
                 segment: null, // TODO: add segment to the backend API?
                 state: variant.state,
+                flags: variant.flags ?? [],
             };
         }),
         name: item.variants[0]?.name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
         isFolder: false,
         createDate: item.createDate,
+        // TODO: Recycle bin items should have flags, but the API does not return any at the moment. [NL]
+        flags: item.flags ?? [],
     };
 };

package/dist-cms/packages/documents/documents/reference/repository/document-reference-response.management-api.mapping.js

@@ -20,6 +20,7 @@ export class UmbDocumentReferenceResponseManagementApiDataMapping extends UmbCon
                     culture: null,
                     name: data.name ?? '',
                     state: data.published ? DocumentVariantStateModel.PUBLISHED : null,
+                    flags: [],
                 },
             ],
             unique: data.id,

package/dist-cms/packages/documents/documents/repository/detail/document-detail.server.data-source.js

@@ -40,6 +40,7 @@ export class UmbDocumentServerDataSource extends UmbControllerBase {
             isTrashed: false,
             values: [],
             variants: [],
+            flags: [],
         };
         const scaffold = umbDeepMerge(preset, defaultData);
         return { data: scaffold };
@@ -82,6 +83,7 @@ export class UmbDocumentServerDataSource extends UmbControllerBase {
                     updateDate: variant.updateDate,
                     scheduledPublishDate: variant.scheduledPublishDate || null,
                     scheduledUnpublishDate: variant.scheduledUnpublishDate || null,
+                    flags: variant.flags,
                 };
             }),
             template: data.template ? { unique: data.template.id } : null,
@@ -91,6 +93,7 @@ export class UmbDocumentServerDataSource extends UmbControllerBase {
                 icon: data.documentType.icon,
             },
             isTrashed: data.isTrashed,
+            flags: data.flags,
         };
         return { data: document };
     }

package/dist-cms/packages/documents/documents/search/document-search.server.data-source.js

@@ -54,8 +54,10 @@ export class UmbDocumentSearchServerDataSource {
                             culture: variant.culture || null,
                             name: variant.name,
                             state: variant.state,
+                            flags: variant.flags,
                         };
                     }),
+                    flags: item.flags,
                 };
             });
             return { data: { items: mappedItems, total: data.total } };

package/dist-cms/packages/documents/documents/tree/document-tree.server.data-source.js

@@ -71,10 +71,12 @@ const mapper = (item) => {
                 culture: variant.culture || null,
                 segment: null, // TODO: add segment to the backend API?
                 state: variant.state,
+                flags: variant.flags,
             };
         }),
         name: item.variants[0]?.name, // TODO: this is not correct. We need to get it from the variants. This is a temp solution.
         isFolder: false,
         createDate: item.createDate,
+        flags: item.flags,
     };
 };

package/dist-cms/packages/documents/documents/tree/tree-item/document-tree-item.context.d.ts

@@ -6,6 +6,7 @@ export declare class UmbDocumentTreeItemContext extends UmbDefaultTreeItemContex
     readonly name: import("rxjs").Observable<string | undefined>;
     readonly icon: 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 ancestors: import("rxjs").Observable<import("../../../../core/entity/index.js").UmbEntityModel[]>;
     readonly isTrashed: import("rxjs").Observable<boolean>;
     constructor(host: UmbControllerHost);

package/dist-cms/packages/documents/documents/tree/tree-item/document-tree-item.context.js

@@ -16,6 +16,7 @@ export class UmbDocumentTreeItemContext extends UmbDefaultTreeItemContext {
         this.name = this.#item.name;
         this.icon = this.#item.icon;
         this.isDraft = this.#item.isDraft;
+        this.flags = this.#item.flags;
         this.ancestors = this._treeItem.asObservablePart((item) => item?.ancestors ?? []);
         this.isTrashed = this._treeItem.asObservablePart((item) => item?.isTrashed ?? false);
         this.observe(this.isTrashed, (isTrashed) => {

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

@@ -6,9 +6,13 @@ export declare class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<U
     get api(): UmbDocumentTreeItemContext | undefined;
     set api(value: UmbDocumentTreeItemContext | undefined);
     private _name;
-    private _isDraft;
-    private _icon;
-    renderIconContainer(): import("lit-html").TemplateResult<1>;
+    /**
+     * @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: UmbDocumentTreeItemModel | undefined): void;
+    protected _getIconName(): string | null | undefined;
     renderLabel(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/documents/documents/tree/tree-item/document-tree-item.element.js

@@ -4,15 +4,17 @@ 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 { css, html, nothing, customElement, classMap, state, property } from '../../../../../external/lit/index.js';
-import { UmbTextStyles } from '../../../../core/style/index.js';
+import { css, html, customElement, state, property } from '../../../../../external/lit/index.js';
 import { UmbTreeItemElementBase } from '../../../../core/tree/index.js';
 let UmbDocumentTreeItemElement = class UmbDocumentTreeItemElement 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;
-        this._icon = '';
     }
     #api;
     get api() {
@@ -23,98 +25,29 @@ let UmbDocumentTreeItemElement = class UmbDocumentTreeItemElement extends UmbTre
         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.icon, (icon) => (this.#icon = icon || ''));
+            this.observe(this.#api.flags, (flags) => (this._flags = flags || ''));
         }
         super.api = value;
     }
-    renderIconContainer() {
-        const icon = this._icon;
-        return html `
-			<span id="icon-container" slot="icon" class=${classMap({ draft: this._isDraft })}>
-				${icon
-            ? html `
-							<umb-icon id="icon" slot="icon" name="${this._getIconToRender(icon)}"></umb-icon>
-							${this.#renderStateIcon()}
-						`
-            : nothing}
-			</span>
-		`;
+    #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]
     }
-    renderLabel() {
-        return html `<span id="label" slot="label" class=${classMap({ draft: this._isDraft })}>${this._name}</span> `;
-    }
-    #renderStateIcon() {
-        if (this.item?.isProtected) {
-            return this.#renderIsProtectedIcon();
-        }
-        if (this.item?.documentType.collection) {
-            return this.#renderIsCollectionIcon();
-        }
-        return nothing;
-    }
-    #renderIsCollectionIcon() {
-        return html `<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
+    _getIconName() {
+        return this.#icon;
     }
-    #renderIsProtectedIcon() {
-        return html `<umb-icon id="state-icon" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
+    renderLabel() {
+        return html `<span id="label" slot="label">${this._name}</span> `;
     }
     static { this.styles = [
-        UmbTextStyles,
+        ...UmbTreeItemElementBase.styles,
         css `
-			#icon-container {
-				position: relative;
-			}
-
-			#icon {
-				vertical-align: middle;
-			}
-
-			#label {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			#state-icon {
-				position: absolute;
-				bottom: -5px;
-				right: -5px;
-				font-size: 10px;
-				background: var(--uui-color-surface);
-				width: 14px;
-				height: 14px;
-				border-radius: 100%;
-				line-height: 14px;
-			}
-
-			:hover #state-icon {
-				background: var(--uui-color-surface-emphasis);
-			}
-
-			/** Active */
-			[active] #state-icon {
-				background: var(--uui-color-current);
-			}
-
-			[active]:hover #state-icon {
-				background: var(--uui-color-current-emphasis);
-			}
-
-			/** Selected */
-			[selected] #state-icon {
-				background-color: var(--uui-color-selected);
-			}
-
-			[selected]:hover #state-icon {
-				background-color: var(--uui-color-selected-emphasis);
-			}
-
-			/** Disabled */
-			[disabled] #state-icon {
-				background-color: var(--uui-color-disabled);
+			:host([draft]) #label {
+				opacity: 0.6;
 			}
-
-			.draft {
+			:host([draft]) umb-icon {
 				opacity: 0.6;
 			}
 		`,
@@ -127,11 +60,8 @@ __decorate([
     state()
 ], UmbDocumentTreeItemElement.prototype, "_name", void 0);
 __decorate([
-    state()
+    property({ type: Boolean, reflect: true, attribute: 'draft' })
 ], UmbDocumentTreeItemElement.prototype, "_isDraft", void 0);
-__decorate([
-    state()
-], UmbDocumentTreeItemElement.prototype, "_icon", void 0);
 UmbDocumentTreeItemElement = __decorate([
     customElement('umb-document-tree-item')
 ], UmbDocumentTreeItemElement);

package/dist-cms/packages/documents/documents/tree/types.d.ts

@@ -3,7 +3,8 @@ import type { UmbTreeChildrenOfRequestArgs, UmbTreeItemModel, UmbTreeRootItemsRe
 import type { DocumentVariantStateModel } from '../../../core/backend-api/index.js';
 import type { UmbReferenceByUnique } from '../../../core/models/index.js';
 import type { UmbEntityModel } from '../../../core/entity/index.js';
-export interface UmbDocumentTreeItemModel extends UmbTreeItemModel {
+import type { UmbEntityFlag, UmbEntityWithFlags } from '../../../core/entity-flag/index.js';
+export interface UmbDocumentTreeItemModel extends Omit<UmbTreeItemModel, 'flags'>, UmbEntityWithFlags {
     ancestors: Array<UmbEntityModel>;
     entityType: UmbDocumentEntityType;
     noAccess: boolean;
@@ -25,6 +26,7 @@ export interface UmbDocumentTreeItemVariantModel {
     culture: string | null;
     segment: string | null;
     state: DocumentVariantStateModel | null;
+    flags: Array<UmbEntityFlag>;
 }
 export interface UmbDocumentTreeRootItemsRequestArgs extends UmbTreeRootItemsRequestArgs {
     dataType?: {

package/dist-cms/packages/documents/documents/user-permissions/document/manifests.js

@@ -43,7 +43,7 @@ const permissions = [
         forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
         meta: {
             verbs: ['Umb.Document.Create'],
-            label: '#actions_create',
+            label: '#actions_createFor',
             description: '#actionDescriptions_create',
         },
     },

package/dist-cms/packages/documents/documents/utils.js

@@ -4,6 +4,7 @@ const variantStatesOrder = {
     [DocumentVariantStateModel.PUBLISHED]: 1,
     [DocumentVariantStateModel.DRAFT]: 2,
     [DocumentVariantStateModel.NOT_CREATED]: 3,
+    [DocumentVariantStateModel.TRASHED]: 4,
 };
 const getVariantStateOrderValue = (variant) => {
     const fallbackOrder = 99;

package/dist-cms/packages/documents/documents/workspace/constants.js

@@ -11,4 +11,5 @@ export const UMB_DOCUMENT_DETAIL_MODEL_VARIANT_SCAFFOLD = {
     updateDate: null,
     scheduledPublishDate: null,
     scheduledUnpublishDate: null,
+    flags: [],
 };

package/dist-cms/packages/documents/documents/workspace/document-workspace-editor.element.d.ts

@@ -3,9 +3,10 @@ export declare class UmbDocumentWorkspaceEditorElement extends UmbLitElement {
     #private;
     private _splitViewElement;
     private _routes?;
+    private _loading?;
     constructor();
     private _gotWorkspaceRoute;
-    render(): "" | import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export default UmbDocumentWorkspaceEditorElement;

package/dist-cms/packages/documents/documents/workspace/document-workspace-editor.element.js

@@ -24,6 +24,7 @@ let UmbDocumentWorkspaceEditorElement = class UmbDocumentWorkspaceEditorElement
         // TODO: Refactor: when having a split view/variants context token, we can rename the split view/variants component to a generic and make this component generic as well. [NL]
         this._splitViewElement = new UmbDocumentWorkspaceSplitViewElement();
         this.#isForbidden = false;
+        this._loading = true;
         this._gotWorkspaceRoute = (e) => {
             this.#workspaceRoute = e.target.absoluteRouterPath;
             this.#workspaceContext?.splitView.setWorkspaceRoute(this.#workspaceRoute);
@@ -45,10 +46,13 @@ let UmbDocumentWorkspaceEditorElement = class UmbDocumentWorkspaceEditorElement
                 this.#isForbidden = isForbidden ?? false;
                 this.#generateRoutes();
             }, '_observeForbidden');
+            this.observe(this.#workspaceContext?.loading.isOn, (loading) => {
+                this._loading = loading ?? false;
+            }, '_observeLoading');
         });
     }
     #generateRoutes() {
-        if (!this.#variants || !this.#appCulture) {
+        if (!this.#variants || this.#variants.length === 0 || !this.#appCulture) {
             this._routes = [];
             return;
         }
@@ -116,9 +120,9 @@ let UmbDocumentWorkspaceEditorElement = class UmbDocumentWorkspaceEditorElement
         this._routes = routes;
     }
     render() {
-        return this._routes
+        return !this._loading && this._routes
             ? html `<umb-router-slot .routes=${this._routes} @init=${this._gotWorkspaceRoute}></umb-router-slot>`
-            : '';
+            : html `<umb-view-loader></umb-view-loader>`;
     }
     static { this.styles = [
         UmbTextStyles,
@@ -134,6 +138,9 @@ let UmbDocumentWorkspaceEditorElement = class UmbDocumentWorkspaceEditorElement
 __decorate([
     state()
 ], UmbDocumentWorkspaceEditorElement.prototype, "_routes", void 0);
+__decorate([
+    state()
+], UmbDocumentWorkspaceEditorElement.prototype, "_loading", void 0);
 UmbDocumentWorkspaceEditorElement = __decorate([
     customElement('umb-document-workspace-editor')
 ], UmbDocumentWorkspaceEditorElement);

package/dist-cms/packages/documents/documents/workspace/document-workspace-split-view-variant-selector.element.d.ts

@@ -1,6 +1,5 @@
 import type { UmbDocumentVariantOptionModel } from '../types.js';
 import { UmbWorkspaceSplitViewVariantSelectorElement } from '../../../core/workspace/index.js';
-declare const elementName = "umb-document-workspace-split-view-variant-selector";
 export declare class UmbDocumentWorkspaceSplitViewVariantSelectorElement extends UmbWorkspaceSplitViewVariantSelectorElement<UmbDocumentVariantOptionModel> {
     #private;
     protected _variantSorter: (a: UmbDocumentVariantOptionModel, b: UmbDocumentVariantOptionModel) => number;
@@ -10,7 +9,6 @@ export declare class UmbDocumentWorkspaceSplitViewVariantSelectorElement extends
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [elementName]: UmbDocumentWorkspaceSplitViewVariantSelectorElement;
+        'umb-document-workspace-split-view-variant-selector': UmbDocumentWorkspaceSplitViewVariantSelectorElement;
     }
 }
-export {};

package/dist-cms/packages/documents/documents/workspace/document-workspace-split-view-variant-selector.element.js

@@ -9,7 +9,6 @@ import { UMB_DOCUMENT_PUBLISHING_WORKSPACE_CONTEXT } from '../publishing/index.j
 import { customElement, html, state } from '../../../../external/lit/index.js';
 import { DocumentVariantStateModel } from '../../../core/backend-api/index.js';
 import { UmbWorkspaceSplitViewVariantSelectorElement } from '../../../core/workspace/index.js';
-const elementName = 'umb-document-workspace-split-view-variant-selector';
 let UmbDocumentWorkspaceSplitViewVariantSelectorElement = class UmbDocumentWorkspaceSplitViewVariantSelectorElement extends UmbWorkspaceSplitViewVariantSelectorElement {
     #documentPublishingWorkspaceContext;
     #publishStateLocalizationMap;
@@ -25,6 +24,7 @@ let UmbDocumentWorkspaceSplitViewVariantSelectorElement = class UmbDocumentWorks
             // We should also make our own state model for this
             [DocumentVariantStateModel.PUBLISHED_PENDING_CHANGES]: 'content_published',
             [DocumentVariantStateModel.NOT_CREATED]: 'content_notCreated',
+            [DocumentVariantStateModel.TRASHED]: 'mediaPicker_trashed',
         };
         this.consumeContext(UMB_DOCUMENT_PUBLISHING_WORKSPACE_CONTEXT, (instance) => {
             this.#documentPublishingWorkspaceContext = instance;
@@ -56,6 +56,6 @@ __decorate([
     state()
 ], UmbDocumentWorkspaceSplitViewVariantSelectorElement.prototype, "_variantsWithPendingChanges", void 0);
 UmbDocumentWorkspaceSplitViewVariantSelectorElement = __decorate([
-    customElement(elementName)
+    customElement('umb-document-workspace-split-view-variant-selector')
 ], UmbDocumentWorkspaceSplitViewVariantSelectorElement);
 export { UmbDocumentWorkspaceSplitViewVariantSelectorElement };

package/dist-cms/packages/documents/documents/workspace/document-workspace-split-view.element.d.ts

@@ -7,6 +7,7 @@ export declare class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement
     private _variants?;
     private _icon?;
     private _overrides?;
+    private _loading;
     constructor();
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];