@ngutil/layout 0.0.101 → 0.0.104

package/fesm2022/ngutil-layout.mjs

@@ -161,46 +161,46 @@ class L9State {
 }
 
 class DockingContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DockingContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", 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: "19.2.8", ngImport: i0, type: DockingContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DockingContentComponent, decorators: [{
             type: Component,
             args: [{ selector: "nu-docking-content", exportAs: "nuDockingContent", 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.visible = input.required();
+        this.visible = input.required(...(ngDevMode ? [{ debugName: "visible" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", 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"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DockingBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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: "19.2.8", ngImport: i0, type: DockingBackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DockingBackdropComponent, decorators: [{
             type: Component,
             args: [{ 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"] }]
-        }] });
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: true }] }] } });
 
 const DEFAULT_POSITION = L9Range.coerce("left");
 class DockingPanelComponent {
     constructor() {
         this.#dimWatcher = inject(DimensionWatcher);
         this.el = inject(ElementRef);
-        this.position = input(DEFAULT_POSITION, { transform: L9Range.coerce });
+        this.position = input(DEFAULT_POSITION, ...(ngDevMode ? [{ debugName: "position", transform: L9Range.coerce }] : [{ 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.opened = model(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
+        this._opened = computed(() => coerceBoolAttr(this.opened()), ...(ngDevMode ? [{ debugName: "_opened" }] : []));
+        this.mode = input("rigid", ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.maxSize = input(undefined, ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
+        this.backdrop = input(false, ...(ngDevMode ? [{ debugName: "backdrop" }] : []));
+        this.gridArea = computed(() => this.position().intoGridArea(), ...(ngDevMode ? [{ debugName: "gridArea" }] : []));
+        this.orient = computed(() => this.position().orient, ...(ngDevMode ? [{ debugName: "orient" }] : []));
         this.side = computed(() => {
             const pos = this.position();
             return pos.orient === "horizontal" ? pos.cells[0].v : pos.cells[0].h;
-        });
+        }, ...(ngDevMode ? [{ debugName: "side" }] : []));
         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$);
@@ -210,7 +210,7 @@ class DockingPanelComponent {
                 return 0;
             }
             return this.orient() === "horizontal" ? dim.height : dim.width;
-        });
+        }, ...(ngDevMode ? [{ debugName: "contentSize" }] : []));
     }
     #dimWatcher;
     // readonly backdropSize = computed(() => {
@@ -231,10 +231,10 @@ class DockingPanelComponent {
     close() {
         this.opened.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", 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"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DockingPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", 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: "19.2.8", ngImport: i0, type: DockingPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DockingPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: "nu-docking-panel", exportAs: "nuDockingPanel", host: {
                         "[style.grid-area]": "gridArea()",
@@ -244,7 +244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         "[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"] }]
-        }] });
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], content: [{ type: i0.ViewChild, args: ["content", { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 class DockingLayoutComponent {
     constructor() {
@@ -252,15 +252,15 @@ class DockingLayoutComponent {
          * True if u want to animate panel open/close with `mode="side"`
          */
         // readonly animateSide = input(false)
-        this.panels = contentChildren(DockingPanelComponent);
+        this.panels = contentChildren(DockingPanelComponent, ...(ngDevMode ? [{ debugName: "panels" }] : []));
         this.activeOverPanel = computed(() => {
             const panels = this.panels();
             return panels.find(panel => panel.mode() === "over" && panel.opened());
-        });
+        }, ...(ngDevMode ? [{ debugName: "activeOverPanel" }] : []));
         this.backdropVisible = computed(() => {
             const active = this.activeOverPanel();
             return active != null ? active.backdrop() !== false : false;
-        });
+        }, ...(ngDevMode ? [{ debugName: "backdropVisible" }] : []));
     }
     doCloseActiveOverPanel() {
         const activePanel = this.activeOverPanel();
@@ -268,27 +268,27 @@ class DockingLayoutComponent {
             activePanel.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: DockingLayoutComponent, isStandalone: true, selector: "nu-docking", queries: [{ propertyName: "panels", predicate: DockingPanelComponent, isSignal: true }], exportAs: ["nuDocking"], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DockingLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", 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: "19.2.8", ngImport: i0, type: DockingLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DockingLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: "nu-docking", exportAs: "nuDocking", 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"] }]
-        }] });
+        }], propDecorators: { panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DockingPanelComponent), { isSignal: true }] }] } });
 
 const members = [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent];
 class NuDockingLayout {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NuDockingLayout, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: NuDockingLayout, imports: [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent], exports: [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NuDockingLayout }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NuDockingLayout, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: NuDockingLayout, imports: [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent], exports: [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NuDockingLayout }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NuDockingLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NuDockingLayout, decorators: [{
             type: NgModule,
             args: [{
                     imports: members,
@@ -397,10 +397,10 @@ class SlotsService extends Destructible {
             delete this.#watchers[slot];
         }), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlotsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlotsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlotsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 class SlotDirective {
@@ -427,10 +427,10 @@ class SlotDirective {
             this.slotSvc.delTpl(this.#slotDef);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: SlotDirective, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: SlotDirective, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlotDirective, decorators: [{
             type: Directive
         }] });
 class SlotOutletDirective extends Destructible {
@@ -525,10 +525,10 @@ class SlotOutletDirective extends Destructible {
         this.vcr.clear();
         this.#views = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: SlotOutletDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlotOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: SlotOutletDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlotOutletDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
@@ -537,10 +537,10 @@ class InfiniteSlideDirective {
     constructor() {
         this.tpl = inject(TemplateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InfiniteSlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: InfiniteSlideDirective, isStandalone: true, selector: "ng-template[nuInfiniteSlide]", exportAs: ["nuInfiniteSlide"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InfiniteSlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: InfiniteSlideDirective, isStandalone: true, selector: "ng-template[nuInfiniteSlide]", exportAs: ["nuInfiniteSlide"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InfiniteSlideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InfiniteSlideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "ng-template[nuInfiniteSlide]",
@@ -551,25 +551,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class SlideDirective {
     constructor() {
         this.tpl = inject(TemplateRef);
-        this.rendered = signal(false);
-        this.active = signal(false);
-        this.animation = signal(null);
+        this.rendered = signal(false, ...(ngDevMode ? [{ debugName: "rendered" }] : []));
+        this.active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+        this.animation = signal(null, ...(ngDevMode ? [{ debugName: "animation" }] : []));
         this.activated = output();
         this.state = output();
         effect(() => {
             this.activated.emit(this.active());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: SlideDirective, isStandalone: true, selector: "ng-template[nuSlide]", outputs: { activated: "activated", state: "state" }, exportAs: ["nuSlide"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.13", type: SlideDirective, isStandalone: true, selector: "ng-template[nuSlide]", outputs: { activated: "activated", state: "state" }, exportAs: ["nuSlide"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "ng-template[nuSlide]",
                     exportAs: "nuSlide"
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { activated: [{ type: i0.Output, args: ["activated"] }], state: [{ type: i0.Output, args: ["state"] }] } });
 
 const absolute = { position: "absolute", top: "0px", left: "0px" };
 const anim = `${Duration.Fast} ${Ease.Acceleration}`;
@@ -578,15 +578,15 @@ class SlidingComponent {
         /**
          * List of items
          */
-        this.items = contentChildren(SlideDirective);
+        this.items = contentChildren(SlideDirective, ...(ngDevMode ? [{ debugName: "items" }] : []));
         /**
          * Lazily rendering items
          */
-        this.lazy = input(true);
+        this.lazy = input(true, ...(ngDevMode ? [{ debugName: "lazy" }] : []));
         /**
          * Index of the preferred item
          */
-        this.preferred = model(0);
+        this.preferred = model(0, ...(ngDevMode ? [{ debugName: "preferred" }] : []));
         /**
          * Index of the active item
          */
@@ -597,7 +597,7 @@ class SlidingComponent {
             }
             const index = this.preferred();
             return clamp(index, 0, items.length - 1);
-        });
+        }, ...(ngDevMode ? [{ debugName: "active" }] : []));
         /**
          * Changes of the active item
          */
@@ -677,8 +677,8 @@ class SlidingComponent {
             item.state.emit(isHiding ? 4 /* SlideState.Hidden */ : 2 /* SlideState.Shown */);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: SlidingComponent, isStandalone: true, selector: "nu-sliding", inputs: { lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, preferred: { classPropertyName: "preferred", publicName: "preferred", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { preferred: "preferredChange", changes: "changes" }, queries: [{ propertyName: "items", predicate: SlideDirective, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SlidingComponent, isStandalone: true, selector: "nu-sliding", inputs: { lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, preferred: { classPropertyName: "preferred", publicName: "preferred", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { preferred: "preferredChange", changes: "changes" }, queries: [{ propertyName: "items", predicate: SlideDirective, isSignal: true }], ngImport: i0, template: `
         @if (items(); as _items) {
             @for (item of _items; track item; let index = $index) {
                 @if (item.rendered()) {
@@ -720,7 +720,7 @@ class SlidingComponent {
             ])
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlidingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SlidingComponent, decorators: [{
             type: Component,
             args: [{ selector: "nu-sliding", imports: [CommonModule], animations: [
                         trigger("animate", [
@@ -763,13 +763,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }
         }
     `, styles: [":host{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;overflow:hidden;position:relative}:host .nu-slide{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlideDirective), { isSignal: true }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], preferred: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferred", required: false }] }, { type: i0.Output, args: ["preferredChange"] }], changes: [{ type: i0.Output, args: ["changes"] }] } });
 
 class Item {
     // readonly data: WritableSignal<T>
     constructor(data) {
         this.data = data;
-        this.state = signal(0 /* SlideState.Pending */);
+        this.state = signal(0 /* SlideState.Pending */, ...(ngDevMode ? [{ debugName: "state" }] : []));
         this.id = `${++uid}`;
         // this.data = signal<T>(data)
     }
@@ -802,16 +802,18 @@ let uid = 0;
 class InfiniteSlidingComponent {
     constructor() {
         this.slide = contentChild.required(InfiniteSlideDirective);
-        this.data = model();
-        this.#items = linkedSignal({
-            source: this.data,
-            computation: (data, prev) => insertData(prev?.value ?? [], data)
-        });
-        this.items = computed(() => this.#items().filter(item => item.state() !== 4 /* SlideState.Hidden */));
-        this.preferredIndex = linkedSignal({
-            source: computed(() => this.items().findIndex(item => item.state() === 0 /* SlideState.Pending */)),
-            computation: (index, prev) => (index > -1 ? index : prev?.value ?? 0)
-        });
+        this.data = model(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+        this.#items = linkedSignal(...(ngDevMode ? [{ debugName: "#items", source: this.data,
+                computation: (data, prev) => insertData(prev?.value ?? [], data) }] : [{
+                source: this.data,
+                computation: (data, prev) => insertData(prev?.value ?? [], data)
+            }]));
+        this.items = computed(() => this.#items().filter(item => item.state() !== 4 /* SlideState.Hidden */), ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.preferredIndex = linkedSignal(...(ngDevMode ? [{ debugName: "preferredIndex", source: computed(() => this.items().findIndex(item => item.state() === 0 /* SlideState.Pending */)),
+                computation: (index, prev) => (index > -1 ? index : prev?.value ?? 0) }] : [{
+                source: computed(() => this.items().findIndex(item => item.state() === 0 /* SlideState.Pending */)),
+                computation: (index, prev) => (index > -1 ? index : prev?.value ?? 0)
+            }]));
     }
     #items;
     push(data) {
@@ -823,8 +825,8 @@ class InfiniteSlidingComponent {
     update(data) {
         this.data.set({ position: 0, data });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InfiniteSlidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: InfiniteSlidingComponent, isStandalone: true, selector: "nu-infinite-sliding", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange" }, queries: [{ propertyName: "slide", first: true, predicate: InfiniteSlideDirective, descendants: true, isSignal: true }], exportAs: ["nuInfiniteSliding"], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InfiniteSlidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: InfiniteSlidingComponent, isStandalone: true, selector: "nu-infinite-sliding", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange" }, queries: [{ propertyName: "slide", first: true, predicate: InfiniteSlideDirective, descendants: true, isSignal: true }], exportAs: ["nuInfiniteSliding"], ngImport: i0, template: `
         <nu-sliding [lazy]="true" [preferred]="preferredIndex()">
             @for (item of items(); track item.id) {
                 <ng-template nuSlide (state)="item.setState($event)">
@@ -837,7 +839,7 @@ class InfiniteSlidingComponent {
         </nu-sliding>
     `, isInline: true, dependencies: [{ kind: "component", type: SlidingComponent, selector: "nu-sliding", inputs: ["lazy", "preferred"], outputs: ["preferredChange", "changes"] }, { kind: "directive", type: SlideDirective, selector: "ng-template[nuSlide]", outputs: ["activated", "state"], exportAs: ["nuSlide"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InfiniteSlidingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: InfiniteSlidingComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "nu-infinite-sliding",
@@ -857,7 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { slide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => InfiniteSlideDirective), { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }] } });
 function insertData(list, slideData) {
     if (slideData == null) {
         return list;