@ngutil/layout 0.0.3-dev.6 → 0.0.3-dev.8

package/fesm2022/ngutil-layout.mjs

@@ -1,19 +1,678 @@
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
+import { inject, NgZone, Component, ElementRef, Input, Output, ChangeDetectionStrategy, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import { Observable, distinctUntilChanged, shareReplay, BehaviorSubject, map, combineLatest, switchMap, of, Subject, startWith } from 'rxjs';
+import { NumberWithUnit, Destructible, coerceBoolAttr, FastDOM } from '@ngutil/common';
 
-class LayoutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: LayoutComponent, isStandalone: true, selector: "nu-layout", ngImport: i0, template: `<p>layout works!</p>`, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+const WATCHES = {};
+/**
+ * watchMedia("(display-mode: standalone)")
+ */
+function watchMedia(expr) {
+    const existing = WATCHES[expr];
+    if (existing == null) {
+        return (WATCHES[expr] = _createWatcher(expr));
+    }
+    return existing;
+}
+function _createWatcher(expr) {
+    const zone = inject(NgZone);
+    return zone.runOutsideAngular(() => new Observable((sub) => {
+        const query = window.matchMedia(expr);
+        const listener = (event) => {
+            sub.next(event.matches);
+        };
+        query.addEventListener("change", listener);
+        sub.next(query.matches);
+        return () => {
+            query.removeEventListener("change", listener);
+            delete WATCHES[expr];
+        };
+    }).pipe(distinctUntilChanged(), shareReplay(1)));
+}
+
+const RESIZE_WATCHES = new Map();
+const SCROLL_WATCHES = new Map();
+function watchDimension(el, box = "border-box") {
+    const zone = inject(NgZone);
+    return box === "scroll-box" ? _watchScroll(zone, el) : _watchResize(zone, el, box);
+}
+function _watchResize(zone, el, box) {
+    return _watch(zone, el, RESIZE_WATCHES, () => _createResizeWatcher(zone, el, box));
+}
+function _watchScroll(zone, el) {
+    return _watch(zone, el, SCROLL_WATCHES, () => _createScollWatcher(zone, el));
+}
+function _watch(zone, el, watches, factory) {
+    const existing = watches.get(el);
+    if (existing == null) {
+        const watcher = factory();
+        watches.set(el, watcher);
+        return watcher;
+    }
+    return existing;
+}
+function _createResizeWatcher(zone, el, box) {
+    if (box !== "border-box") {
+        throw new Error(`Currently not implemented box mode: ${box}`);
+    }
+    return zone.runOutsideAngular(() => new Observable((sub) => {
+        const observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                if (entry.borderBoxSize) {
+                    sub.next({
+                        width: _number(entry.borderBoxSize[0].inlineSize),
+                        height: _number(entry.borderBoxSize[0].blockSize)
+                    });
+                }
+                else {
+                    sub.next({
+                        width: _number(el.offsetWidth),
+                        height: _number(el.offsetHeight)
+                    });
+                }
+            }
+        });
+        observer.observe(el, { box: box });
+        return () => {
+            observer.disconnect();
+            RESIZE_WATCHES.delete(el);
+        };
+    }).pipe(distinctUntilChanged((p, c) => p && c && p.width === c.width && p.height === c.height), shareReplay(1)));
+}
+function _createScollWatcher(zone, el) {
+    return zone.runOutsideAngular(() => new Observable((sub) => {
+        let lastSw = 0;
+        let lastSh = 0;
+        const emit = () => {
+            const sw = el.scrollWidth;
+            const sh = el.scrollHeight;
+            if (lastSw !== sw || lastSh !== sh) {
+                lastSw = sw;
+                lastSh = sh;
+                sub.next({ width: _number(lastSw), height: _number(lastSh) });
+            }
+        };
+        const dimSum = _watchResize(zone, el, "border-box").subscribe(emit);
+        const mutation = new MutationObserver(emit);
+        mutation.observe(el, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            characterData: true
+        });
+        return () => {
+            dimSum.unsubscribe();
+            mutation.disconnect();
+            SCROLL_WATCHES.delete(el);
+        };
+    }).pipe(shareReplay(1)));
+}
+function _number(val) {
+    return new NumberWithUnit(val, "pk");
+}
+
+/**
+ * -----------------------------------------------
+ * | TOP:LEFT     |  TOP:CENTER   | TOP:RIGHT    |
+ * -----------------------------------------------
+ * | MIDDLE:LEFT  | MIDDLE:CENTER | MIDDLE:RIGH  |
+ * -----------------------------------------------
+ * | BOTTOMN:LEFT | BOTTOM:CENTER | BOTTOM:RIGHT |
+ * -----------------------------------------------
+ */
+const vertical = ["top", "middle", "bottom"];
+const horizontal = ["left", "center", "right"];
+class L9Cell {
+    static coerce(value) {
+        const [v, h] = value.split(":");
+        if (vertical.includes(v) && horizontal.includes(h)) {
+            return new L9Cell(v, h);
+        }
+        throw new Error(`Invalid cell value: ${value}`);
+    }
+    constructor(v, h) {
+        this.v = v;
+        this.h = h;
+    }
+}
+class L9Range {
+    static coerce(value) {
+        if (value instanceof L9Range) {
+            return value;
+        }
+        else {
+            return new L9Range(value);
+        }
+    }
+    constructor(range) {
+        this.cells = parse(range);
+        this.orient = this.#determineOrient();
+    }
+    isEq(other) {
+        if (other instanceof L9Range) {
+            const selfFirst = this.cells[0];
+            const otherFirst = other.cells[0];
+            if (selfFirst.h !== otherFirst.h || selfFirst.v !== otherFirst.v) {
+                return false;
+            }
+            const selfLast = this.cells[this.cells.length - 1];
+            const otherLast = other.cells[other.cells.length - 1];
+            if (selfLast.h === otherLast.h && selfLast.v === otherLast.v) {
+                return true;
+            }
+        }
+        return false;
+    }
+    #determineOrient() {
+        const { v: sv, h: sh } = this.cells[0];
+        const { v: ev, h: eh } = this.cells[this.cells.length - 1];
+        if (sv === ev) {
+            return "horizontal";
+        }
+        else if (sh === eh) {
+            return "vertical";
+        }
+        else {
+            return "rect";
+        }
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: LayoutComponent, decorators: [{
+function parse(value) {
+    const cells = [];
+    if (vertical.includes(value)) {
+        for (const h of horizontal) {
+            cells.push(new L9Cell(value, h));
+        }
+    }
+    else if (horizontal.includes(value)) {
+        for (const v of vertical) {
+            cells.push(new L9Cell(v, value));
+        }
+    }
+    else if (value.includes("-")) {
+        const [begin, end] = value.split("-");
+        const beginCells = parse(begin);
+        const endCells = parse(end);
+        if (beginCells.length > 1) {
+            throw new Error(`Currently not supported begin range value: ${begin}`);
+        }
+        if (endCells.length > 1) {
+            throw new Error(`Currently not supported end range value: ${end}`);
+        }
+        const { v: bv, h: bh } = beginCells[0];
+        const { v: ev, h: eh } = endCells[0];
+        const vstart = Math.min(vertical.indexOf(bv), vertical.indexOf(ev));
+        const vend = Math.max(vertical.indexOf(bv), vertical.indexOf(ev));
+        const hstart = Math.min(horizontal.indexOf(bh), horizontal.indexOf(eh));
+        const hend = Math.max(horizontal.indexOf(bh), horizontal.indexOf(eh));
+        for (let vi = vstart; vi <= vend; vi++) {
+            for (let hi = hstart; hi <= hend; hi++) {
+                cells.push(new L9Cell(vertical[vi], horizontal[hi]));
+            }
+        }
+    }
+    else if (value.includes(":")) {
+        cells.push(L9Cell.coerce(value));
+    }
+    if (cells.length === 0) {
+        throw Error(`Undefined l9cell: "${value}"`);
+    }
+    return cells;
+}
+
+class L9State {
+    #dims;
+    constructor(prefix) {
+        this.prefix = prefix;
+        this.#dims = new BehaviorSubject({});
+        this.style = this.#dims.pipe(map(dims => {
+            const res = {};
+            for (const [k, v] of Object.entries(dims)) {
+                if (v == null) {
+                    continue;
+                }
+                const [vertical, horizontal] = k.split(":");
+                res[`--${this.prefix}-${vertical}-${horizontal}-w`] = v.width.toString();
+                res[`--${this.prefix}-${vertical}-${horizontal}-h`] = v.height.toString();
+            }
+            return res;
+        }), shareReplay(1));
+    }
+    update(range, dim) {
+        range = L9Range.coerce(range);
+        const dims = { ...this.#dims.value };
+        // for (const cell of range.horizontals) {
+        //     dims[cell] = dim.width
+        // }
+    }
+}
+
+class DockingContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DockingContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: DockingContentComponent, isStandalone: true, selector: "nu-docking-content", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:flex;flex-flow:column nowrap;align-items:stretch;box-sizing:border-box;flex:1;overflow:auto}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DockingContentComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "nu-docking-content", template: `<ng-content></ng-content>`, styles: [":host{display:flex;flex-flow:column nowrap;align-items:stretch;box-sizing:border-box;flex:1;overflow:auto}\n"] }]
+        }] });
+
+const DEFAULT_POSITION = L9Range.coerce("left");
+class DockingPanelComponent extends Destructible {
+    set positionInput(val) {
+        const coerced = L9Range.coerce(val);
+        console.log("SET POSITION", coerced, this.position.value.isEq(coerced));
+        if (coerced.orient === "rect") {
+            throw new Error(`Invalid position value: ${val}`);
+        }
+        if (!this.position.value.isEq(coerced)) {
+            this.position.next(coerced);
+        }
+    }
+    set stateInput(val) {
+        if (this.state.value !== val) {
+            this.state.next(val);
+        }
+    }
+    set modeInput(val) {
+        if (this.mode.value !== val) {
+            this.mode.next(val);
+        }
+    }
+    set fullSizeInput(val) {
+        const coerced = NumberWithUnit.coerce(val, "px");
+        if (this.#fullSize.value !== coerced) {
+            this.#fullSize.next(coerced);
+        }
+    }
+    #fullSize;
+    set miniSizeInput(val) {
+        const coerced = NumberWithUnit.coerce(val, "px");
+        if (this.#miniSize.value !== coerced) {
+            this.#miniSize.next(coerced);
+        }
+    }
+    #miniSize;
+    set minimizable(val) {
+        this.#minimizable = coerceBoolAttr(val);
+        this.#minimizableAuto = false;
+    }
+    get minimizable() {
+        return this.#minimizable;
+    }
+    #minimizable;
+    #minimizableAuto;
+    #autoSize;
+    constructor() {
+        super();
+        this.el = inject((ElementRef));
+        this.position = new BehaviorSubject(DEFAULT_POSITION);
+        this.state = new BehaviorSubject("invisible");
+        this.mode = new BehaviorSubject("overlay");
+        this.#fullSize = new BehaviorSubject(NumberWithUnit.coerce(0));
+        this.#miniSize = new BehaviorSubject(NumberWithUnit.coerce(0));
+        this.#minimizable = false;
+        this.#minimizableAuto = true;
+        this.#autoSize = combineLatest({
+            dim: watchDimension(this.el.nativeElement, "scroll-box"),
+            pos: this.position
+        }).pipe(map(({ dim, pos }) => {
+            if (pos.orient === "horizontal") {
+                return dim.height;
+            }
+            else {
+                return dim.width;
+            }
+        }), shareReplay(1));
+        this.fullSize = this.#fullSize.pipe(switchMap(size => {
+            if (size.unit === "auto") {
+                return this.#autoSize;
+            }
+            else {
+                return of(size);
+            }
+        }), shareReplay(1));
+        this.miniSize = this.#miniSize.pipe(switchMap(size => {
+            if (size.unit === "auto") {
+                return this.#autoSize;
+            }
+            else {
+                return of(size);
+            }
+        }), shareReplay(1));
+        this.changes = combineLatest({
+            position: this.position,
+            state: this.state,
+            mode: this.mode,
+            fullSize: this.fullSize,
+            miniSize: this.miniSize
+        });
+        this.d.sub(this.changes).subscribe(changes => {
+            if (this.#minimizableAuto) {
+                this.#minimizable = this.#miniSize.value.value !== 0;
+            }
+            FastDOM.setAttributes(this.el.nativeElement, {
+                state: changes.state,
+                orient: changes.position.orient,
+                mode: changes.mode,
+                side: changes.position.orient === "horizontal" ? changes.position.cells[0].v : changes.position.cells[0].h
+            });
+        });
+    }
+    open() {
+        this.state.next("full");
+    }
+    close() {
+        this.state.next("invisible");
+    }
+    minimize() {
+        if (this.minimizable) {
+            this.state.next("mini");
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DockingPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: DockingPanelComponent, isStandalone: true, selector: "nu-docking-panel", inputs: { positionInput: ["position", "positionInput"], stateInput: ["state", "stateInput"], modeInput: ["mode", "modeInput"], fullSizeInput: ["fullSize", "fullSizeInput"], miniSizeInput: ["miniSize", "miniSizeInput"], minimizable: "minimizable" }, outputs: { state: "stateChanges" }, exportAs: ["nuDockingPanel"], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{---docking-panel-t: var(--docking-panel-t, auto);---docking-panel-r: var(--docking-panel-r, auto);---docking-panel-b: var(--docking-panel-b, auto);---docking-panel-l: var(--docking-panel-l, auto);---docking-panel-w: var(--docking-panel-w, auto);---docking-panel-h: var(--docking-panel-h, auto);---docking-panel-real-w: var(--docking-panel-real-w, var(---docking-panel-w));---docking-panel-real-h: var(--docking-panel-real-h, var(---docking-panel-h));display:flex;flex-flow:column nowrap;align-items:stretch;position:absolute;box-sizing:border-box;top:var(---docking-panel-t);right:var(---docking-panel-r);bottom:var(---docking-panel-b);left:var(---docking-panel-l);width:var(---docking-panel-w);height:var(---docking-panel-h);transition:transform var(---docking-layout-anim-duration) var(---docking-layout-anim-ease),width var(---docking-layout-anim-duration) var(---docking-layout-anim-ease),height var(---docking-layout-anim-duration) var(---docking-layout-anim-ease)}:host[side=top],:host[side=left]{---docking-panel-t-hide: -100%;---docking-panel-t-visible: 0%}:host[side=bottom],:host[side=right]{---docking-panel-t-hide: 100%;---docking-panel-t-visible: 0%}:host[state=invisible][orient=horizontal]{transform:translateY(var(---docking-panel-t-hide))}:host[state=invisible][orient=vertical]{transform:translate(var(---docking-panel-t-hide))}:host:not([state=invisible])[orient=horizontal]{transform:translateY(var(---docking-panel-t-visible))}:host:not([state=invisible])[orient=vertical]{transform:translate(var(---docking-panel-t-visible))}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DockingPanelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "nu-docking-panel", exportAs: "nuDockingPanel", template: `<ng-content></ng-content>`, styles: [":host{---docking-panel-t: var(--docking-panel-t, auto);---docking-panel-r: var(--docking-panel-r, auto);---docking-panel-b: var(--docking-panel-b, auto);---docking-panel-l: var(--docking-panel-l, auto);---docking-panel-w: var(--docking-panel-w, auto);---docking-panel-h: var(--docking-panel-h, auto);---docking-panel-real-w: var(--docking-panel-real-w, var(---docking-panel-w));---docking-panel-real-h: var(--docking-panel-real-h, var(---docking-panel-h));display:flex;flex-flow:column nowrap;align-items:stretch;position:absolute;box-sizing:border-box;top:var(---docking-panel-t);right:var(---docking-panel-r);bottom:var(---docking-panel-b);left:var(---docking-panel-l);width:var(---docking-panel-w);height:var(---docking-panel-h);transition:transform var(---docking-layout-anim-duration) var(---docking-layout-anim-ease),width var(---docking-layout-anim-duration) var(---docking-layout-anim-ease),height var(---docking-layout-anim-duration) var(---docking-layout-anim-ease)}:host[side=top],:host[side=left]{---docking-panel-t-hide: -100%;---docking-panel-t-visible: 0%}:host[side=bottom],:host[side=right]{---docking-panel-t-hide: 100%;---docking-panel-t-visible: 0%}:host[state=invisible][orient=horizontal]{transform:translateY(var(---docking-panel-t-hide))}:host[state=invisible][orient=vertical]{transform:translate(var(---docking-panel-t-hide))}:host:not([state=invisible])[orient=horizontal]{transform:translateY(var(---docking-panel-t-visible))}:host:not([state=invisible])[orient=vertical]{transform:translate(var(---docking-panel-t-visible))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { positionInput: [{
+                type: Input,
+                args: ["position"]
+            }], stateInput: [{
+                type: Input,
+                args: ["state"]
+            }], state: [{
+                type: Output,
+                args: ["stateChanges"]
+            }], modeInput: [{
+                type: Input,
+                args: ["mode"]
+            }], fullSizeInput: [{
+                type: Input,
+                args: ["fullSize"]
+            }], miniSizeInput: [{
+                type: Input,
+                args: ["miniSize"]
+            }], minimizable: [{
+                type: Input,
+                args: ["minimizable"]
+            }] } });
+
+const EMBEDDED_ZINDEX = 20;
+const OVERLAY_ZINDEX = EMBEDDED_ZINDEX * 2;
+// interface PanelRefChanges {
+//     ref: PanelRef
+//     changes: DockingPanelChanges
+// }
+// class PanelRef {
+//     style: Partial<CSSStyleDeclaration> = {}
+//     readonly changes: Observable<PanelRefChanges>
+//     constructor(public readonly panel: DockingPanelDirective) {
+//         this.changes = panel.changes.pipe(
+//             map(changes => {
+//                 return { ref: this, changes }
+//             })
+//         )
+//     }
+// }
+class DockingLayoutComponent extends Destructible {
+    constructor() {
+        super(...arguments);
+        this.#el = inject((ElementRef));
+        this.contentOnly = false;
+        this.positionMode = "absolute";
+        this.#reflow = new Subject();
+    }
+    #el;
+    #reflow;
+    ngAfterViewInit() {
+        // eslint-disable-next-line prettier/prettier
+        this.panels = this.dockingPanels.changes.pipe(startWith(null), map(() => this.dockingPanels.toArray()), shareReplay(1));
+        // this.panels.subscribe(panels => console.log({ panels }))
+        this.d
+            .sub(combineLatest({ panels: this.panels, reflow: this.#reflow.pipe(startWith(null)) }))
+            .pipe(switchMap(({ panels }) => combineLatest(panels.map(panel => panel.changes.pipe(map(changes => {
+            return { panel, changes };
+        }))))))
+            .subscribe(this.#layout.bind(this));
+        // this.d
+        //     .sub(merge(this.dockingPanels.changes, this.#reflow))
+        //     .pipe(
+        //         startWith(null),
+        //         map(() => this.dockingPanels.map(panel => new PanelRef(panel))),
+        //         switchMap(refs => combineLatest(refs.map(ref => ref.changes))),
+        //         map(changes => {
+        //             this.#layout(changes)
+        //             return changes.map(c => c.ref)
+        //         })
+        //     )
+        //     .subscribe(this.panels)
+    }
+    ngOnChanges(changes) {
+        if ("contentOnly" in changes || "positionMode" in changes) {
+            this.#reflow.next();
+        }
+    }
+    #layout(entries) {
+        console.log("layout", entries);
+        let paddingTop = 0;
+        let paddingRight = 0;
+        let paddingBottom = 0;
+        let paddingLeft = 0;
+        let embeddedZIndex = EMBEDDED_ZINDEX;
+        let overlayZIndex = OVERLAY_ZINDEX;
+        if (this.contentOnly) {
+            // TODO:...
+        }
+        else {
+            for (const entry of entries) {
+                const panelState = entry.changes;
+                const panelSize = panelState.state === "full"
+                    ? panelState.fullSize.value
+                    : panelState.state === "mini"
+                        ? panelState.miniSize.value
+                        : 0;
+                const isHorizontal = panelState.position.orient === "horizontal";
+                const isEmbedded = panelState.mode === "embedded";
+                let panelTop = null;
+                let panelRight = null;
+                let panelBottom = null;
+                let panelLeft = null;
+                if (isHorizontal) {
+                    panelLeft = 0;
+                    panelRight = 0;
+                    if (panelState.position.cells[0].v === "top") {
+                        if (isEmbedded) {
+                            paddingTop = Math.max(paddingTop, panelSize);
+                        }
+                        panelTop = 0;
+                    }
+                    else if (panelState.position.cells[0].v === "bottom") {
+                        if (isEmbedded) {
+                            paddingBottom = Math.max(paddingBottom, panelSize);
+                        }
+                        panelBottom = 0;
+                    }
+                }
+                else {
+                    panelTop = 0;
+                    panelBottom = 0;
+                    if (panelState.position.cells[0].h === "left") {
+                        if (isEmbedded) {
+                            paddingLeft = Math.max(paddingLeft, panelSize);
+                        }
+                        panelLeft = 0;
+                    }
+                    else if (panelState.position.cells[0].h === "right") {
+                        if (isEmbedded) {
+                            paddingRight = Math.max(paddingRight, panelSize);
+                        }
+                        panelRight = 0;
+                    }
+                }
+                const panelGivenSize = panelState.state === "full"
+                    ? panelState.fullSize
+                    : panelState.state === "mini"
+                        ? panelState.miniSize
+                        : new NumberWithUnit(0, "px");
+                FastDOM.setStyle(entry.panel.el.nativeElement, {
+                    "z-index": `${isEmbedded ? embeddedZIndex++ : overlayZIndex++}`,
+                    "--docking-panel-t": panelTop != null ? `${panelTop}px` : null,
+                    "--docking-panel-r": panelRight != null ? `${panelRight}px` : null,
+                    "--docking-panel-b": panelBottom != null ? `${panelBottom}px` : null,
+                    "--docking-panel-l": panelLeft != null ? `${panelLeft}px` : null,
+                    "--docking-panel-w": !isHorizontal
+                        ? `${panelGivenSize.unit === "auto" ? "auto" : panelGivenSize}`
+                        : null,
+                    "--docking-panel-h": isHorizontal
+                        ? `${panelGivenSize.unit === "auto" ? "auto" : panelGivenSize}`
+                        : null,
+                    "--docking-panel-real-w": !isHorizontal ? `${panelSize}px` : null,
+                    "--docking-panel-real-h": isHorizontal ? `${panelSize}px` : null
+                });
+            }
+            console.log({ paddingTop, paddingRight, paddingBottom, paddingLeft });
+            FastDOM.setStyle(this.#el.nativeElement, {
+                "--docking-layout-top": `${paddingTop}px`,
+                "--docking-layout-right": `${paddingRight}px`,
+                "--docking-layout-bottom": `${paddingBottom}px`,
+                "--docking-layout-left": `${paddingLeft}px`
+            });
+        }
+    }
+    #layoutOld(entries) {
+        // let paddingTop = 0
+        // let paddingRight = 0
+        // let paddingBottom = 0
+        // let paddingLeft = 0
+        // if (!this.contentOnly) {
+        //     let embeddedZIndex = EMBEDDED_ZINDEX
+        //     let overlayZIndex = OVERLAY_ZINDEX
+        //     const leftRight: PanelRefChanges[] = entries.filter(v =>
+        //         ["left", "right"].includes(v.changes.position.side)
+        //     )
+        //     const topBottom: PanelRefChanges[] = entries.filter(v =>
+        //         ["top", "bottom"].includes(v.changes.position.side)
+        //     )
+        //     for (const entry of entries) {
+        //         const changes = entry.changes
+        //         const ref = entry.ref
+        //         if (changes.mode === "embedded") {
+        //             ref.style.zIndex = `${embeddedZIndex++}`
+        //         } else if (changes.mode === "overlay") {
+        //             ref.style.zIndex = `${overlayZIndex++}`
+        //         }
+        //     }
+        //     for (const entry of leftRight) {
+        //         const changes = entry.changes
+        //         const ref = entry.ref
+        //         const padding =
+        //             changes.mode === "embedded"
+        //                 ? changes.state === "full"
+        //                     ? changes.fullSize
+        //                     : changes.state === "mini"
+        //                       ? changes.miniSize
+        //                       : 0
+        //                 : 0
+        //         ref.style.top = "0"
+        //         ref.style.bottom = "0"
+        //         if (changes.position.side === "left") {
+        //             paddingLeft = Math.max(paddingLeft, padding)
+        //             ref.style.left = "0"
+        //             ref.style.right = ""
+        //         } else {
+        //             paddingRight = Math.max(paddingRight, padding)
+        //             ref.style.right = "0"
+        //             ref.style.left = ""
+        //         }
+        //     }
+        //     for (const entry of topBottom) {
+        //         const changes = entry.changes
+        //         const ref = entry.ref
+        //         const padding =
+        //             changes.mode === "embedded"
+        //                 ? changes.state === "full"
+        //                     ? changes.fullSize
+        //                     : changes.state === "mini"
+        //                       ? changes.miniSize
+        //                       : 0
+        //                 : 0
+        //         if (changes.mode === "embedded") {
+        //             ref.style.left = `${paddingLeft}px`
+        //             ref.style.right = `${paddingRight}px`
+        //         } else {
+        //             ref.style.left = "0"
+        //             ref.style.right = "0"
+        //         }
+        //         if (changes.position?.cells[0].v === "top") {
+        //             paddingTop = Math.max(paddingTop, padding)
+        //             ref.style.top = "0"
+        //             ref.style.bottom = ""
+        //         } else {
+        //             paddingBottom = Math.max(paddingBottom, padding)
+        //             ref.style.bottom = `0`
+        //             ref.style.top = ""
+        //         }
+        //     }
+        // }
+        // const cel = this.contentEl.nativeElement
+        // cel.style.padding = `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DockingLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: DockingLayoutComponent, isStandalone: true, selector: "nu-docking", inputs: { contentOnly: "contentOnly", positionMode: "positionMode" }, queries: [{ propertyName: "contentComponent", first: true, predicate: DockingContentComponent, descendants: true }, { propertyName: "dockingPanels", predicate: DockingPanelComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <ng-content select="nu-docking-panel"></ng-content>
+
+        @if (!contentComponent) {
+            <nu-docking-content>
+                <ng-content></ng-content>
+            </nu-docking-content>
+        } @else {
+            <ng-content select="nu-docking-content"></ng-content>
+        }
+    `, isInline: true, styles: [":host{---docking-layout-top: var(--docking-layout-top, 0px);---docking-layout-right: var(--docking-layout-right, 0px);---docking-layout-bottom: var(--docking-layout-bottom, 0px);---docking-layout-left: var(--docking-layout-left, 0px);---docking-layout-anim-duration: var(--docking-layout-anim-duration, .2s);---docking-layout-anim-ease: var(--docking-layout-anim-ease, ease-out);display:flex;flex-flow:column nowrap;align-items:stretch;position:relative;overflow:hidden;box-sizing:border-box;z-index:0;padding:var(---docking-layout-top) var(---docking-layout-right) var(---docking-layout-bottom) var(---docking-layout-left);transition:padding var(---docking-layout-anim-duration) var(---docking-layout-anim-ease)}\n"], dependencies: [{ kind: "component", type: DockingContentComponent, selector: "nu-docking-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DockingLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nu-layout", standalone: true, imports: [CommonModule], template: `<p>layout works!</p>` }]
+            args: [{ selector: "nu-docking", standalone: true, imports: [DockingContentComponent], template: `
+        <ng-content select="nu-docking-panel"></ng-content>
+
+        @if (!contentComponent) {
+            <nu-docking-content>
+                <ng-content></ng-content>
+            </nu-docking-content>
+        } @else {
+            <ng-content select="nu-docking-content"></ng-content>
+        }
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{---docking-layout-top: var(--docking-layout-top, 0px);---docking-layout-right: var(--docking-layout-right, 0px);---docking-layout-bottom: var(--docking-layout-bottom, 0px);---docking-layout-left: var(--docking-layout-left, 0px);---docking-layout-anim-duration: var(--docking-layout-anim-duration, .2s);---docking-layout-anim-ease: var(--docking-layout-anim-ease, ease-out);display:flex;flex-flow:column nowrap;align-items:stretch;position:relative;overflow:hidden;box-sizing:border-box;z-index:0;padding:var(---docking-layout-top) var(---docking-layout-right) var(---docking-layout-bottom) var(---docking-layout-left);transition:padding var(---docking-layout-anim-duration) var(---docking-layout-anim-ease)}\n"] }]
+        }], propDecorators: { contentOnly: [{
+                type: Input
+            }], positionMode: [{
+                type: Input
+            }], contentComponent: [{
+                type: ContentChild,
+                args: [DockingContentComponent]
+            }], dockingPanels: [{
+                type: ContentChildren,
+                args: [DockingPanelComponent]
+            }] } });
+
+const members = [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent];
+class NuDockingLayout {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NuDockingLayout, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.3", ngImport: i0, type: NuDockingLayout, imports: [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent], exports: [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NuDockingLayout }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NuDockingLayout, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: members,
+                    exports: members
+                }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LayoutComponent };
+export { DockingContentComponent, DockingLayoutComponent, DockingPanelComponent, L9Cell, L9Range, L9State, NuDockingLayout, watchDimension, watchMedia };
 //# sourceMappingURL=ngutil-layout.mjs.map