@ng-atomic/components 16.2.0 → 16.3.1

package/fesm2022/ng-atomic-components-frames-router-outlet.mjs

@@ -1,84 +1,122 @@
 import * as i0 from '@angular/core';
-import { Pipe, Component, ChangeDetectionStrategy, ViewChild, Input } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { input, Directive, inject, viewChild, Component, ChangeDetectionStrategy } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { OverlayFrame } from '@ng-atomic/components/frames/overlay';
 import { LineUpFrame } from '@ng-atomic/components/frames/line-up';
-import { RouterOutlet } from '@angular/router';
-import { signalize, SignalPipe } from '@ng-atomic/common/pipes/signal';
-import { injectUiConfig } from '@ng-atomic/common/services/ui';
+import { PRIMARY_OUTLET, RouterOutlet } from '@angular/router';
+import { makeConfig } from '@ng-atomic/common/services/ui';
+import { InjectableComponent, _computed, NgAtomicComponent } from '@ng-atomic/core';
+import { of, combineLatest, startWith, map } from 'rxjs';
+import { computedAsync } from 'ngxtension/computed-async';
 
-class IsBlankRoutePipe {
-    transform(outlet) {
-        return !!(outlet?.activatedRouteData) && !(outlet.activatedRouteData?.['isBlank']);
+function isBlankRoute(outlet) {
+    return !!(outlet?.activatedRouteData) && !(outlet.activatedRouteData?.['isBlank']);
+}
+class RouterOutletFrameStore extends InjectableComponent {
+    constructor() {
+        super(...arguments);
+        this.config = RouterOutletFrameStore.Config.inject();
+        this.frame = input(_computed(() => this.config().frame));
+        this.name = input(_computed(() => this.config().name, { equal: (a, b) => a === b }));
+        this.isActivated = input(_computed(() => this.config().isActivated));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsBlankRoutePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IsBlankRoutePipe, isStandalone: true, name: "isBlankRoute", pure: false }); }
+    static { this.Config = makeConfig(() => {
+        const getFrame = (breakpoint) => {
+            switch (breakpoint) {
+                case 'xSmall': return 'overlay';
+                default: return 'lineup';
+            }
+        };
+        return (_, context) => {
+            return ({
+                frame: getFrame(context.breakpoint),
+                name: PRIMARY_OUTLET,
+                isActivated: (outlet) => isBlankRoute(outlet),
+            });
+        };
+    }, ['components', 'frames', 'router-outlet']); }
+    static provideExperimental() {
+        return RouterOutletFrameStore.Config.provide(() => {
+            return (config) => ({ ...config, isActivated: (outlet) => !!outlet.isActivated });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RouterOutletFrameStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: RouterOutletFrameStore, isStandalone: true, selector: "frames-router-outlet", inputs: { frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, isActivated: { classPropertyName: "isActivated", publicName: "isActivated", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IsBlankRoutePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'isBlankRoute',
-                    standalone: true,
-                    pure: false,
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RouterOutletFrameStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'frames-router-outlet' }]
         }] });
