@ngutil/layout 0.0.3-dev.0 → 0.0.3-dev.10

package/fesm2022/ngutil-layout.mjs

@@ -0,0 +1,822 @@
+import * as i0 from '@angular/core';
+import { inject, NgZone, Component, ElementRef, Input, Output, ChangeDetectionStrategy, ContentChild, ContentChildren, NgModule, Injectable, TemplateRef, Directive, ViewContainerRef, Injector } from '@angular/core';
+import { Observable, distinctUntilChanged, shareReplay, BehaviorSubject, map, combineLatest, switchMap, of, Subject, startWith, scan, tap, finalize } from 'rxjs';
+import { NumberWithUnit, Destructible, coerceBoolAttr, FastDOM } from '@ngutil/common';
+
+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 = NaN;
+        let lastSh = NaN;
+        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
+        });
+        emit();
+        return () => {
+            dimSum.unsubscribe();
+            mutation.disconnect();
+            SCROLL_WATCHES.delete(el);
+        };
+    }).pipe(shareReplay(1)));
+}
+function _number(val) {
+    return new NumberWithUnit(val, "px");
+}
+
+/**
+ * -----------------------------------------------
+ * | 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";
+        }
+    }
+}
+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", exportAs: ["nuDockingContent"], 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", exportAs: "nuDockingContent", 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");
+const INVISIBLE_SIZE = new NumberWithUnit(0, "px");
+const AUTO_SIZE = NumberWithUnit.coerce("auto");
+class DockingPanelComponent extends Destructible {
+    set positionInput(val) {
+        const coerced = L9Range.coerce(val);
+        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;
+    #contentSize;
+    #autoSize;
+    constructor() {
+        super();
+        this.el = inject((ElementRef));
+        this.position = new BehaviorSubject(DEFAULT_POSITION);
+        this.state = new BehaviorSubject("invisible");
+        this.mode = new BehaviorSubject("rigid");
+        this.#fullSize = new BehaviorSubject(AUTO_SIZE);
+        this.#miniSize = new BehaviorSubject(INVISIBLE_SIZE);
+        this.#minimizable = false;
+        this.#minimizableAuto = true;
+        this.#contentSize = watchDimension(this.el.nativeElement, "scroll-box").pipe(shareReplay(1));
+        this.#autoSize = combineLatest({
+            dim: this.#contentSize,
+            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,
+            contentSize: this.#contentSize
+        });
+        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
+            });
+            const isHorizontal = changes.position.orient === "horizontal";
+            let w = null;
+            let h = null;
+            // TODO: when change state from mini -> invisible, currently wrong behavior
+            // the good behavior is to not gain fullSize ang go to invisible
+            if (changes.state === "mini") {
+                if (isHorizontal) {
+                    h = changes.miniSize.unit === "auto" ? changes.contentSize.height : changes.miniSize;
+                }
+                else {
+                    w = changes.miniSize.unit === "auto" ? changes.contentSize.width : changes.miniSize;
+                }
+            }
+            else {
+                if (isHorizontal) {
+                    h = changes.fullSize.unit === "auto" ? changes.contentSize.height : changes.fullSize;
+                }
+                else {
+                    w = changes.fullSize.unit === "auto" ? changes.contentSize.width : changes.fullSize;
+                }
+            }
+            FastDOM.setStyle(this.el.nativeElement, {
+                "--docking-panel-w": w != null ? `${w}` : null,
+                "--docking-panel-h": h != null ? `${h}` : null,
+                "--docking-panel-content-w": changes.contentSize.width,
+                "--docking-panel-content-h": changes.contentSize.height
+            }, () => FastDOM.setAttributes(this.el.nativeElement, { animate: "" }));
+        });
+    }
+    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-content-w: var(--docking-panel-content-w, var(---docking-panel-w));---docking-panel-content-h: var(--docking-panel-content-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)}:host[animate]{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-content-w: var(--docking-panel-content-w, var(---docking-panel-w));---docking-panel-content-h: var(--docking-panel-content-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)}:host[animate]{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 RIGID_ZINDEX = 20;
+const OVER_ZINDEX = RIGID_ZINDEX * 2;
+class DockingLayoutComponent extends Destructible {
+    constructor() {
+        super(...arguments);
+        this.#el = inject((ElementRef));
+        this.contentOnly = false;
+        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.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));
+    }
+    ngOnChanges(changes) {
+        if ("contentOnly" in changes || "positionMode" in changes) {
+            this.#reflow.next();
+        }
+    }
+    #layout(entries) {
+        let paddingTop = 0;
+        let paddingRight = 0;
+        let paddingBottom = 0;
+        let paddingLeft = 0;
+        let rigidZIndex = RIGID_ZINDEX;
+        let overZIndex = OVER_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 isRigid = panelState.mode === "rigid";
+                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 (isRigid) {
+                            paddingTop = Math.max(paddingTop, panelSize);
+                        }
+                        panelTop = 0;
+                    }
+                    else if (panelState.position.cells[0].v === "bottom") {
+                        if (isRigid) {
+                            paddingBottom = Math.max(paddingBottom, panelSize);
+                        }
+                        panelBottom = 0;
+                    }
+                }
+                else {
+                    panelTop = 0;
+                    panelBottom = 0;
+                    if (panelState.position.cells[0].h === "left") {
+                        if (isRigid) {
+                            paddingLeft = Math.max(paddingLeft, panelSize);
+                        }
+                        panelLeft = 0;
+                    }
+                    else if (panelState.position.cells[0].h === "right") {
+                        if (isRigid) {
+                            paddingRight = Math.max(paddingRight, panelSize);
+                        }
+                        panelRight = 0;
+                    }
+                }
+                FastDOM.setStyle(entry.panel.el.nativeElement, {
+                    "z-index": `${isRigid ? rigidZIndex++ : overZIndex++}`,
+                    "--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
+                });
+            }
+            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`
+            });
+        }
+    }
+    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" }, 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", exportAs: ["nuDockingContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DockingLayoutComponent, decorators: [{
+            type: Component,
+            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
+            }], 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
+                }]
+        }] });
+
+const SLOT_REGEX = /^([^:\s]+)(?::(\d+))?(?:\s+as\s+(.*?))?$/i;
+class SlotDef {
+    constructor(slot, tpl) {
+        this.tpl = tpl;
+        const match = slot.match(SLOT_REGEX);
+        if (!match) {
+            console.warn(`Invalid slot definition: ${slot}`);
+        }
+        else {
+            this.slot = match[1];
+            this.order = match[2] != null ? Number(match[2]) : Infinity;
+            this.id = match[3];
+        }
+    }
+    dispose() {
+        this.viewRef?.destroy();
+        this.viewRef = undefined;
+    }
+}
+/**
+ * @Directive({selector: "ng-template[xyzSlot]", inputs: [{name: "slot", alias: "xyzSlot"}]})
+ * class XYZSlotDirective extends SlotDirective<XYZComponentSlots> { }
+ *
+ * @Directive({selector: "ng-template[xyzSlotOutlet]", inputs: [{name: "slot", alias: "xyzSlotOutlet"}]})
+ * class XYZSlotOutletDirective extends SlotOutletDirective<XYZComponentSlots> { }
+ *
+ *
+ * @Component({provides: [SlotsService]})
+ * class XYZComponent {
+ *      slots: inject(SlotsService<XYZComponentSlots>)
+ * }
+ *
+ *
+ */
+class SlotsService extends Destructible {
+    #events = new Subject();
+    #entries = this.#events.pipe(scan((entries, event) => {
+        if (event.type === "add") {
+            const index = entries.findIndex(value => value === event.def);
+            if (index > -1) {
+                entries[index] = event.def;
+            }
+            else {
+                entries.push(event.def);
+            }
+        }
+        else if (event.type === "del") {
+            const index = entries.findIndex(value => value === event.def);
+            if (index > -1) {
+                entries.splice(index, 1);
+            }
+        }
+        return entries;
+    }, []), tap(entries => {
+        entries.sort((a, b) => {
+            if (a.slot === b.slot) {
+                return a.order - b.order;
+            }
+            else {
+                return a.slot.localeCompare(b.slot);
+            }
+        });
+    }), shareReplay(1));
+    constructor() {
+        super();
+        // XXX: need to collect entries from the beginning
+        this.d.sub(this.#entries).subscribe();
+    }
+    addTpl(def) {
+        this.#events.next({ type: "add", def });
+    }
+    delTpl(def) {
+        this.#events.next({ type: "del", def });
+    }
+    #watchers = {};
+    watch(slot) {
+        const existing = this.#watchers[slot];
+        if (existing == null) {
+            return (this.#watchers[slot] = this.#watch(slot));
+        }
+        else {
+            return existing;
+        }
+    }
+    #watch(slot) {
+        return this.#entries.pipe(map(entries => entries.filter(entry => entry.slot === slot)), distinctUntilChanged((prev, curr) => {
+            if (prev.length === curr.length) {
+                for (let i = 0; i < prev.length; i++) {
+                    if (prev[i] !== curr[i]) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            else {
+                return false;
+            }
+        }), finalize(() => {
+            delete this.#watchers[slot];
+        }), shareReplay(1));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SlotsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SlotsService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SlotsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+class SlotDirective {
+    constructor() {
+        this.tpl = inject((TemplateRef));
+    }
+    set slot(slot) {
+        if (this.#slot !== slot) {
+            this.#slot = slot;
+            if (this.#slotDef) {
+                this.slotSvc.delTpl(this.#slotDef);
+            }
+            this.#slotDef = new SlotDef(slot, this.tpl);
+            this.slotSvc.addTpl(this.#slotDef);
+        }
+    }
+    get slot() {
+        return this.#slot;
+    }
+    #slot;
+    #slotDef;
+    ngOnDestroy() {
+        if (this.#slotDef) {
+            this.slotSvc.delTpl(this.#slotDef);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.3", type: SlotDirective, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SlotDirective, decorators: [{
+            type: Directive
+        }] });
+class SlotOutletDirective extends Destructible {
+    set slot(slot) {
+        if (this.#slot.value !== slot) {
+            this.#slot.next(slot);
+        }
+    }
+    get slot() {
+        return this.#slot.value;
+    }
+    #slot;
+    #watch;
+    #views;
+    constructor() {
+        super();
+        this.vcr = inject(ViewContainerRef);
+        this.injector = inject(Injector);
+        this.#slot = new BehaviorSubject(null);
+        this.#watch = this.#slot.pipe(switchMap(slot => {
+            if (slot) {
+                return this.slotSvc.watch(slot);
+            }
+            else {
+                return of([]);
+            }
+        }));
+        this.#views = [];
+        this.#onEntriesChanged = (entries) => {
+            const { remove, undecided } = this.#determineActions(entries);
+            for (const r of remove) {
+                r.dispose();
+                const idx = this.#views.indexOf(r);
+                if (idx >= 0) {
+                    this.#views.splice(idx, 1);
+                }
+            }
+            this.#views.length = 0;
+            for (const [pos, entry] of undecided.entries()) {
+                if (entry.viewRef && !entry.viewRef.destroyed) {
+                    const currentPos = this.vcr.indexOf(entry.viewRef);
+                    if (currentPos !== pos) {
+                        this.vcr.insert(entry.viewRef, pos);
+                    }
+                }
+                else {
+                    ;
+                    entry.viewRef = this.vcr.createEmbeddedView(entry.tpl, null, {
+                        index: pos,
+                        injector: this.injector
+                    });
+                    entry.viewRef.markForCheck();
+                }
+                this.#views.push(entry);
+            }
+        };
+        this.d.any(this.#clearViews.bind(this));
+    }
+    ngOnInit() {
+        this.d.sub(this.#watch).subscribe(this.#onEntriesChanged);
+    }
+    #onEntriesChanged;
+    #determineActions(entries) {
+        const byId = {};
+        let remove = [];
+        const undecided = [];
+        for (const entry of entries) {
+            if (entry.id != null) {
+                if (!byId[entry.id]) {
+                    byId[entry.id] = [entry];
+                }
+                else {
+                    byId[entry.id].push(entry);
+                }
+            }
+            else {
+                undecided.push(entry);
+            }
+        }
+        for (const values of Object.values(byId)) {
+            remove = remove.concat(values.slice(0, -1));
+            undecided.push(values[values.length - 1]);
+        }
+        for (const current of this.#views) {
+            if (!undecided.includes(current)) {
+                remove.push(current);
+            }
+        }
+        return { remove, undecided };
+    }
+    #clearViews() {
+        this.vcr.clear();
+        this.#views = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SlotOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.3", type: SlotOutletDirective, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: SlotOutletDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DockingContentComponent, DockingLayoutComponent, DockingPanelComponent, L9Cell, L9Range, L9State, NuDockingLayout, SlotDef, SlotDirective, SlotOutletDirective, SlotsService, watchDimension, watchMedia };
+//# sourceMappingURL=ngutil-layout.mjs.map