@ngutil/layout 0.0.3-dev.9 → 0.0.4

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, 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 { Component, HostBinding, 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,26 +131,37 @@ 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"] }]
         }] });
 
+class DockingBackdropComponent {
+    constructor() {
+        this.state = "hidden";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DockingBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", 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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", 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]"]
+            }] } });
+
 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") {
@@ -300,19 +204,31 @@ class DockingPanelComponent extends Destructible {
     }
     #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
     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.#backdrop = false;
+        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") {
@@ -343,7 +259,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) {
@@ -355,13 +272,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) {
@@ -369,12 +324,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", 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="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]{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 .content{display:flex;flex-direction:column;align-items:stretch}:host[orient=horizontal] .content{width:100%;min-width:100%;max-width:100%}:host[orient=vertical] .content{height:100%;min-height:100%;max-height:100%}@keyframes hide{99%{visibility:visible}to{visibility:hidden}}\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]{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 .content{display:flex;flex-direction:column;align-items:stretch}:host[orient=horizontal] .content{width:100%;min-width:100%;max-width:100%}:host[orient=vertical] .content{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: [{
@@ -395,57 +361,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
             }], minimizable: [{
                 type: Input,
                 args: ["minimizable"]
+            }], backdrop: [{
+                type: Input,
+                args: ["backdrop"]
             }] } });
 
-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 = 100;
+const OVER_ZINDEX = RIGID_ZINDEX * 2;
+const BACKDROP_ZINDEX = 10000;
 class DockingLayoutComponent extends Destructible {
     constructor() {
         super(...arguments);
         this.#el = inject((ElementRef));
         this.contentOnly = false;
-        this.positionMode = "absolute";
         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.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) {
@@ -457,8 +400,10 @@ class DockingLayoutComponent extends Destructible {
         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;
+        let backdropZIndex = -1;
+        this.#backdropPanel = null;
         if (this.contentOnly) {
             // TODO:...
         }
@@ -471,7 +416,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;
@@ -480,13 +425,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;
@@ -496,37 +441,30 @@ 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");
+                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": `${isEmbedded ? embeddedZIndex++ : overlayZIndex++}`,
+                    "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,
-                    "--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
                 });
             }
             FastDOM.setStyle(this.#el.nativeElement, {
@@ -535,10 +473,22 @@ class DockingLayoutComponent extends Destructible {
                 "--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}` });
+            }
+        }
+    }
+    onHideBackdropPanel(event) {
+        event.preventDefault();
+        if (this.#backdropPanel) {
+            this.#backdropPanel.close();
         }
     }
     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 }], 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) {
@@ -548,11 +498,13 @@ 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 }); }
+
+        <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 }); }
 }
 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: `
+            args: [{ selector: "nu-docking", standalone: true, imports: [DockingContentComponent, DockingBackdropComponent], template: `
         <ng-content select="nu-docking-panel"></ng-content>
 
         @if (!contentComponent) {
@@ -562,14 +514,17 @@ 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"] }]
+
+        <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
-            }], positionMode: [{
-                type: Input
             }], contentComponent: [{
                 type: ContentChild,
                 args: [DockingContentComponent]
+            }], backdropEl: [{
+                type: ViewChild,
+                args: ["backdrop", { read: ElementRef, static: true }]
             }], dockingPanels: [{
                 type: ContentChildren,
                 args: [DockingPanelComponent]
@@ -829,5 +784,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DockingContentComponent, DockingLayoutComponent, DockingPanelComponent, L9Cell, L9Range, L9State, NuDockingLayout, SlotDef, SlotDirective, SlotOutletDirective, SlotsService, watchDimension, watchMedia };
+export { DockingContentComponent, DockingLayoutComponent, DockingPanelComponent, L9Cell, L9Range, L9State, NuDockingLayout, SlotDef, SlotDirective, SlotOutletDirective, SlotsService };
 //# sourceMappingURL=ngutil-layout.mjs.map