@ngutil/layout 0.0.63 → 0.0.64

package/fesm2022/ngutil-layout.mjs

@@ -1,36 +1,37 @@
-import { BehaviorSubject, map, shareReplay, ReplaySubject, combineLatest, switchMap, of, Subject, startWith, scan, tap, distinctUntilChanged, finalize } from 'rxjs';
+import { BehaviorSubject, map, shareReplay, switchMap, Subject, scan, tap, distinctUntilChanged, finalize, of } from 'rxjs';
 import * as i0 from '@angular/core';
-import { Component, HostBinding, inject, ElementRef, ViewChild, Input, Output, ChangeDetectionStrategy, ContentChild, ContentChildren, NgModule, Injectable, TemplateRef, Directive, ViewContainerRef, Injector, signal, output, effect, contentChildren, input, computed } from '@angular/core';
-import { NumberWithUnit, Destructible, coerceBoolAttr, FastDOM } from '@ngutil/common';
+import { Component, input, inject, ElementRef, model, computed, viewChild, contentChildren, NgModule, Injectable, TemplateRef, Directive, ViewContainerRef, Injector, signal, output, effect } from '@angular/core';
+import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { coerceBoolAttr, Destructible } from '@ngutil/common';
 import { DimensionWatcher, Duration, Ease } from '@ngutil/style';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { clamp } from 'lodash';
 
