@breadstone/mosaik-elements-foundation 0.0.120 → 0.0.121

package/Controls/Components/Layouts/Dock/DockPanelElement.js

@@ -0,0 +1,317 @@
+// #region Imports
+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 __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var DockPanelElement_1;
+import { Attribute } from '../../../Decorators/AttributeDecorator';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { Fitable } from '../../../Behaviors/Fitable';
+import { Orientable } from '../../../Behaviors/Orientable';
+import { Reversible } from '../../../Behaviors/Reversible';
+import { Gapable } from '../../../Behaviors/Gapable';
+import { LayoutElement } from '../Abstracts/LayoutElement';
+import { dockPanelElementTemplate } from './DockPanelElementTemplate';
+import { CssLength } from '@breadstone/mosaik-themes';
+/**
+ * DockPanel - A layout component used to arrange child components by docking them to specific edges or filling the remaining space.
+ *
+ * @description
+ * The DockPanel component is a powerful layout element that allows child components or elements to be docked
+ * to the top, bottom, left, or right edges of the container, while optionally letting one element fill the
+ * remaining available space. This makes it ideal for constructing flexible and adaptive interfaces such as
+ * application shells, sidebars, headers, footers, and content regions.
+ *
+ * DockPanel layouts provide developers with fine-grained control over how elements are positioned relative
+ * to each other, ensuring that UIs remain both structured and responsive without relying heavily on manual
+ * CSS positioning.
+ *
+ * @element mosaik-dock-panel
+ * @category Layout
+ *
+ * @slot - The default slot for child elements to be docked.
+ *
+ * @example
+ * ```html
+ * <mosaik-dock-panel>
+ *   <div dock="top">Header</div>
+ *   <div dock="left">Sidebar</div>
+ *   <div dock="content">Main Content</div>
+ *   <div dock="bottom">Footer</div>
+ * </mosaik-dock-panel>
+ * ```
+ *
+ * @public
+ */
+let DockPanelElement = DockPanelElement_1 = class DockPanelElement extends Themeable(Reversible(Orientable(Fitable(Gapable(LayoutElement))))) {
+    // #region Fields
+    _childResize;
+    _lastChildFill;
+    _hostResize;
+    _pending;
+    // #endregion
+    // #region Ctor
+    /**
+     * Constructs a new instance of the `{@link DockPanelElement}` class.
+     *
+     * @public
+     */
+    constructor() {
+        super();
+        this._childResize = new Map();
+        this._lastChildFill = false;
+        this._pending = false;
+    }
+    // #endregion
+    /**
+     * Returns the `is` property.
+     *
+     * @public
+     * @static
+     * @override
+     * @readonly
+    */
+    static get is() {
+        return 'mosaik-dock-panel';
+    }
+    /**
+     * The `lastChildFill` property determines whether the last child element should fill the remaining space.
+     *
+     * @public
+     * @attr
+     */
+    get lastChildFill() {
+        return this._lastChildFill;
+    }
+    set lastChildFill(value) {
+        if (this._lastChildFill !== value) {
+            this._lastChildFill = value;
+            this.requestUpdate('lastChildFill');
+            this.scheduleLayout();
+        }
+    }
+    // #region Methods
+    static getDock(el) {
+        const raw = el.getAttribute('dock') ??
+            el.getAttribute('data-dock') ??
+            el.getAttribute('dock-panel-dock') ??
+            (el.dir === 'rtl' ? 'right' : 'left');
+        const v = raw.toLowerCase();
+        return v === 'left' || v === 'right' || v === 'top' || v === 'bottom' ? v : 'left';
+    }
+    static setDock(el, dock) {
+        el.setAttribute('dock', dock);
+    }
+    /**
+     * @public
+     * @override
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupObservers();
+    }
+    /**
+     * @protected
+     * @override
+     */
+    onApplyTemplate() {
+        super.onApplyTemplate();
+        this._hostResize = new ResizeObserver(() => this.scheduleLayout());
+        this._hostResize.observe(this);
+        this.reobserveChildren();
+        this.scheduleLayout();
+    }
+    /**
+     * @protected
+     * @override
+     */
+    onItemsChanged() {
+        super.onItemsChanged();
+        this.reobserveChildren();
+        this.scheduleLayout();
+    }
+    // #endregion
+    /**
+     * @private
+     */
+    reobserveChildren() {
+        for (const ro of this._childResize.values())
+            ro.disconnect();
+        this._childResize.clear();
+        const kids = this.items;
+        for (const el of kids) {
+            const ro = new ResizeObserver(() => this.scheduleLayout());
+            ro.observe(el);
+            this._childResize.set(el, ro);
+        }
+    }
+    /**
+     * @private
+     */
+    cleanupObservers() {
+        this._hostResize?.disconnect();
+        for (const ro of this._childResize.values())
+            ro.disconnect();
+        this._childResize.clear();
+    }
+    /**
+     * @private
+     */
+    scheduleLayout() {
+        if (this._pending) {
+            return;
+        }
+        this._pending = true;
+        requestAnimationFrame(() => {
+            this._pending = false;
+            this.layoutNow();
+        });
+    }
+    /**
+     * @private
+     */
+    layoutNow() {
+        const surface = this.getTemplatePart('surface');
+        // if (!surface) {
+        //     return;
+        // }
+        // CssLength → px
+        const gapPx = this.resolveCssLengthToPx(this.gap, surface);
+        const W = surface.clientWidth;
+        const H = surface.clientHeight;
+        if (W <= 0 || H <= 0) {
+            return;
+        }
+        let x = 0, y = 0, w = W, h = H;
+        const kids = this.items.filter((el) => this.isVisible(el));
+        const n = kids.length;
+        for (const el of kids)
+            this.prepForMeasure(el);
+        for (let i = 0; i < n; i++) {
+            const el = kids[i];
+            const isLast = i === n - 1;
+            const dock = DockPanelElement_1.getDock(el);
+            if (isLast && this._lastChildFill) {
+                this.place(el, x, y, w, h);
+                continue;
+            }
+            switch (dock) {
+                case 'top': {
+                    this.place(el, x, y, w, undefined);
+                    const usedH = Math.ceil(el.getBoundingClientRect().height);
+                    this.place(el, x, y, w, usedH);
+                    y += usedH + gapPx;
+                    h -= usedH + gapPx;
+                    break;
+                }
+                case 'bottom': {
+                    this.place(el, x, y + Math.max(0, h - 1), w, undefined);
+                    const usedH = Math.ceil(el.getBoundingClientRect().height);
+                    const top = y + h - usedH;
+                    this.place(el, x, top, w, usedH);
+                    h -= usedH + gapPx;
+                    break;
+                }
+                case 'left': {
+                    this.place(el, x, y, undefined, h);
+                    const usedW = Math.ceil(el.getBoundingClientRect().width);
+                    this.place(el, x, y, usedW, h);
+                    x += usedW + gapPx;
+                    w -= usedW + gapPx;
+                    break;
+                }
+                case 'right': {
+                    this.place(el, x + Math.max(0, w - 1), y, undefined, h);
+                    const usedW = Math.ceil(el.getBoundingClientRect().width);
+                    const left = x + w - usedW;
+                    this.place(el, left, y, usedW, h);
+                    w -= usedW + gapPx;
+                    break;
+                }
+            }
+        }
+    }
+    /**
+     * @private
+     */
+    resolveCssLengthToPx(value, surface) {
+        if (value === undefined) {
+            return 0;
+        }
+        if (value === 'auto') {
+            return 0;
+        }
+        if (typeof value === 'number') {
+            return value; // treat bare numbers as px
+        }
+        if (!CssLength.isCssLength(value)) {
+            return 0;
+        }
+        // Use a hidden probe element to let the browser compute absolute pixels for us.
+        const probe = document.createElement('div');
+        probe.style.position = 'absolute';
+        probe.style.visibility = 'hidden';
+        probe.style.pointerEvents = 'none';
+        probe.style.width = value;
+        probe.style.height = '0';
+        // Use the layout surface as the containing block for % and font-relative units.
+        surface.appendChild(probe);
+        const px = probe.getBoundingClientRect().width;
+        surface.removeChild(probe);
+        // Normalize to non-negative integer pixels to avoid subpixel accumulation jitter
+        return Math.max(0, Math.round(px));
+    }
+    /**
+     * @private
+     */
+    isVisible(el) {
+        const s = getComputedStyle(el);
+        return s.display !== 'none' && s.visibility !== 'hidden';
+    }
+    /**
+     * @private
+     */
+    prepForMeasure(el) {
+        el.style.position = 'absolute';
+        el.style.left = '0px';
+        el.style.top = '0px';
+        el.style.right = '';
+        el.style.bottom = '';
+        el.style.width = '';
+        el.style.height = '';
+    }
+    /**
+     * @private
+     */
+    place(el, left, top, width, height) {
+        el.style.position = 'absolute';
+        el.style.left = `${left}px`;
+        el.style.top = `${top}px`;
+        el.style.width = width === undefined ? '' : `${width}px`;
+        el.style.height = height === undefined ? '' : `${height}px`;
+    }
+};
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], DockPanelElement.prototype, "lastChildFill", null);
+DockPanelElement = DockPanelElement_1 = __decorate([
+    Component({
+        selector: 'mosaik-dock-panel',
+        template: dockPanelElementTemplate,
+        imports: []
+    }),
+    __metadata("design:paramtypes", [])
+], DockPanelElement);
+export { DockPanelElement };
+//# sourceMappingURL=DockPanelElement.js.map

