@ngutil/layout 0.0.81 → 0.0.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,13 +1,13 @@
1
1
  import { BehaviorSubject, map, shareReplay, switchMap, Subject, scan, tap, distinctUntilChanged, finalize, of } from 'rxjs';
2
2
  import * as i0 from '@angular/core';
3
- import { Component, input, inject, ElementRef, model, computed, viewChild, contentChildren, NgModule, Injectable, TemplateRef, Directive, ViewContainerRef, Injector, signal, output, effect } from '@angular/core';
3
+ import { Component, input, inject, ElementRef, model, computed, viewChild, contentChildren, NgModule, Injectable, TemplateRef, Directive, ViewContainerRef, Injector, signal, output, effect, contentChild, linkedSignal, ChangeDetectionStrategy } from '@angular/core';
4
4
  import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
5
5
  import { coerceBoolAttr, Destructible } from '@ngutil/common';
6
6
  import { DimensionWatcher, Duration, Ease } from '@ngutil/style';
7
- import { trigger, state, style, transition, animate } from '@angular/animations';
8
7
  import * as i1 from '@angular/common';
9
- import { CommonModule } from '@angular/common';
10
- import { clamp } from 'lodash-es';
8
+ import { CommonModule, NgTemplateOutlet } from '@angular/common';
9
+ import { trigger, state, transition, style, animate } from '@angular/animations';
10
+ import { clamp } from 'es-toolkit';
11
11
 
12
12
  const vertical = ["top", "middle", "bottom"];
13
13
  const horizontal = ["left", "center", "right"];
@@ -161,24 +161,24 @@ class L9State {
161
161
  }
162
162
 
163
163
  class DockingContentComponent {
164
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
165
- 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"] }); }
164
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
165
+ 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"] }); }
166
166
  }
167
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingContentComponent, decorators: [{
167
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingContentComponent, decorators: [{
168
168
  type: Component,
169
- 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"] }]
169
+ 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"] }]
170
170
  }] });
171
171
 
172
172
  class DockingBackdropComponent {
173
173
  constructor() {
174
174
  this.visible = input.required();
175
175
  }
176
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
177
- 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"] }); }
176
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
177
+ 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"] }); }
178
178
  }
179
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingBackdropComponent, decorators: [{
179
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingBackdropComponent, decorators: [{
180
180
  type: Component,
181
- args: [{ standalone: true, selector: "nu-docking-backdrop", host: {
181
+ args: [{ selector: "nu-docking-backdrop", host: {
182
182
  "[attr.state]": "visible() ? 'visible' : 'hidden'"
183
183
  }, 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"] }]
184
184
  }] });
@@ -231,12 +231,12 @@ class DockingPanelComponent {
231
231
  close() {
232
232
  this.opened.set(false);
233
233
  }
234
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
235
- 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"] }); }
234
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
235
+ 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"] }); }
236
236
  }
237
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingPanelComponent, decorators: [{
237
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingPanelComponent, decorators: [{
238
238
  type: Component,
239
- args: [{ selector: "nu-docking-panel", exportAs: "nuDockingPanel", standalone: true, host: {
239
+ args: [{ selector: "nu-docking-panel", exportAs: "nuDockingPanel", host: {
240
240
  "[style.grid-area]": "gridArea()",
241
241
  "[style.--nudp-content-size.px]": "contentSize()",
242
242
  "[attr.state]": "_opened() ? 'opened' : 'closed'",
@@ -268,31 +268,31 @@ class DockingLayoutComponent {
268
268
  activePanel.close();
269
269
  }
270
270
  }
271
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
272
- 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: `
271
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
272
+ 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: `
273
273
  <ng-content />
274
274
  <nu-docking-backdrop [visible]="backdropVisible()" (click)="doCloseActiveOverPanel()"></nu-docking-backdrop>
275
275
  `, 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"] }] }); }
276
276
  }
277
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: DockingLayoutComponent, decorators: [{
277
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: DockingLayoutComponent, decorators: [{
278
278
  type: Component,
279
- args: [{ selector: "nu-docking", exportAs: "nuDocking", standalone: true, imports: [DockingBackdropComponent], template: `
279
+ args: [{ selector: "nu-docking", exportAs: "nuDocking", imports: [DockingBackdropComponent], template: `
280
280
  <ng-content />
281
281
  <nu-docking-backdrop [visible]="backdropVisible()" (click)="doCloseActiveOverPanel()"></nu-docking-backdrop>
282
282
  `, 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"] }]
283
283
  }] });
284
284
 
285
- const members$1 = [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent];
285
+ const members = [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent];
286
286
  class NuDockingLayout {
287
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuDockingLayout, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
288
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: NuDockingLayout, imports: [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent], exports: [DockingLayoutComponent, DockingPanelComponent, DockingContentComponent] }); }
289
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuDockingLayout }); }
287
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NuDockingLayout, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
288
+ 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] }); }
289
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NuDockingLayout }); }
290
290
  }
