@umbraco-cms/backoffice 14.0.0--preview007-772eb996 → 14.0.0--preview007-bcd459cf

package/dist-cms/custom-elements.json

@@ -2876,6 +2876,104 @@
         }
       ]
     },
+    {
+      "name": "umb-split-panel",
+      "path": "./../src/packages/core/components/split-panel/split-panel.element.ts",
+      "description": "Custom element for a split panel with adjustable divider.",
+      "attributes": [
+        {
+          "name": "snap",
+          "description": "Snap points for the divider position.\nPixel or percent space-separated values: e.g., \"100px 50% -75% -200px\".\nNegative values are relative to the end of the container.",
+          "type": "string | undefined"
+        },
+        {
+          "name": "lock",
+          "description": "Locking mode for the split panel.\nPossible values: \"start\", \"end\", \"none\" (default).",
+          "type": "\"start\" | \"end\" | \"none\"",
+          "default": "\"none\""
+        },
+        {
+          "name": "position",
+          "description": "Initial position of the divider.\nPixel or percent value: e.g., \"100px\" or \"25%\".\nDefaults to a CSS variable if not set: \"var(--umb-split-panel-initial-position) which defaults to 50%\".",
+          "type": "string",
+          "default": "\"var(--umb-split-panel-initial-position)\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "mainElement",
+          "type": "HTMLElement"
+        },
+        {
+          "name": "dividerTouchAreaElement",
+          "type": "HTMLElement"
+        },
+        {
+          "name": "dividerElement",
+          "type": "HTMLElement"
+        },
+        {
+          "name": "snap",
+          "attribute": "snap",
+          "description": "Snap points for the divider position.\nPixel or percent space-separated values: e.g., \"100px 50% -75% -200px\".\nNegative values are relative to the end of the container.",
+          "type": "string | undefined"
+        },
+        {
+          "name": "lock",
+          "attribute": "lock",
+          "description": "Locking mode for the split panel.\nPossible values: \"start\", \"end\", \"none\" (default).",
+          "type": "\"start\" | \"end\" | \"none\"",
+          "default": "\"none\""
+        },
+        {
+          "name": "position",
+          "attribute": "position",
+          "description": "Initial position of the divider.\nPixel or percent value: e.g., \"100px\" or \"25%\".\nDefaults to a CSS variable if not set: \"var(--umb-split-panel-initial-position) which defaults to 50%\".",
+          "type": "string",
+          "default": "\"var(--umb-split-panel-initial-position)\""
+        },
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t\\t--umb-split-panel-initial-position: 50%;\\n\\t\\t\\t--umb-split-panel-start-min-width: 0;\\n\\t\\t\\t--umb-split-panel-end-min-width: 0;\\n\\n\\t\\t\\t--umb-split-panel-divider-touch-area-width: 20px;\\n\\t\\t\\t--umb-split-panel-divider-width: 1px;\\n\\t\\t\\t--umb-split-panel-divider-color: transparent;\\n\\t\\t}\\n\\t\\tslot {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\t\\t#main {\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 0;\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\t\\t#divider {\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 999999;\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\t#divider-touch-area {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-touch-area-width);\\n\\t\\t\\ttransform: translateX(-50%);\\n\\t\\t\\tcursor: col-resize;\\n\\t\\t}\\n\\t\\t/* Do we want a line that shows the divider? */\\n\\t\\t#divider::after {\\n\\t\\t\\tcontent: '';\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 50%;\\n\\t\\t\\twidth: var(--umb-split-panel-divider-width);\\n\\t\\t\\theight: 100%;\\n\\t\\t\\ttransform: round(translateX(-50%));\\n\\t\\t\\tbackground-color: var(--umb-split-panel-divider-color);\\n\\t\\t\\tz-index: -1;\\n\\t\\t}\\n\\t`\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "start",
+          "description": "Content for the start panel."
+        },
+        {
+          "name": "end",
+          "description": "Content for the end panel."
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--umb-split-panel-initial-position",
+          "description": "Initial position of the divider."
+        },
+        {
+          "name": "--umb-split-panel-start-min-width",
+          "description": "Minimum width of the start panel."
+        },
+        {
+          "name": "--umb-split-panel-end-min-width",
+          "description": "Minimum width of the end panel."
+        },
+        {
+          "name": "--umb-split-panel-divider-touch-area-width",
+          "description": "Width of the divider touch area."
+        },
+        {
+          "name": "--umb-split-panel-divider-width",
+          "description": "Width of the divider."
+        },
+        {
+          "name": "--umb-split-panel-divider-color",
+          "description": "Color of the divider."
+        }
+      ]
+    },
     {
       "name": "umb-table",
       "path": "./../src/packages/core/components/table/table.element.ts",

package/dist-cms/mocks/data/dictionary/dictionary.data.js

@@ -4,10 +4,10 @@ export const data = [
         id: 'aae7d0ab-53ba-485d-b8bd-12537f9925cb',
         parent: null,
         hasChildren: false,
-        translatedIsoCodes: ['en'],
+        translatedIsoCodes: ['en-us'],
         translations: [
             {
-                isoCode: 'en',
+                isoCode: 'en-us',
                 translation: 'hello in en',
             },
             {
@@ -21,10 +21,10 @@ export const data = [
         id: 'bbe7d0ab-53bb-485d-b8bd-12537f9925cb',
         parent: null,
         hasChildren: true,
-        translatedIsoCodes: ['en', 'da'],
+        translatedIsoCodes: ['en-us', 'da'],
         translations: [
             {
-                isoCode: 'en',
+                isoCode: 'en-us',
                 translation: 'Hello again in en',
             },
             {
@@ -38,10 +38,10 @@ export const data = [
         id: '438b8693-2156-482b-84af-ccdae0c2df6e',
         parent: { id: 'bbe7d0ab-53bb-485d-b8bd-12537f9925cb' },
         hasChildren: false,
-        translatedIsoCodes: ['en', 'da'],
+        translatedIsoCodes: ['en-us', 'da'],
         translations: [
             {
-                isoCode: 'en',
+                isoCode: 'en-us',
                 translation: 'Nested Hello again in en',
             },
             {

package/dist-cms/mocks/data/document/document.db.js

@@ -24,7 +24,7 @@ export class UmbDocumentMockDB extends UmbEntityMockDbBase {
         return [];
     }
     getDomainsForDocument(id) {
-        return { defaultIsoCode: 'en', domains: [] };
+        return { defaultIsoCode: 'en-us', domains: [] };
     }
 }
 const treeItemMapper = (model) => {

package/dist-cms/mocks/data/language/language.data.js

@@ -1,7 +1,7 @@
 export const data = [
     {
         name: 'English',
-        isoCode: 'en',
+        isoCode: 'en-us',
         isDefault: true,
         isMandatory: true,
     },
@@ -10,6 +10,6 @@ export const data = [
         isoCode: 'da',
         isDefault: false,
         isMandatory: false,
-        fallbackIsoCode: 'en',
+        fallbackIsoCode: 'en-us',
     },
 ];

package/dist-cms/mocks/handlers/dictionary/import-export.handlers.js

@@ -7,10 +7,10 @@ const importResponse = {
     name: 'Uploaded dictionary',
     id: 'b7e7d0ab-53ba-485d-dddd-12537f9925cb',
     hasChildren: false,
-    translatedIsoCodes: ['en', 'da'],
+    translatedIsoCodes: ['en-us', 'da'],
     translations: [
         {
-            isoCode: 'en',
+            isoCode: 'en-us',
             translation: 'I am an imported US value',
         },
         {

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

@@ -27,5 +27,6 @@ export * from './input-upload-field/index.js';
 export * from './multiple-color-picker-input/index.js';
 export * from './multiple-text-string-input/index.js';
 export * from './popover-layout/index.js';
+export * from './split-panel/index.js';
 export * from './table/index.js';
 export * from './tooltip-menu/index.js';

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

@@ -29,5 +29,6 @@ export * from './input-upload-field/index.js';
 export * from './multiple-color-picker-input/index.js';
 export * from './multiple-text-string-input/index.js';
 export * from './popover-layout/index.js';
+export * from './split-panel/index.js';
 export * from './table/index.js';
 export * from './tooltip-menu/index.js';

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

@@ -0,0 +1,2 @@
+import './split-panel.element.js';
+export * from './split-panel.element.js';

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

@@ -0,0 +1,2 @@
+import './split-panel.element.js';
+export * from './split-panel.element.js';

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

@@ -0,0 +1,47 @@
+import { type PropertyValueMap, LitElement } 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.
+ */
+export declare class UmbSplitPanelElement extends LitElement {
+    #private;
+    mainElement: HTMLElement;
+    dividerTouchAreaElement: HTMLElement;
+    dividerElement: HTMLElement;
+    /**
+     * Snap points for the divider position.
+     * Pixel or percent space-separated values: e.g., "100px 50% -75% -200px".
+     * Negative values are relative to the end of the container.
+     */
+    snap?: string;
+    /**
+     * Locking mode for the split panel.
+     * Possible values: "start", "end", "none" (default).
+     */
+    lock: 'start' | 'end' | '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%".
+     */
+    position: string;
+    _hasStartPanel: boolean;
+    _hasEndPanel: boolean;
+    disconnectedCallback(): void;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-split-panel': UmbSplitPanelElement;
+    }
+}

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;
         };
     }>;