-/**
- * -----------------------------------------------
- * | 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"];
+const L9GridTopLeft = { row: 1, col: 1 };
 class L9Cell {
     static coerce(value) {
-        const [v, h] = value.split(":");
-        if (vertical.includes(v) && horizontal.includes(h)) {
-            return new L9Cell(v, h);
+        const [v1, v2] = value.split(":");
+        const v = vertical.includes(v1) ? v1 : v2;
+        const h = horizontal.includes(v1) ? v1 : v2;
+        if (v === h) {
+            throw new Error(`Invalid cell value: ${value}`);
         }
-        throw new Error(`Invalid cell value: ${value}`);
+        return new L9Cell(v, h);
     }
     constructor(v, h) {
         this.v = v;
         this.h = h;
     }
+    intoGridArea(gridTopLeft = L9GridTopLeft) {
+        return `${gridTopLeft.row + vertical.indexOf(this.v)}/${gridTopLeft.col + horizontal.indexOf(this.h)}`;
+    }
+    isEq(other) {
+        return this.v === other.v && this.h === other.h;
+    }
 }
 class L9Range {
     static coerce(value) {
@@ -60,18 +61,40 @@ class L9Range {
         }
         return false;
     }
+    intoGridArea(gridTopLeft = L9GridTopLeft) {
+        const start = this.cells[0];
+        const end = this.cells[this.cells.length - 1];
+        const endTopLeft = { row: gridTopLeft.row + 1, col: gridTopLeft.col + 1 };
+        return `${start.intoGridArea(gridTopLeft)}/${end.intoGridArea(endTopLeft)}`;
+    }
+    intoRect() {
+        const start = this.cells[0];
+        const end = this.cells[this.cells.length - 1];
+        const x = horizontal.indexOf(start.h);
+        const y = vertical.indexOf(start.v);
+        return { x, y, width: horizontal.indexOf(end.h) - x + 1, height: vertical.indexOf(end.v) - y + 1 };
+    }
     #determineOrient() {
-        const { v: sv, h: sh } = this.cells[0];
-        const { v: ev, h: eh } = this.cells[this.cells.length - 1];
-        if (sv === ev) {
+        const rect = this.intoRect();
+        if (rect.width === rect.height) {
+            // corner
+            if (rect.x === rect.y) {
+                return "vertical";
+            }
+            if (rect.x === 0 || rect.x === 2) {
+                return "vertical";
+            }
+            else if (rect.y === 0 || rect.y === 2) {
+                return "horizontal";
+            }
+        }
+        else if (rect.width > rect.height) {
             return "horizontal";
         }
-        else if (sh === eh) {
+        else if (rect.height > rect.width) {
             return "vertical";
         }
-        else {
-            return "rect";
-        }
+        return "vertical";
     }
 }
 function parse(value) {
@@ -139,400 +162,125 @@ class L9State {
 
 class DockingContentComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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:hidden}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: DockingContentComponent, isStandalone: true, selector: "nu-docking-content", exportAs: ["nuDockingContent"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;align-items:stretch;justify-items:stretch;overflow:hidden;position:relative;z-index:10}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", 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:hidden}\n"] }]
+            args: [{ selector: "nu-docking-content", exportAs: "nuDockingContent", standalone: true, template: `<ng-content></ng-content>`, styles: [":host{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;align-items:stretch;justify-items:stretch;overflow:hidden;position:relative;z-index:10}\n"] }]
         }] });
 
 class DockingBackdropComponent {
     constructor() {
-        this.state = "hidden";
+        this.visible = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: DockingBackdropComponent, isStandalone: true, selector: "nu-docking-backdrop", host: { properties: { "[attr.state]": "this.state" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:stretch;position:absolute;inset:0;transition:opacity var(---docking-layout-anim-duration) var(---docking-layout-anim-ease);z-index:-1;background-color:var(---docking-layout-backdrop-color)}:host[state=hidden]{animation:var(---docking-layout-anim-duration) var(---docking-layout-anim-ease) hide;animation-fill-mode:forwards;pointer-events:none;touch-action:none;opacity:0}:host[state=visible]{visibility:visible;opacity:.3}@keyframes hide{99%{visibility:visible}to{visibility:hidden}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.6", type: DockingBackdropComponent, isStandalone: true, selector: "nu-docking-backdrop", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.state": "visible() ? 'visible' : 'hidden'" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:stretch;position:absolute;inset:0;transition:opacity .2s cubic-bezier(0,0,.2,1);z-index:200;background-color:#000}:host[state=hidden]{animation:.2s cubic-bezier(0,0,.2,1) hide;animation-fill-mode:forwards;pointer-events:none;touch-action:none;opacity:0}:host[state=visible]{visibility:visible;opacity:.7}@keyframes hide{99%{visibility:visible}to{visibility:hidden}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingBackdropComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "nu-docking-backdrop", template: ``, styles: [":host{display:flex;flex-direction:column;align-items:stretch;position:absolute;inset:0;transition:opacity var(---docking-layout-anim-duration) var(---docking-layout-anim-ease);z-index:-1;background-color:var(---docking-layout-backdrop-color)}:host[state=hidden]{animation:var(---docking-layout-anim-duration) var(---docking-layout-anim-ease) hide;animation-fill-mode:forwards;pointer-events:none;touch-action:none;opacity:0}:host[state=visible]{visibility:visible;opacity:.3}@keyframes hide{99%{visibility:visible}to{visibility:hidden}}\n"] }]
-        }], propDecorators: { state: [{
-                type: HostBinding,
-                args: ["[attr.state]"]
-            }] } });
+            args: [{ standalone: true, selector: "nu-docking-backdrop", host: {
+                        "[attr.state]": "visible() ? 'visible' : 'hidden'"
+                    }, template: ``, styles: [":host{display:flex;flex-direction:column;align-items:stretch;position:absolute;inset:0;transition:opacity .2s cubic-bezier(0,0,.2,1);z-index:200;background-color:#000}:host[state=hidden]{animation:.2s cubic-bezier(0,0,.2,1) hide;animation-fill-mode:forwards;pointer-events:none;touch-action:none;opacity:0}:host[state=visible]{visibility:visible;opacity:.7}@keyframes hide{99%{visibility:visible}to{visibility:hidden}}\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);
-        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;
-    set backdrop(val) {
-        this.#backdrop = coerceBoolAttr(val);
-    }
-    get backdrop() {
-        return this.#backdrop;
-    }
-    #backdrop;
-    #contentSize;
-    #autoSize;
-    // TODO: better animation handling in min -> hidden -> min -> full
+class DockingPanelComponent {
     constructor() {
-        super();
-        this.el = inject((ElementRef));
         this.#dimWatcher = inject(DimensionWatcher);
-        this.position = new BehaviorSubject(DEFAULT_POSITION);
-        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.#backdrop = false;
-        this.#contentSize = new ReplaySubject(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.el = inject(ElementRef);
+        this.position = input(DEFAULT_POSITION, { transform: L9Range.coerce });
+        // TODO: linkedSignal
+        this.opened = model(false);
+        this._opened = computed(() => coerceBoolAttr(this.opened()));
+        this.mode = input("rigid");
+        this.maxSize = input(undefined);
+        this.backdrop = input(false);
+        this.gridArea = computed(() => this.position().intoGridArea());
+        this.orient = computed(() => this.position().orient);
+        this.side = computed(() => {
+            const pos = this.position();
+            return pos.orient === "horizontal" ? pos.cells[0].v : pos.cells[0].h;
         });
-        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 -> 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: "" }));
+        this.content = viewChild.required("content", { read: ElementRef });
+        this.dimension$ = toObservable(this.content).pipe(switchMap(content => this.#dimWatcher.watch(content, "border-box")), takeUntilDestroyed());
+        this.dimension = toSignal(this.dimension$);
+        this.contentSize = computed(() => {
+            const dim = this.dimension();
+            if (!dim) {
+                return 0;
+            }
+            return this.orient() === "horizontal" ? dim.height : dim.width;
         });
     }
-    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);
-    }
+    #dimWatcher;
+    // readonly backdropSize = computed(() => {
+    //     const mode = this.backdrop()
+    //     if (mode === true || mode === "full") {
+    //         return L9Range.coerce("top:left-bottom:right").intoGridArea()
+    //     } else if (mode === "panel-size") {
+    //         const pos = this.position()
+    //         if (pos.orient === "horizontal") {
+    //         }
+    //         return ""
+    //     }
+    //     return null
+    // })
     open() {
-        this.state.next("full");
+        this.opened.set(true);
     }
     close() {
-        this.state.next("hidden");
-    }
-    minimize() {
-        if (this.minimizable) {
-            this.state.next("mini");
-        }
+        this.opened.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", 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", backdrop: "backdrop" }, 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="nu-docking-wrapper" #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]{animation:var(---docking-layout-anim-duration) var(---docking-layout-anim-ease) hide;animation-fill-mode:forwards}: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]){visibility:visible}: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))}:host .nu-docking-wrapper{display:flex;flex-direction:column;align-items:stretch}:host[orient=horizontal] .nu-docking-wrapper{width:100%;min-width:100%;max-width:100%}:host[orient=vertical] .nu-docking-wrapper{height:100%;min-height:100%;max-height:100%}@keyframes hide{99%{visibility:visible}to{visibility:hidden}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.6", type: DockingPanelComponent, isStandalone: true, selector: "nu-docking-panel", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange" }, host: { properties: { "style.grid-area": "gridArea()", "style.--nudp-content-size.px": "contentSize()", "attr.state": "_opened() ? 'opened' : 'closed'", "attr.orient": "orient()", "attr.side": "side()", "attr.mode": "mode()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["nuDockingPanel"], ngImport: i0, template: `<div class="wrapper" #content><ng-content /></div>`, isInline: true, styles: [":host{--nudp-tx: 0;--nudp-ty: 0;--nudp-t: auto;--nudp-r: auto;--nudp-b: auto;--nudp-l: auto;display:block;position:relative;z-index:100}:host .wrapper{all:inherit;display:grid;grid-template-columns:auto;grid-template-rows:auto;align-items:stretch;justify-items:stretch;position:absolute;top:var(--nudp-t);right:var(--nudp-r);bottom:var(--nudp-b);left:var(--nudp-l);width:auto;height:auto;transition:transform .2s cubic-bezier(0,0,.2,1);transform:translate(var(--nudp-tx),var(--nudp-ty))}:host[mode=rigid]{overflow:clip}:host[mode=rigid][orient=horizontal]{transition:height .2s cubic-bezier(0,0,.2,1);height:var(--nudp-content-size)}:host[mode=rigid][orient=horizontal][state=closed]{height:0px}:host[mode=rigid][orient=vertical]{transition:width .2s cubic-bezier(0,0,.2,1);width:var(--nudp-content-size)}:host[mode=rigid][orient=vertical][state=closed]{width:0}:host[mode=over]{z-index:300}:host[orient=horizontal]{--nudp-l: 0px;--nudp-r: 0px}:host[orient=horizontal][side=top]{--nudp-t: 0px}:host[orient=horizontal][side=top][state=closed]{--nudp-ty: -100%}:host[orient=horizontal][side=bottom]{--nudp-b: 0px}:host[orient=horizontal][side=bottom][state=closed]{--nudp-ty: 100%}:host[orient=horizontal]:not([mode=rigid]){height:0px}:host[orient=vertical]{--nudp-t: 0px;--nudp-b: 0px}:host[orient=vertical][side=left]{--nudp-l: 0px}:host[orient=vertical][side=left][state=closed]{--nudp-tx: -100%}:host[orient=vertical][side=right]{--nudp-r: 0px}:host[orient=vertical][side=right][state=closed]{--nudp-tx: 100%}:host[orient=vertical]:not([mode=rigid]){width:0px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingPanelComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "nu-docking-panel", exportAs: "nuDockingPanel", template: `
-        <div class="nu-docking-wrapper" #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]{animation:var(---docking-layout-anim-duration) var(---docking-layout-anim-ease) hide;animation-fill-mode:forwards}: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]){visibility:visible}: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))}:host .nu-docking-wrapper{display:flex;flex-direction:column;align-items:stretch}:host[orient=horizontal] .nu-docking-wrapper{width:100%;min-width:100%;max-width:100%}:host[orient=vertical] .nu-docking-wrapper{height:100%;min-height:100%;max-height:100%}@keyframes hide{99%{visibility:visible}to{visibility:hidden}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { content: [{
-                type: ViewChild,
-                args: ["content", { read: ElementRef, static: true }]
-            }], 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"]
-            }], backdrop: [{
-                type: Input,
-                args: ["backdrop"]
-            }] } });
+            args: [{ selector: "nu-docking-panel", exportAs: "nuDockingPanel", standalone: true, host: {
+                        "[style.grid-area]": "gridArea()",
+                        "[style.--nudp-content-size.px]": "contentSize()",
+                        "[attr.state]": "_opened() ? 'opened' : 'closed'",
+                        "[attr.orient]": "orient()",
+                        "[attr.side]": "side()",
+                        "[attr.mode]": "mode()"
+                    }, template: `<div class="wrapper" #content><ng-content /></div>`, styles: [":host{--nudp-tx: 0;--nudp-ty: 0;--nudp-t: auto;--nudp-r: auto;--nudp-b: auto;--nudp-l: auto;display:block;position:relative;z-index:100}:host .wrapper{all:inherit;display:grid;grid-template-columns:auto;grid-template-rows:auto;align-items:stretch;justify-items:stretch;position:absolute;top:var(--nudp-t);right:var(--nudp-r);bottom:var(--nudp-b);left:var(--nudp-l);width:auto;height:auto;transition:transform .2s cubic-bezier(0,0,.2,1);transform:translate(var(--nudp-tx),var(--nudp-ty))}:host[mode=rigid]{overflow:clip}:host[mode=rigid][orient=horizontal]{transition:height .2s cubic-bezier(0,0,.2,1);height:var(--nudp-content-size)}:host[mode=rigid][orient=horizontal][state=closed]{height:0px}:host[mode=rigid][orient=vertical]{transition:width .2s cubic-bezier(0,0,.2,1);width:var(--nudp-content-size)}:host[mode=rigid][orient=vertical][state=closed]{width:0}:host[mode=over]{z-index:300}:host[orient=horizontal]{--nudp-l: 0px;--nudp-r: 0px}:host[orient=horizontal][side=top]{--nudp-t: 0px}:host[orient=horizontal][side=top][state=closed]{--nudp-ty: -100%}:host[orient=horizontal][side=bottom]{--nudp-b: 0px}:host[orient=horizontal][side=bottom][state=closed]{--nudp-ty: 100%}:host[orient=horizontal]:not([mode=rigid]){height:0px}:host[orient=vertical]{--nudp-t: 0px;--nudp-b: 0px}:host[orient=vertical][side=left]{--nudp-l: 0px}:host[orient=vertical][side=left][state=closed]{--nudp-tx: -100%}:host[orient=vertical][side=right]{--nudp-r: 0px}:host[orient=vertical][side=right][state=closed]{--nudp-tx: 100%}:host[orient=vertical]:not([mode=rigid]){width:0px}\n"] }]
+        }] });
 
-const RIGID_ZINDEX = 100;
-const OVER_ZINDEX = RIGID_ZINDEX * 2;
-const BACKDROP_ZINDEX = 10000;
-class DockingLayoutComponent extends Destructible {
+class DockingLayoutComponent {
     constructor() {
-        super(...arguments);
-        this.#el = inject((ElementRef));
-        this.contentOnly = false;
-        this.#reflow = new Subject();
-        this.#backdropPanel = null;
-    }
-    #el;
-    #reflow;
-    #backdropPanel;
-    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;
-        let backdropZIndex = -1;
-        this.#backdropPanel = null;
-        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;
-                    }
-                }
-                let panelZIndex = isRigid ? (rigidZIndex += 2) : (overZIndex += 2);
-                if (panelState.state !== "hidden" && entry.panel.backdrop) {
-                    backdropZIndex = BACKDROP_ZINDEX;
-                    panelZIndex = backdropZIndex + 1;
-                    this.#backdropPanel = entry.panel;
-                }
-                FastDOM.setStyle(entry.panel.el.nativeElement, {
-                    "z-index": `${panelZIndex}`,
-                    "--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`
-            });
-            if (this.backdropEl) {
-                FastDOM.setAttributes(this.backdropEl.nativeElement, {
-                    state: backdropZIndex < 0 ? "hidden" : "visible"
-                });
-                FastDOM.setStyle(this.backdropEl.nativeElement, { "z-index": `${backdropZIndex}` });
-            }
-        }
+        /**
+         * True if u want to animate panel open/close with `mode="side"`
+         */
+        // readonly animateSide = input(false)
+        this.panels = contentChildren(DockingPanelComponent);
+        this.activeOverPanel = computed(() => {
+            const panels = this.panels();
+            return panels.find(panel => panel.mode() === "over" && panel.opened());
+        });
+        this.backdropVisible = computed(() => {
+            const active = this.activeOverPanel();
+            return active != null ? active.backdrop() !== false : false;
+        });
     }
