@ng-atomic/components 16.2.0 → 16.3.1

package/fesm2022/ng-atomic-components-frames-line-up.mjs

@@ -1,19 +1,23 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, ElementRef, Component, ChangeDetectionStrategy, HostBinding, Input, ViewChild } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, interval } from 'rxjs';
-import { scan, filter, shareReplay, map, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { signal, Injectable, input, Directive, inject, ElementRef, PLATFORM_ID, viewChild, Component, ChangeDetectionStrategy } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { map, startWith, distinctUntilChanged as distinctUntilChanged$1, switchMap, filter } from 'rxjs/operators';
 import { trigger, transition, query, style, animate } from '@angular/animations';
+import { distinctUntilChanged, NEVER, Observable, of, fromEvent, combineLatest } from 'rxjs';
+import ResizeObserver from 'resize-observer-polyfill';
 
 const LINE_UP_ANIMATIONS = [
     trigger('hasNext', [
         transition(':enter', [
+            // style({ transform: 'translateX(-100%)', }),
+            // animate('300ms ease-out', style({ transform: 'translateX(0%)', })),
             query(':enter', [style({ transform: 'translateX(-100%)', })], { optional: true }),
             query(':enter', [animate('300ms ease-out', style({ transform: 'translateX(0%)', })),], { optional: true }),
         ]),
         transition(':leave', [
+            // style({transform: 'translateX(0%)'}),
+            // animate('30000ms ease-in', style({transform: 'translateX(-100%)'})),
             query(':leave', [style({ transform: 'translateX(0%)' })], { optional: true }),
             query(':leave', [animate('300ms ease-in', style({ transform: 'translateX(-100%)' }))], { optional: true }),
         ]),
@@ -22,111 +26,149 @@ const LINE_UP_ANIMATIONS = [
 
 class LineUpFrameService {
     constructor() {
-        this.frames = [];
-        this.entries$ = new Subject();
-        this.sizeMap$ = this.entries$.pipe(scan((acc, value) => {
-            if (value.type === 'remove') {
-                const map = acc.get(value.scope);
-                map?.delete(value.index);
-                if (map?.size === 0)
-                    acc.delete(value.scope);
-                return acc;
-            }
-            else {
-                const map = acc.get(value.scope) ?? new Map();
-                map.set(value.index, value.mainWidth);
-                acc.set(value.scope, map);
-                return acc;
-            }
-        }, new Map()), filter((map) => [...map.values()].map(map => [...map.keys()]).flat().length === this.frames.length), shareReplay(1));
-        this.sizeMap = toSignal(this.sizeMap$);
-    }
-    mapToContentWidth(scope, index) {
-        return this.sizeMap$.pipe(map((map) => map.get(scope) ?? new Map()), map((map) => {
-            const keys = [...map.keys()].filter(key => key >= index);
-            return keys.reduce((acc, key) => map.get(key) + acc, 0);
-        }), distinctUntilChanged(), shareReplay(1));
-    }
-    register(frame, mainWidth) {
-        this.frames.push(frame);
-    }
-    update(frame, mainWidth) {
-        this.entries$.next({ type: 'add', scope: frame.scope, index: frame.index, mainWidth });
-    }
-    unregister(frame) {
-        const index = this.findIndex(frame);
-        this.frames = this.frames.filter((value) => value !== frame);
-        this.entries$.next({ type: 'remove', scope: frame.scope, index });
-    }
-    findIndex(frame) {
-        return this.frames.findIndex((value) => value === frame);
-    }
-    isFirst(frame) {
-        const index = this.findIndex(frame);
-        const keys = [...(this.sizeMap().get(frame.scope) ?? new Map()).keys()];
-        return Math.min(...keys) === index;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineUpFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineUpFrameService, providedIn: 'root' }); }
+        this.sizeMap = signal({});
+        this.sizeMap$ = toObservable(this.sizeMap).pipe(distinctUntilChanged(), takeUntilDestroyed());
+    }
+    register(frame, scope) {
+        this.sizeMap.update(record => {
+            record[scope] ??= { frames: [], sizeMap: {} };
+            record[scope].frames.push(frame);
+            return { ...record };
+        });
+    }
+    update(frame, mainWidth, scope) {
+        const index = this.findIndex(frame, scope);
+        this.sizeMap.update(record => {
+            record[scope] ??= { frames: [], sizeMap: {} };
+            record[scope].sizeMap[index] = mainWidth;
+            return { ...record };
+        });
+    }
+    unregister(frame, scope) {
+        const index = this.findIndex(frame, scope);
+        this.sizeMap.update(record => {
+            record[scope].frames = [...record[scope].frames.filter((value) => value !== frame)];
+            delete record[scope].sizeMap[index];
+            return { ...record };
+        });
+    }
+    findIndex(frame, scope) {
+        return this.sizeMap()[scope].frames.findIndex((value) => value === frame);
+    }
+    isFirst(frame, scope) {
+        const index = this.findIndex(frame, scope);
+        return Math.min(...Object.keys(this.getSizeMap(scope)).map(key => parseInt(key, 10))) === index;
+    }
+    getSizeMap(scope) {
+        return this.sizeMap()[scope].sizeMap ?? {};
+    }
+    getFollowingWidth(scope, frame) {
+        return Object.entries(this.getSizeMap(scope))
+            .filter(([key]) => parseInt(key, 10) >= this.findIndex(frame, scope))
+            .reduce((acc, [_, width]) => width + acc, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LineUpFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LineUpFrameService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineUpFrameService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LineUpFrameService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
+
+function fromResize(el) {
+    if (!el)
+        return NEVER;
+    return new Observable((observer) => {
+        const resizeObserver = new ResizeObserver(entries => {
+            entries.forEach((entry) => observer.next(entry));
+        });
+        resizeObserver.observe(el.nativeElement);
+        return () => resizeObserver.disconnect();
+    }).pipe(map((el) => el.contentRect?.width ?? 0), startWith(0), distinctUntilChanged$1());
+}
+
+class LineUpFrameStore {
+    constructor() {
+        this.scope = input('default');
+        this.hasNext = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LineUpFrameStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: LineUpFrameStore, isStandalone: true, selector: "frames-line-up", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, hasNext: { classPropertyName: "hasNext", publicName: "hasNext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LineUpFrameStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'frames-line-up' }]
+        }] });
 class LineUpFrame {
     constructor() {
+        this.store = inject(LineUpFrameStore);
         this.service = inject(LineUpFrameService);
         this.el = inject(ElementRef);
-        this.scope = 'default';
-        // TODO(@nontangent): interval is not the best way to do this
-        this.mainWidth$ = interval(500).pipe(filter(() => !!this.mainEl), map(() => this.mainEl.nativeElement.clientWidth), distinctUntilChanged(), takeUntilDestroyed());
-        this.width$ = this.service.sizeMap$.pipe(switchMap(() => this.service.mapToContentWidth(this.scope, this.index)), distinctUntilChanged(), takeUntilDestroyed());
-    }
-    get index() {
-        return this.service.findIndex(this);
+        this.platformId = inject(PLATFORM_ID);
+        this.resizeWindow$ = of(null).pipe(switchMap(() => {
+            return isPlatformBrowser(this.platformId)
+                ? fromEvent(window, 'resize').pipe(startWith(null))
+                : of(null);
+        }));
+        this.elWidth$ = this.resizeWindow$.pipe(switchMap(() => fromResize(this.el).pipe(startWith(null))), map(() => this.el.nativeElement?.clientWidth ?? 0), takeUntilDestroyed());
+        this.main = viewChild('main', { read: ElementRef });
+        this.main$ = toObservable(this.main);
+        this.mainWidth$ = combineLatest({
+            main: this.main$,
+            resize: this.resizeWindow$
+        }).pipe(switchMap(({ main }) => fromResize(main).pipe(startWith(null))), map(() => this.main()), map((main) => main?.nativeElement?.clientWidth ?? 0), takeUntilDestroyed());
+        this.allWidth$ = combineLatest({
+            map: this.service.sizeMap$,
+            window: this.resizeWindow$
+        }).pipe(map(() => this.service.getFollowingWidth(this.store.scope(), this)), takeUntilDestroyed());
+        this.delta$ = combineLatest({
+            el: this.elWidth$,
+            all: this.allWidth$,
+        }).pipe(filter(() => this.service.isFirst(this, this.store.scope())), map(({ el, all }) => Math.min(el - all, 0)), distinctUntilChanged$1(), takeUntilDestroyed());
     }
     ngOnInit() {
-        this.service.register(this, 0);
+        this.service.register(this, this.store.scope());
     }
     ngAfterViewInit() {
-        this.mainWidth$.subscribe((width) => this.service.update(this, width));
-        this.width$.pipe(filter(() => this.service.isFirst(this))).subscribe((width) => {
-            const delta = this.el.nativeElement.clientWidth - width;
-            this.el.nativeElement.style.setProperty('--translate-x', `${Math.min(delta, 0)}px`);
-        });
+        if (isPlatformBrowser(this.platformId)) {
+            this.mainWidth$.subscribe((width) => this.service.update(this, width, this.store.scope()));
+            this.delta$.subscribe((delta) => this.setTranslateX(delta));
+        }
     }
     ngOnDestroy() {
-        this.service.unregister(this);
+        this.service.unregister(this, this.store.scope());
+    }
+    setTranslateX(value) {
+        this.el.nativeElement.style.setProperty('--translate-x', `${value}px`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineUpFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LineUpFrame, isStandalone: true, selector: "frames-line-up", inputs: { hasNext: "hasNext", scope: "scope" }, host: { properties: { "attr.has-next": "this.hasNext" } }, viewQueries: [{ propertyName: "mainEl", first: true, predicate: ["main"], descendants: true }], ngImport: i0, template: `
-    <div class="main content" #main><ng-content select=[main]></ng-content></div>
-    <div class="next content" *ngIf="hasNext" @hasNext><ng-content select=[next]></ng-content></div>
-  `, isInline: true, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-Dwbt: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-Dwbt: var(--background);--next-width: 100%;--next-width-SCOPED-IN-line-up-Dwbt: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-Dwbt: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-Dwbt: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-Dwbt));transition:transform .3s ease-in-out;display:flex;justify-content:start;gap:var(--gap-SCOPED-IN-line-up-Dwbt);width:100%;height:100%;background:var(--background-SCOPED-IN-line-up-Dwbt)}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LineUpFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: LineUpFrame, isStandalone: true, selector: "frames-line-up", host: { attributes: { "attr.has-next": "store.hasNext()" } }, viewQueries: [{ propertyName: "main", first: true, predicate: ["main"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: LineUpFrameStore, inputs: ["scope", "scope", "hasNext", "hasNext"] }], ngImport: i0, template: `
+    <div class="main" #main><ng-content select=[main] /></div>
+    @if (store.hasNext()) {
+      <div class="next" @hasNext><ng-content select=[next] /></div>
+    }
+  `, isInline: true, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-SORK: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-SORK: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-SORK: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-SORK: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-SORK: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-SORK));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-SORK);width:100%;height:100%}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"], animations: LINE_UP_ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineUpFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LineUpFrame, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [
-                        CommonModule,
-                    ], selector: 'frames-line-up', template: `
-    <div class="main content" #main><ng-content select=[main]></ng-content></div>
-    <div class="next content" *ngIf="hasNext" @hasNext><ng-content select=[next]></ng-content></div>
-  `, changeDetection: ChangeDetectionStrategy.Default, animations: LINE_UP_ANIMATIONS, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-Dwbt: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-Dwbt: var(--background);--next-width: 100%;--next-width-SCOPED-IN-line-up-Dwbt: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-Dwbt: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-Dwbt: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-Dwbt));transition:transform .3s ease-in-out;display:flex;justify-content:start;gap:var(--gap-SCOPED-IN-line-up-Dwbt);width:100%;height:100%;background:var(--background-SCOPED-IN-line-up-Dwbt)}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"] }]
-        }], propDecorators: { hasNext: [{
-                type: HostBinding,
-                args: ['attr.has-next']
-            }, {
-                type: Input
-            }], scope: [{
-                type: Input
-            }], mainEl: [{
-                type: ViewChild,
-                args: ['main', { static: false }]
-            }] } });
+            args: [{ standalone: true, imports: [], selector: 'frames-line-up', template: `
+    <div class="main" #main><ng-content select=[main] /></div>
+    @if (store.hasNext()) {
+      <div class="next" @hasNext><ng-content select=[next] /></div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.Default, animations: LINE_UP_ANIMATIONS, hostDirectives: [
+                        {
+                            directive: LineUpFrameStore,
+                            inputs: ['scope', 'hasNext'],
+                        },
+                    ], host: {
+                        'attr.has-next': 'store.hasNext()',
+                    }, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-SORK: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-SORK: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-SORK: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-SORK: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-SORK: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-SORK));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-SORK);width:100%;height:100%}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LineUpFrame, LineUpFrameService };
+export { LineUpFrame, LineUpFrameService, LineUpFrameStore };
 //# sourceMappingURL=ng-atomic-components-frames-line-up.mjs.map

package/fesm2022/ng-atomic-components-frames-line-up.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-line-up.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.animations.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/ng-atomic-components-frames-line-up.ts"],"sourcesContent":["import { animate, query, sequence, state, style, transition, trigger, group } from '@angular/animations';\n\nexport const LINE_UP_ANIMATIONS = [\n  trigger('hasNext', [\n    transition(':enter', [\n      query(':enter', [style({ transform: 'translateX(-100%)', })], { optional: true }),\n      query(':enter', [animate('300ms ease-out', style({ transform: 'translateX(0%)', })),], { optional: true }),\n    ]),\n    transition(':leave', [\n      query(':leave', [style({transform: 'translateX(0%)'})], { optional: true }),\n      query(':leave', [animate('300ms ease-in', style({transform: 'translateX(-100%)'}))], { optional: true }),\n    ]),\n  ])\n];\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Injectable, Input, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { interval, Subject } from 'rxjs';\nimport { distinctUntilChanged, filter, map, scan, shareReplay, startWith, switchMap} from 'rxjs/operators';\nimport { LINE_UP_ANIMATIONS } from './line-up.animations';\nimport { fromResize } from './resize-observer';\n\nexport interface LineUpFrameEntry {\n  type: 'add' | 'remove';\n  scope: string;\n  index: number;\n  mainWidth?: number;\n}\n\n@Injectable({providedIn: 'root'})\nexport class LineUpFrameService {\n  frames: LineUpFrame[] = [];\n\n  readonly entries$ = new Subject<LineUpFrameEntry>();\n  readonly sizeMap$ = this.entries$.pipe(\n    scan((acc, value) => {\n      if (value.type === 'remove') {\n        const map = acc.get(value.scope);\n        map?.delete(value.index);\n        if (map?.size === 0) acc.delete(value.scope);\n        return acc;\n      } else {\n        const map = acc.get(value.scope) ?? new Map<number, number>();\n        map.set(value.index, value.mainWidth);\n        acc.set(value.scope, map);\n        return acc;\n      }\n    }, new Map() as Map<string, Map<number, number>>),\n    filter((map) => [...map.values()].map(map => [...map.keys()]).flat().length === this.frames.length),\n    shareReplay(1),\n  );\n  readonly sizeMap = toSignal(this.sizeMap$);\n\n  mapToContentWidth(scope: string, index: number) {\n    return this.sizeMap$.pipe(\n      map((map) => map.get(scope) ?? new Map<number, number>()),\n      map((map) => {\n        const keys = [...map.keys()].filter(key => key >= index);\n        return keys.reduce((acc, key) => map.get(key) + acc, 0);\n      }),\n      distinctUntilChanged(),\n      shareReplay(1),\n    );\n  }\n\n  register(frame: LineUpFrame, mainWidth?: number) {\n    this.frames.push(frame);\n  }\n\n  update(frame: LineUpFrame, mainWidth: number) {\n    this.entries$.next({type: 'add', scope: frame.scope, index: frame.index, mainWidth});\n  }\n\n  unregister(frame: LineUpFrame) {\n    const index = this.findIndex(frame);\n    this.frames = this.frames.filter((value) => value !== frame);\n    this.entries$.next({type: 'remove', scope: frame.scope, index});\n  }\n\n  findIndex(frame: LineUpFrame): number {\n    return this.frames.findIndex((value) => value === frame);\n  }\n\n  isFirst(frame: LineUpFrame): boolean {\n    const index = this.findIndex(frame);\n    const keys = [...(this.sizeMap().get(frame.scope) ?? new Map()).keys()];\n    return Math.min(...keys) === index;\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [\n    CommonModule,\n  ],\n  selector: 'frames-line-up',\n  template: `\n    <div class=\"main content\" #main><ng-content select=[main]></ng-content></div>\n    <div class=\"next content\" *ngIf=\"hasNext\" @hasNext><ng-content select=[next]></ng-content></div>\n  `,\n  styleUrls: ['./line-up.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.Default,\n  animations: LINE_UP_ANIMATIONS,\n})\nexport class LineUpFrame implements OnInit, OnDestroy {\n  private service = inject(LineUpFrameService);\n  private el = inject(ElementRef);\n\n  @HostBinding('attr.has-next')\n  @Input()\n  hasNext: boolean\n\n  @Input()\n  scope = 'default';\n\n  @ViewChild('main', {static: false})\n  protected mainEl!: ElementRef;\n\n  // TODO(@nontangent): interval is not the best way to do this\n  readonly mainWidth$ = interval(500).pipe(\n    filter(() => !!this.mainEl),\n    map(() => this.mainEl.nativeElement.clientWidth),\n    distinctUntilChanged(),\n    takeUntilDestroyed(),\n  );\n\n  readonly width$ = this.service.sizeMap$.pipe(\n    switchMap(() => this.service.mapToContentWidth(this.scope, this.index)),\n    distinctUntilChanged(),\n    takeUntilDestroyed(),\n  );\n\n  get index(): number {\n    return this.service.findIndex(this);\n  }\n\n  ngOnInit(): void {\n    this.service.register(this, 0);\n  }\n\n  ngAfterViewInit(): void {\n    this.mainWidth$.subscribe((width) => this.service.update(this, width));\n    this.width$.pipe(filter(() => this.service.isFirst(this))).subscribe((width) => {\n      const delta = this.el.nativeElement.clientWidth - width;\n      this.el.nativeElement.style.setProperty('--translate-x', `${Math.min(delta, 0)}px`);\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.service.unregister(this);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-atomic-components-frames-line-up.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.animations.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.service.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/resize-observer.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/line-up.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/line-up/ng-atomic-components-frames-line-up.ts"],"sourcesContent":["import { animate, query, sequence, state, style, transition, trigger, group } from '@angular/animations';\n\nexport const LINE_UP_ANIMATIONS = [\n  trigger('hasNext', [\n    transition(':enter', [\n      // style({ transform: 'translateX(-100%)', }),\n      // animate('300ms ease-out', style({ transform: 'translateX(0%)', })),\n      query(':enter', [style({ transform: 'translateX(-100%)', })], { optional: true }),\n      query(':enter', [animate('300ms ease-out', style({ transform: 'translateX(0%)', })),], { optional: true }),\n    ]),\n    transition(':leave', [\n      // style({transform: 'translateX(0%)'}),\n      // animate('30000ms ease-in', style({transform: 'translateX(-100%)'})),\n      query(':leave', [style({transform: 'translateX(0%)'})], { optional: true }),\n      query(':leave', [animate('300ms ease-in', style({transform: 'translateX(-100%)'}))], { optional: true }),\n    ]),\n  ])\n];\n","import { Injectable, signal } from \"@angular/core\";\nimport { LineUpFrame } from \"./line-up.frame\";\nimport { takeUntilDestroyed, toObservable } from \"@angular/core/rxjs-interop\";\nimport { distinctUntilChanged } from \"rxjs\";\n\ninterface State {\n  [scope: string]: {\n    frames: LineUpFrame[];\n    sizeMap: Record<number, number>;\n  }\n}\n\n\n@Injectable({providedIn: 'root'})\nexport class LineUpFrameService {\n  readonly sizeMap = signal<State>({});\n  readonly sizeMap$ = toObservable(this.sizeMap).pipe(\n    distinctUntilChanged(),\n    takeUntilDestroyed(),\n  );\n\n  register(frame: LineUpFrame, scope: string) {\n    this.sizeMap.update(record => {\n      record[scope] ??= {frames: [], sizeMap: {}};\n      record[scope].frames.push(frame);\n      return {...record};\n    });\n  }\n\n  update(frame: LineUpFrame, mainWidth: number, scope: string) {\n    const index = this.findIndex(frame, scope);\n    this.sizeMap.update(record => {\n      record[scope] ??= {frames: [], sizeMap: {}};\n      record[scope].sizeMap[index] = mainWidth;\n      return {...record};\n    })\n  }\n\n  unregister(frame: LineUpFrame, scope: string) {\n    const index = this.findIndex(frame, scope);\n    this.sizeMap.update(record => {\n      record[scope].frames = [...record[scope].frames.filter((value) => value !== frame)];\n      delete record[scope].sizeMap[index];\n      return {...record};\n    })\n  }\n\n  findIndex(frame: LineUpFrame, scope: string): number {\n    return this.sizeMap()[scope].frames.findIndex((value) => value === frame);\n  }\n\n  isFirst(frame: LineUpFrame, scope: string): boolean {\n    const index = this.findIndex(frame, scope);\n    return Math.min(...Object.keys(this.getSizeMap(scope)).map(key => parseInt(key, 10))) === index;\n  }\n\n  getSizeMap(scope: string) {\n    return this.sizeMap()[scope].sizeMap ?? {};\n  }\n\n  getFollowingWidth(scope: string, frame: LineUpFrame): number {\n    return Object.entries(this.getSizeMap(scope))\n      .filter(([key]) => parseInt(key, 10) >= this.findIndex(frame, scope))\n      .reduce((acc, [_, width]) => width + acc, 0);\n  }\n}\n","import { NEVER, Observable } from 'rxjs';\nimport { startWith } from 'rxjs/operators';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { distinctUntilChanged, map } from 'rxjs/operators';\nimport { ElementRef } from '@angular/core';\n\nexport function fromResize(el: ElementRef<Element>): Observable<number> {\n  if (!el) return NEVER;\n  return new Observable<any>((observer) => {\n    const resizeObserver = new ResizeObserver(entries => {\n      entries.forEach((entry) => observer.next(entry));\n    });\n    resizeObserver.observe(el.nativeElement);\n    return () => resizeObserver.disconnect();\n  }).pipe(\n    map((el) => el.contentRect?.width ?? 0),\n    startWith(0),\n    distinctUntilChanged(),\n  );\n}\n","import { ChangeDetectionStrategy, Component, Directive, ElementRef, OnDestroy, OnInit, PLATFORM_ID, inject, input, viewChild } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { distinctUntilChanged, filter, map, startWith, switchMap } from 'rxjs/operators';\nimport { LINE_UP_ANIMATIONS } from './line-up.animations';\nimport { LineUpFrameService } from './line-up.service';\nimport { fromResize } from './resize-observer';\nimport { combineLatest, fromEvent, of } from 'rxjs';\n\n@Directive({standalone: true, selector: 'frames-line-up'})\nexport class LineUpFrameStore {\n  readonly scope = input('default');\n  readonly hasNext = input(false);\n}\n\n@Component({\n  standalone: true,\n  imports: [],\n  selector: 'frames-line-up',\n  template: `\n    <div class=\"main\" #main><ng-content select=[main] /></div>\n    @if (store.hasNext()) {\n      <div class=\"next\" @hasNext><ng-content select=[next] /></div>\n    }\n  `,\n  styleUrls: ['./line-up.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.Default,\n  animations: LINE_UP_ANIMATIONS,\n  hostDirectives: [\n    {\n      directive: LineUpFrameStore,\n      inputs: ['scope', 'hasNext'],\n    },\n  ],\n  host: {\n    'attr.has-next': 'store.hasNext()',\n  }\n})\nexport class LineUpFrame implements OnInit, OnDestroy {\n  protected store = inject(LineUpFrameStore);\n  private service = inject(LineUpFrameService);\n  private el = inject(ElementRef);\n  private platformId = inject(PLATFORM_ID);\n\n  readonly resizeWindow$ = of(null).pipe(\n    switchMap(() => {\n      return isPlatformBrowser(this.platformId)\n        ? fromEvent(window, 'resize').pipe(startWith(null))\n        : of(null);\n    }),\n  )\n\n  readonly elWidth$ = this.resizeWindow$.pipe(\n    switchMap(() => fromResize(this.el).pipe(startWith(null))),\n    map(() => this.el.nativeElement?.clientWidth ?? 0),\n    takeUntilDestroyed(),\n  );\n  \n  readonly main = viewChild('main', {read: ElementRef});\n  readonly main$ = toObservable(this.main);\n  readonly mainWidth$ = combineLatest({\n    main: this.main$,\n    resize: this.resizeWindow$\n  }).pipe(\n    switchMap(({main}) => fromResize(main).pipe(startWith(null))),\n    map(() => this.main()),\n    map((main) => main?.nativeElement?.clientWidth ?? 0),\n    takeUntilDestroyed(),\n  );\n  readonly allWidth$ = combineLatest({\n    map: this.service.sizeMap$,\n    window: this.resizeWindow$\n  }) .pipe(\n    map(() => this.service.getFollowingWidth(this.store.scope(), this)),\n    takeUntilDestroyed(),\n  );\n\n  readonly delta$ = combineLatest({\n    el: this.elWidth$,\n    all: this.allWidth$,\n  }).pipe(\n    filter(() => this.service.isFirst(this, this.store.scope())),\n    map(({el, all}) => Math.min(el - all, 0)),\n    distinctUntilChanged(),\n    takeUntilDestroyed(),\n  );\n\n  ngOnInit(): void {\n    this.service.register(this, this.store.scope());\n  }\n\n  ngAfterViewInit(): void {\n    if (isPlatformBrowser(this.platformId)) {\n      this.mainWidth$.subscribe((width) => this.service.update(this, width, this.store.scope()));\n      this.delta$.subscribe((delta) => this.setTranslateX(delta));\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.service.unregister(this, this.store.scope());\n  }\n\n  protected setTranslateX(value: number) {\n    this.el.nativeElement.style.setProperty('--translate-x', `${value}px`);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["distinctUntilChanged"],"mappings":";;;;;;;;;AAEO,MAAM,kBAAkB,GAAG;IAChC,OAAO,CAAC,SAAS,EAAE;QACjB,UAAU,CAAC,QAAQ,EAAE;;;AAGnB,YAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YACjF,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,gBAAgB,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;SAC3G,CAAC;QACF,UAAU,CAAC,QAAQ,EAAE;;;AAGnB,YAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAC,SAAS,EAAE,gBAAgB,EAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;YAC3E,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAC,SAAS,EAAE,mBAAmB,EAAC,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;SACzG,CAAC;KACH,CAAC;CACH;;MCHY,kBAAkB,CAAA;AAD/B,IAAA,WAAA,GAAA;AAEW,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAQ,EAAE,CAAC,CAAC;AAC5B,QAAA,IAAA,CAAA,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CACjD,oBAAoB,EAAE,EACtB,kBAAkB,EAAE,CACrB,CAAC;AA8CH,KAAA;IA5CC,QAAQ,CAAC,KAAkB,EAAE,KAAa,EAAA;AACxC,QAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,IAAG;AAC3B,YAAA,MAAM,CAAC,KAAK,CAAC,KAAK,EAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAC,CAAC;YAC5C,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACjC,YAAA,OAAO,EAAC,GAAG,MAAM,EAAC,CAAC;AACrB,SAAC,CAAC,CAAC;KACJ;AAED,IAAA,MAAM,CAAC,KAAkB,EAAE,SAAiB,EAAE,KAAa,EAAA;QACzD,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC3C,QAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,IAAG;AAC3B,YAAA,MAAM,CAAC,KAAK,CAAC,KAAK,EAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAC,CAAC;YAC5C,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;AACzC,YAAA,OAAO,EAAC,GAAG,MAAM,EAAC,CAAC;AACrB,SAAC,CAAC,CAAA;KACH;IAED,UAAU,CAAC,KAAkB,EAAE,KAAa,EAAA;QAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC3C,QAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,IAAG;YAC3B,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC;YACpF,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AACpC,YAAA,OAAO,EAAC,GAAG,MAAM,EAAC,CAAC;AACrB,SAAC,CAAC,CAAA;KACH;IAED,SAAS,CAAC,KAAkB,EAAE,KAAa,EAAA;QACzC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC,CAAC;KAC3E;IAED,OAAO,CAAC,KAAkB,EAAE,KAAa,EAAA;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC3C,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC;KACjG;AAED,IAAA,UAAU,CAAC,KAAa,EAAA;QACtB,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC;KAC5C;IAED,iBAAiB,CAAC,KAAa,EAAE,KAAkB,EAAA;QACjD,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;aAC1C,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AACpE,aAAA,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,KAAK,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;KAChD;8GAlDU,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cADN,MAAM,EAAA,CAAA,CAAA,EAAA;;2FAClB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B,UAAU;mBAAC,EAAC,UAAU,EAAE,MAAM,EAAC,CAAA;;;ACP1B,SAAU,UAAU,CAAC,EAAuB,EAAA;AAChD,IAAA,IAAI,CAAC,EAAE;AAAE,QAAA,OAAO,KAAK,CAAC;AACtB,IAAA,OAAO,IAAI,UAAU,CAAM,CAAC,QAAQ,KAAI;AACtC,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,IAAG;AAClD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AACnD,SAAC,CAAC,CAAC;AACH,QAAA,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AACzC,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE,CAAC;AAC3C,KAAC,CAAC,CAAC,IAAI,CACL,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,CAAC,EACvC,SAAS,CAAC,CAAC,CAAC,EACZA,sBAAoB,EAAE,CACvB,CAAC;AACJ;;MCTa,gBAAgB,CAAA;AAD7B,IAAA,WAAA,GAAA;AAEW,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;AACzB,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AACjC,KAAA;8GAHY,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAD5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAC,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAC,CAAA;;MA6B5C,WAAW,CAAA;AAvBxB,IAAA,WAAA,GAAA;AAwBY,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;AACnC,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;AACrC,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AACxB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;QAEhC,IAAa,CAAA,aAAA,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CACpC,SAAS,CAAC,MAAK;AACb,YAAA,OAAO,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;AACvC,kBAAE,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AACnD,kBAAE,EAAE,CAAC,IAAI,CAAC,CAAC;SACd,CAAC,CACH,CAAA;QAEQ,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CACzC,SAAS,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAC1D,GAAG,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,CAAC,EAClD,kBAAkB,EAAE,CACrB,CAAC;QAEO,IAAI,CAAA,IAAA,GAAG,SAAS,CAAC,MAAM,EAAE,EAAC,IAAI,EAAE,UAAU,EAAC,CAAC,CAAC;AAC7C,QAAA,IAAA,CAAA,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChC,IAAU,CAAA,UAAA,GAAG,aAAa,CAAC;YAClC,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,MAAM,EAAE,IAAI,CAAC,aAAa;SAC3B,CAAC,CAAC,IAAI,CACL,SAAS,CAAC,CAAC,EAAC,IAAI,EAAC,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7D,GAAG,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC,EACtB,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,EAAE,aAAa,EAAE,WAAW,IAAI,CAAC,CAAC,EACpD,kBAAkB,EAAE,CACrB,CAAC;QACO,IAAS,CAAA,SAAA,GAAG,aAAa,CAAC;AACjC,YAAA,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;YAC1B,MAAM,EAAE,IAAI,CAAC,aAAa;AAC3B,SAAA,CAAC,CAAE,IAAI,CACN,GAAG,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,CAAC,EACnE,kBAAkB,EAAE,CACrB,CAAC;QAEO,IAAM,CAAA,MAAA,GAAG,aAAa,CAAC;YAC9B,EAAE,EAAE,IAAI,CAAC,QAAQ;YACjB,GAAG,EAAE,IAAI,CAAC,SAAS;SACpB,CAAC,CAAC,IAAI,CACL,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAC5D,GAAG,CAAC,CAAC,EAAC,EAAE,EAAE,GAAG,EAAC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC,EACzCA,sBAAoB,EAAE,EACtB,kBAAkB,EAAE,CACrB,CAAC;AAoBH,KAAA;IAlBC,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;KACjD;IAED,eAAe,GAAA;AACb,QAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;AACtC,YAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;AAC3F,YAAA,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAC7D,SAAA;KACF;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;KACnD;AAES,IAAA,aAAa,CAAC,KAAa,EAAA;AACnC,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,EAAE,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,CAAC,CAAC;KACxE;8GAlEU,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAX,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,EAoBmB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,MAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAA,UAAU,EAhDxC,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,gBAAgB,EASjB,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;AAKT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4sBAAA,CAAA,EAAA,UAAA,EAGW,kBAAkB,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,OAAA,EAAA,CAAA,CAAA,EAAA;;2FAWnB,WAAW,EAAA,UAAA,EAAA,CAAA;kBAvBvB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,EAAE,EACD,QAAA,EAAA,gBAAgB,EAChB,QAAA,EAAA,CAAA;;;;;AAKT,EAAA,CAAA,EAAA,eAAA,EAEgB,uBAAuB,CAAC,OAAO,EAAA,UAAA,EACpC,kBAAkB,EACd,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,gBAAgB;AAC3B,4BAAA,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC;AAC7B,yBAAA;qBACF,EACK,IAAA,EAAA;AACJ,wBAAA,eAAe,EAAE,iBAAiB;AACnC,qBAAA,EAAA,MAAA,EAAA,CAAA,4sBAAA,CAAA,EAAA,CAAA;;;ACpCH;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-frames-loading.mjs

@@ -1,36 +1,53 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/progress-spinner';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { NgAtomicComponent } from '@ng-atomic/core';
 
-class LoadingFrame {
+class LoadingFrameStore {
     constructor() {
-        this.isLoading = false;
+        this.isLoading = input(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoadingFrame, isStandalone: true, selector: "frames-loading", inputs: { isLoading: "isLoading" }, ngImport: i0, template: `
-    <div class="contents"><ng-content></ng-content></div>
-    <div class="loading" *ngIf="isLoading"><mat-spinner></mat-spinner></div>
-  `, isInline: true, styles: [":host{position:relative;display:block;width:100%;height:100%}:host .loading{position:absolute;z-index:10000;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}:host .contents{position:absolute;top:0;left:0;display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingFrameStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: LoadingFrameStore, isStandalone: true, selector: "frames-loading", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingFrameStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'frames-loading' }]
+        }] });
+class LoadingFrame extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(LoadingFrameStore);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: LoadingFrame, isStandalone: true, selector: "frames-loading", usesInheritance: true, hostDirectives: [{ directive: LoadingFrameStore, inputs: ["isLoading", "isLoading"] }], ngImport: i0, template: `
+    <div class="contents"><ng-content /></div>
+    @if(store.isLoading()) {
+      <div class="loading"><mat-spinner /></div>
+    }
+  `, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-q4vn: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-q4vn: var(--on-primary-color)}:host{position:relative;display:block;width:100%;height:100%}:host .loading{position:absolute;z-index:10000;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}:host .loading mat-spinner{--mdc-circular-progress-active-indicator-color: var(--primary-color)}:host .contents{position:absolute;top:0;left:0;display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-loading-q4vn);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-q4vn)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-loading', standalone: true, imports: [
-                        CommonModule,
                         MatProgressSpinnerModule,
                     ], template: `
-    <div class="contents"><ng-content></ng-content></div>
-    <div class="loading" *ngIf="isLoading"><mat-spinner></mat-spinner></div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative;display:block;width:100%;height:100%}:host .loading{position:absolute;z-index:10000;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}:host .contents{position:absolute;top:0;left:0;display:block;width:100%;height:100%}\n"] }]
-        }], propDecorators: { isLoading: [{
-                type: Input
-            }] } });
+    <div class="contents"><ng-content /></div>
+    @if(store.isLoading()) {
+      <div class="loading"><mat-spinner /></div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: LoadingFrameStore,
+                            inputs: ['isLoading'],
+                        }
+                    ], styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-q4vn: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-q4vn: var(--on-primary-color)}:host{position:relative;display:block;width:100%;height:100%}:host .loading{position:absolute;z-index:10000;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}:host .loading mat-spinner{--mdc-circular-progress-active-indicator-color: var(--primary-color)}:host .contents{position:absolute;top:0;left:0;display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-loading-q4vn);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-q4vn)}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LoadingFrame };
+export { LoadingFrame, LoadingFrameStore };
 //# sourceMappingURL=ng-atomic-components-frames-loading.mjs.map

package/fesm2022/ng-atomic-components-frames-loading.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-loading.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/loading/loading.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/loading/ng-atomic-components-frames-loading.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\n\n@Component({\n  selector: 'frames-loading',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatProgressSpinnerModule,\n  ],\n  template: `\n    <div class=\"contents\"><ng-content></ng-content></div>\n    <div class=\"loading\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner></div>\n  `,\n  styleUrls: ['./loading.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LoadingFrame {\n\n  @Input()\n  isLoading = false;\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAkBa,YAAY,CAAA;AAdzB,IAAA,WAAA,GAAA;QAiBE,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAEnB,KAAA;+GALY,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAZ,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,YAAY,EAPb,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;GAGT,EANC,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ySAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,kIACZ,wBAAwB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FASf,YAAY,EAAA,UAAA,EAAA,CAAA;kBAdxB,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,wBAAwB;qBACzB,EACS,QAAA,EAAA,CAAA;;;GAGT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,ySAAA,CAAA,EAAA,CAAA;8BAK/C,SAAS,EAAA,CAAA;sBADR,KAAK;;;ACpBR;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-frames-loading.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/loading/loading.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/loading/ng-atomic-components-frames-loading.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { NgAtomicComponent } from '@ng-atomic/core';\n\n@Directive({ standalone: true, selector: 'frames-loading' })\nexport class LoadingFrameStore {\n  readonly isLoading = input(false);\n}\n\n@Component({\n  selector: 'frames-loading',\n  standalone: true,\n  imports: [\n    MatProgressSpinnerModule,\n  ],\n  template: `\n    <div class=\"contents\"><ng-content /></div>\n    @if(store.isLoading()) {\n      <div class=\"loading\"><mat-spinner /></div>\n    }\n  `,\n  styleUrls: ['./loading.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: LoadingFrameStore,\n      inputs: ['isLoading'],\n    }\n  ]\n})\nexport class LoadingFrame extends NgAtomicComponent {\n  protected store = inject(LoadingFrameStore);\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAKa,iBAAiB,CAAA;AAD9B,IAAA,WAAA,GAAA;AAEW,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AACnC,KAAA;8GAFY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA;;AA0BrD,MAAO,YAAa,SAAQ,iBAAiB,CAAA;AArBnD,IAAA,WAAA,GAAA;;AAsBY,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAE7C,KAAA;8GAHY,YAAY,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAzBZ,iBAAiB,EAUlB,MAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;AAKT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4sBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAPC,wBAAwB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAiBf,YAAY,EAAA,UAAA,EAAA,CAAA;kBArBxB,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EACP,OAAA,EAAA;wBACP,wBAAwB;qBACzB,EACS,QAAA,EAAA,CAAA;;;;;GAKT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,iBAAiB;4BAC5B,MAAM,EAAE,CAAC,WAAW,CAAC;AACtB,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,4sBAAA,CAAA,EAAA,CAAA;;;AC5BH;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-frames-overlay.mjs