-class RouterOutletFrame {
+class RouterOutletFrame extends NgAtomicComponent {
     constructor() {
-        this.frame = injectUiConfig(['frames', 'router', 'type']);
+        super(...arguments);
+        this.store = inject(RouterOutletFrameStore);
+        this.outlet = viewChild(RouterOutlet);
+        this.isActivated = computedAsync(() => {
+            const outlet = this.outlet();
+            if (!outlet)
+                return of(false);
+            return combineLatest([
+                outlet.activateEvents.pipe(startWith(null)),
+                outlet.deactivateEvents.pipe(startWith(null)),
+            ]).pipe(map(() => this.store.isActivated()(outlet)));
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterOutletFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: RouterOutletFrame, isStandalone: true, selector: "frames-router-outlet", inputs: { frame: ["frame", "frame", (v) => signalize(v)] }, viewQueries: [{ propertyName: "outlet", first: true, predicate: RouterOutlet, descendants: true }], ngImport: i0, template: `
-    <ng-container [ngSwitch]="frame()">
-      <frames-overlay *ngSwitchCase="'overlay'" [hasNext]="outlet | isBlankRoute">
-        <ng-container main *ngTemplateOutlet="main"></ng-container>
-        <ng-container next *ngTemplateOutlet="next"></ng-container>
-      </frames-overlay>
-      <frames-line-up *ngSwitchCase="'lineup'" [hasNext]="outlet | isBlankRoute">
-        <ng-container main *ngTemplateOutlet="main"></ng-container>
-        <ng-container next *ngTemplateOutlet="next"></ng-container>
-      </frames-line-up>
-    </ng-container>
-
-    <ng-template #main><ng-content main></ng-content></ng-template>
-    <ng-template #next><router-outlet></router-outlet></ng-template>
-  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: OverlayFrame, selector: "frames-overlay", inputs: ["hasNext"] }, { kind: "component", type: LineUpFrame, selector: "frames-line-up", inputs: ["hasNext", "scope"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: IsBlankRoutePipe, name: "isBlankRoute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RouterOutletFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: RouterOutletFrame, isStandalone: true, selector: "frames-router-outlet", viewQueries: [{ propertyName: "outlet", first: true, predicate: RouterOutlet, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: RouterOutletFrameStore, inputs: ["frame", "frame", "name", "name"] }], ngImport: i0, template: `
+    @switch (store.frame()) {
+      @case ('lineup') {
+        <frames-line-up [hasNext]="isActivated()" [scope]="store.name()">
+          <ng-container *ngTemplateOutlet="main" main/>
+          <ng-container *ngTemplateOutlet="next" next/>
+        </frames-line-up>
+      }
+      @default {
+        <frames-overlay [hasNext]="isActivated()">
+          <ng-container *ngTemplateOutlet="main" main/>
+          <ng-container *ngTemplateOutlet="next" next/>
+        </frames-overlay>
+      }
+    }
+    <ng-template #main><ng-content main /></ng-template>
+    <ng-template #next><router-outlet [name]="store.name()"/></ng-template>
+  `, isInline: true, styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-fHTc: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-fHTc: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-fHTc: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-fHTc: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-fHTc);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-fHTc);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-fHTc);--background-color: var(--background-color-SCOPED-IN-router-outlet-fHTc)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OverlayFrame, selector: "frames-overlay" }, { kind: "component", type: LineUpFrame, selector: "frames-line-up" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RouterOutletFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: RouterOutletFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-router-outlet', standalone: true, imports: [
-                        CommonModule,
+                        NgTemplateOutlet,
                         OverlayFrame,
                         LineUpFrame,
                         RouterOutlet,
-                        IsBlankRoutePipe,
-                        SignalPipe,
                     ], template: `
-    <ng-container [ngSwitch]="frame()">
-      <frames-overlay *ngSwitchCase="'overlay'" [hasNext]="outlet | isBlankRoute">
-        <ng-container main *ngTemplateOutlet="main"></ng-container>
-        <ng-container next *ngTemplateOutlet="next"></ng-container>
-      </frames-overlay>
-      <frames-line-up *ngSwitchCase="'lineup'" [hasNext]="outlet | isBlankRoute">
-        <ng-container main *ngTemplateOutlet="main"></ng-container>
-        <ng-container next *ngTemplateOutlet="next"></ng-container>
-      </frames-line-up>
-    </ng-container>
-
-    <ng-template #main><ng-content main></ng-content></ng-template>
-    <ng-template #next><router-outlet></router-outlet></ng-template>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
-        }], propDecorators: { outlet: [{
-                type: ViewChild,
-                args: [RouterOutlet, { static: false }]
-            }], frame: [{
-                type: Input,
-                args: [{ transform: (v) => signalize(v) }]
-            }] } });
+    @switch (store.frame()) {
+      @case ('lineup') {
+        <frames-line-up [hasNext]="isActivated()" [scope]="store.name()">
+          <ng-container *ngTemplateOutlet="main" main/>
+          <ng-container *ngTemplateOutlet="next" next/>
+        </frames-line-up>
+      }
+      @default {
+        <frames-overlay [hasNext]="isActivated()">
+          <ng-container *ngTemplateOutlet="main" main/>
+          <ng-container *ngTemplateOutlet="next" next/>
+        </frames-overlay>
+      }
+    }
+    <ng-template #main><ng-content main /></ng-template>
+    <ng-template #next><router-outlet [name]="store.name()"/></ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: RouterOutletFrameStore,
+                            inputs: ['frame', 'name'],
+                        },
+                    ], styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-fHTc: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-fHTc: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-fHTc: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-fHTc: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-fHTc);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-fHTc);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-fHTc);--background-color: var(--background-color-SCOPED-IN-router-outlet-fHTc)}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { IsBlankRoutePipe, RouterOutletFrame };
+export { RouterOutletFrame, RouterOutletFrameStore };
 //# sourceMappingURL=ng-atomic-components-frames-router-outlet.mjs.map

