@umbraco-cms/backoffice 14.0.0--preview007-2aa9121f → 14.0.0--preview007-bcd459cf

package/dist-cms/packages/core/components/split-panel/split-panel.element.js

@@ -0,0 +1,298 @@
+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;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _UmbSplitPanelElement_instances, _UmbSplitPanelElement_lockedPanelWidth, _UmbSplitPanelElement_resizeObserver, _UmbSplitPanelElement_SNAP_THRESHOLD, _UmbSplitPanelElement_hasBothPanels_get, _UmbSplitPanelElement_hasInitialized, _UmbSplitPanelElement_clamp, _UmbSplitPanelElement_onResize, _UmbSplitPanelElement_setPosition, _UmbSplitPanelElement_updateSplit, _UmbSplitPanelElement_onDragStart, _UmbSplitPanelElement_disconnect, _UmbSplitPanelElement_connect, _UmbSplitPanelElement_onSlotChanged;
+import { LitElement, css, customElement, html, property, query, state, } from '../../../../external/lit/index.js';
+/**
+ * Custom element for a split panel with adjustable divider.
+ * @element umb-split-panel
+ * @slot start - Content for the start panel.
+ * @slot end - Content for the end panel.
+ * @cssprop --umb-split-panel-initial-position - Initial position of the divider.
+ * @cssprop --umb-split-panel-start-min-width - Minimum width of the start panel.
+ * @cssprop --umb-split-panel-end-min-width - Minimum width of the end panel.
+ * @cssprop --umb-split-panel-divider-touch-area-width - Width of the divider touch area.
+ * @cssprop --umb-split-panel-divider-width - Width of the divider.
+ * @cssprop --umb-split-panel-divider-color - Color of the divider.
+ */
+let UmbSplitPanelElement = class UmbSplitPanelElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        _UmbSplitPanelElement_instances.add(this);
+        /**
+         * Locking mode for the split panel.
+         * Possible values: "start", "end", "none" (default).
+         */
+        this.lock = 'none';
+        /**
+         * Initial position of the divider.
+         * Pixel or percent value: e.g., "100px" or "25%".
+         * Defaults to a CSS variable if not set: "var(--umb-split-panel-initial-position) which defaults to 50%".
+         */
+        this.position = 'var(--umb-split-panel-initial-position)';
+        //TODO: Add support for negative values (relative to end of container) similar to snap points.
+        /** Width of the locked panel when in "start" or "end" lock mode */
+        _UmbSplitPanelElement_lockedPanelWidth.set(this, 0);
+        /** Resize observer for tracking container size changes. */
+        _UmbSplitPanelElement_resizeObserver.set(this, void 0);
+        /** Pixel value for the snap threshold. Determines how close the divider needs to be to a snap point to snap to it. */
+        _UmbSplitPanelElement_SNAP_THRESHOLD.set(this, 25);
+        this._hasStartPanel = false;
+        this._hasEndPanel = false;
+        _UmbSplitPanelElement_hasInitialized.set(this, false);
+        _UmbSplitPanelElement_onDragStart.set(this, (event) => {
+            event.preventDefault();
+            const move = (event) => {
+                const { clientX } = event;
+                const { left, width } = this.mainElement.getBoundingClientRect();
+                const localPos = __classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_clamp).call(this, clientX - left, 0, width);
+                const mappedPos = mapXAxisToSnap(localPos, width);
+                __classPrivateFieldSet(this, _UmbSplitPanelElement_lockedPanelWidth, this.lock === 'start' ? mappedPos : width - mappedPos, "f");
+                __classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_setPosition).call(this, mappedPos);
+            };
+            function stop() {
+                document.removeEventListener('pointermove', move);
+                document.removeEventListener('pointerup', stop);
+            }
+            const mapXAxisToSnap = (xPos, containerWidth) => {
+                const snaps = this.snap?.split(' ');
+                if (!snaps)
+                    return xPos;
+                const snapsInPixels = snaps.map((snap) => {
+                    let snapPx = parseFloat(snap);
+                    if (snap.endsWith('%')) {
+                        snapPx = (snapPx / 100) * containerWidth;
+                    }
+                    if (snap.startsWith('-')) {
+                        snapPx = containerWidth + snapPx;
+                    }
+                    return snapPx;
+                });
+                const closestSnap = snapsInPixels.reduce((prev, curr) => {
+                    return Math.abs(curr - xPos) < Math.abs(prev - xPos) ? curr : prev;
+                });
+                if (closestSnap < xPos + __classPrivateFieldGet(this, _UmbSplitPanelElement_SNAP_THRESHOLD, "f") && closestSnap > xPos - __classPrivateFieldGet(this, _UmbSplitPanelElement_SNAP_THRESHOLD, "f")) {
+                    xPos = closestSnap;
+                }
+                return xPos;
+            };
+            document.addEventListener('pointermove', move, { passive: true });
+            document.addEventListener('pointerup', stop);
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        __classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_disconnect).call(this);
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (!__classPrivateFieldGet(this, _UmbSplitPanelElement_hasInitialized, "f"))
+            return;
+        if (_changedProperties.has('position')) {
+            if (this.lock !== 'none') {
+                const { width } = this.mainElement.getBoundingClientRect();
+                let pos = parseFloat(this.position);
+                if (this.position.endsWith('%')) {
+                    pos = (pos / 100) * width;
+                }
+                const lockedPanelWidth = this.lock === 'start' ? pos : width - pos;
+                __classPrivateFieldSet(this, _UmbSplitPanelElement_lockedPanelWidth, lockedPanelWidth, "f");
+            }
+            __classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_updateSplit).call(this);
+        }
+    }
+    render() {
+        console.log('render', this._hasStartPanel, this._hasEndPanel);
+        return html `
+			<div id="main">
+				<slot
+					name="start"
+					@slotchange=${__classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_onSlotChanged)}
+					style="width: ${this._hasStartPanel ? '100%' : '0'}"></slot>
+				<div id="divider">
+					<div id="divider-touch-area" tabindex="0"></div>
+				</div>
+				<slot name="end" @slotchange=${__classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_onSlotChanged)} style="width: ${this._hasEndPanel ? '100%' : '0'}"></slot>
+			</div>
+		`;
+    }
+};
+_UmbSplitPanelElement_lockedPanelWidth = new WeakMap();
+_UmbSplitPanelElement_resizeObserver = new WeakMap();
+_UmbSplitPanelElement_SNAP_THRESHOLD = new WeakMap();
+_UmbSplitPanelElement_hasInitialized = new WeakMap();
+_UmbSplitPanelElement_onDragStart = new WeakMap();
+_UmbSplitPanelElement_instances = new WeakSet();
+_UmbSplitPanelElement_hasBothPanels_get = function _UmbSplitPanelElement_hasBothPanels_get() {
+    return this._hasStartPanel && this._hasEndPanel;
+};
+_UmbSplitPanelElement_clamp = function _UmbSplitPanelElement_clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+};
+_UmbSplitPanelElement_onResize = function _UmbSplitPanelElement_onResize(entries) {
+    const mainContainerWidth = entries[0].contentRect.width;
+    if (this.lock === 'start') {
+        __classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_setPosition).call(this, __classPrivateFieldGet(this, _UmbSplitPanelElement_lockedPanelWidth, "f"));
+    }
+    if (this.lock === 'end') {
+        __classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_setPosition).call(this, mainContainerWidth - __classPrivateFieldGet(this, _UmbSplitPanelElement_lockedPanelWidth, "f"));
+    }
+};
+_UmbSplitPanelElement_setPosition = function _UmbSplitPanelElement_setPosition(pos) {
+    const { width } = this.mainElement.getBoundingClientRect();
+    const localPos = __classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_clamp).call(this, pos, 0, width);
+    const percentagePos = (localPos / width) * 100;
+    this.position = percentagePos + '%';
+};
+_UmbSplitPanelElement_updateSplit = function _UmbSplitPanelElement_updateSplit() {
+    // If lock is none
+    let maxStartWidth = this.position;
+    let maxEndWidth = '1fr';
+    if (this.lock === 'start') {
+        maxStartWidth = __classPrivateFieldGet(this, _UmbSplitPanelElement_lockedPanelWidth, "f") + 'px';
+        maxEndWidth = `1fr`;
+    }
+    if (this.lock === 'end') {
+        maxStartWidth = `1fr`;
+        maxEndWidth = __classPrivateFieldGet(this, _UmbSplitPanelElement_lockedPanelWidth, "f") + 'px';
+    }
+    this.mainElement.style.gridTemplateColumns = `
+      minmax(var(--umb-split-panel-start-min-width), ${maxStartWidth})
+      0px
+      minmax(var(--umb-split-panel-end-min-width), ${maxEndWidth})
+    `;
+};
+_UmbSplitPanelElement_disconnect = function _UmbSplitPanelElement_disconnect() {
+    __classPrivateFieldGet(this, _UmbSplitPanelElement_resizeObserver, "f")?.unobserve(this);
+    this.dividerTouchAreaElement.removeEventListener('pointerdown', __classPrivateFieldGet(this, _UmbSplitPanelElement_onDragStart, "f"));
+    this.dividerTouchAreaElement.removeEventListener('touchstart', __classPrivateFieldGet(this, _UmbSplitPanelElement_onDragStart, "f"));
+    this.dividerElement.style.display = 'none';
+    this.mainElement.style.display = 'flex';
+    __classPrivateFieldSet(this, _UmbSplitPanelElement_hasInitialized, false, "f");
+};
+_UmbSplitPanelElement_connect = async function _UmbSplitPanelElement_connect() {
+    __classPrivateFieldSet(this, _UmbSplitPanelElement_hasInitialized, true, "f");
+    __classPrivateFieldSet(this, _UmbSplitPanelElement_resizeObserver, new ResizeObserver(__classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_onResize).bind(this)), "f");
+    this.mainElement.style.display = 'grid';
+    this.mainElement.style.gridTemplateColumns = `${this.position} 0px 1fr`;
+    this.dividerElement.style.display = 'unset';
+    this.dividerTouchAreaElement.addEventListener('pointerdown', __classPrivateFieldGet(this, _UmbSplitPanelElement_onDragStart, "f"));
+    this.dividerTouchAreaElement.addEventListener('touchstart', __classPrivateFieldGet(this, _UmbSplitPanelElement_onDragStart, "f"), { passive: false });
+    // Wait for the next frame to get the correct position of the divider.
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    const { left: dividerLeft } = this.shadowRoot.querySelector('#divider').getBoundingClientRect();
+    const { left: mainLeft, width: mainWidth } = this.mainElement.getBoundingClientRect();
+    const percentagePos = ((dividerLeft - mainLeft) / mainWidth) * 100;
+    this.position = `${percentagePos}%`;
+    __classPrivateFieldGet(this, _UmbSplitPanelElement_resizeObserver, "f")?.observe(this);
+};
+_UmbSplitPanelElement_onSlotChanged = function _UmbSplitPanelElement_onSlotChanged(event) {
+    const slot = event.target;
+    const name = slot.name;
+    if (name === 'start') {
+        this._hasStartPanel = slot.assignedElements().length > 0;
+    }
+    if (name === 'end') {
+        this._hasEndPanel = slot.assignedElements().length > 0;
+    }
+    if (!__classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "a", _UmbSplitPanelElement_hasBothPanels_get)) {
+        if (__classPrivateFieldGet(this, _UmbSplitPanelElement_hasInitialized, "f")) {
+            __classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_disconnect).call(this);
+        }
+        return;
+    }
+    __classPrivateFieldGet(this, _UmbSplitPanelElement_instances, "m", _UmbSplitPanelElement_connect).call(this);
+};
+UmbSplitPanelElement.styles = css `
+		:host {
+			display: contents;
+			--umb-split-panel-initial-position: 50%;
+			--umb-split-panel-start-min-width: 0;
+			--umb-split-panel-end-min-width: 0;
+
+			--umb-split-panel-divider-touch-area-width: 20px;
+			--umb-split-panel-divider-width: 1px;
+			--umb-split-panel-divider-color: transparent;
+		}
+		slot {
+			overflow: hidden;
+			display: block;
+		}
+		#main {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			position: relative;
+			z-index: 0;
+			overflow: hidden;
+		}
+		#divider {
+			height: 100%;
+			position: relative;
+			z-index: 999999;
+			display: none;
+		}
+		#divider-touch-area {
+			position: absolute;
+			top: 0;
+			left: 0;
+			height: 100%;
+			width: var(--umb-split-panel-divider-touch-area-width);
+			transform: translateX(-50%);
+			cursor: col-resize;
+		}
+		/* Do we want a line that shows the divider? */
+		#divider::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 50%;
+			width: var(--umb-split-panel-divider-width);
+			height: 100%;
+			transform: round(translateX(-50%));
+			background-color: var(--umb-split-panel-divider-color);
+			z-index: -1;
+		}
+	`;
+__decorate([
+    query('#main')
+], UmbSplitPanelElement.prototype, "mainElement", void 0);
+__decorate([
+    query('#divider-touch-area')
+], UmbSplitPanelElement.prototype, "dividerTouchAreaElement", void 0);
+__decorate([
+    query('#divider')
+], UmbSplitPanelElement.prototype, "dividerElement", void 0);
+__decorate([
+    property({ type: String })
+], UmbSplitPanelElement.prototype, "snap", void 0);
+__decorate([
+    property({ type: String })
+], UmbSplitPanelElement.prototype, "lock", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], UmbSplitPanelElement.prototype, "position", void 0);
+__decorate([
+    state()
+], UmbSplitPanelElement.prototype, "_hasStartPanel", void 0);
+__decorate([
+    state()
+], UmbSplitPanelElement.prototype, "_hasEndPanel", void 0);
+UmbSplitPanelElement = __decorate([
+    customElement('umb-split-panel')
+], UmbSplitPanelElement);
+export { UmbSplitPanelElement };