291
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuDockingLayout, decorators: [{
291
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NuDockingLayout, decorators: [{
292
292
  type: NgModule,
293
293
  args: [{
294
- imports: members$1,
295
- exports: members$1
294
+ imports: members,
295
+ exports: members
296
296
  }]
297
297
  }] });
298
298
 
@@ -397,10 +397,10 @@ class SlotsService extends Destructible {
397
397
  delete this.#watchers[slot];
398
398
  }), shareReplay(1));
399
399
  }
400
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlotsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
401
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlotsService }); }
400
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
401
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotsService }); }
402
402
  }
403
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlotsService, decorators: [{
403
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotsService, decorators: [{
404
404
  type: Injectable
405
405
  }], ctorParameters: () => [] });
406
406
  class SlotDirective {
@@ -427,10 +427,10 @@ class SlotDirective {
427
427
  this.slotSvc.delTpl(this.#slotDef);
428
428
  }
429
429
  }
430
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
431
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: SlotDirective, ngImport: i0 }); }
430
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
431
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: SlotDirective, isStandalone: true, ngImport: i0 }); }
432
432
  }
433
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlotDirective, decorators: [{
433
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotDirective, decorators: [{
434
434
  type: Directive
435
435
  }] });
436
436
  class SlotOutletDirective extends Destructible {
@@ -525,45 +525,52 @@ class SlotOutletDirective extends Destructible {
525
525
  this.vcr.clear();
526
526
  this.#views = [];
527
527
  }
528
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlotOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
529
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: SlotOutletDirective, usesInheritance: true, ngImport: i0 }); }
528
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
529
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: SlotOutletDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
530
530
  }
531
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlotOutletDirective, decorators: [{
531
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlotOutletDirective, decorators: [{
532
532
  type: Directive
533
533
  }], ctorParameters: () => [] });
534
534
 
535
- class SlidingItemDirective {
535
+ // TODO: remove old variant: nuInfiniteSlidingItem
536
+ class InfiniteSlideDirective {
537
+ constructor() {
538
+ this.tpl = inject(TemplateRef);
539
+ }
540
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InfiniteSlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
541
+ 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 }); }
542
+ }
543
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InfiniteSlideDirective, decorators: [{
544
+ type: Directive,
545
+ args: [{
546
+ selector: "ng-template[nuInfiniteSlide]",
547
+ exportAs: "nuInfiniteSlide"
548
+ }]
549
+ }] });
550
+
551
+ class SlideDirective {
536
552
  constructor() {
537
553
  this.tpl = inject(TemplateRef);
538
554
  this.rendered = signal(false);
539
555
  this.active = signal(false);
540
556
  this.animation = signal(null);
541
557
  this.activated = output();
558
+ this.state = output();
542
559
  effect(() => {
543
560
  this.activated.emit(this.active());
544
- }, { allowSignalWrites: true });
561
+ });
545
562
  }
546
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlidingItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
547
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: SlidingItemDirective, isStandalone: true, selector: "ng-template[nuSlidingItem]", outputs: { activated: "activated" }, exportAs: ["nuSlidingItem"], ngImport: i0 }); }
563
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
564
+ 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 }); }
548
565
  }
549
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlidingItemDirective, decorators: [{
566
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlideDirective, decorators: [{
550
567
  type: Directive,
551
568
  args: [{
552
- selector: "ng-template[nuSlidingItem]",
553
- exportAs: "nuSlidingItem",
554
- standalone: true
569
+ selector: "ng-template[nuSlide]",
570
+ exportAs: "nuSlide"
555
571
  }]
556
572
  }], ctorParameters: () => [] });
557
573
 