package/fesm2022/ng-atomic-components-frames-router-outlet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-router-outlet.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/router-outlet.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/ng-atomic-components-frames-router-outlet.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, Pipe, ViewChild, inject, signal } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OverlayFrame } from '@ng-atomic/components/frames/overlay';\nimport { LineUpFrame } from '@ng-atomic/components/frames/line-up';\nimport { RouterOutlet } from '@angular/router';\nimport { SignalPipe, signalize } from '@ng-atomic/common/pipes/signal';\nimport { injectUiConfig } from '@ng-atomic/common/services/ui';\n\n@Pipe({\n  name: 'isBlankRoute',\n  standalone: true,\n  pure: false,\n})\nexport class IsBlankRoutePipe {\n  transform(outlet: RouterOutlet): boolean {\n    return !!(outlet?.activatedRouteData) && !(outlet.activatedRouteData?.['isBlank']);\n  }\n}\n\n@Component({\n  selector: 'frames-router-outlet',\n  standalone: true,\n  imports: [\n    CommonModule,\n    OverlayFrame,\n    LineUpFrame,\n    RouterOutlet,\n    IsBlankRoutePipe,\n    SignalPipe,\n  ],\n  template: `\n    <ng-container [ngSwitch]=\"frame()\">\n      <frames-overlay *ngSwitchCase=\"'overlay'\" [hasNext]=\"outlet | isBlankRoute\">\n        <ng-container main *ngTemplateOutlet=\"main\"></ng-container>\n        <ng-container next *ngTemplateOutlet=\"next\"></ng-container>\n      </frames-overlay>\n      <frames-line-up *ngSwitchCase=\"'lineup'\" [hasNext]=\"outlet | isBlankRoute\">\n        <ng-container main *ngTemplateOutlet=\"main\"></ng-container>\n        <ng-container next *ngTemplateOutlet=\"next\"></ng-container>\n      </frames-line-up>\n    </ng-container>\n\n    <ng-template #main><ng-content main></ng-content></ng-template>\n    <ng-template #next><router-outlet></router-outlet></ng-template>\n  `,\n  styleUrls: ['./router-outlet.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class RouterOutletFrame {\n\n  @ViewChild(RouterOutlet, {static: false})\n  outlet!: RouterOutlet;\n\n  @Input({transform: (v: any) => signalize(v)})\n  frame = injectUiConfig(['frames', 'router', 'type']);\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-router-outlet.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/router-outlet.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/router-outlet/ng-atomic-components-frames-router-outlet.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input, viewChild } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { OverlayFrame } from '@ng-atomic/components/frames/overlay';\nimport { LineUpFrame } from '@ng-atomic/components/frames/line-up';\nimport { PRIMARY_OUTLET, RouterOutlet } from '@angular/router';\nimport { Breakpoint, makeConfig } from '@ng-atomic/common/services/ui';\nimport { InjectableComponent, NgAtomicComponent, _computed } from '@ng-atomic/core';\nimport { combineLatest, map, of, startWith } from 'rxjs';\nimport { computedAsync } from 'ngxtension/computed-async';\n\nfunction isBlankRoute(outlet: RouterOutlet): boolean {\n  return !!(outlet?.activatedRouteData) && !(outlet.activatedRouteData?.['isBlank']);\n}\n\n@Directive({standalone: true, selector: 'frames-router-outlet'})\nexport class RouterOutletFrameStore extends InjectableComponent {\n  static readonly Config = makeConfig(() => {\n    const getFrame = (breakpoint: Breakpoint) => {\n      switch(breakpoint) {\n        case 'xSmall': return 'overlay' as 'lineup' | 'overlay';\n        default: return 'lineup' as 'lineup' | 'overlay';\n      }\n    }\n    return (_, context) => {\n      return ({\n        frame: getFrame(context.breakpoint),\n        name: PRIMARY_OUTLET as string,\n        isActivated: (outlet: RouterOutlet) => isBlankRoute(outlet),\n      });\n    }\n  }, ['components', 'frames', 'router-outlet']);\n\n  static provideExperimental() {\n    return RouterOutletFrameStore.Config.provide(() => {\n      return (config) => ({ ...config, isActivated: (outlet) => !!outlet.isActivated });\n    });\n  }\n\n  readonly config = RouterOutletFrameStore.Config.inject();\n  readonly frame = input(_computed(() => this.config().frame));\n  readonly name = input(_computed(() => this.config().name, { equal: (a, b) => a === b }));\n  readonly isActivated = input(_computed(() => this.config().isActivated));\n} \n\n@Component({\n  selector: 'frames-router-outlet',\n  standalone: true,\n  imports: [\n    NgTemplateOutlet,\n    OverlayFrame,\n    LineUpFrame,\n    RouterOutlet,\n  ],\n  template: `\n    @switch (store.frame()) {\n      @case ('lineup') {\n        <frames-line-up [hasNext]=\"isActivated()\" [scope]=\"store.name()\">\n          <ng-container *ngTemplateOutlet=\"main\" main/>\n          <ng-container *ngTemplateOutlet=\"next\" next/>\n        </frames-line-up>\n      }\n      @default {\n        <frames-overlay [hasNext]=\"isActivated()\">\n          <ng-container *ngTemplateOutlet=\"main\" main/>\n          <ng-container *ngTemplateOutlet=\"next\" next/>\n        </frames-overlay>\n      }\n    }\n    <ng-template #main><ng-content main /></ng-template>\n    <ng-template #next><router-outlet [name]=\"store.name()\"/></ng-template>\n  `,\n  styleUrls: ['./router-outlet.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: RouterOutletFrameStore,\n      inputs: ['frame', 'name'],\n    },\n  ],\n})\nexport class RouterOutletFrame extends NgAtomicComponent {\n  protected store = inject(RouterOutletFrameStore);\n  readonly outlet = viewChild(RouterOutlet);\n  readonly isActivated = computedAsync(() => {\n    const outlet = this.outlet();\n    if (!outlet) return of(false);\n    return combineLatest([\n      outlet.activateEvents.pipe(startWith(null)), \n      outlet.deactivateEvents.pipe(startWith(null)),\n    ]).pipe(\n      map(() => this.store.isActivated()(outlet)),\n    )\n  })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-atomic-components-frames-scroll-v2.mjs

@@ -1,22 +1,30 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
 
 class ScrollFrame {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScrollFrame, isStandalone: true, selector: "frames-scroll", ngImport: i0, template: `
+    isScrollBottom() {
+        const contents = this.contents.nativeElement;
+        return contents.scrollHeight - contents.scrollTop === contents.clientHeight;
+    }
+    scrollToBottom() {
+        this.contents.nativeElement.scrollTop = this.contents.nativeElement.scrollHeight;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ScrollFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ScrollFrame, isStandalone: true, selector: "frames-scroll", viewQueries: [{ propertyName: "contents", first: true, predicate: ["contents"], descendants: true, static: true }], ngImport: i0, template: `
   <div class="top">
     <ng-content select=[top]></ng-content>
   </div>
-  <div class="contents">
-    <ng-content select=[contents]></ng-content>
+  <div class="contents" #contents>
+    <ng-content></ng-content>
+    <!-- <ng-content select=[contents]></ng-content> -->
   </div>
   <div class="bottom">
     <ng-content select=[bottom]></ng-content>
   </div>
-  `, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-mQXP: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-mQXP: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-mQXP: var(--bottom-height)}:host{display:flex;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-mQXP);overflow:hidden}:host .top{height:var(--top-height-SCOPED-IN-scroll-mQXP);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-mQXP) - var(--top-height-SCOPED-IN-scroll-mQXP) - var(--bottom-height-SCOPED-IN-scroll-mQXP));transition:.5s height;overflow:auto;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}:host .bottom{height:var(--bottom-height-SCOPED-IN-scroll-mQXP)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-DT9M: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-DT9M: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-DT9M: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-DT9M: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-DT9M);overflow:hidden}:host .top{height:-moz-fit-content;height:fit-content;transition:.5s height;touch-action:none}:host .contents{display:flex;flex:auto;flex-direction:column;gap:var(--contents-gap-SCOPED-IN-scroll-DT9M);transition:.5s height;overflow:scroll;box-sizing:border-box;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}:host .bottom{height:-moz-fit-content;height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ScrollFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-scroll', standalone: true, imports: [
                         CommonModule,
@@ -24,14 +32,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   <div class="top">
     <ng-content select=[top]></ng-content>
   </div>
-  <div class="contents">
-    <ng-content select=[contents]></ng-content>
+  <div class="contents" #contents>
+    <ng-content></ng-content>
+    <!-- <ng-content select=[contents]></ng-content> -->
   </div>
   <div class="bottom">
     <ng-content select=[bottom]></ng-content>
   </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-mQXP: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-mQXP: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-mQXP: var(--bottom-height)}:host{display:flex;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-mQXP);overflow:hidden}:host .top{height:var(--top-height-SCOPED-IN-scroll-mQXP);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-mQXP) - var(--top-height-SCOPED-IN-scroll-mQXP) - var(--bottom-height-SCOPED-IN-scroll-mQXP));transition:.5s height;overflow:auto;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}:host .bottom{height:var(--bottom-height-SCOPED-IN-scroll-mQXP)}\n"] }]
-        }] });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-DT9M: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-DT9M: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-DT9M: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-DT9M: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-DT9M);overflow:hidden}:host .top{height:-moz-fit-content;height:fit-content;transition:.5s height;touch-action:none}:host .contents{display:flex;flex:auto;flex-direction:column;gap:var(--contents-gap-SCOPED-IN-scroll-DT9M);transition:.5s height;overflow:scroll;box-sizing:border-box;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}:host .bottom{height:-moz-fit-content;height:fit-content}\n"] }]
+        }], propDecorators: { contents: [{
+                type: ViewChild,
+                args: ['contents', { static: true }]
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-atomic-components-frames-scroll-v2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-scroll-v2.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/scroll-v2/scroll.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/scroll-v2/ng-atomic-components-frames-scroll-v2.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'frames-scroll',\n  standalone: true,\n  imports: [\n    CommonModule,\n  ],\n  template: `\n  <div class=\"top\">\n    <ng-content select=[top]></ng-content>\n  </div>\n  <div class=\"contents\">\n    <ng-content select=[contents]></ng-content>\n  </div>\n  <div class=\"bottom\">\n    <ng-content select=[bottom]></ng-content>\n  </div>\n  `,\n  styleUrls: ['./scroll.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScrollFrame { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAuBa,WAAW,CAAA;+GAAX,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,SAAA,EAAA,IAAA,EAAA,WAAW,EAdZ,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;AAUT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAZC,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAgBH,WAAW,EAAA,UAAA,EAAA,CAAA;kBApBvB,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;qBACb,EACS,QAAA,EAAA,CAAA;;;;;;;;;;GAUT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,myBAAA,CAAA,EAAA,CAAA;;;ACrBjD;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-frames-scroll-v2.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/scroll-v2/scroll.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/scroll-v2/ng-atomic-components-frames-scroll-v2.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';\n\n@Component({\n  selector: 'frames-scroll',\n  standalone: true,\n  imports: [\n    CommonModule,\n  ],\n  template: `\n  <div class=\"top\">\n    <ng-content select=[top]></ng-content>\n  </div>\n  <div class=\"contents\" #contents>\n    <ng-content></ng-content>\n    <!-- <ng-content select=[contents]></ng-content> -->\n  </div>\n  <div class=\"bottom\">\n    <ng-content select=[bottom]></ng-content>\n  </div>\n  `,\n  styleUrls: ['./scroll.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScrollFrame {\n\n  @ViewChild('contents', {static: true})\n  protected contents: ElementRef<HTMLDivElement>;\n\n  isScrollBottom() {\n    const contents = this.contents.nativeElement;\n    return contents.scrollHeight - contents.scrollTop === contents.clientHeight;\n  }\n\n  scrollToBottom() {\n    this.contents.nativeElement.scrollTop = this.contents.nativeElement.scrollHeight;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAwBa,WAAW,CAAA;IAKtB,cAAc,GAAA;AACZ,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC;QAC7C,OAAO,QAAQ,CAAC,YAAY,GAAG,QAAQ,CAAC,SAAS,KAAK,QAAQ,CAAC,YAAY,CAAC;KAC7E;IAED,cAAc,GAAA;AACZ,QAAA,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC;KAClF;8GAZU,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,EAfZ,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;AAWT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,60BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAbC,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAiBH,WAAW,EAAA,UAAA,EAAA,CAAA;kBArBvB,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;qBACb,EACS,QAAA,EAAA,CAAA;;;;;;;;;;;GAWT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,60BAAA,CAAA,EAAA,CAAA;8BAKrC,QAAQ,EAAA,CAAA;sBADjB,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,UAAU,EAAE,EAAC,MAAM,EAAE,IAAI,EAAC,CAAA;;;AC1BvC;;AAEG;;;;"}

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

@@ -3,17 +3,17 @@ import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 class ScrollFrame {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScrollFrame, isStandalone: true, selector: "frames-scroll", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ScrollFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: ScrollFrame, isStandalone: true, selector: "frames-scroll", ngImport: i0, template: `
   <div class="navigator">
     <ng-content select=[navigator]></ng-content>
   </div>
   <div class="contents">
     <ng-content select=[contents]></ng-content>
   </div>
-  `, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-h0zl: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-h0zl: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-h0zl);overflow:hidden}:host .navigator{height:var(--navigator-height-SCOPED-IN-scroll-h0zl);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-h0zl) - var(--navigator-height-SCOPED-IN-scroll-h0zl));transition:.5s height;overflow:auto;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-DqFb: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-DqFb: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-DqFb);overflow:hidden}:host .navigator{height:var(--navigator-height-SCOPED-IN-scroll-DqFb);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-DqFb) - var(--navigator-height-SCOPED-IN-scroll-DqFb));transition:.5s height;overflow:auto;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollFrame, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ScrollFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-scroll', standalone: true, imports: [
                         CommonModule,
