npm - @ng-atomic/components - Versions diffs - 17.4.0 → 17.6.0 - Mend

@ng-atomic/components 17.4.0 → 17.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (160) hide show

package/fesm2022/ng-atomic-components-frames-entrance.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
 import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { OverlayFrame } from '@ng-atomic/components/frames/overlay';
 import { EntranceTemplateStore } from '@ng-atomic/components/templates/entrance';
 import { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';
@@ -31,7 +30,11 @@ class EntranceFrame extends NgAtomicComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceFrame, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: EntranceFrame, isStandalone: true, selector: "frames-entrance", usesInheritance: true, hostDirectives: [{ directive: EntranceFrameStore, inputs: ["isEntrance", "isEntrance", "actions", "actions", "form", "form", "title", "title"] }], ngImport: i0, template: `
-    <frames-overlay [hasNext]="store.isEntrance()" ngSkipHydration>
+    <frames-overlay
+      [hasNext]="store.isEntrance()"
+      [animationType]="'fade'"
+      ngSkipHydration
+    >
       <ng-content main/>
       <templates-entrance next injectable
         [actions]="store.actions()"
@@ -40,16 +43,19 @@ class EntranceFrame extends NgAtomicComponent {
         (action)="dispatch($event)"
       />
     </frames-overlay>
-  `, isInline: true, styles: [":host{display:block}:host{display:block;width:100%;height:100%}:host templates-entrance{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OverlayFrame, selector: "frames-overlay" }, { kind: "directive", type: EntranceTemplateStore, selector: "templates-entrance", inputs: ["form", "actions", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;--primary-color: inherit;--primary-color-SCOPED-IN-entrance-hywm: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-entrance-hywm: var(--on-primary-color);--surface-color: inherit;--surface-color-SCOPED-IN-entrance-hywm: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-entrance-hywm: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-entrance-hywm: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-entrance-hywm: var(--on-background-color);--menu-width: inherit;--menu-width-SCOPED-IN-entrance-hywm: var(--menu-width);--menu-background-color: inherit;--menu-background-color-SCOPED-IN-entrance-hywm: var(--menu-background-color);--menu-on-background-color: inherit;--menu-on-background-color-SCOPED-IN-entrance-hywm: var(--menu-on-background-color);--background-primary-color: inherit;--background-primary-color-SCOPED-IN-entrance-hywm: var(--background-primary-color);--background-on-primary-color: inherit;--background-on-primary-color-SCOPED-IN-entrance-hywm: var(--background-on-primary-color);--background-background-color: inherit;--background-background-color-SCOPED-IN-entrance-hywm: var(--background-background-color)}:host{display:block;width:100%;height:100%}:host templates-entrance{position:relative;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-entrance-hywm);--on-primary-color: var(--on-primary-color-SCOPED-IN-entrance-hywm);--surface-color: var(--surface-color-SCOPED-IN-entrance-hywm);--on-surface-color: var(--on-surface-color-SCOPED-IN-entrance-hywm);--background-color: var(--background-color-SCOPED-IN-entrance-hywm);--on-background-color: var(--on-background-color-SCOPED-IN-entrance-hywm);--menu-background-color: var(--menu-background-color-SCOPED-IN-entrance-hywm);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-entrance-hywm)}\n"], dependencies: [{ kind: "component", type: OverlayFrame, selector: "frames-overlay" }, { kind: "directive", type: EntranceTemplateStore, selector: "templates-entrance", inputs: ["form", "actions", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-entrance', standalone: true, imports: [
-                        CommonModule,
                         OverlayFrame,
                         EntranceTemplateStore,
                     ], template: `
-    <frames-overlay [hasNext]="store.isEntrance()" ngSkipHydration>
+    <frames-overlay
+      [hasNext]="store.isEntrance()"
+      [animationType]="'fade'"
+      ngSkipHydration
+    >
       <ng-content main/>
       <templates-entrance next injectable
         [actions]="store.actions()"
@@ -63,7 +69,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             directive: EntranceFrameStore,
                             inputs: ['isEntrance', 'actions', 'form', 'title'],
                         },
-                    ], styles: [":host{display:block}:host{display:block;width:100%;height:100%}:host templates-entrance{position:relative;width:100%;height:100%}\n"] }]
+                    ], styles: [":host{display:block;--primary-color: inherit;--primary-color-SCOPED-IN-entrance-hywm: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-entrance-hywm: var(--on-primary-color);--surface-color: inherit;--surface-color-SCOPED-IN-entrance-hywm: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-entrance-hywm: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-entrance-hywm: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-entrance-hywm: var(--on-background-color);--menu-width: inherit;--menu-width-SCOPED-IN-entrance-hywm: var(--menu-width);--menu-background-color: inherit;--menu-background-color-SCOPED-IN-entrance-hywm: var(--menu-background-color);--menu-on-background-color: inherit;--menu-on-background-color-SCOPED-IN-entrance-hywm: var(--menu-on-background-color);--background-primary-color: inherit;--background-primary-color-SCOPED-IN-entrance-hywm: var(--background-primary-color);--background-on-primary-color: inherit;--background-on-primary-color-SCOPED-IN-entrance-hywm: var(--background-on-primary-color);--background-background-color: inherit;--background-background-color-SCOPED-IN-entrance-hywm: var(--background-background-color)}:host{display:block;width:100%;height:100%}:host templates-entrance{position:relative;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-entrance-hywm);--on-primary-color: var(--on-primary-color-SCOPED-IN-entrance-hywm);--surface-color: var(--surface-color-SCOPED-IN-entrance-hywm);--on-surface-color: var(--on-surface-color-SCOPED-IN-entrance-hywm);--background-color: var(--background-color-SCOPED-IN-entrance-hywm);--on-background-color: var(--on-background-color-SCOPED-IN-entrance-hywm);--menu-background-color: var(--menu-background-color-SCOPED-IN-entrance-hywm);--menu-on-background-color: var(--menu-on-background-color-SCOPED-IN-entrance-hywm)}\n"] }]
         }] });
 /**

package/fesm2022/ng-atomic-components-frames-entrance.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-atomic-components-frames-entrance.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/entrance/entrance.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/entrance/ng-atomic-components-frames-entrance.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { ~~CommonModule } from '@angular/common';\nimport {~~ OverlayFrame } from '@ng-atomic/components/frames/overlay';\nimport { EntranceTemplateStore } from '@ng-atomic/components/templates/entrance';\nimport { Action, InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';\nimport { FormControl, FormGroup } from '@angular/forms';\n\n@Directive({standalone: true})\nexport class EntranceFrameStore extends InjectableComponent {\n readonly isEntrance = input(true);\n readonly actions = input<Action[]>([]);\n readonly form = input(new FormGroup({\n email: new FormControl(''),\n password: new FormControl(''),\n }));\n readonly title = input('ログイン');\n}\n\n@Component({\n selector: 'frames-entrance',\n standalone: true,\n imports: [\n ~~CommonModule,\n~~ OverlayFrame,\n EntranceTemplateStore,\n ],\n template: `\n <frames-overlay [hasNext]=\"store.isEntrance()\" ngSkipHydration>\n <ng-content main/>\n <templates-entrance next injectable\n [actions]=\"store.actions()\"\n [form]=\"store.form()\"\n [title]=\"store.title()\"\n (action)=\"dispatch($event)\"\n />\n </frames-overlay>\n `,\n styleUrls: ['./entrance.frame.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: EntranceFrameStore,\n inputs: ['isEntrance', 'actions', 'form', 'title'],\n },\n ],\n})\nexport class EntranceFrame extends NgAtomicComponent {\n protected store = inject(EntranceFrameStore);\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"~~;;;;;;;;AAQM~~,MAAO,kBAAmB,SAAQ,mBAAmB,CAAA;AAD3D,IAAA,WAAA,GAAA;;AAEW,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAW,EAAE,CAAC,CAAC;AAC9B,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,IAAI,SAAS,CAAC;AAClC,YAAA,KAAK,EAAE,IAAI,WAAW,CAAC,EAAE,CAAC;AAC1B,YAAA,QAAQ,EAAE,IAAI,WAAW,CAAC,EAAE,CAAC;AAC9B,SAAA,CAAC,CAAC,CAAC;AACK,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAChC,KAAA;8GARY,kBAAkB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B,SAAS;mBAAC,EAAC,UAAU,EAAE,IAAI,EAAC,CAAA;;~~AAuCvB~~,MAAO,aAAc,SAAQ,iBAAiB,CAAA;~~AA5BpD~~,IAAA,WAAA,GAAA;;~~AA6BY~~,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAC9C,KAAA;8GAFY,aAAa,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,~~EAtCb~~,kBAAkB,~~EAkBnB~~,MAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,SAAA,EAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA~~;;;;;;;;;;AAUT~~,~~EAAA~~,~~CAAA,EAAA,~~QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,~~qIAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,~~UAAA~~,EAAA,IAAA,~~EAdC,YAAY,~~EAAA,~~EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,~~YAAY,~~EAAA~~,~~QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,~~qBAAqB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;~~2FAsBZ~~,aAAa,EAAA,UAAA,EAAA,CAAA;~~kBA5BzB~~,SAAS;+BACE,iBAAiB,EAAA,UAAA,EACf,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,~~YAAY;wBACZ,~~qBAAqB;qBACtB,EACS,QAAA,EAAA,CAAA~~;;;;;;;;;;GAUT~~,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,kBAAkB;4BAC7B,MAAM,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC;AACnD,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,~~qIAAA~~,CAAA,EAAA,CAAA;;;~~AC5CH~~;;AAEG;;;;"}
1	+ {"version":3,"file":"ng-atomic-components-frames-entrance.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/frames/entrance/entrance.frame.ts","../../../../../packages/@ng-atomic/components/src/lib/frames/entrance/ng-atomic-components-frames-entrance.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { OverlayFrame } from '@ng-atomic/components/frames/overlay';\nimport { EntranceTemplateStore } from '@ng-atomic/components/templates/entrance';\nimport { Action, InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';\nimport { FormControl, FormGroup } from '@angular/forms';\n\n@Directive({standalone: true})\nexport class EntranceFrameStore extends InjectableComponent {\n readonly isEntrance = input(true);\n readonly actions = input<Action[]>([]);\n readonly form = input(new FormGroup({\n email: new FormControl(''),\n password: new FormControl(''),\n }));\n readonly title = input('ログイン');\n}\n\n@Component({\n selector: 'frames-entrance',\n standalone: true,\n imports: [\n OverlayFrame,\n EntranceTemplateStore,\n ],\n template: `\n <frames-overlay\n [hasNext]=\"store.isEntrance()\"\n [animationType]=\"'fade'\"\n ngSkipHydration\n >\n <ng-content main/>\n <templates-entrance next injectable\n [actions]=\"store.actions()\"\n [form]=\"store.form()\"\n [title]=\"store.title()\"\n (action)=\"dispatch($event)\"\n />\n </frames-overlay>\n `,\n styleUrls: ['./entrance.frame.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: EntranceFrameStore,\n inputs: ['isEntrance', 'actions', 'form', 'title'],\n },\n ],\n})\nexport class EntranceFrame extends NgAtomicComponent {\n protected store = inject(EntranceFrameStore);\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-fab.mjs CHANGED Viewed

@@ -65,7 +65,7 @@ class FabFrame extends NgAtomicComponent {
         <mat-icon>{{ action?.icon ?? 'add' }}</mat-icon>
       </button>
     }
-  `, isInline: true, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-9qQt: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-9qQt);--container-color-SCOPED-IN-fab-9qQt: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-9qQt: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-9qQt: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-9qQt: var(--fab-button-right)}:host{display:block;width:100%;height:100%;position:relative}:host button{position:absolute;z-index:2000;bottom:var(--fab-button-bottom-SCOPED-IN-fab-9qQt);right:var(--fab-button-right-SCOPED-IN-fab-9qQt);transition:all .3s ease;--mdc-fab-container-color: var(--container-color);--mdc-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}:host[hide=true] button{bottom:-120px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-0wRf: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-0wRf);--container-color-SCOPED-IN-fab-0wRf: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-0wRf: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-0wRf: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-0wRf: var(--fab-button-right)}:host{display:block;width:100%;height:100%;position:relative}:host button{position:absolute;z-index:2000;bottom:var(--fab-button-bottom-SCOPED-IN-fab-0wRf);right:var(--fab-button-right-SCOPED-IN-fab-0wRf);transition:all .3s ease;--mdc-fab-container-color: var(--container-color);--mdc-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}:host[hide=true] button{bottom:-120px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FabFrame, decorators: [{
             type: Component,
@@ -86,7 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                         },
                     ], host: {
                         '[attr.hide]': 'store.hide()',
-                    }, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-9qQt: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-9qQt);--container-color-SCOPED-IN-fab-9qQt: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-9qQt: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-9qQt: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-9qQt: var(--fab-button-right)}:host{display:block;width:100%;height:100%;position:relative}:host button{position:absolute;z-index:2000;bottom:var(--fab-button-bottom-SCOPED-IN-fab-9qQt);right:var(--fab-button-right-SCOPED-IN-fab-9qQt);transition:all .3s ease;--mdc-fab-container-color: var(--container-color);--mdc-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}:host[hide=true] button{bottom:-120px}\n"] }]
+                    }, styles: [":host{--primary-color: #039be5;--primary-color-SCOPED-IN-fab-0wRf: var(--primary-color);--container-color: var(--primary-color-SCOPED-IN-fab-0wRf);--container-color-SCOPED-IN-fab-0wRf: var(--container-color);--icon-color: #fff;--icon-color-SCOPED-IN-fab-0wRf: var(--icon-color);--fab-button-bottom: 16px;--fab-button-bottom-SCOPED-IN-fab-0wRf: var(--fab-button-bottom);--fab-button-right: 16px;--fab-button-right-SCOPED-IN-fab-0wRf: var(--fab-button-right)}:host{display:block;width:100%;height:100%;position:relative}:host button{position:absolute;z-index:2000;bottom:var(--fab-button-bottom-SCOPED-IN-fab-0wRf);right:var(--fab-button-right-SCOPED-IN-fab-0wRf);transition:all .3s ease;--mdc-fab-container-color: var(--container-color);--mdc-fab-icon-color: var(--icon-color);--mat-mdc-fab-color: var(--icon-color)}:host[hide=true] button{bottom:-120px}\n"] }]
         }] });
 /**

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

@@ -147,7 +147,7 @@ class LineUpFrame {
     @if (store.hasNext()) {
       <div class="next" @hasNext><ng-content select=[next] /></div>
     }
-  `, isInline: true, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-P842: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-P842: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-P842: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-P842: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-P842: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-P842));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-P842);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 }); }
+  `, isInline: true, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-N2yx: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-N2yx: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-N2yx: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-N2yx: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-N2yx: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-N2yx));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-N2yx);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: "17.2.2", ngImport: i0, type: LineUpFrame, decorators: [{
             type: Component,
@@ -163,7 +163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                         },
                     ], host: {
                         'attr.has-next': 'store.hasNext()',
-                    }, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-P842: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-P842: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-P842: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-P842: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-P842: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-P842));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-P842);width:100%;height:100%}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"] }]
+                    }, styles: [":host{--gap: 0px;--gap-SCOPED-IN-line-up-N2yx: var(--gap);--background-color: #ccc;--background-color-SCOPED-IN-line-up-N2yx: var(--background-color);--next-width: 100%;--next-width-SCOPED-IN-line-up-N2yx: var(--next-width);--next-max-width: fit-content;--next-max-width-SCOPED-IN-line-up-N2yx: var(--next-max-width);--translate-x: 0px;--translate-x-SCOPED-IN-line-up-N2yx: var(--translate-x)}:host{position:relative;transform:translate(var(--translate-x-SCOPED-IN-line-up-N2yx));transition:transform .3s ease-in-out;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-line-up-N2yx);width:100%;height:100%}:host .main{max-width:100%;height:100%;z-index:2}:host .next{width:100%;height:100%;z-index:1}\n"] }]
         }] });
 /**

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

@@ -26,7 +26,7 @@ class LoadingFrame extends NgAtomicComponent {
     @if(store.isLoading()) {
       <div class="loading"><mat-spinner /></div>
     }
-  `, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-jto2: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-jto2: 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-jto2);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-jto2)}\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 }); }
+  `, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-FoQp: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-FoQp: 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-FoQp);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-FoQp)}\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,
@@ -42,7 +42,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             directive: LoadingFrameStore,
                             inputs: ['isLoading'],
                         }
-                    ], styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-jto2: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-jto2: 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-jto2);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-jto2)}\n"] }]
+                    ], styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-loading-FoQp: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-loading-FoQp: 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-FoQp);--on-primary-color: var(--on-primary-color-SCOPED-IN-loading-FoQp)}\n"] }]
         }] });
 /**

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

@@ -1,25 +1,15 @@
 import * as i0 from '@angular/core';
-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', [
-        style({ transform: 'translateX(50%)', }),
-        animate('500ms ease-out', style({ transform: 'translateX(0%)', })),
-    ]),
-    transition(':leave', [
-        style({ transform: 'translateX(0%)' }),
-        animate('500ms ease-in', style({ transform: 'translateX(100%)' })),
-    ]),
-]);
+import { input, Directive, inject, contentChild, Component, ChangeDetectionStrategy } from '@angular/core';
+import { trigger, transition, query, style, animate } from '@angular/animations';
+import { NgTemplateOutlet } from '@angular/common';
 class OverlayFrameStore {
     constructor() {
         this.hasNext = input(false);
+        this.animationType = input('slide');
     }
     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 }); }
+    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 }, animationType: { classPropertyName: "animationType", publicName: "animationType", 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,
@@ -28,30 +18,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
 class OverlayFrame {
     constructor() {
         this.store = inject(OverlayFrameStore);
+        this.content = contentChild('next');
     }
     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>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: OverlayFrame, isStandalone: true, selector: "frames-overlay", queries: [{ propertyName: "content", first: true, predicate: ["next"], descendants: true, isSignal: true }], hostDirectives: [{ directive: OverlayFrameStore, inputs: ["hasNext", "hasNext", "animationType", "animationType"] }], ngImport: i0, template: `