package/dist-cms/packages/core/debug/debug.element.d.ts

@@ -9,8 +9,8 @@ export declare class UmbDebugElement extends UmbLitElement {
     private _debugPaneOpen;
     private _modalContext?;
     constructor();
-    connectedCallback(): void;
     render(): TemplateResult<1> | typeof nothing;
+    private _update;
     private _toggleDebugPane;
     private _openDialog;
     private _renderDialog;

package/dist-cms/packages/core/debug/debug.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbTextStyles } from '../../../shared/style/index.js';
-import { css, html, nothing, customElement, property, state } from '../../../external/lit/index.js';
+import { css, html, nothing, customElement, property, state, repeat } from '../../../external/lit/index.js';
 import { contextData, UmbContextDebugRequest } from '../../../libs/context-api/index.js';
 import { UmbLitElement } from '../lit-element/index.js';
 import { UMB_CONTEXT_DEBUGGER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '../modal/index.js';
@@ -20,8 +20,15 @@ let UmbDebugElement = class UmbDebugElement extends UmbLitElement {
             this._modalContext = instance;
         });
     }
-    connectedCallback() {
-        super.connectedCallback();
+    render() {
+        if (this.visible) {
+            return this.dialog ? this._renderDialog() : this._renderPanel();
+        }
+        else {
+            return nothing;
+        }
+    }
+    _update() {
         // Dispatch it
         this.dispatchEvent(new UmbContextDebugRequest((contexts) => {
             // The Contexts are collected
@@ -32,18 +39,14 @@ let UmbDebugElement = class UmbDebugElement extends UmbLitElement {
             // Massage the data into a simplier array of objects
             // From a function in the context-api '
             this.contextData = contextData(contexts);
+            this.requestUpdate('contextData');
         }));
     }
-    render() {
-        if (this.visible) {
-            return this.dialog ? this._renderDialog() : this._renderPanel();
-        }
-        else {
-            return nothing;
-        }
-    }
     _toggleDebugPane() {
         this._debugPaneOpen = !this._debugPaneOpen;
+        if (this._debugPaneOpen) {
+            this._update();
+        }
     }
     _openDialog() {
         this._modalContext?.open(UMB_CONTEXT_DEBUGGER_MODAL, {
@@ -76,17 +79,15 @@ let UmbDebugElement = class UmbDebugElement extends UmbLitElement {
 		</div>`;
     }
     _renderContextAliases() {
-        const contextsTemplates = [];
-        this.contextData.forEach((contextData) => {
-            contextsTemplates.push(html ` <li>
+        return repeat(this.contextData, (contextData) => contextData.alias, (contextData) => {
+            return html ` <li>
 					Context: <strong>${contextData.alias}</strong>
 					<em>(${contextData.type})</em>
 					<ul>
 						${this._renderInstance(contextData.data)}
 					</ul>
-				</li>`);
+				</li>`;
         });
-        return contextsTemplates;
     }
     _renderInstance(instance) {
         const instanceTemplates = [];

package/dist-cms/packages/core/extension-registry/collection/repository/extension-collection.repository.d.ts

@@ -1,10 +1,16 @@
+import type { ManifestTypes } from '../../models/index.js';
 import { UmbRepositoryBase, type UmbCollectionRepository } from '../../../repository/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
+export interface UmbExtensionCollectionFilter {
+    skip: number;
+    take: number;
+    type?: ManifestTypes['type'];
+}
 export declare class UmbExtensionCollectionRepository extends UmbRepositoryBase implements UmbCollectionRepository {
     constructor(host: UmbControllerHost);
-    requestCollection(filter: any): Promise<{
+    requestCollection(filter: UmbExtensionCollectionFilter): Promise<{
         data: {
-            items: import("../../index.js").ManifestTypes[];
+            items: ManifestTypes[];
             total: number;
         };
     }>;

package/dist-cms/packages/core/extension-registry/collection/repository/extension-collection.repository.js

@@ -5,7 +5,10 @@ export class UmbExtensionCollectionRepository extends UmbRepositoryBase {
         super(host);
     }
     async requestCollection(filter) {
-        const extensions = umbExtensionsRegistry.getAllExtensions();
+        let extensions = umbExtensionsRegistry.getAllExtensions();
+        if (filter.type) {
+            extensions = extensions.filter((x) => x.type === filter.type);
+        }
         const total = extensions.length;
         const items = extensions.slice(filter.skip, filter.skip + filter.take);
         const data = { items, total };

package/dist-cms/packages/core/section/section-default.element.js

@@ -43,20 +43,22 @@ let UmbSectionDefaultElement = class UmbSectionDefaultElement extends UmbLitElem
     }
     render() {
         return html `
-			${this._sidebarApps && this._sidebarApps.length > 0
+			<umb-split-panel lock="start" snap="300px">
+				${this._sidebarApps && this._sidebarApps.length > 0
             ? html `
-						<!-- TODO: these extensions should be combined into one type: sectionSidebarApp with a "subtype" -->
-						<umb-section-sidebar>
-							${repeat(this._sidebarApps, (app) => app.alias, (app) => app.component)}
-						</umb-section-sidebar>
-				  `
+							<!-- TODO: these extensions should be combined into one type: sectionSidebarApp with a "subtype" -->
+							<umb-section-sidebar slot="start">
+								${repeat(this._sidebarApps, (app) => app.alias, (app) => app.component)}
+							</umb-section-sidebar>
+					  `
             : nothing}
-			<umb-section-main>
-				${this._routes && this._routes.length > 0
+				<umb-section-main slot="end">
+					${this._routes && this._routes.length > 0
             ? html `<umb-router-slot id="router-slot" .routes="${this._routes}"></umb-router-slot>`
             : nothing}
-				<slot></slot>
-			</umb-section-main>
+					<slot></slot>
+				</umb-section-main>
+			</umb-split-panel>
 		`;
     }
 };
@@ -91,6 +93,19 @@ UmbSectionDefaultElement.styles = [
 			h3 {
 				padding: var(--uui-size-4) var(--uui-size-8);
 			}
+
+			umb-split-panel {
+				--umb-split-panel-initial-position: 200px;
+				--umb-split-panel-start-min-width: 200px;
+				--umb-split-panel-start-max-width: 400px;
+				--umb-split-panel-end-min-width: 600px;
+			}
+
+			@media only screen and (min-width: 800px) {
+				umb-split-panel {
+					--umb-split-panel-initial-position: 300px;
+				}
+			}
 		`,
 ];
 __decorate([

package/dist-cms/packages/core/temporary-file/temporary-file.server.data-source.js

@@ -36,7 +36,7 @@ export class UmbTemporaryFileServerDataSource {
      * @memberof UmbTemporaryFileServerDataSource
      */
     async create(id, file) {
-        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.postTemporaryfile({
+        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.postTemporaryFile({
             formData: {
                 Id: id,
                 File: file,
@@ -52,7 +52,7 @@ export class UmbTemporaryFileServerDataSource {
     read(id) {
         if (!id)
             throw new Error('Id is missing');
-        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.getTemporaryfileById({ id }));
+        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.getTemporaryFileById({ id }));
     }
     /**
      * Deletes a temporary file from the server
@@ -63,7 +63,7 @@ export class UmbTemporaryFileServerDataSource {
     delete(id) {
         if (!id)
             throw new Error('Id is missing');
-        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.deleteTemporaryfileById({ id }));
+        return tryExecuteAndNotify(__classPrivateFieldGet(this, _UmbTemporaryFileServerDataSource_host, "f"), TemporaryFileResource.deleteTemporaryFileById({ id }));
     }
 }
 _UmbTemporaryFileServerDataSource_host = new WeakMap();

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

@@ -73,7 +73,7 @@ const entityActions = [
         api: UmbPublishDocumentEntityAction,
         meta: {
             icon: 'icon-globe',
-            label: 'Publish (TBD)',
+            label: 'Publish',
             repositoryAlias: UMB_DOCUMENT_DETAIL_REPOSITORY_ALIAS,
             entityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
         },
@@ -85,7 +85,7 @@ const entityActions = [
         api: UmbUnpublishDocumentEntityAction,
         meta: {
             icon: 'icon-globe',
-            label: 'Unpublish (TBD)',
+            label: 'Unpublish',
             repositoryAlias: UMB_DOCUMENT_DETAIL_REPOSITORY_ALIAS,
             entityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
         },

package/dist-cms/packages/documents/documents/entity-actions/publish.action.d.ts

@@ -2,6 +2,7 @@ import type { UmbDocumentPublishingRepository } from '../repository/index.js';
 import { UmbEntityActionBase } from '../../../core/entity-action/index.js';
 import type { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
 export declare class UmbPublishDocumentEntityAction extends UmbEntityActionBase<UmbDocumentPublishingRepository> {
+    #private;
     constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string, entityType: string);
     execute(): Promise<void>;
 }

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

@@ -1,11 +1,29 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmbPublishDocumentEntityAction_variantManagerContext;
+import { UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT } from '../global-contexts/index.js';
 import { UmbEntityActionBase } from '../../../core/entity-action/index.js';
 export class UmbPublishDocumentEntityAction extends UmbEntityActionBase {
     constructor(host, repositoryAlias, unique, entityType) {
         super(host, repositoryAlias, unique, entityType);
+        _UmbPublishDocumentEntityAction_variantManagerContext.set(this, void 0);
+        this.consumeContext(UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT, (context) => {
+            __classPrivateFieldSet(this, _UmbPublishDocumentEntityAction_variantManagerContext, context, "f");
+        });
     }
     async execute() {
-        console.log(`publish: ${this.unique}`);
-        // TODO: implement dialog or something to handle variants.
-        //await this.repository?.publish();
+        if (!__classPrivateFieldGet(this, _UmbPublishDocumentEntityAction_variantManagerContext, "f"))
+            throw new Error('Variant manager context is missing');
+        await __classPrivateFieldGet(this, _UmbPublishDocumentEntityAction_variantManagerContext, "f").publish(this.unique);
     }
 }
+_UmbPublishDocumentEntityAction_variantManagerContext = new WeakMap();

package/dist-cms/packages/documents/documents/entity-actions/unpublish.action.d.ts

@@ -2,6 +2,7 @@ import type { UmbDocumentPublishingRepository } from '../repository/index.js';
 import { UmbEntityActionBase } from '../../../core/entity-action/index.js';
 import type { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
 export declare class UmbUnpublishDocumentEntityAction extends UmbEntityActionBase<UmbDocumentPublishingRepository> {
+    #private;
     constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string, entityType: string);
     execute(): Promise<void>;
 }

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

@@ -1,11 +1,29 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmbUnpublishDocumentEntityAction_variantManagerContext;
+import { UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT } from '../global-contexts/index.js';
 import { UmbEntityActionBase } from '../../../core/entity-action/index.js';
 export class UmbUnpublishDocumentEntityAction extends UmbEntityActionBase {
     constructor(host, repositoryAlias, unique, entityType) {
         super(host, repositoryAlias, unique, entityType);
+        _UmbUnpublishDocumentEntityAction_variantManagerContext.set(this, void 0);
+        this.consumeContext(UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT, (context) => {
+            __classPrivateFieldSet(this, _UmbUnpublishDocumentEntityAction_variantManagerContext, context, "f");
+        });
     }
     async execute() {
-        console.log(`unpublish: ${this.unique}`);
-        // TODO: implement dialog or something to handle variants.
-        //await this.repository?.unpublish();
+        if (!__classPrivateFieldGet(this, _UmbUnpublishDocumentEntityAction_variantManagerContext, "f"))
+            throw new Error('Variant manager context is missing');
+        await __classPrivateFieldGet(this, _UmbUnpublishDocumentEntityAction_variantManagerContext, "f").unpublish(this.unique);
     }
 }
+_UmbUnpublishDocumentEntityAction_variantManagerContext = new WeakMap();

package/dist-cms/packages/documents/documents/global-contexts/document-variant-manager.context.d.ts

@@ -0,0 +1,34 @@
+import { type UmbDocumentVariantModel } from '../types.js';
+import { type UmbDocumentVariantPickerModalData } from '../modals/variant-picker/index.js';
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { UmbApi } from '../../../../libs/extension-api/index.js';
+import { UmbVariantId } from '../../../core/variant/index.js';
+export declare class UmbDocumentVariantManagerContext extends UmbContextBase<UmbDocumentVariantManagerContext> implements UmbApi {
+    #private;
+    constructor(host: UmbControllerHost);
+    /**
+     * Helps the user pick variants for a specific operation.
+     * If there is only one variant, it will be selected automatically.
+     * If there are multiple variants, a modal will be shown to the user.
+     * @param type The type of operation to perform.
+     * @param documentUnique The unique identifier of the document.
+     * @param activeVariantCulture The culture of the active variant (will be pre-selected in the modal).
+     * @param filterFn Optional filter function to filter the available variants.
+     * @returns The selected variants to perform the operation on.
+     */
+    pickVariants(availableVariants: Array<UmbDocumentVariantModel>, type: UmbDocumentVariantPickerModalData['type'], activeVariantCulture?: string): Promise<UmbVariantId[]>;
+    /**
+     * Publish the latest version of a document indescriminately.
+     * @param documentUnique The unique identifier of the document.
+     */
+    publish(documentUnique: string): Promise<void>;
+    /**
+     * Unpublish the latest version of a document indescriminately.
+     * @param documentUnique The unique identifier of the document.
+     */
+    unpublish(documentUnique: string): Promise<void>;
+}
+export default UmbDocumentVariantManagerContext;
+export declare const UMB_DOCUMENT_VARIANT_MANAGER_CONTEXT: UmbContextToken<UmbDocumentVariantManagerContext, UmbDocumentVariantManagerContext>;