@@ -24,7 +24,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   <div class="contents">
     <ng-content select=[contents]></ng-content>
   </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-h0zl: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-h0zl: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-h0zl);overflow:hidden}:host .navigator{height:var(--navigator-height-SCOPED-IN-scroll-h0zl);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-h0zl) - var(--navigator-height-SCOPED-IN-scroll-h0zl));transition:.5s height;overflow:auto;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-DqFb: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-DqFb: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-DqFb);overflow:hidden}:host .navigator{height:var(--navigator-height-SCOPED-IN-scroll-DqFb);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-DqFb) - var(--navigator-height-SCOPED-IN-scroll-DqFb));transition:.5s height;overflow:auto;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}\n"] }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-frames-scroll.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/scroll/scroll.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/scroll/ng-atomic-components-frames-scroll.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'frames-scroll',\n  standalone: true,\n  imports: [\n    CommonModule,\n  ],\n  template: `\n  <div class=\"navigator\">\n    <ng-content select=[navigator]></ng-content>\n  </div>\n  <div class=\"contents\">\n    <ng-content select=[contents]></ng-content>\n  </div>\n  `,\n  styleUrls: ['./scroll.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScrollFrame { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAoBa,WAAW,CAAA;+GAAX,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,SAAA,EAAA,IAAA,EAAA,WAAW,EAXZ,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;AAOT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ukBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EATC,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAaH,WAAW,EAAA,UAAA,EAAA,CAAA;kBAjBvB,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;qBACb,EACS,QAAA,EAAA,CAAA;;;;;;;GAOT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,ukBAAA,CAAA,EAAA,CAAA;;;AClBjD;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-frames-scroll.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/scroll/scroll.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/scroll/ng-atomic-components-frames-scroll.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'frames-scroll',\n  standalone: true,\n  imports: [\n    CommonModule,\n  ],\n  template: `\n  <div class=\"navigator\">\n    <ng-content select=[navigator]></ng-content>\n  </div>\n  <div class=\"contents\">\n    <ng-content select=[contents]></ng-content>\n  </div>\n  `,\n  styleUrls: ['./scroll.frame.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ScrollFrame { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAoBa,WAAW,CAAA;8GAAX,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,EAXZ,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;AAOT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ukBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EATC,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAaH,WAAW,EAAA,UAAA,EAAA,CAAA;kBAjBvB,SAAS;+BACE,eAAe,EAAA,UAAA,EACb,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;qBACb,EACS,QAAA,EAAA,CAAA;;;;;;;GAOT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,ukBAAA,CAAA,EAAA,CAAA;;;AClBjD;;AAEG;;;;"}