@umbraco-cms/backoffice 14.0.0-rc3 → 14.0.0-rc4

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

@@ -0,0 +1,273 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { 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);
+        /**
+         * 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 */
+        this.#lockedPanelWidth = 0;
+        /** Pixel value for the snap threshold. Determines how close the divider needs to be to a snap point to snap to it. */
+        this.#SNAP_THRESHOLD = 25;
+        this._hasStartPanel = false;
+        this._hasEndPanel = false;
+        this.#hasInitialized = false;
+        this.#onDragStart = (event) => {
+            event.preventDefault();
+            const move = (event) => {
+                const { clientX } = event;
+                const { left, width } = this.mainElement.getBoundingClientRect();
+                const localPos = this.#clamp(clientX - left, 0, width);
+                const mappedPos = mapXAxisToSnap(localPos, width);
+                this.#lockedPanelWidth = this.lock === 'start' ? mappedPos : width - mappedPos;
+                this.#setPosition(mappedPos);
+            };
+            const stop = () => {
+                document.removeEventListener('pointermove', move);
+                document.removeEventListener('pointerup', stop);
+                this.dispatchEvent(new CustomEvent('position-changed', { detail: { position: this.position } }));
+            };
+            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 + this.#SNAP_THRESHOLD && closestSnap > xPos - this.#SNAP_THRESHOLD) {
+                    xPos = closestSnap;
+                }
+                return xPos;
+            };
+            document.addEventListener('pointermove', move, { passive: true });
+            document.addEventListener('pointerup', stop);
+        };
+    }
+    //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 */
+    #lockedPanelWidth;
+    /** Pixel value for the snap threshold. Determines how close the divider needs to be to a snap point to snap to it. */
+    #SNAP_THRESHOLD;
+    get #hasBothPanels() {
+        return this._hasStartPanel && this._hasEndPanel;
+    }
+    #hasInitialized;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#disconnect();
+    }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (!this.#hasInitialized)
+            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;
+                this.#lockedPanelWidth = lockedPanelWidth;
+            }
+            this.#updateSplit();
+        }
+    }
+    #clamp(value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    }
+    #setPosition(pos) {
+        const { width } = this.mainElement.getBoundingClientRect();
+        const localPos = this.#clamp(pos, 0, width);
+        const percentagePos = (localPos / width) * 100;
+        this.position = percentagePos + '%';
+    }
+    #updateSplit() {
+        // If lock is none
+        let maxStartWidth = this.position;
+        let maxEndWidth = '1fr';
+        if (this.lock === 'start') {
+            maxStartWidth = this.#lockedPanelWidth + 'px';
+            maxEndWidth = `1fr`;
+        }
+        if (this.lock === 'end') {
+            maxStartWidth = `1fr`;
+            maxEndWidth = this.#lockedPanelWidth + 'px';
+        }
+        this.mainElement.style.gridTemplateColumns = `
+      minmax(var(--umb-split-panel-start-min-width), ${maxStartWidth})
+      0px
+      minmax(var(--umb-split-panel-end-min-width), ${maxEndWidth})
+    `;
+    }
+    #onDragStart;
+    #disconnect() {
+        this.dividerTouchAreaElement.removeEventListener('pointerdown', this.#onDragStart);
+        this.dividerTouchAreaElement.removeEventListener('touchstart', this.#onDragStart);
+        this.dividerElement.style.display = 'none';
+        this.mainElement.style.display = 'flex';
+        this.#hasInitialized = false;
+    }
+    async #connect() {
+        this.#hasInitialized = true;
+        this.mainElement.style.display = 'grid';
+        this.mainElement.style.gridTemplateColumns = `${this.position} 0px 1fr`;
+        this.dividerElement.style.display = 'unset';
+        this.dividerTouchAreaElement.addEventListener('pointerdown', this.#onDragStart);
+        this.dividerTouchAreaElement.addEventListener('touchstart', this.#onDragStart, { 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}%`;
+    }
+    #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 (!this.#hasBothPanels) {
+            if (this.#hasInitialized) {
+                this.#disconnect();
+            }
+            return;
+        }
+        this.#connect();
+    }
+    render() {
+        return html `
+			<div id="main">
+				<slot
+					name="start"
+					@slotchange=${this.#onSlotChanged}
+					style="width: ${this._hasStartPanel ? '100%' : '0'}"></slot>
+				<div id="divider">
+					<div id="divider-touch-area" tabindex="0"></div>
+				</div>
+				<slot name="end" @slotchange=${this.#onSlotChanged} style="width: ${this._hasEndPanel ? '100%' : '0'}"></slot>
+			</div>
+		`;
+    }
+    static { this.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;
+			--umb-split-panel-slot-overflow: hidden;
+		}
+		slot {
+			overflow: var(--umb-split-panel-slot-overflow);
+			display: block;
+			min-height: 0;
+		}
+		#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/components/stack/stack.element.d.ts