package/Controls/Components/Layouts/Dock/DockPanelElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockPanelElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Dock/DockPanelElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Layouts/Dock/DockPanelElementTemplate.d.ts

@@ -0,0 +1,9 @@
+import { type TemplateResult } from '../../../../Dom/Html';
+import type { DockPanelElement } from './DockPanelElement';
+/**
+ * The template of the {@link GridElement}.
+ *
+ * @public
+ */
+export declare function dockPanelElementTemplate<T extends DockPanelElement>(e: T): TemplateResult;
+//# sourceMappingURL=DockPanelElementTemplate.d.ts.map

package/Controls/Components/Layouts/Dock/DockPanelElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockPanelElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Dock/DockPanelElementTemplate.ts"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAI3D;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,gBAAgB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAWzF"}

package/Controls/Components/Layouts/Dock/DockPanelElementTemplate.js

@@ -0,0 +1,22 @@
+/* eslint-disable lit/prefer-static-styles */
+// #region Imports
+import { html } from '../../../../Dom/Html';
+// #endregion
+/**
+ * The template of the {@link GridElement}.
+ *
+ * @public
+ */
+export function dockPanelElementTemplate(e) {
+    return html `
+        <style>
+            :host {
+                --dock-panel-gap: ${e.gap};
+            }
+        </style>
+        <div part="surface">
+            <slot></slot>
+        </div>
+    `;
+}
+//# sourceMappingURL=DockPanelElementTemplate.js.map