+    <div class="main content">
+      <ng-content select=[main] />
+    </div>
+    @if (store.hasNext()) {
+      @switch (store.animationType()) {
+        @case ('slide') {
+          <div class="next content" @slide>
+            <ng-container *ngTemplateOutlet="next"/>
+          </div>
+        }
+        @case ('fade') {
+          <div class="next content" @fade>
+            <ng-container *ngTemplateOutlet="next"/>
+          </div>
+        }
+      }
     }
-  `, isInline: true, styles: [":host{--width: 100%;--width-SCOPED-IN-line-overlay-fjrJ: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-fjrJ: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-fjrJ);height:var(--height-SCOPED-IN-line-overlay-fjrJ)}: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 }); }
+    <ng-template #next><ng-content select=[next] /></ng-template>
+  `, isInline: true, styles: [":host{position:relative;display:block;width:100%;height:100%;overflow:hidden}: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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+            trigger('slide', [
+                transition(':enter', [
+                    query(':enter', [
+                        style({ transform: 'translateX(100%)' }),
+                        animate('300ms ease-in', style({ transform: 'translateX(0%)' })),
+                    ]),
+                ]),
+                transition(':leave', [
+                    query(':leave', [
+                        style({ transform: 'translateX(0%)' }),
+                        animate('300ms ease-out', style({ transform: 'translateX(100%)' })),
+                    ]),
+                ])
+            ]),
+            trigger('fade', [
+                transition(':enter', [
+                    query(':enter', [
+                        style({ opacity: 0 }),
+                        animate('500ms ease-in', style({ opacity: 1 })),
+                    ]),
+                ]),
+                transition(':leave', [
+                    query(':leave', [
+                        style({ opacity: 1 }),
+                        animate('500ms ease-out', style({ opacity: 0 })),
+                    ]),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: OverlayFrame, decorators: [{
             type: Component,
             args: [{ selector: 'frames-overlay', standalone: true, imports: [
-                        MatProgressSpinnerModule,
+                        NgTemplateOutlet,
                     ], template: `
-    <div class="main content"><ng-content select=[main] /></div>
-    @if (store.hasNext()) {
-      <div class="next content" @hasNext><ng-content select=[next] /></div>
+    <div class="main content">
+      <ng-content select=[main] />
+    </div>
+    @if (store.hasNext()) {
+      @switch (store.animationType()) {
+        @case ('slide') {
+          <div class="next content" @slide>
+            <ng-container *ngTemplateOutlet="next"/>
+          </div>
+        }
+        @case ('fade') {
+          <div class="next content" @fade>
+            <ng-container *ngTemplateOutlet="next"/>
+          </div>
+        }
+      }
     }
-  `, animations: [OVERLAY_ANIMATION], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+    <ng-template #next><ng-content select=[next] /></ng-template>
+  `, animations: [
+                        trigger('slide', [
+                            transition(':enter', [
+                                query(':enter', [
+                                    style({ transform: 'translateX(100%)' }),
+                                    animate('300ms ease-in', style({ transform: 'translateX(0%)' })),
+                                ]),
+                            ]),
+                            transition(':leave', [
+                                query(':leave', [
+                                    style({ transform: 'translateX(0%)' }),
+                                    animate('300ms ease-out', style({ transform: 'translateX(100%)' })),
+                                ]),
+                            ])
+                        ]),
+                        trigger('fade', [
+                            transition(':enter', [
+                                query(':enter', [
+                                    style({ opacity: 0 }),
+                                    animate('500ms ease-in', style({ opacity: 1 })),
+                                ]),
+                            ]),
+                            transition(':leave', [
+                                query(':leave', [
+                                    style({ opacity: 1 }),
+                                    animate('500ms ease-out', style({ opacity: 0 })),
+                                ]),
+                            ]),
+                        ]),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: OverlayFrameStore,
-                            inputs: ['hasNext'],
+                            inputs: [
+                                'hasNext',
+                                'animationType',
+                            ],
                         },
-                    ], styles: [":host{--width: 100%;--width-SCOPED-IN-line-overlay-fjrJ: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-fjrJ: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-fjrJ);height:var(--height-SCOPED-IN-line-overlay-fjrJ)}:host .content{position:absolute;top:0;left:0;width:100%;height:100%}:host .main{z-index:1}:host .next{z-index:2}\n"] }]
+                    ], styles: [":host{position:relative;display:block;width:100%;height:100%;overflow:hidden}:host .content{position:absolute;top:0;left:0;width:100%;height:100%}:host .main{z-index:1}:host .next{z-index:2}\n"] }]
         }] });
 /**

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

	@@ -1 +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 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;;;;"}
1	+ {"version":3,"file":"ng-atomic-components-frames-overlay.mjs","sources":["../../../../../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 { ChangeDetectionStrategy, Component, Directive, contentChild, inject, input } from '@angular/core';\nimport { animate, query, style, transition, trigger } from '@angular/animations';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Directive({ standalone: true, selector: 'frames-overlay' })\nexport class OverlayFrameStore {\n readonly hasNext = input(false);\n readonly animationType = input<'slide' \| 'fade'>('slide');\n}\n\n@Component({\n selector: 'frames-overlay',\n standalone: true,\n imports: [\n NgTemplateOutlet,\n ],\n template: `\n <div class=\"main content\">\n <ng-content select=[main] />\n </div>\n @if (store.hasNext()) {\n @switch (store.animationType()) {\n @case ('slide') {\n <div class=\"next content\" @slide>\n <ng-container ngTemplateOutlet=\"next\"/>\n </div>\n }\n @case ('fade') {\n <div class=\"next content\" @fade>\n <ng-container ngTemplateOutlet=\"next\"/>\n </div>\n }\n }\n }\n <ng-template #next><ng-content select=[next] /></ng-template>\n `,\n styleUrls: ['./overlay.frame.scss'],\n animations: [\n trigger('slide', [\n transition(':enter', [\n query(':enter', [\n style({ transform: 'translateX(100%)' }),\n animate('300ms ease-in', style({ transform: 'translateX(0%)' })),\n ]),\n ]),\n transition(':leave', [\n query(':leave', [\n style({ transform: 'translateX(0%)' }),\n animate('300ms ease-out', style({ transform: 'translateX(100%)' })),\n ]),\n ])\n ]),\n trigger('fade', [\n transition(':enter', [\n query(':enter', [\n style({ opacity: 0 }),\n animate('500ms ease-in', style({ opacity: 1 })),\n ]),\n ]),\n transition(':leave', [\n query(':leave', [\n style({ opacity: 1 }),\n animate('500ms ease-out', style({ opacity: 0 })),\n ]),\n ]),\n ]),\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: OverlayFrameStore,\n inputs: [\n 'hasNext',\n 'animationType',\n ],\n },\n ],\n})\nexport class OverlayFrame {\n protected readonly store = inject(OverlayFrameStore);\n readonly content = contentChild('next')\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-router-outlet.mjs CHANGED Viewed

@@ -80,7 +80,7 @@ class RouterOutletFrame extends NgAtomicComponent {
     }
     <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-m8eg: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-m8eg: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-m8eg: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-m8eg: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-m8eg);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-m8eg);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-m8eg);--background-color: var(--background-color-SCOPED-IN-router-outlet-m8eg)}\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 }); }
+  `, isInline: true, styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-loRr: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-loRr: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-loRr: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-loRr: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-loRr);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-loRr);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-loRr);--background-color: var(--background-color-SCOPED-IN-router-outlet-loRr)}\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: "17.2.2", ngImport: i0, type: RouterOutletFrame, decorators: [{
             type: Component,
@@ -111,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             directive: RouterOutletFrameStore,
                             inputs: ['frame', 'name'],
                         },
-                    ], styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-m8eg: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-m8eg: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-m8eg: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-m8eg: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-m8eg);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-m8eg);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-m8eg);--background-color: var(--background-color-SCOPED-IN-router-outlet-m8eg)}\n"] }]
+                    ], styles: [":host{display:contents;--primary-color: #ccc;--primary-color-SCOPED-IN-router-outlet-loRr: var(--primary-color);--on-primary-color: #ccc;--on-primary-color-SCOPED-IN-router-outlet-loRr: var(--on-primary-color);--surface-color: #ccc;--surface-color-SCOPED-IN-router-outlet-loRr: var(--surface-color);--background-color: #ccc;--background-color-SCOPED-IN-router-outlet-loRr: var(--background-color)}:host *{--primary-color: var(--primary-color-SCOPED-IN-router-outlet-loRr);--on-primary-color: var(--on-primary-color-SCOPED-IN-router-outlet-loRr);--surface-color: var(--surface-color-SCOPED-IN-router-outlet-loRr);--background-color: var(--background-color-SCOPED-IN-router-outlet-loRr)}\n"] }]
         }] });
 /**

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

@@ -22,7 +22,7 @@ class ScrollFrame {
   <div class="bottom">
     <ng-content select=[bottom]></ng-content>
   </div>
-  `, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-AANn: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-AANn: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-AANn: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-AANn: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-AANn);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-AANn);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 }); }
+  `, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-XnSr: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-XnSr: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-XnSr: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-XnSr: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-XnSr);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-XnSr);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: "17.2.2", ngImport: i0, type: ScrollFrame, decorators: [{
             type: Component,
@@ -39,7 +39,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
   <div class="bottom">
     <ng-content select=[bottom]></ng-content>
   </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-AANn: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-AANn: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-AANn: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-AANn: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-AANn);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-AANn);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"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-XnSr: var(--height);--top-height: 56px;--top-height-SCOPED-IN-scroll-XnSr: var(--top-height);--bottom-height: 56px;--bottom-height-SCOPED-IN-scroll-XnSr: var(--bottom-height);--contents-gap: 16px;--contents-gap-SCOPED-IN-scroll-XnSr: var(--contents-gap)}:host{display:flex;width:100%;flex-direction:column;justify-content:space-between;height:var(--height-SCOPED-IN-scroll-XnSr);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-XnSr);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 }]

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

@@ -11,7 +11,7 @@ class ScrollFrame {
   <div class="contents">
     <ng-content select=[contents]></ng-content>
   </div>
-  `, isInline: true, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-1pUZ: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-1pUZ: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-1pUZ);overflow:hidden}:host .navigator{height:var(--navigator-height-SCOPED-IN-scroll-1pUZ);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-1pUZ) - var(--navigator-height-SCOPED-IN-scroll-1pUZ));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-nFcL: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-nFcL: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-nFcL);overflow:hidden}:host .navigator{height:var(--navigator-height-SCOPED-IN-scroll-nFcL);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-nFcL) - var(--navigator-height-SCOPED-IN-scroll-nFcL));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: "17.2.2", ngImport: i0, type: ScrollFrame, decorators: [{
             type: Component,
@@ -24,7 +24,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
   <div class="contents">
     <ng-content select=[contents]></ng-content>
   </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-1pUZ: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-1pUZ: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-1pUZ);overflow:hidden}:host .navigator{height:var(--navigator-height-SCOPED-IN-scroll-1pUZ);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-1pUZ) - var(--navigator-height-SCOPED-IN-scroll-1pUZ));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-nFcL: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-nFcL: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-nFcL);overflow:hidden}:host .navigator{height:var(--navigator-height-SCOPED-IN-scroll-nFcL);transition:.5s height;overflow:hidden;touch-action:none}:host .contents{height:calc(var(--height-SCOPED-IN-scroll-nFcL) - var(--navigator-height-SCOPED-IN-scroll-nFcL));transition:.5s height;overflow:auto;-webkit-overflow-scrolling:touch}:host .contents::-webkit-scrollbar{display:none}\n"] }]
         }] });
 /**

package/fesm2022/ng-atomic-components-frames-side-nav.mjs CHANGED Viewed

@@ -117,7 +117,7 @@ class SideNavFrame extends NgAtomicComponent {
     }
   </ng-template>
   <ng-template #contents><ng-content/></ng-template>
-  `, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-Y6rz: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-side-nav-Y6rz: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-side-nav-Y6rz: var(--background-color);--surface-color: transparent;--surface-color-SCOPED-IN-side-nav-Y6rz: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-side-nav-Y6rz: var(--on-primary-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-side-nav-Y6rz: var(--on-background-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-side-nav-Y6rz: var(--on-surface-color);--menu-width: 220px;--menu-width-SCOPED-IN-side-nav-Y6rz: var(--menu-width);--menu-background-color: var(--primary-color-SCOPED-IN-side-nav-Y6rz);--menu-background-color-SCOPED-IN-side-nav-Y6rz: var(--menu-background-color);--menu-on-background-color: var(--on-primary-color-SCOPED-IN-side-nav-Y6rz);--menu-on-background-color-SCOPED-IN-side-nav-Y6rz: var(--menu-on-background-color)}:host{display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-side-nav-Y6rz);--secondary-color: var(--secondary-color-SCOPED-IN-side-nav-Y6rz);--surface-color: var(--surface-color-SCOPED-IN-side-nav-Y6rz);--background-color: var(--background-color-SCOPED-IN-side-nav-Y6rz);--on-primary-color: var(--on-primary-color-SCOPED-IN-side-nav-Y6rz);--on-surface-color: var(--on-surface-color-SCOPED-IN-side-nav-Y6rz);--on-background-color: var(--on-background-color-SCOPED-IN-side-nav-Y6rz)}:host .content{width:100%;height:100%}:host templates-icon-button-menu,:host templates-menu{width:var(--menu-width-SCOPED-IN-side-nav-Y6rz);--background-color: var(--menu-background-color-SCOPED-IN-side-nav-Y6rz);--on-background-color: var(--menu-on-background-color-SCOPED-IN-side-nav-Y6rz)}:host[frame=lineup] .content{width:calc(100vw - var(--menu-width-SCOPED-IN-side-nav-Y6rz));overflow:hidden}:host[frame=drawer] .menu,:host[frame=drawer] templates-menu{width:300px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LineUpFrame, selector: "frames-line-up" }, { kind: "directive", type: IconButtonMenuTemplateStore, selector: "templates-icon-button-menu", inputs: ["actions"] }, { kind: "directive", type: MenuTemplateStore, selector: "templates-menu", inputs: ["actions", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-SMOH: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-side-nav-SMOH: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-side-nav-SMOH: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-side-nav-SMOH: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-side-nav-SMOH: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-side-nav-SMOH: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-side-nav-SMOH: var(--on-surface-color);--menu-width: 220px;--menu-width-SCOPED-IN-side-nav-SMOH: var(--menu-width);--menu-background-color: var(--primary-color-SCOPED-IN-side-nav-SMOH);--menu-background-color-SCOPED-IN-side-nav-SMOH: var(--menu-background-color);--menu-on-background-color: var(--on-primary-color-SCOPED-IN-side-nav-SMOH);--menu-on-background-color-SCOPED-IN-side-nav-SMOH: var(--menu-on-background-color)}:host{display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-side-nav-SMOH);--secondary-color: var(--secondary-color-SCOPED-IN-side-nav-SMOH);--surface-color: var(--surface-color-SCOPED-IN-side-nav-SMOH);--background-color: var(--background-color-SCOPED-IN-side-nav-SMOH);--on-background-color: var(--on-background-color-SCOPED-IN-side-nav-SMOH);--on-primary-color: var(--on-primary-color-SCOPED-IN-side-nav-SMOH);--on-surface-color: var(--on-surface-color-SCOPED-IN-side-nav-SMOH)}:host .content{width:100%;height:100%}:host templates-icon-button-menu,:host templates-menu{width:var(--menu-width-SCOPED-IN-side-nav-SMOH);--background-color: var(--menu-background-color-SCOPED-IN-side-nav-SMOH);--on-background-color: var(--menu-on-background-color-SCOPED-IN-side-nav-SMOH)}:host[frame=lineup] .content{width:calc(100vw - var(--menu-width-SCOPED-IN-side-nav-SMOH));overflow:hidden}:host[frame=drawer] .menu,:host[frame=drawer] templates-menu{width:300px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LineUpFrame, selector: "frames-line-up" }, { kind: "directive", type: IconButtonMenuTemplateStore, selector: "templates-icon-button-menu", inputs: ["actions"] }, { kind: "directive", type: MenuTemplateStore, selector: "templates-menu", inputs: ["actions", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SideNavFrame, decorators: [{
             type: Component,
@@ -174,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             directive: SideNavFrameStore,
                             inputs: ['actions', 'menuType', 'menuTitle', 'mode', 'frameType'],
                         },
-                    ], styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-Y6rz: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-side-nav-Y6rz: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-side-nav-Y6rz: var(--background-color);--surface-color: transparent;--surface-color-SCOPED-IN-side-nav-Y6rz: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-side-nav-Y6rz: var(--on-primary-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-side-nav-Y6rz: var(--on-background-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-side-nav-Y6rz: var(--on-surface-color);--menu-width: 220px;--menu-width-SCOPED-IN-side-nav-Y6rz: var(--menu-width);--menu-background-color: var(--primary-color-SCOPED-IN-side-nav-Y6rz);--menu-background-color-SCOPED-IN-side-nav-Y6rz: var(--menu-background-color);--menu-on-background-color: var(--on-primary-color-SCOPED-IN-side-nav-Y6rz);--menu-on-background-color-SCOPED-IN-side-nav-Y6rz: var(--menu-on-background-color)}:host{display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-side-nav-Y6rz);--secondary-color: var(--secondary-color-SCOPED-IN-side-nav-Y6rz);--surface-color: var(--surface-color-SCOPED-IN-side-nav-Y6rz);--background-color: var(--background-color-SCOPED-IN-side-nav-Y6rz);--on-primary-color: var(--on-primary-color-SCOPED-IN-side-nav-Y6rz);--on-surface-color: var(--on-surface-color-SCOPED-IN-side-nav-Y6rz);--on-background-color: var(--on-background-color-SCOPED-IN-side-nav-Y6rz)}:host .content{width:100%;height:100%}:host templates-icon-button-menu,:host templates-menu{width:var(--menu-width-SCOPED-IN-side-nav-Y6rz);--background-color: var(--menu-background-color-SCOPED-IN-side-nav-Y6rz);--on-background-color: var(--menu-on-background-color-SCOPED-IN-side-nav-Y6rz)}:host[frame=lineup] .content{width:calc(100vw - var(--menu-width-SCOPED-IN-side-nav-Y6rz));overflow:hidden}:host[frame=drawer] .menu,:host[frame=drawer] templates-menu{width:300px}\n"] }]
+                    ], styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-side-nav-SMOH: var(--primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-side-nav-SMOH: var(--secondary-color);--background-color: #B0B0B0;--background-color-SCOPED-IN-side-nav-SMOH: var(--background-color);--on-background-color: #f0f0f0;--on-background-color-SCOPED-IN-side-nav-SMOH: var(--on-background-color);--surface-color: transparent;--surface-color-SCOPED-IN-side-nav-SMOH: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-side-nav-SMOH: var(--on-primary-color);--on-surface-color: #f0f0f0;--on-surface-color-SCOPED-IN-side-nav-SMOH: var(--on-surface-color);--menu-width: 220px;--menu-width-SCOPED-IN-side-nav-SMOH: var(--menu-width);--menu-background-color: var(--primary-color-SCOPED-IN-side-nav-SMOH);--menu-background-color-SCOPED-IN-side-nav-SMOH: var(--menu-background-color);--menu-on-background-color: var(--on-primary-color-SCOPED-IN-side-nav-SMOH);--menu-on-background-color-SCOPED-IN-side-nav-SMOH: var(--menu-on-background-color)}:host{display:block;width:100%;height:100%}:host *{--primary-color: var(--primary-color-SCOPED-IN-side-nav-SMOH);--secondary-color: var(--secondary-color-SCOPED-IN-side-nav-SMOH);--surface-color: var(--surface-color-SCOPED-IN-side-nav-SMOH);--background-color: var(--background-color-SCOPED-IN-side-nav-SMOH);--on-background-color: var(--on-background-color-SCOPED-IN-side-nav-SMOH);--on-primary-color: var(--on-primary-color-SCOPED-IN-side-nav-SMOH);--on-surface-color: var(--on-surface-color-SCOPED-IN-side-nav-SMOH)}:host .content{width:100%;height:100%}:host templates-icon-button-menu,:host templates-menu{width:var(--menu-width-SCOPED-IN-side-nav-SMOH);--background-color: var(--menu-background-color-SCOPED-IN-side-nav-SMOH);--on-background-color: var(--menu-on-background-color-SCOPED-IN-side-nav-SMOH)}:host[frame=lineup] .content{width:calc(100vw - var(--menu-width-SCOPED-IN-side-nav-SMOH));overflow:hidden}:host[frame=drawer] .menu,:host[frame=drawer] templates-menu{width:300px}\n"] }]
         }] });
 /**

package/fesm2022/ng-atomic-components-frames-smart-menu.mjs CHANGED Viewed

@@ -14,13 +14,13 @@ class SmartMenuFrame {
         return page === 'Blank' ? 'Blank' : this.isMainHidden ? `Next` : `NextWithMainPage`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SmartMenuFrame, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: SmartMenuFrame, isStandalone: true, selector: "frames-smart-menu", inputs: { label: "label", outlet: "outlet", minNextWidth: "minNextWidth" }, host: { properties: { "attr.is-main-hidden": "this.isMainHidden" } }, viewQueries: [{ propertyName: "next", first: true, predicate: ["next"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-5SlZ: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-5SlZ: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-5SlZ: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-5SlZ);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-5SlZ)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-5SlZ)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: SmartMenuFrame, isStandalone: true, selector: "frames-smart-menu", inputs: { label: "label", outlet: "outlet", minNextWidth: "minNextWidth" }, host: { properties: { "attr.is-main-hidden": "this.isMainHidden" } }, viewQueries: [{ propertyName: "next", first: true, predicate: ["next"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-zWZr: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-zWZr: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-zWZr: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-zWZr);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-zWZr)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-zWZr)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SmartMenuFrame, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
-                    ], selector: 'frames-smart-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-5SlZ: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-5SlZ: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-5SlZ: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-5SlZ);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-5SlZ)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-5SlZ)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"] }]
+                    ], selector: 'frames-smart-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"menu\" #menu>\n  <ng-content select=\"[menu]\"></ng-content>\n</div>\n<div class=\"contents\" #contents>\n  <ng-content select=\"[contents]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-smart-menu-zWZr: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-zWZr: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-zWZr: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;gap:var(--gap-SCOPED-IN-smart-menu-zWZr);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-zWZr)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-zWZr)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"] }]
         }], propDecorators: { isMainHidden: [{
                 type: HostBinding,
                 args: ['attr.is-main-hidden']

package/fesm2022/ng-atomic-components-frames-vertical-hide.mjs CHANGED Viewed

@@ -11,7 +11,7 @@ class VerticalHideFrame {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: VerticalHideFrame, isStandalone: true, selector: "frames-vertical-hide", inputs: { mode: "mode" }, host: { properties: { "attr.mode": "this.mode" } }, ngImport: i0, template: `
     <ng-content></ng-content>
     <organisms-vertical-divider></organisms-vertical-divider>
-  `, isInline: true, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-2aUO: var(--collapsed-height);--expanded-height: 400px;--expanded-height-SCOPED-IN-vertical-hide-2aUO: var(--expanded-height)}:host{position:relative;display:block;transition:.5s height}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{height:var(--collapsed-height-SCOPED-IN-vertical-hide-2aUO)}:host[mode=expanded]{height:var(--expanded-height-SCOPED-IN-vertical-hide-2aUO)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: VerticalDividerOrganism, selector: "organisms-vertical-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-yXac: var(--collapsed-height);--expanded-height: 400px;--expanded-height-SCOPED-IN-vertical-hide-yXac: var(--expanded-height)}:host{position:relative;display:block;transition:.5s height}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{height:var(--collapsed-height-SCOPED-IN-vertical-hide-yXac)}:host[mode=expanded]{height:var(--expanded-height-SCOPED-IN-vertical-hide-yXac)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: VerticalDividerOrganism, selector: "organisms-vertical-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: VerticalHideFrame, decorators: [{
             type: Component,
@@ -21,7 +21,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                     ], template: `
     <ng-content></ng-content>
     <organisms-vertical-divider></organisms-vertical-divider>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-2aUO: var(--collapsed-height);--expanded-height: 400px;--expanded-height-SCOPED-IN-vertical-hide-2aUO: var(--expanded-height)}:host{position:relative;display:block;transition:.5s height}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{height:var(--collapsed-height-SCOPED-IN-vertical-hide-2aUO)}:host[mode=expanded]{height:var(--expanded-height-SCOPED-IN-vertical-hide-2aUO)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--collapsed-height: 200px;--collapsed-height-SCOPED-IN-vertical-hide-yXac: var(--collapsed-height);--expanded-height: 400px;--expanded-height-SCOPED-IN-vertical-hide-yXac: var(--expanded-height)}:host{position:relative;display:block;transition:.5s height}:host organisms-vertical-divider{position:absolute;bottom:0;width:100%}:host[mode=collapsed]{height:var(--collapsed-height-SCOPED-IN-vertical-hide-yXac)}:host[mode=expanded]{height:var(--expanded-height-SCOPED-IN-vertical-hide-yXac)}\n"] }]
         }], propDecorators: { mode: [{
                 type: Input
             }, {