-    onHideBackdropPanel(event) {
-        event.preventDefault();
-        if (this.#backdropPanel) {
-            this.#backdropPanel.close();
+    doCloseActiveOverPanel() {
+        const activePanel = this.activeOverPanel();
+        if (activePanel) {
+            activePanel.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: DockingLayoutComponent, isStandalone: true, selector: "nu-docking", inputs: { contentOnly: "contentOnly" }, queries: [{ propertyName: "contentComponent", first: true, predicate: DockingContentComponent, descendants: true }, { propertyName: "dockingPanels", predicate: DockingPanelComponent }], viewQueries: [{ propertyName: "backdropEl", first: true, predicate: ["backdrop"], descendants: true, read: ElementRef, static: true }], 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>
-        }
-
-        <nu-docking-backdrop #backdrop (click)="onHideBackdropPanel($event)" />
-    `, 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));---docking-layout-backdrop-color: var(--docking-layout-backdrop-color, #000);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"] }, { kind: "component", type: DockingBackdropComponent, selector: "nu-docking-backdrop" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.6", type: DockingLayoutComponent, isStandalone: true, selector: "nu-docking", queries: [{ propertyName: "panels", predicate: DockingPanelComponent, isSignal: true }], exportAs: ["nuDocking"], ngImport: i0, template: `
+        <ng-content />
+        <nu-docking-backdrop [visible]="backdropVisible()" (click)="doCloseActiveOverPanel()"></nu-docking-backdrop>
+    `, isInline: true, styles: [":host{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;position:relative;align-items:stretch;justify-items:stretch;overflow:clip}\n"], dependencies: [{ kind: "component", type: DockingBackdropComponent, selector: "nu-docking-backdrop", inputs: ["visible"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: "nu-docking", standalone: true, imports: [DockingContentComponent, DockingBackdropComponent], 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>
-        }
-
-        <nu-docking-backdrop #backdrop (click)="onHideBackdropPanel($event)" />
-    `, 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));---docking-layout-backdrop-color: var(--docking-layout-backdrop-color, #000);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]
-            }], backdropEl: [{
-                type: ViewChild,
-                args: ["backdrop", { read: ElementRef, static: true }]
-            }], dockingPanels: [{
-                type: ContentChildren,
-                args: [DockingPanelComponent]
-            }] } });
+            args: [{ selector: "nu-docking", exportAs: "nuDocking", standalone: true, imports: [DockingBackdropComponent], template: `
+        <ng-content />
+        <nu-docking-backdrop [visible]="backdropVisible()" (click)="doCloseActiveOverPanel()"></nu-docking-backdrop>
+    `, styles: [":host{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;position:relative;align-items:stretch;justify-items:stretch;overflow:clip}\n"] }]
+        }] });
 
 const members$1 = [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent];
 class NuDockingLayout {
@@ -1007,5 +755,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DockingContentComponent, DockingLayoutComponent, DockingPanelComponent, L9Cell, L9Range, L9State, NuDockingLayout, NuSlidingLayout, SlidingComponent, SlidingItemDirective, SlotDef, SlotDirective, SlotOutletDirective, SlotsService };
+export { DockingContentComponent, DockingLayoutComponent, DockingPanelComponent, L9Cell, L9GridTopLeft, L9Range, L9State, NuDockingLayout, NuSlidingLayout, SlidingComponent, SlidingItemDirective, SlotDef, SlotDirective, SlotOutletDirective, SlotsService };
 //# sourceMappingURL=ngutil-layout.mjs.map