package/Controls/Components/Layouts/Dock/DockPanelElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockPanelElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Dock/DockPanelElementTemplate.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAE7C,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AAGjE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,wBAAwB,CAA6B,CAAI;IACrE,OAAO,IAAI,CAAA;;;oCAGqB,CAAC,CAAC,GAAG;;;;;;KAMpC,CAAC;AACN,CAAC"}

package/Controls/Components/Layouts/Dock/IDockPanelElementProps.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Represents the public props of `DockPanelElement`.
+ *
+ * @public
+ */
+export interface IDockPanelElementProps {
+    /**
+     * If true, the last visible child fills the remaining space.
+     *
+     * @default true
+     * @attr last-child-fill
+     */
+    lastChildFill: boolean;
+}
+//# sourceMappingURL=IDockPanelElementProps.d.ts.map

package/Controls/Components/Layouts/Dock/IDockPanelElementProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDockPanelElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Dock/IDockPanelElementProps.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IAEnC;;;;;OAKG;IACH,aAAa,EAAE,OAAO,CAAC;CAE1B"}

package/Controls/Components/Layouts/Dock/IDockPanelElementProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IDockPanelElementProps.js.map

package/Controls/Components/Layouts/Dock/IDockPanelElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDockPanelElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Dock/IDockPanelElementProps.ts"],"names":[],"mappings":""}