@@ -1,4 +1,4 @@
-import { UmbLitElement } from "../../lit-element/index.js";
+import { UmbLitElement } from '../../lit-element/index.js';
 /**
  *  @element umb-stack
  *  @description - Element for displaying items in a stack with even spacing between
@@ -6,16 +6,16 @@ import { UmbLitElement } from "../../lit-element/index.js";
  */
 export declare class UmbStackElement extends UmbLitElement {
     /**
-         * Look
-         * @type {String}
-         * @memberof UmbStackElement
-         */
+     * Look
+     * @type {String}
+     * @memberof UmbStackElement
+     */
     look: 'compact' | 'default';
     /**
-         * Divide
-         * @type {Boolean}
-         * @memberof UmbStackElement
-         */
+     * Divide
+     * @type {Boolean}
+     * @memberof UmbStackElement
+     */
     divide: boolean;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

package/dist-cms/packages/core/components/stack/stack.element.js

@@ -4,8 +4,8 @@ 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 { UmbLitElement } from "../../lit-element/index.js";
-import { customElement, html, css, property, classMap } from "../../../../external/lit/index.js";
+import { UmbLitElement } from '../../lit-element/index.js';
+import { classMap, customElement, css, html, property } from '../../../../external/lit/index.js';
 /**
  *  @element umb-stack
  *  @description - Element for displaying items in a stack with even spacing between
@@ -15,64 +15,66 @@ let UmbStackElement = class UmbStackElement extends UmbLitElement {
     constructor() {
         super(...arguments);
         /**
-             * Look
-             * @type {String}
-             * @memberof UmbStackElement
-             */
+         * Look
+         * @type {String}
+         * @memberof UmbStackElement
+         */
         this.look = 'default';
         /**
-             * Divide
-             * @type {Boolean}
-             * @memberof UmbStackElement
-             */
+         * Divide
+         * @type {Boolean}
+         * @memberof UmbStackElement
+         */
         this.divide = false;
     }
     render() {
-        return html `<div class=${classMap({ divide: this.divide, compact: this.look === 'compact' })}>
-            <slot></slot>
-        </div>`;
+        return html `
+			<div class=${classMap({ divide: this.divide, compact: this.look === 'compact' })}>
+				<slot></slot>
+			</div>
+		`;
     }
     static { this.styles = [
         css `
-            div {
-                display: block;
-                position: relative;
-            }
+			div {
+				display: block;
+				position: relative;
+			}
 
-            ::slotted(*) {
-                position: relative;
-                margin-top: var(--uui-size-space-6);
-            }
+			::slotted(*) {
+				position: relative;
+				margin-top: var(--uui-size-space-6);
+			}
 
-            .divide ::slotted(*)::before {
-                content: '';
-                position: absolute;
-                top: calc((var(--uui-size-space-6) / 2) * -1);
-                height: 0;
-                width: 100%;
-                border-top: solid 1px var(--uui-color-divider-standalone);
-            }
+			.divide ::slotted(*)::before {
+				content: '';
+				position: absolute;
+				top: calc((var(--uui-size-space-6) / 2) * -1);
+				height: 0;
+				width: 100%;
+				border-top: solid 1px var(--uui-color-divider-standalone);
+			}
 
-            ::slotted(*:first-child) {
-                margin-top: 0;
-            }
+			::slotted(*:first-child) {
+				margin-top: 0;
+			}
 
-            .divide ::slotted(*:first-child)::before {
-                display: none;
-            }
+			.divide ::slotted(*:first-child)::before {
+				display: none;
+			}
 
-            .compact ::slotted(*) {
-                margin-top: var(--uui-size-space-3);
-            }
+			.compact ::slotted(*) {
+				margin-top: var(--uui-size-space-3);
+			}
 
-            .compact ::slotted(*:first-child) {
-                margin-top: 0;
-            }
+			.compact ::slotted(*:first-child) {
+				margin-top: 0;
+			}
 
-            .compact.divide ::slotted(*)::before {
-                display: none;
-            }
-        `
+			.compact.divide ::slotted(*)::before {
+				display: none;
+			}
+		`,
     ]; }
 };
 __decorate([

package/dist-cms/packages/core/content/content-property.context-token.d.ts

@@ -0,0 +1,3 @@
+import type { UmbContentPropertyContext } from './content-property.context.js';
+import { UmbContextToken } from '../../../libs/context-api/index.js';
+export declare const UMB_CONTENT_PROPERTY_CONTEXT: UmbContextToken<UmbContentPropertyContext, UmbContentPropertyContext>;

package/dist-cms/packages/core/content/content-property.context-token.js

@@ -0,0 +1,2 @@
+import { UmbContextToken } from '../../../libs/context-api/index.js';
+export const UMB_CONTENT_PROPERTY_CONTEXT = new UmbContextToken('UmbContentPropertyContext');

package/dist-cms/packages/core/content/content-property.context.d.ts

@@ -0,0 +1,11 @@
+import type { UmbPropertyTypeModel } from '../content-type/types.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
+import { UmbContextBase } from '../../../libs/class-api/index.js';
+export declare class UmbContentPropertyContext extends UmbContextBase<UmbContentPropertyContext> {
+    #private;
+    dataType: import("rxjs/internal/Observable").Observable<{
+        unique: string;
+    } | undefined>;
+    constructor(host: UmbControllerHost);
+    setDataType(dataType: UmbPropertyTypeModel['dataType'] | undefined): void;
+}

package/dist-cms/packages/core/content/content-property.context.js

@@ -0,0 +1,14 @@
+import { UMB_CONTENT_PROPERTY_CONTEXT } from './content-property.context-token.js';
+import { UmbContextBase } from '../../../libs/class-api/index.js';
+import { UmbObjectState } from '../../../libs/observable-api/index.js';
+export class UmbContentPropertyContext extends UmbContextBase {
+    #dataType;
+    constructor(host) {
+        super(host, UMB_CONTENT_PROPERTY_CONTEXT);
+        this.#dataType = new UmbObjectState(undefined);
+        this.dataType = this.#dataType.asObservable();
+    }
+    setDataType(dataType) {
+        this.#dataType.setValue(dataType);
+    }
+}

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

@@ -1 +1,3 @@
 export * from './workspace/index.js';
+export { UmbContentPropertyContext } from './content-property.context.js';
+export { UMB_CONTENT_PROPERTY_CONTEXT } from './content-property.context-token.js';

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

@@ -1 +1,3 @@
 export * from './workspace/index.js';
+export { UmbContentPropertyContext } from './content-property.context.js';
+export { UMB_CONTENT_PROPERTY_CONTEXT } from './content-property.context-token.js';

package/dist-cms/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.d.ts

@@ -1,6 +1,7 @@
 import type { UmbPropertyTypeModel } from '../../types.js';
 import { UmbLitElement } from '../../../lit-element/index.js';
 export declare class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
+    #private;
     get property(): UmbPropertyTypeModel | undefined;
     set property(value: UmbPropertyTypeModel | undefined);
     private _property?;

package/dist-cms/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.js

@@ -4,6 +4,7 @@ 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 { UmbContentPropertyContext } from '../../../content/index.js';
 import { UmbDataTypeDetailRepository } from '../../../../data-type/index.js';
 import { UmbTextStyles } from '../../../style/index.js';
 import { css, html, ifDefined, customElement, property, state } from '../../../../../external/lit/index.js';
@@ -13,6 +14,7 @@ let UmbPropertyTypeBasedPropertyElement = class UmbPropertyTypeBasedPropertyElem
     constructor() {
         super(...arguments);
         this._dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
+        this.#contentPropertyContext = new UmbContentPropertyContext(this);
     }
     get property() {
         return this._property;
@@ -24,12 +26,15 @@ let UmbPropertyTypeBasedPropertyElement = class UmbPropertyTypeBasedPropertyElem
             this._observeDataType(this._property?.dataType.unique);
         }
     }
+    #contentPropertyContext;
     async _observeDataType(dataTypeUnique) {
         this._dataTypeObserver?.destroy();
         if (dataTypeUnique) {
             // Its not technically needed to have await here, this is only to ensure that the data is loaded before we observe it, and thereby only updating the DOM with the latest data.
             await this._dataTypeDetailRepository.requestByUnique(dataTypeUnique);
             this._dataTypeObserver = this.observe(await this._dataTypeDetailRepository.byUnique(dataTypeUnique), (dataType) => {
+                const contextValue = dataType ? { unique: dataType.unique } : undefined;
+                this.#contentPropertyContext.setDataType(contextValue);
                 this._dataTypeData = dataType?.values;
                 this._propertyEditorUiAlias = dataType?.editorUiAlias || undefined;
                 // If there is no UI, we will look up the Property editor model to find the default UI alias:

package/dist-cms/packages/core/culture/components/input-culture-select/input-culture-select.element.js

@@ -59,7 +59,7 @@ let UmbInputCultureSelectElement = class UmbInputCultureSelectElement extends UU
         });
     }
     get #fromAvailableCultures() {
-        return this._cultures.find((culture) => culture.name.toLowerCase() === this.value.toLowerCase());
+        return this._cultures.find((culture) => culture.name.toLowerCase() === this.value?.toLowerCase());
     }
     render() {
         return html `

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

@@ -1,22 +1,14 @@
-import type { TemplateResult } from '../../../external/lit/index.js';
 import { nothing } from '../../../external/lit/index.js';
-import type { DebugContextData } from '../../../libs/context-api/index.js';
 import { UmbLitElement } from '../lit-element/index.js';
 export declare class UmbDebugElement extends UmbLitElement {
+    #private;
     visible: boolean;
     dialog: boolean;
-    contextData: DebugContextData[];
+    private _contextData;
     private _debugPaneOpen;
     private _modalContext?;
     constructor();
-    render(): typeof nothing | TemplateResult<1>;
-    private _update;
-    private _toggleDebugPane;
-    private _openDialog;
-    private _renderDialog;
-    private _renderPanel;
-    private _renderContextAliases;
-    private _renderInstance;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 declare global {