@ngutil/layout 0.0.3-dev.8 → 0.0.3

package/fesm2022/ngutil-layout.mjs

@@ -1,115 +1,8 @@
+import { BehaviorSubject, map, shareReplay, ReplaySubject, combineLatest, switchMap, of, Subject, startWith, scan, tap, distinctUntilChanged, finalize } from 'rxjs';
 import * as i0 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 { Component, inject, ElementRef, ViewChild, Input, Output, ChangeDetectionStrategy, ContentChild, ContentChildren, NgModule, Injectable, TemplateRef, Directive, ViewContainerRef, Injector } from '@angular/core';
 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 = 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");
-}
+import { DimensionWatcher } from '@ngutil/style';
 
 /**
  * -----------------------------------------------
@@ -238,29 +131,24 @@ class L9State {
             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"] }); }
+    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}\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"] }]
+            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}\n"] }]
         }] });
 
 const DEFAULT_POSITION = L9Range.coerce("left");
+const HIDDEN_SIZE = new NumberWithUnit(0, "px");
+const AUTO_SIZE = NumberWithUnit.coerce("auto");
 class DockingPanelComponent extends Destructible {
+    #dimWatcher;
     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}`);
         }
@@ -301,19 +189,22 @@ class DockingPanelComponent extends Destructible {
     }
     #minimizable;
     #minimizableAuto;
+    #contentSize;
     #autoSize;
     constructor() {
         super();
         this.el = inject((ElementRef));
+        this.#dimWatcher = inject(DimensionWatcher);
         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.state = new BehaviorSubject("full");
+        this.mode = new BehaviorSubject("rigid");
+        this.#fullSize = new BehaviorSubject(AUTO_SIZE);
+        this.#miniSize = new BehaviorSubject(HIDDEN_SIZE);
         this.#minimizable = false;
         this.#minimizableAuto = true;
+        this.#contentSize = new ReplaySubject(1);
         this.#autoSize = combineLatest({
-            dim: watchDimension(this.el.nativeElement, "scroll-box"),
+            dim: this.#contentSize,
             pos: this.position
         }).pipe(map(({ dim, pos }) => {
             if (pos.orient === "horizontal") {
@@ -344,7 +235,8 @@ class DockingPanelComponent extends Destructible {
             state: this.state,
             mode: this.mode,
             fullSize: this.fullSize,
-            miniSize: this.miniSize
+            miniSize: this.miniSize,
+            contentSize: this.#contentSize
         });
         this.d.sub(this.changes).subscribe(changes => {
             if (this.#minimizableAuto) {
@@ -356,13 +248,51 @@ class DockingPanelComponent extends Destructible {
                 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 -> hidden, currently wrong behavior
+            // the good behavior is to not gain fullSize ang go to hidden
+            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: "" }));
         });
     }
+    ngAfterViewInit() {
+        this.d
+            .sub(this.#dimWatcher.watch(this.content, "scroll-box"))
+            .pipe(map(dim => {
+            return {
+                width: new NumberWithUnit(dim.width, "px"),
+                height: new NumberWithUnit(dim.height, "px")
+            };
+        }))
+            .subscribe(this.#contentSize);
+    }
     open() {
         this.state.next("full");
     }
     close() {
-        this.state.next("invisible");
+        this.state.next("hidden");
     }
     minimize() {
         if (this.minimizable) {
@@ -370,12 +300,23 @@ class DockingPanelComponent extends Destructible {
         }
     }
     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"] }); }
+    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" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, static: true }], exportAs: ["nuDockingPanel"], usesInheritance: true, ngImport: i0, template: `
+        <div class="content" #content>
+            <ng-content></ng-content>
+        </div>
+    `, 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-g: var(--docking-panel-content-g, var(---docking-panel-h));display:flex;flex-flow:column nowrap;align-items:stretch;position:absolute;box-sizing:border-box;overflow:hidden;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=hidden][orient=horizontal]{transform:translateY(var(---docking-panel-t-hide))}:host[state=hidden][orient=vertical]{transform:translate(var(---docking-panel-t-hide))}:host:not([state=hidden])[orient=horizontal]{transform:translateY(var(---docking-panel-t-visible))}:host:not([state=hidden])[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: [{
+            args: [{ standalone: true, selector: "nu-docking-panel", exportAs: "nuDockingPanel", template: `
+        <div class="content" #content>
+            <ng-content></ng-content>
+        </div>
+    `, 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-g: var(--docking-panel-content-g, var(---docking-panel-h));display:flex;flex-flow:column nowrap;align-items:stretch;position:absolute;box-sizing:border-box;overflow:hidden;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=hidden][orient=horizontal]{transform:translateY(var(---docking-panel-t-hide))}:host[state=hidden][orient=vertical]{transform:translate(var(---docking-panel-t-hide))}:host:not([state=hidden])[orient=horizontal]{transform:translateY(var(---docking-panel-t-visible))}:host:not([state=hidden])[orient=vertical]{transform:translate(var(---docking-panel-t-visible))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { content: [{
+                type: ViewChild,
+                args: ["content", { read: ElementRef, static: true }]
+            }], positionInput: [{
                 type: Input,
                 args: ["position"]
             }], stateInput: [{
@@ -398,29 +339,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                 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 }
-//             })
-//         )
-//     }
-// }
+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.positionMode = "absolute";
         this.#reflow = new Subject();
     }
     #el;
@@ -428,25 +353,12 @@ class DockingLayoutComponent extends Destructible {
     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) {
@@ -454,13 +366,12 @@ class DockingLayoutComponent extends Destructible {
         }
     }
     #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;
+        let rigidZIndex = RIGID_ZINDEX;
+        let overZIndex = OVER_ZINDEX;
         if (this.contentOnly) {
             // TODO:...
         }
@@ -473,7 +384,7 @@ class DockingLayoutComponent extends Destructible {
                         ? panelState.miniSize.value
                         : 0;
                 const isHorizontal = panelState.position.orient === "horizontal";
-                const isEmbedded = panelState.mode === "embedded";
+                const isRigid = panelState.mode === "rigid";
                 let panelTop = null;
                 let panelRight = null;
                 let panelBottom = null;
@@ -482,13 +393,13 @@ class DockingLayoutComponent extends Destructible {
                     panelLeft = 0;
                     panelRight = 0;
                     if (panelState.position.cells[0].v === "top") {
-                        if (isEmbedded) {
+                        if (isRigid) {
                             paddingTop = Math.max(paddingTop, panelSize);
                         }
                         panelTop = 0;
                     }
                     else if (panelState.position.cells[0].v === "bottom") {
-                        if (isEmbedded) {
+                        if (isRigid) {
                             paddingBottom = Math.max(paddingBottom, panelSize);
                         }
                         panelBottom = 0;
@@ -498,40 +409,26 @@ class DockingLayoutComponent extends Destructible {
                     panelTop = 0;
                     panelBottom = 0;
                     if (panelState.position.cells[0].h === "left") {
-                        if (isEmbedded) {
+                        if (isRigid) {
                             paddingLeft = Math.max(paddingLeft, panelSize);
                         }
                         panelLeft = 0;
                     }
                     else if (panelState.position.cells[0].h === "right") {
-                        if (isEmbedded) {
+                        if (isRigid) {
                             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++}`,
+                    "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,
-                    "--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
+                    "--docking-panel-l": panelLeft != null ? `${panelLeft}px` : null
                 });
             }
-            console.log({ paddingTop, paddingRight, paddingBottom, paddingLeft });
             FastDOM.setStyle(this.#el.nativeElement, {
                 "--docking-layout-top": `${paddingTop}px`,
                 "--docking-layout-right": `${paddingRight}px`,
@@ -540,86 +437,8 @@ class DockingLayoutComponent extends Destructible {
             });
         }
     }
-    #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: `
+    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) {
@@ -629,7 +448,7 @@ class DockingLayoutComponent extends Destructible {
         } @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 }); }
+    `, 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, .3s);---docking-layout-anim-ease: var(--docking-layout-anim-ease, cubic-bezier(.4, 0, .2, 1));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,
@@ -643,11 +462,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
         } @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"] }]
+    `, 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, .3s);---docking-layout-anim-ease: var(--docking-layout-anim-ease, cubic-bezier(.4, 0, .2, 1));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]
@@ -670,9 +487,245 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                 }]
         }] });
 
+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, watchDimension, watchMedia };
+export { DockingContentComponent, DockingLayoutComponent, DockingPanelComponent, L9Cell, L9Range, L9State, NuDockingLayout, SlotDef, SlotDirective, SlotOutletDirective, SlotsService };
 //# sourceMappingURL=ngutil-layout.mjs.map