package/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Cosmopolitan.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function dockPanelElementCosmopolitanStyle(): CSSResult;
+//# sourceMappingURL=DockPanelElement.Cosmopolitan.d.ts.map

package/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Cosmopolitan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockPanelElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,iCAAiC,IAAI,SAAS,CAiE7D"}

package/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Cosmopolitan.js

@@ -0,0 +1,79 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function dockPanelElementCosmopolitanStyle() {
+    return css `
+:host {
+  --dock-panel-font-family: unset;
+  --dock-panel-font-letter-spacing: unset;
+  --dock-panel-font-line-height: unset;
+  --dock-panel-font-size: unset;
+  --dock-panel-font-text-decoration: unset;
+  --dock-panel-font-text-transform: unset;
+  --dock-panel-font-weight: unset;
+  --dock-panel-gap: unset;
+  --dock-panel-padding-bottom: unset;
+  --dock-panel-padding-left: unset;
+  --dock-panel-padding-right: unset;
+  --dock-panel-padding-top: unset;
+  --dock-panel-transition-duration: unset;
+  --dock-panel-transition-mode: unset;
+  --dock-panel-transition-property: unset;
+  --dock-panel-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  gap: var(--dock-panel-gap);
+  display: block;
+  position: relative;
+}
+
+:host [part="surface"] {
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+:host ::slotted(*) {
+  box-sizing: border-box;
+}
+
+    `;
+}
+//# sourceMappingURL=DockPanelElement.Cosmopolitan.js.map

package/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Cosmopolitan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockPanelElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DT,CAAC;AACN,CAAC"}

package/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Joy.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function dockPanelElementJoyStyle(): CSSResult;
+//# sourceMappingURL=DockPanelElement.Joy.d.ts.map

package/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Joy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockPanelElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAiEpD"}

package/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Joy.js

@@ -0,0 +1,79 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function dockPanelElementJoyStyle() {
+    return css `
+:host {
+  --dock-panel-font-family: unset;
+  --dock-panel-font-letter-spacing: unset;
+  --dock-panel-font-line-height: unset;
+  --dock-panel-font-size: unset;
+  --dock-panel-font-text-decoration: unset;
+  --dock-panel-font-text-transform: unset;
+  --dock-panel-font-weight: unset;
+  --dock-panel-gap: unset;
+  --dock-panel-padding-bottom: unset;
+  --dock-panel-padding-left: unset;
+  --dock-panel-padding-right: unset;
+  --dock-panel-padding-top: unset;
+  --dock-panel-transition-duration: unset;
+  --dock-panel-transition-mode: unset;
+  --dock-panel-transition-property: unset;
+  --dock-panel-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  gap: var(--dock-panel-gap);
+  display: block;
+  position: relative;
+}
+
+:host [part="surface"] {
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+:host ::slotted(*) {
+  box-sizing: border-box;
+}
+
+    `;
+}
+//# sourceMappingURL=DockPanelElement.Joy.js.map

package/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Joy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockPanelElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DT,CAAC;AACN,CAAC"}

package/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Retro.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function dockPanelElementRetroStyle(): CSSResult;
+//# sourceMappingURL=DockPanelElement.Retro.d.ts.map

package/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Retro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockPanelElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/Dock/Themes/DockPanelElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAiEtD"}