558
- class SlidingItemComponent {
559
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlidingItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
560
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: SlidingItemComponent, isStandalone: true, selector: "nu-sliding-item", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden}\n"] }); }
561
- }
562
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlidingItemComponent, decorators: [{
563
- type: Component,
564
- args: [{ selector: "nu-sliding-item", standalone: true, template: `<ng-content />`, styles: [":host{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden}\n"] }]
565
- }] });
566
-
567
574
  const absolute = { position: "absolute", top: "0px", left: "0px" };
568
575
  const anim = `${Duration.Fast} ${Ease.Acceleration}`;
569
576
  class SlidingComponent {
@@ -571,7 +578,7 @@ class SlidingComponent {
571
578
  /**
572
579
  * List of items
573
580
  */
574
- this.items = contentChildren(SlidingItemDirective);
581
+ this.items = contentChildren(SlideDirective);
575
582
  /**
576
583
  * Lazily rendering items
577
584
  */
@@ -579,7 +586,7 @@ class SlidingComponent {
579
586
  /**
580
587
  * Index of the preferred item
581
588
  */
582
- this.preferred = signal(0);
589
+ this.preferred = model(0);
583
590
  /**
584
591
  * Index of the active item
585
592
  */
@@ -623,16 +630,16 @@ class SlidingComponent {
623
630
  if (item.animation() || item.rendered()) {
624
631
  if (currentlyActive) {
625
632
  if (activeIndex < currentActiveIndex) {
626
- item.animation.set("right-out" /* ItemAnimationState.RightOut */);
627
- inAnimation = "left-in" /* ItemAnimationState.LeftIn */;
633
+ item.animation.set("right-out" /* SlideAnimationState.RightOut */);
634
+ inAnimation = "left-in" /* SlideAnimationState.LeftIn */;
628
635
  }
629
636
  else {
630
- item.animation.set("left-out" /* ItemAnimationState.LeftOut */);
631
- inAnimation = "right-in" /* ItemAnimationState.RightIn */;
637
+ item.animation.set("left-out" /* SlideAnimationState.LeftOut */);
638
+ inAnimation = "right-in" /* SlideAnimationState.RightIn */;
632
639
  }
633
640
  }
634
641
  else {
635
- item.animation.set("fast-out" /* ItemAnimationState.FastOut */);
642
+ item.animation.set("fast-out" /* SlideAnimationState.FastOut */);
636
643
  }
637
644
  }
638
645
  }
@@ -642,13 +649,13 @@ class SlidingComponent {
642
649
  activeItem.animation.set(inAnimation);
643
650
  }
644
651
  else if (items.length === 1) {
645
- activeItem.animation.set("fast-in" /* ItemAnimationState.FastIn */);
652
+ activeItem.animation.set("fast-in" /* SlideAnimationState.FastIn */);
646
653
  }
647
654
  else if (activeIndex < currentActiveIndex) {
648
- activeItem.animation.set("left-in" /* ItemAnimationState.LeftIn */);
655
+ activeItem.animation.set("left-in" /* SlideAnimationState.LeftIn */);
649
656
  }
650
657
  else {
651
- activeItem.animation.set("right-in" /* ItemAnimationState.RightIn */);
658
+ activeItem.animation.set("right-in" /* SlideAnimationState.RightIn */);
652
659
  }
653
660
  activeItem.active.set(true);
654
661
  activeItem.rendered.set(true);
@@ -658,69 +665,84 @@ class SlidingComponent {
658
665
  this.preferred.set(preferredClamp);
659
666
  }
660
667
  this.changes.emit(this);
661
- }, { allowSignalWrites: true });
668
+ });
662
669
  }
663
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
664
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: SlidingComponent, isStandalone: true, selector: "nu-sliding", inputs: { lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changes: "changes" }, queries: [{ propertyName: "items", predicate: SlidingItemDirective, isSignal: true }], ngImport: i0, template: `
670
+ onAnimationEvent(event, item) {
671
+ const isHiding = event.toState.endsWith("-out");
672
+ const isBegin = event.phaseName === "start";
673
+ if (isBegin) {
674
+ item.state.emit(isHiding ? 3 /* SlideState.Hiding */ : 1 /* SlideState.Showing */);
675
+ }
676
+ else {
677
+ item.state.emit(isHiding ? 4 /* SlideState.Hidden */ : 2 /* SlideState.Shown */);
678
+ }
679
+ }
680
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
681
+ 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: `
665
682
  @if (items(); as _items) {
666
683
  @for (item of _items; track item; let index = $index) {
667
684
  @if (item.rendered()) {
668
- <nu-sliding-item [@animate]="item.animation()">
685
+ <div
686
+ class="nu-slide"
687
+ [@animate]="item.animation()"
688
+ (@animate.start)="onAnimationEvent($event, item)"
689
+ (@animate.done)="onAnimationEvent($event, item)"
690
+ >
669
691
  <ng-template [ngTemplateOutlet]="item.tpl" />
670
- </nu-sliding-item>
692
+ </div>
671
693
  }
672
694
  }
673
695
  }