@@ -1,47 +1,62 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import { trigger, transition, query, style, animate } from '@angular/animations';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 const OVERLAY_ANIMATION = trigger('hasNext', [
     transition(':enter', [
-        query(':enter', [style({ transform: 'translateX(100%)', })]),
-        query(':enter', [animate('300ms ease-out', style({ transform: 'translateX(0%)', }))]),
+        style({ transform: 'translateX(50%)', }),
+        animate('500ms ease-out', style({ transform: 'translateX(0%)', })),
     ]),
     transition(':leave', [
-        query(':leave', [style({ transform: 'translateX(0%)' })]),
-        query(':leave', [animate('300ms ease-in', style({ transform: 'translateX(100%)' }))]),
+        style({ transform: 'translateX(0%)' }),
+        animate('500ms ease-in', style({ transform: 'translateX(100%)' })),
     ]),
 ]);
 
+class OverlayFrameStore {
+    constructor() {
+        this.hasNext = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: OverlayFrameStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: OverlayFrameStore, isStandalone: true, selector: "frames-overlay", inputs: { hasNext: { classPropertyName: "hasNext", publicName: "hasNext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: OverlayFrameStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'frames-overlay' }]
+        }] });
 class OverlayFrame {
     constructor() {
-        this.hasNext = false;
+        this.store = inject(OverlayFrameStore);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OverlayFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OverlayFrame, isStandalone: true, selector: "frames-overlay", inputs: { hasNext: "hasNext" }, ngImport: i0, template: `
-    <div class="main content"><ng-content select=[main]></ng-content></div>
-    <div class="next content" *ngIf="hasNext" @hasNext><ng-content select=[next]></ng-content></div>
-  `, isInline: true, styles: [":host{--width: 100%;--width-SCOPED-IN-line-overlay-pntp: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-pntp: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-pntp);height:var(--height-SCOPED-IN-line-overlay-pntp)}:host .content{position:absolute;top:0;left:0;width:100%;height:100%}:host .main{z-index:1}:host .next{z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }], animations: [OVERLAY_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: OverlayFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: OverlayFrame, isStandalone: true, selector: "frames-overlay", hostDirectives: [{ directive: OverlayFrameStore, inputs: ["hasNext", "hasNext"] }], ngImport: i0, template: `
+    <div class="main content"><ng-content select=[main] /></div>
+    @if (store.hasNext()) { 
+      <div class="next content" @hasNext><ng-content select=[next] /></div>
+    }
+  `, isInline: true, styles: [":host{--width: 100%;--width-SCOPED-IN-line-overlay-t0sk: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-t0sk: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-t0sk);height:var(--height-SCOPED-IN-line-overlay-t0sk)}:host .content{position:absolute;top:0;left:0;width:100%;height:100%}:host .main{z-index:1}:host .next{z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }], animations: [OVERLAY_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OverlayFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: OverlayFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-overlay', standalone: true, imports: [
-                        CommonModule,
                         MatProgressSpinnerModule,
                     ], template: `
-    <div class="main content"><ng-content select=[main]></ng-content></div>
-    <div class="next content" *ngIf="hasNext" @hasNext><ng-content select=[next]></ng-content></div>
-  `, animations: [OVERLAY_ANIMATION], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--width: 100%;--width-SCOPED-IN-line-overlay-pntp: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-pntp: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-pntp);height:var(--height-SCOPED-IN-line-overlay-pntp)}:host .content{position:absolute;top:0;left:0;width:100%;height:100%}:host .main{z-index:1}:host .next{z-index:2}\n"] }]
-        }], propDecorators: { hasNext: [{
-                type: Input
-            }] } });
+    <div class="main content"><ng-content select=[main] /></div>
+    @if (store.hasNext()) { 
+      <div class="next content" @hasNext><ng-content select=[next] /></div>
+    }
+  `, animations: [OVERLAY_ANIMATION], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: OverlayFrameStore,
+                            inputs: ['hasNext'],
+                        },
+                    ], styles: [":host{--width: 100%;--width-SCOPED-IN-line-overlay-t0sk: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-t0sk: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-t0sk);height:var(--height-SCOPED-IN-line-overlay-t0sk)}:host .content{position:absolute;top:0;left:0;width:100%;height:100%}:host .main{z-index:1}:host .next{z-index:2}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { OverlayFrame };
+export { OverlayFrame, OverlayFrameStore };
 //# sourceMappingURL=ng-atomic-components-frames-overlay.mjs.map

package/fesm2022/ng-atomic-components-frames-overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-overlay.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/overlay/overlay.animations.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/overlay/overlay.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/overlay/ng-atomic-components-frames-overlay.ts"],"sourcesContent":["import { trigger, transition, style, query, animate } from '@angular/animations';\n\nexport const OVERLAY_ANIMATION = trigger('hasNext', [\n  transition(':enter', [\n    query(':enter', [style({ transform: 'translateX(100%)', })]),\n    query(':enter', [animate('300ms ease-out', style({ transform: 'translateX(0%)', }))]),\n  ]),\n  transition(':leave', [\n    query(':leave', [style({ transform: 'translateX(0%)' })]),\n    query(':leave', [animate('300ms ease-in', style({ transform: 'translateX(100%)' }))]),\n  ]),\n]);\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { OVERLAY_ANIMATION } from './overlay.animations';\nimport { CommonModule } from '@angular/common';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\n\n@Component({\n  selector: 'frames-overlay',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatProgressSpinnerModule,\n  ],\n  template: `\n    <div class=\"main content\"><ng-content select=[main]></ng-content></div>\n    <div class=\"next content\" *ngIf=\"hasNext\" @hasNext><ng-content select=[next]></ng-content></div>\n  `,\n  styleUrls: ['./overlay.frame.scss'],\n  animations: [OVERLAY_ANIMATION],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class OverlayFrame {\n  @Input() hasNext = false;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAEO,MAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,EAAE;IAClD,UAAU,CAAC,QAAQ,EAAE;AACnB,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,GAAG,CAAC,CAAC,CAAC;AAC5D,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC;KACtF,CAAC;IACF,UAAU,CAAC,QAAQ,EAAE;AACnB,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;AACzD,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAC,CAAC;KACtF,CAAC;AACH,CAAA,CAAC;;MCSW,YAAY,CAAA;AAfzB,IAAA,WAAA,GAAA;QAgBW,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAC1B,KAAA;+GAFY,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAZ,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,YAAY,EARb,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;AAGT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,oYAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EANC,YAAY,EACZ,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,wBAAwB,EAOd,CAAA,EAAA,UAAA,EAAA,CAAC,iBAAiB,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAGpB,YAAY,EAAA,UAAA,EAAA,CAAA;kBAfxB,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,wBAAwB;qBACzB,EACS,QAAA,EAAA,CAAA;;;AAGT,EAAA,CAAA,EAAA,UAAA,EAEW,CAAC,iBAAiB,CAAC,EACd,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,oYAAA,CAAA,EAAA,CAAA;8BAGtC,OAAO,EAAA,CAAA;sBAAf,KAAK;;;ACrBR;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-frames-overlay.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/overlay/overlay.animations.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/overlay/overlay.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/overlay/ng-atomic-components-frames-overlay.ts"],"sourcesContent":["import { trigger, transition, style, query, animate } from '@angular/animations';\n\nexport const OVERLAY_ANIMATION = trigger('hasNext', [\n  transition(':enter', [\n    style({ transform: 'translateX(50%)', }),\n    animate('500ms ease-out', style({ transform: 'translateX(0%)', })),\n  ]),\n  transition(':leave', [\n    style({ transform: 'translateX(0%)' }),\n    animate('500ms ease-in', style({ transform: 'translateX(100%)' })),\n  ]),\n]);\n","import { ChangeDetectionStrategy, Component, Directive, Input, inject, input } from '@angular/core';\nimport { OVERLAY_ANIMATION } from './overlay.animations';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\n\n@Directive({ standalone: true, selector: 'frames-overlay' })\nexport class OverlayFrameStore {\n  readonly hasNext = input(false);\n}\n\n@Component({\n  selector: 'frames-overlay',\n  standalone: true,\n  imports: [\n    MatProgressSpinnerModule,\n  ],\n  template: `\n    <div class=\"main content\"><ng-content select=[main] /></div>\n    @if (store.hasNext()) { \n      <div class=\"next content\" @hasNext><ng-content select=[next] /></div>\n    }\n  `,\n  styleUrls: ['./overlay.frame.scss'],\n  animations: [OVERLAY_ANIMATION],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: OverlayFrameStore,\n      inputs: ['hasNext'],\n    },\n  ],\n})\nexport class OverlayFrame {\n  protected readonly store = inject(OverlayFrameStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAEO,MAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,EAAE;IAClD,UAAU,CAAC,QAAQ,EAAE;AACnB,QAAA,KAAK,CAAC,EAAE,SAAS,EAAE,iBAAiB,GAAG,CAAC;QACxC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,gBAAgB,GAAG,CAAC,CAAC;KACnE,CAAC;IACF,UAAU,CAAC,QAAQ,EAAE;AACnB,QAAA,KAAK,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;QACtC,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC,CAAC;KACnE,CAAC;AACH,CAAA,CAAC;;MCNW,iBAAiB,CAAA;AAD9B,IAAA,WAAA,GAAA;AAEW,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AACjC,KAAA;8GAFY,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA;;MA2B9C,YAAY,CAAA;AAtBzB,IAAA,WAAA,GAAA;AAuBqB,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;AACtD,KAAA;8GAFY,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EA1BZ,iBAAiB,EAUlB,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;AAKT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,oYAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAPC,wBAAwB,EAAA,CAAA,EAAA,UAAA,EASd,CAAC,iBAAiB,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FASpB,YAAY,EAAA,UAAA,EAAA,CAAA;kBAtBxB,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EACP,OAAA,EAAA;wBACP,wBAAwB;qBACzB,EACS,QAAA,EAAA,CAAA;;;;;AAKT,EAAA,CAAA,EAAA,UAAA,EAEW,CAAC,iBAAiB,CAAC,mBACd,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,iBAAiB;4BAC5B,MAAM,EAAE,CAAC,SAAS,CAAC;AACpB,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,oYAAA,CAAA,EAAA,CAAA;;;AC7BH;;AAEG;;;;"}