674
- `, isInline: true, styles: [":host{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;overflow:hidden;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlidingItemComponent, selector: "nu-sliding-item" }], animations: [
696
+ `, isInline: true, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
675
697
  trigger("animate", [
676
- state("fast-out" /* ItemAnimationState.FastOut */, style({ display: "none", ...absolute, transform: "translateX(-100%)" })),
677
- state("left-out" /* ItemAnimationState.LeftOut */, style({ display: "none", ...absolute, transform: "translateX(-100%)" })),
678
- state("right-out" /* ItemAnimationState.RightOut */, style({ display: "none", ...absolute, transform: "translateX(100%)" })),
679
- state("fast-in" /* ItemAnimationState.FastIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
680
- state("left-in" /* ItemAnimationState.LeftIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
681
- state("right-in" /* ItemAnimationState.RightIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
682
- transition(`* => ${"left-out" /* ItemAnimationState.LeftOut */}`, [
698
+ state("fast-out" /* SlideAnimationState.FastOut */, style({ display: "none", ...absolute, transform: "translateX(-100%)" })),
699
+ state("left-out" /* SlideAnimationState.LeftOut */, style({ display: "none", ...absolute, transform: "translateX(-100%)" })),
700
+ state("right-out" /* SlideAnimationState.RightOut */, style({ display: "none", ...absolute, transform: "translateX(100%)" })),
701
+ state("fast-in" /* SlideAnimationState.FastIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
702
+ state("left-in" /* SlideAnimationState.LeftIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
703
+ state("right-in" /* SlideAnimationState.RightIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
704
+ transition(`* => ${"left-out" /* SlideAnimationState.LeftOut */}`, [
683
705
  style({ width: "*", ...absolute, transform: "translateX(0)" }),
684
706
  animate(anim, style({ transform: "translateX(-100%)" }))
685
707
  ]),
686
- transition(`* => ${"right-out" /* ItemAnimationState.RightOut */}`, [
708
+ transition(`* => ${"right-out" /* SlideAnimationState.RightOut */}`, [
687
709
  style({ width: "*", ...absolute, transform: "translateX(0)" }),
688
710
  animate(anim, style({ transform: "translateX(100%)" }))
689
711
  ]),
690
- transition(`* => ${"left-in" /* ItemAnimationState.LeftIn */}`, [
712
+ transition(`* => ${"left-in" /* SlideAnimationState.LeftIn */}`, [
691
713
  style({ display: "", position: "relative", transform: "translateX(-100%)" }),
692
714
  animate(anim, style({ transform: "translateX(0)" }))
693
715
  ]),
694
- transition(`* => ${"right-in" /* ItemAnimationState.RightIn */}`, [
716
+ transition(`* => ${"right-in" /* SlideAnimationState.RightIn */}`, [
695
717
  style({ display: "", position: "relative", transform: "translateX(100%)" }),
696
718
  animate(anim, style({ transform: "translateX(0%)" }))
697
719
  ])
698
720
  ])
699
721
  ] }); }
700
722
  }
701
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SlidingComponent, decorators: [{
723
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SlidingComponent, decorators: [{
702
724
  type: Component,
703
- args: [{ selector: "nu-sliding", standalone: true, imports: [CommonModule, SlidingItemComponent], animations: [
725
+ args: [{ selector: "nu-sliding", imports: [CommonModule], animations: [
704
726
  trigger("animate", [
705
- state("fast-out" /* ItemAnimationState.FastOut */, style({ display: "none", ...absolute, transform: "translateX(-100%)" })),
706
- state("left-out" /* ItemAnimationState.LeftOut */, style({ display: "none", ...absolute, transform: "translateX(-100%)" })),
707
- state("right-out" /* ItemAnimationState.RightOut */, style({ display: "none", ...absolute, transform: "translateX(100%)" })),
708
- state("fast-in" /* ItemAnimationState.FastIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
709
- state("left-in" /* ItemAnimationState.LeftIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
710
- state("right-in" /* ItemAnimationState.RightIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
711
- transition(`* => ${"left-out" /* ItemAnimationState.LeftOut */}`, [
727
+ state("fast-out" /* SlideAnimationState.FastOut */, style({ display: "none", ...absolute, transform: "translateX(-100%)" })),
728
+ state("left-out" /* SlideAnimationState.LeftOut */, style({ display: "none", ...absolute, transform: "translateX(-100%)" })),
729
+ state("right-out" /* SlideAnimationState.RightOut */, style({ display: "none", ...absolute, transform: "translateX(100%)" })),
730
+ state("fast-in" /* SlideAnimationState.FastIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
731
+ state("left-in" /* SlideAnimationState.LeftIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
732
+ state("right-in" /* SlideAnimationState.RightIn */, style({ display: "", position: "relative", transform: "translateX(0)" })),
733
+ transition(`* => ${"left-out" /* SlideAnimationState.LeftOut */}`, [
712
734
  style({ width: "*", ...absolute, transform: "translateX(0)" }),
713
735
  animate(anim, style({ transform: "translateX(-100%)" }))
714
736
  ]),
715
- transition(`* => ${"right-out" /* ItemAnimationState.RightOut */}`, [
737
+ transition(`* => ${"right-out" /* SlideAnimationState.RightOut */}`, [
716
738
  style({ width: "*", ...absolute, transform: "translateX(0)" }),
717
739
  animate(anim, style({ transform: "translateX(100%)" }))
718
740
  ]),
719
- transition(`* => ${"left-in" /* ItemAnimationState.LeftIn */}`, [
741
+ transition(`* => ${"left-in" /* SlideAnimationState.LeftIn */}`, [
720
742
  style({ display: "", position: "relative", transform: "translateX(-100%)" }),
721
743
  animate(anim, style({ transform: "translateX(0)" }))
722
744
  ]),
723
- transition(`* => ${"right-in" /* ItemAnimationState.RightIn */}`, [
745
+ transition(`* => ${"right-in" /* SlideAnimationState.RightIn */}`, [
724
746
  style({ display: "", position: "relative", transform: "translateX(100%)" }),
725
747
  animate(anim, style({ transform: "translateX(0%)" }))
726
748
  ])
@@ -729,32 +751,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
729
751
  @if (items(); as _items) {
730
752
  @for (item of _items; track item; let index = $index) {
731
753
  @if (item.rendered()) {
732
- <nu-sliding-item [@animate]="item.animation()">
754
+ <div
755
+ class="nu-slide"
756
+ [@animate]="item.animation()"
757
+ (@animate.start)="onAnimationEvent($event, item)"
758
+ (@animate.done)="onAnimationEvent($event, item)"
759
+ >
733
760
  <ng-template [ngTemplateOutlet]="item.tpl" />
734
- </nu-sliding-item>
761
+ </div>
735
762
  }
736
763
  }
737
764
  }
738
- `, styles: [":host{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;overflow:hidden;position:relative}\n"] }]
765
+ `, 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"] }]
739
766
  }], ctorParameters: () => [] });
740
767
 
741
- const members = [SlidingItemDirective, SlidingComponent];
742
- class NuSlidingLayout {
743
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuSlidingLayout, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
744
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: NuSlidingLayout, imports: [SlidingItemDirective, SlidingComponent], exports: [SlidingItemDirective, SlidingComponent] }); }
745
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuSlidingLayout, imports: [SlidingComponent] }); }
768
+ class Item {
769
+ constructor(data) {
770
+ this.data = data;
771
+ this.state = signal(0 /* SlideState.Pending */);
772
+ this.currentState = 0 /* SlideState.Pending */;
773
+ this.id = `${++uid}`;
774
+ }
775
+ setState(state) {
776
+ if (this.currentState !== state) {
777
+ this.currentState = state;
778
+ this.state.set(state);
779
+ }
780
+ }
746
781
  }
747
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuSlidingLayout, decorators: [{
748
- type: NgModule,
782
+ let uid = 0;
783
+ /**
784
+ * @example
785
+ * ```html
786
+ * <nu-infinite-sliding [data]="newSlide">
787
+ * <ng-template nuInfiniteSlide let-data>{{ data }}</ng-template>
788
+ * </nu-infinite-sliding>
789
+ * ```
790
+ *
791
+ * ```typescript
792
+ * export class MyComponent {
793
+ * readonly newSlide = signal<SlideData<string>>({ position: 1, data: "Hello" })
794
+ *
795
+ * addNewSlide() {
796
+ * this.newSlide.set({ position: 1, data: "World" })
797
+ * }
798
+ * }
799
+ * ```
800
+ */
801
+ class InfiniteSlidingComponent {
802
+ constructor() {
803
+ this.slide = contentChild.required(InfiniteSlideDirective);
804
+ this.data = model();
805
+ this.#items = linkedSignal({
806
+ source: this.data,
807
+ computation: (data, prev) => insertData(prev?.value ?? [], data)
808
+ });
809
+ this.items = computed(() => this.#items().filter(item => item.state() !== 4 /* SlideState.Hidden */));
810
+ this.preferredIndex = linkedSignal({
811
+ source: computed(() => this.items().findIndex(item => item.state() === 0 /* SlideState.Pending */)),
812
+ computation: (index, prev) => (index > -1 ? index : prev?.value ?? 0)
813
+ });
814
+ }
815
+ #items;
816
+ push(data) {
817
+ this.data.set({ position: 1, data });
818
+ }
819
+ unshift(data) {
820
+ this.data.set({ position: -1, data });
821
+ }
822
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InfiniteSlidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
823
+ 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: `
824
+ <nu-sliding [lazy]="true" [preferred]="preferredIndex()">
825
+ @for (item of items(); track item.id) {
826
+ <ng-template nuSlide (state)="item.setState($event)">
827
+ <ng-template
828
+ [ngTemplateOutlet]="slide().tpl"
829
+ [ngTemplateOutletContext]="{ $implicit: item.data }"
830
+ />
831
+ </ng-template>
832
+ }
833
+ </nu-sliding>
834
+ `, 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 }); }
835
+ }
836
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InfiniteSlidingComponent, decorators: [{
837
+ type: Component,
749
838
  args: [{
750
- imports: members,
751
- exports: members
839
+ selector: "nu-infinite-sliding",
840
+ exportAs: "nuInfiniteSliding",
841
+ imports: [SlidingComponent, SlideDirective, NgTemplateOutlet],
842
+ template: `
843
+ <nu-sliding [lazy]="true" [preferred]="preferredIndex()">
844
+ @for (item of items(); track item.id) {
845
+ <ng-template nuSlide (state)="item.setState($event)">
846
+ <ng-template
847
+ [ngTemplateOutlet]="slide().tpl"
848
+ [ngTemplateOutletContext]="{ $implicit: item.data }"
849
+ />
850
+ </ng-template>
851
+ }
852
+ </nu-sliding>
853
+ `,
854
+ changeDetection: ChangeDetectionStrategy.OnPush
752
855
  }]
753
856
  }] });
857
+ function insertData(list, slideData) {
858
+ if (slideData == null) {
859
+ return list;
860
+ }
861
+ const { position, data } = slideData;
862
+ if (position === -1) {
863
+ return [new Item(data), ...list];
864
+ }
865
+ else {
866
+ return [...list, new Item(data)];
867
+ }
868
+ }
754
869
 
755
870
  /**
756
871
  * Generated bundle index. Do not edit.
757
872
  */
758
873
 
759
- export { DockingContentComponent, DockingLayoutComponent, DockingPanelComponent, L9Cell, L9GridTopLeft, L9Range, L9State, NuDockingLayout, NuSlidingLayout, SlidingComponent, SlidingItemDirective, SlotDef, SlotDirective, SlotOutletDirective, SlotsService };
874
+ export { DockingContentComponent, DockingLayoutComponent, DockingPanelComponent, InfiniteSlideDirective, InfiniteSlidingComponent, L9Cell, L9GridTopLeft, L9Range, L9State, NuDockingLayout, SlideDirective, SlidingComponent, SlotDef, SlotDirective, SlotOutletDirective, SlotsService };
760
875
  //# sourceMappingURL=ngutil-layout.mjs.map