@ng-atomic/components 18.2.0 → 18.4.0

package/fesm2022/ng-atomic-components-templates-selection.mjs

@@ -70,7 +70,7 @@ class SelectionTemplate extends NgAtomicComponent {
       bottom
     />
   </frames-scroll>
-  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-selection-WqUy: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-selection-WqUy: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-selection-WqUy: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-selection-WqUy: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-selection-WqUy: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-selection-WqUy: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-selection-WqUy: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-selection-WqUy: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-selection-WqUy: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-selection-WqUy);--navigator-background-color-SCOPED-IN-selection-WqUy: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-selection-WqUy);--navigator-on-background-color-SCOPED-IN-selection-WqUy: var(--navigator-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-selection-WqUy: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-selection-WqUy: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-selection-WqUy);transition:background-color .5s ease-in-out}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-selection-WqUy);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-selection-WqUy)}:host *{--primary-color: var(--primary-color-SCOPED-IN-selection-WqUy);--on-primary-color: var(--on-primary-color-SCOPED-IN-selection-WqUy);--surface-color: var(--surface-color-SCOPED-IN-selection-WqUy);--on-surface-color: var(--on-surface-color-SCOPED-IN-selection-WqUy);--background-color: var(--background-color-SCOPED-IN-selection-WqUy);--on-background-color: var(--on-background-color-SCOPED-IN-selection-WqUy)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-selection-WqUy);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-selection-WqUy)}:host organisms-action-buttons-section{margin-bottom:24px}\n"], dependencies: [{ kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator" }, { kind: "component", type: HeaderMolecule, selector: "molecules-header" }, { kind: "component", type: SelectionListOrganism, selector: "organisms-selection-list", inputs: ["items", "itemActions", "selection"] }, { kind: "component", type: ActionButtonsSectionOrganism, selector: "organisms-action-buttons-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-selection-APN6: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-selection-APN6: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-selection-APN6: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-selection-APN6: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-selection-APN6: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-selection-APN6: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-selection-APN6: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-selection-APN6: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-selection-APN6: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-selection-APN6);--navigator-background-color-SCOPED-IN-selection-APN6: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-selection-APN6);--navigator-on-background-color-SCOPED-IN-selection-APN6: var(--navigator-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-selection-APN6: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-selection-APN6: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-selection-APN6);transition:background-color .5s ease-in-out}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-selection-APN6);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-selection-APN6)}:host *{--primary-color: var(--primary-color-SCOPED-IN-selection-APN6);--on-primary-color: var(--on-primary-color-SCOPED-IN-selection-APN6);--surface-color: var(--surface-color-SCOPED-IN-selection-APN6);--on-surface-color: var(--on-surface-color-SCOPED-IN-selection-APN6);--background-color: var(--background-color-SCOPED-IN-selection-APN6);--on-background-color: var(--on-background-color-SCOPED-IN-selection-APN6)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-selection-APN6);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-selection-APN6)}:host organisms-action-buttons-section{margin-bottom:24px}\n"], dependencies: [{ kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator" }, { kind: "component", type: HeaderMolecule, selector: "molecules-header" }, { kind: "component", type: SelectionListOrganism, selector: "organisms-selection-list", inputs: ["items", "itemActions", "selection"] }, { kind: "component", type: ActionButtonsSectionOrganism, selector: "organisms-action-buttons-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Effect(SelectionListOrganism.ActionId.TOGGLE_OPTION),
@@ -114,7 +114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                             directive: SelectionTemplateStore,
                             inputs: ['navStartActions', 'navEndActions', 'actions', 'itemActions', 'title', 'items', 'selection'],
                         },
-                    ], host: { class: 'template' }, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-selection-WqUy: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-selection-WqUy: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-selection-WqUy: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-selection-WqUy: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-selection-WqUy: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-selection-WqUy: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-selection-WqUy: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-selection-WqUy: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-selection-WqUy: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-selection-WqUy);--navigator-background-color-SCOPED-IN-selection-WqUy: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-selection-WqUy);--navigator-on-background-color-SCOPED-IN-selection-WqUy: var(--navigator-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-selection-WqUy: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-selection-WqUy: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-selection-WqUy);transition:background-color .5s ease-in-out}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-selection-WqUy);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-selection-WqUy)}:host *{--primary-color: var(--primary-color-SCOPED-IN-selection-WqUy);--on-primary-color: var(--on-primary-color-SCOPED-IN-selection-WqUy);--surface-color: var(--surface-color-SCOPED-IN-selection-WqUy);--on-surface-color: var(--on-surface-color-SCOPED-IN-selection-WqUy);--background-color: var(--background-color-SCOPED-IN-selection-WqUy);--on-background-color: var(--on-background-color-SCOPED-IN-selection-WqUy)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-selection-WqUy);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-selection-WqUy)}:host organisms-action-buttons-section{margin-bottom:24px}\n"] }]
+                    ], host: { class: 'template' }, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-selection-APN6: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-selection-APN6: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-selection-APN6: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-selection-APN6: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-selection-APN6: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-selection-APN6: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-selection-APN6: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-selection-APN6: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-selection-APN6: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-selection-APN6);--navigator-background-color-SCOPED-IN-selection-APN6: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-selection-APN6);--navigator-on-background-color-SCOPED-IN-selection-APN6: var(--navigator-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-selection-APN6: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-selection-APN6: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-selection-APN6);transition:background-color .5s ease-in-out}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-selection-APN6);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-selection-APN6)}:host *{--primary-color: var(--primary-color-SCOPED-IN-selection-APN6);--on-primary-color: var(--on-primary-color-SCOPED-IN-selection-APN6);--surface-color: var(--surface-color-SCOPED-IN-selection-APN6);--on-surface-color: var(--on-surface-color-SCOPED-IN-selection-APN6);--background-color: var(--background-color-SCOPED-IN-selection-APN6);--on-background-color: var(--on-background-color-SCOPED-IN-selection-APN6)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-selection-APN6);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-selection-APN6)}:host organisms-action-buttons-section{margin-bottom:24px}\n"] }]
         }], propDecorators: { toggleOption: [] } });
 
 /**

package/fesm2022/ng-atomic-components-templates-settings.mjs

@@ -65,7 +65,7 @@ class SettingsTemplate extends NgAtomicComponent {
       </mat-list-item>
     </mat-list>
     </div>
-  </frames-scroll>`, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-%COMP%-FEQ2: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-%COMP%-FEQ2: var(--on-primary-color);--secondary-color: inherit;--secondary-color-SCOPED-IN-%COMP%-FEQ2: var(--secondary-color);--surface-color: inherit;--surface-color-SCOPED-IN-%COMP%-FEQ2: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-%COMP%-FEQ2: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-%COMP%-FEQ2: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-%COMP%-FEQ2: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-%COMP%-FEQ2);--navigator-background-color-SCOPED-IN-%COMP%-FEQ2: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-%COMP%-FEQ2);--navigator-on-background-color-SCOPED-IN-%COMP%-FEQ2: var(--navigator-on-background-color);width:100%;height:100%;background:#fff;display:block}:host *{--primary-color: var(--primary-color-SCOPED-IN-%COMP%-FEQ2);--on-primary-color: var(--on-primary-color-SCOPED-IN-%COMP%-FEQ2);--surface-color: var(--surface-color-SCOPED-IN-%COMP%-FEQ2);--on-surface-color: var(--on-surface-color-SCOPED-IN-%COMP%-FEQ2);--background-color: var(--background-color-SCOPED-IN-%COMP%-FEQ2);--on-background-color: var(--on-background-color-SCOPED-IN-%COMP%-FEQ2)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-%COMP%-FEQ2);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-%COMP%-FEQ2)}\n"], dependencies: [{ kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i1.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: IconAtom, selector: "atoms-icon", inputs: ["name", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  </frames-scroll>`, isInline: true, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-%COMP%-prVw: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-%COMP%-prVw: var(--on-primary-color);--secondary-color: inherit;--secondary-color-SCOPED-IN-%COMP%-prVw: var(--secondary-color);--surface-color: inherit;--surface-color-SCOPED-IN-%COMP%-prVw: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-%COMP%-prVw: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-%COMP%-prVw: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-%COMP%-prVw: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-%COMP%-prVw);--navigator-background-color-SCOPED-IN-%COMP%-prVw: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-%COMP%-prVw);--navigator-on-background-color-SCOPED-IN-%COMP%-prVw: var(--navigator-on-background-color);width:100%;height:100%;background:#fff;display:block}:host *{--primary-color: var(--primary-color-SCOPED-IN-%COMP%-prVw);--on-primary-color: var(--on-primary-color-SCOPED-IN-%COMP%-prVw);--surface-color: var(--surface-color-SCOPED-IN-%COMP%-prVw);--on-surface-color: var(--on-surface-color-SCOPED-IN-%COMP%-prVw);--background-color: var(--background-color-SCOPED-IN-%COMP%-prVw);--on-background-color: var(--on-background-color-SCOPED-IN-%COMP%-prVw)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-%COMP%-prVw);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-%COMP%-prVw)}\n"], dependencies: [{ kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i1.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i1.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: IconAtom, selector: "atoms-icon", inputs: ["name", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SettingsTemplate, decorators: [{
             type: Component,
@@ -114,7 +114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
     </div>
   </frames-scroll>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'template'
-                    }, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-%COMP%-FEQ2: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-%COMP%-FEQ2: var(--on-primary-color);--secondary-color: inherit;--secondary-color-SCOPED-IN-%COMP%-FEQ2: var(--secondary-color);--surface-color: inherit;--surface-color-SCOPED-IN-%COMP%-FEQ2: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-%COMP%-FEQ2: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-%COMP%-FEQ2: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-%COMP%-FEQ2: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-%COMP%-FEQ2);--navigator-background-color-SCOPED-IN-%COMP%-FEQ2: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-%COMP%-FEQ2);--navigator-on-background-color-SCOPED-IN-%COMP%-FEQ2: var(--navigator-on-background-color);width:100%;height:100%;background:#fff;display:block}:host *{--primary-color: var(--primary-color-SCOPED-IN-%COMP%-FEQ2);--on-primary-color: var(--on-primary-color-SCOPED-IN-%COMP%-FEQ2);--surface-color: var(--surface-color-SCOPED-IN-%COMP%-FEQ2);--on-surface-color: var(--on-surface-color-SCOPED-IN-%COMP%-FEQ2);--background-color: var(--background-color-SCOPED-IN-%COMP%-FEQ2);--on-background-color: var(--on-background-color-SCOPED-IN-%COMP%-FEQ2)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-%COMP%-FEQ2);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-%COMP%-FEQ2)}\n"] }]
+                    }, styles: [":host{--primary-color: inherit;--primary-color-SCOPED-IN-%COMP%-prVw: var(--primary-color);--on-primary-color: inherit;--on-primary-color-SCOPED-IN-%COMP%-prVw: var(--on-primary-color);--secondary-color: inherit;--secondary-color-SCOPED-IN-%COMP%-prVw: var(--secondary-color);--surface-color: inherit;--surface-color-SCOPED-IN-%COMP%-prVw: var(--surface-color);--on-surface-color: inherit;--on-surface-color-SCOPED-IN-%COMP%-prVw: var(--on-surface-color);--background-color: inherit;--background-color-SCOPED-IN-%COMP%-prVw: var(--background-color);--on-background-color: inherit;--on-background-color-SCOPED-IN-%COMP%-prVw: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-%COMP%-prVw);--navigator-background-color-SCOPED-IN-%COMP%-prVw: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-%COMP%-prVw);--navigator-on-background-color-SCOPED-IN-%COMP%-prVw: var(--navigator-on-background-color);width:100%;height:100%;background:#fff;display:block}:host *{--primary-color: var(--primary-color-SCOPED-IN-%COMP%-prVw);--on-primary-color: var(--on-primary-color-SCOPED-IN-%COMP%-prVw);--surface-color: var(--surface-color-SCOPED-IN-%COMP%-prVw);--on-surface-color: var(--on-surface-color-SCOPED-IN-%COMP%-prVw);--background-color: var(--background-color-SCOPED-IN-%COMP%-prVw);--on-background-color: var(--on-background-color-SCOPED-IN-%COMP%-prVw)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-%COMP%-prVw);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-%COMP%-prVw)}\n"] }]
         }] });
 
 /**

package/fesm2022/ng-atomic-components.mjs

@@ -6,11 +6,13 @@ import { NgAtomicOrganismsModule } from '@ng-atomic/components/organisms';
 import { NgAtomicTemplatesModule } from '@ng-atomic/components/templates';
 import { NgAtomicFramesModule } from '@ng-atomic/components/frames';
 import { NgAtomicPagesModule } from '@ng-atomic/components/pages';
-import { NgAtomicSheetsModule } from '@ng-atomic/components/sheets';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { RootPropertyService, provideRootProperty } from '@ng-atomic/common/services/root-property';
 
+/**
+ * @deprecated use `provideNgAtomicComponents()` instead
+ */
 class NgAtomicComponentsModule {
     static forRoot() {
         return {
@@ -24,7 +26,6 @@ class NgAtomicComponentsModule {
                 importProvidersFrom(NgAtomicTemplatesModule.forRoot()),
                 importProvidersFrom(NgAtomicPagesModule.forRoot()),
                 importProvidersFrom(NgAtomicFramesModule.forRoot()),
-                importProvidersFrom(NgAtomicSheetsModule.forRoot()),
             ],
         };
     }
@@ -43,10 +44,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                     ]
                 }]
         }] });
+function provideNgAtomicComponents() {
+    return importProvidersFrom(NgAtomicComponentsModule.forRoot());
+}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgAtomicComponentsModule };
+export { NgAtomicComponentsModule, provideNgAtomicComponents };
 //# sourceMappingURL=ng-atomic-components.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/components.module.ts","../../../../../packages/@ng-atomic/components/src/lib/ng-atomic-components.ts"],"sourcesContent":["import { NgModule, importProvidersFrom } from \"@angular/core\";\nimport { NgAtomicAtomsModule } from \"@ng-atomic/components/atoms\";\nimport { NgAtomicMoleculesModule } from \"@ng-atomic/components/molecules\";\nimport { NgAtomicOrganismsModule } from \"@ng-atomic/components/organisms\";\nimport { NgAtomicTemplatesModule } from \"@ng-atomic/components/templates\";\nimport { NgAtomicFramesModule } from \"@ng-atomic/components/frames\";\nimport { NgAtomicPagesModule } from \"@ng-atomic/components/pages\";\nimport { NgAtomicSheetsModule } from '@ng-atomic/components/sheets';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatSnackBarModule } from '@angular/material/snack-bar';\nimport { provideRootProperty, RootPropertyService } from '@ng-atomic/common/services/root-property';\n\n\n@NgModule({\n  imports: [\n    MatDialogModule,\n    MatSnackBarModule,\n  ]\n})\nexport class NgAtomicComponentsModule {\n  static forRoot() {\n    return {\n      ngModule: NgAtomicComponentsModule,\n      providers: [\n        RootPropertyService.Config.provide(),\n        provideRootProperty(),\n        importProvidersFrom(NgAtomicAtomsModule.forRoot()),\n        importProvidersFrom(NgAtomicMoleculesModule.forRoot()),\n        importProvidersFrom(NgAtomicOrganismsModule.forRoot()),\n        importProvidersFrom(NgAtomicTemplatesModule.forRoot()),\n        importProvidersFrom(NgAtomicPagesModule.forRoot()),\n        importProvidersFrom(NgAtomicFramesModule.forRoot()),\n        importProvidersFrom(NgAtomicSheetsModule.forRoot()),\n      ],\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;MAmBa,wBAAwB,CAAA;AACnC,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO;AACL,YAAA,QAAQ,EAAE,wBAAwB;AAClC,YAAA,SAAS,EAAE;AACT,gBAAA,mBAAmB,CAAC,MAAM,CAAC,OAAO,EAAE;AACpC,gBAAA,mBAAmB,EAAE;AACrB,gBAAA,mBAAmB,CAAC,mBAAmB,CAAC,OAAO,EAAE,CAAC;AAClD,gBAAA,mBAAmB,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;AACtD,gBAAA,mBAAmB,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;AACtD,gBAAA,mBAAmB,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;AACtD,gBAAA,mBAAmB,CAAC,mBAAmB,CAAC,OAAO,EAAE,CAAC;AAClD,gBAAA,mBAAmB,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC;AACnD,gBAAA,mBAAmB,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC;AACpD,aAAA;SACF,CAAA;KACF;8GAhBU,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,YAJjC,eAAe;YACf,iBAAiB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,YAJjC,eAAe;YACf,iBAAiB,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAGR,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBANpC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,eAAe;wBACf,iBAAiB;AAClB,qBAAA;AACF,iBAAA,CAAA;;;AClBD;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/components.module.ts","../../../../../packages/@ng-atomic/components/src/lib/ng-atomic-components.ts"],"sourcesContent":["import { EnvironmentProviders, NgModule, importProvidersFrom } from \"@angular/core\";\nimport { NgAtomicAtomsModule } from \"@ng-atomic/components/atoms\";\nimport { NgAtomicMoleculesModule } from \"@ng-atomic/components/molecules\";\nimport { NgAtomicOrganismsModule } from \"@ng-atomic/components/organisms\";\nimport { NgAtomicTemplatesModule } from \"@ng-atomic/components/templates\";\nimport { NgAtomicFramesModule } from \"@ng-atomic/components/frames\";\nimport { NgAtomicPagesModule } from \"@ng-atomic/components/pages\";\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatSnackBarModule } from '@angular/material/snack-bar';\nimport { provideRootProperty, RootPropertyService } from '@ng-atomic/common/services/root-property';\n\n\n/**\n * @deprecated use `provideNgAtomicComponents()` instead\n */\n@NgModule({\n  imports: [\n    MatDialogModule,\n    MatSnackBarModule,\n  ]\n})\nexport class NgAtomicComponentsModule {\n  static forRoot() {\n    return {\n      ngModule: NgAtomicComponentsModule,\n      providers: [\n        RootPropertyService.Config.provide(),\n        provideRootProperty(),\n        importProvidersFrom(NgAtomicAtomsModule.forRoot()),\n        importProvidersFrom(NgAtomicMoleculesModule.forRoot()),\n        importProvidersFrom(NgAtomicOrganismsModule.forRoot()),\n        importProvidersFrom(NgAtomicTemplatesModule.forRoot()),\n        importProvidersFrom(NgAtomicPagesModule.forRoot()),\n        importProvidersFrom(NgAtomicFramesModule.forRoot()),\n      ],\n    }\n  }\n}\n\nexport function provideNgAtomicComponents(): EnvironmentProviders {\n  return importProvidersFrom(NgAtomicComponentsModule.forRoot());\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA;;AAEG;MAOU,wBAAwB,CAAA;AACnC,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO;AACL,YAAA,QAAQ,EAAE,wBAAwB;AAClC,YAAA,SAAS,EAAE;AACT,gBAAA,mBAAmB,CAAC,MAAM,CAAC,OAAO,EAAE;AACpC,gBAAA,mBAAmB,EAAE;AACrB,gBAAA,mBAAmB,CAAC,mBAAmB,CAAC,OAAO,EAAE,CAAC;AAClD,gBAAA,mBAAmB,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;AACtD,gBAAA,mBAAmB,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;AACtD,gBAAA,mBAAmB,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;AACtD,gBAAA,mBAAmB,CAAC,mBAAmB,CAAC,OAAO,EAAE,CAAC;AAClD,gBAAA,mBAAmB,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC;AACpD,aAAA;SACF,CAAA;KACF;8GAfU,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,YAJjC,eAAe;YACf,iBAAiB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGR,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,YAJjC,eAAe;YACf,iBAAiB,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAGR,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBANpC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,eAAe;wBACf,iBAAiB;AAClB,qBAAA;AACF,iBAAA,CAAA;;SAmBe,yBAAyB,GAAA;AACvC,IAAA,OAAO,mBAAmB,CAAC,wBAAwB,CAAC,OAAO,EAAE,CAAC,CAAC;AACjE;;ACzCA;;AAEG;;;;"}

package/frames/app/app.frame.d.ts

@@ -8,6 +8,7 @@ declare enum ActionId {
     SIGN_UP_WITH_EMAIL = "[@ng-atomic/components:frames/app] Sign Up With Email",
     NAVIGATE = "[@ng-atomic/components:frames/app] Navigate",
     SIGN_OUT = "[@ng-atomic/components:frames/app] Sign Out",
+    NAVIGATE_SIDE_APP = "[@ng-atomic/components:frames/app] Navigate Side App",
     OPEN_SIDE_APP = "[@ng-atomic/components:frames/app] Open Side App"
 }
 export declare class AppFrameStore extends InjectableComponent {
@@ -18,11 +19,13 @@ export declare class AppFrameStore extends InjectableComponent {
             fabHide: boolean;
             isEntrance: boolean;
             isLoading: boolean;
+            isProgress: boolean;
             sideAppOpened: boolean;
             title: string;
             form: AbstractControl;
             entranceActions: Actions;
             sideNavActions: Actions;
+            sideNavBottomActions: any[];
             sideNavMode: "expanded" | "collapsed";
             sideNavMenuType: "menu" | "icon-button-menu";
             sideNavMenuTitle: string;
@@ -33,11 +36,13 @@ export declare class AppFrameStore extends InjectableComponent {
             fabHide: boolean;
             isEntrance: boolean;
             isLoading: boolean;
+            isProgress: boolean;
             sideAppOpened: boolean;
             title: string;
             form: AbstractControl;
             entranceActions: Actions;
             sideNavActions: Actions;
+            sideNavBottomActions: any[];
             sideNavMode: "expanded" | "collapsed";
             sideNavMenuType: "menu" | "icon-button-menu";
             sideNavMenuTitle: string;
@@ -83,36 +88,43 @@ export declare class AppFrameStore extends InjectableComponent {
         multi: boolean;
     }[];
     static provideNavigateEffect(): import("@angular/core").Provider;
+    static provideNavigateSideAppEffect(): import("@angular/core").Provider;
     static provideSignOutEffect(): import("@angular/core").Provider;
     static provideOpenSideAppEffect(): import("@angular/core").Provider;
+    static provideCloseSideAppEffect(): import("@angular/core").Provider;
     static provideSignUpWithEmailEffect(): import("@angular/core").Provider;
     static provideSignInWithEmailEffect(): import("@angular/core").Provider;
     static provideSignInWithGoogleEffect(): import("@angular/core").Provider;
     static provideSignInWithTwitterEffect(): import("@angular/core").Provider;
     static provideDefaultEffects(): import("@angular/core").Provider[];
     static provideDefault(): import("@angular/core").Provider[];
+    static injectNavActionFactory(): (commands: any[], name: string) => Action<any>;
     readonly config: import("@angular/core").Signal<{
         fabActions: any[];
         fabHide: boolean;
         isEntrance: boolean;
         isLoading: boolean;
+        isProgress: boolean;
         sideAppOpened: boolean;
         title: string;
         form: AbstractControl;
         entranceActions: Actions;
         sideNavActions: Actions;
+        sideNavBottomActions: any[];
         sideNavMode: "expanded" | "collapsed";
         sideNavMenuType: "menu" | "icon-button-menu";
         sideNavMenuTitle: string;
         sideAppOutletName: string;
     }>;
     readonly isLoading: import("@angular/core").InputSignal<boolean>;
+    readonly isProgress: import("@angular/core").InputSignal<boolean>;
     readonly isEntrance: import("@angular/core").InputSignal<boolean>;
     readonly sideAppOpened: import("@angular/core").InputSignal<boolean>;
     readonly title: import("@angular/core").InputSignal<string>;
     readonly form: import("@angular/core").InputSignal<AbstractControl<any, any>>;
     readonly entranceActions: import("@angular/core").InputSignal<Actions>;
     readonly sideNavActions: import("@angular/core").InputSignal<Actions>;
+    readonly sideNavBottomActions: import("@angular/core").InputSignal<any[]>;
     readonly sideNavMode: import("@angular/core").InputSignal<"collapsed" | "expanded">;
     readonly sideNavMenuType: import("@angular/core").InputSignal<"menu" | "icon-button-menu">;
     readonly sideNavMenuTitle: import("@angular/core").InputSignal<string>;
@@ -121,7 +133,7 @@ export declare class AppFrameStore extends InjectableComponent {
     readonly fabHide: import("@angular/core").InputSignal<boolean>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<AppFrameStore, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AppFrameStore, "frames-app", never, { "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isEntrance": { "alias": "isEntrance"; "required": false; "isSignal": true; }; "sideAppOpened": { "alias": "sideAppOpened"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "entranceActions": { "alias": "entranceActions"; "required": false; "isSignal": true; }; "sideNavActions": { "alias": "sideNavActions"; "required": false; "isSignal": true; }; "sideNavMode": { "alias": "sideNavMode"; "required": false; "isSignal": true; }; "sideNavMenuType": { "alias": "sideNavMenuType"; "required": false; "isSignal": true; }; "sideNavMenuTitle": { "alias": "sideNavMenuTitle"; "required": false; "isSignal": true; }; "sideAppOutletName": { "alias": "sideAppOutletName"; "required": false; "isSignal": true; }; "fabActions": { "alias": "fabActions"; "required": false; "isSignal": true; }; "fabHide": { "alias": "fabHide"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AppFrameStore, "frames-app", never, { "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isProgress": { "alias": "isProgress"; "required": false; "isSignal": true; }; "isEntrance": { "alias": "isEntrance"; "required": false; "isSignal": true; }; "sideAppOpened": { "alias": "sideAppOpened"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "entranceActions": { "alias": "entranceActions"; "required": false; "isSignal": true; }; "sideNavActions": { "alias": "sideNavActions"; "required": false; "isSignal": true; }; "sideNavBottomActions": { "alias": "sideNavBottomActions"; "required": false; "isSignal": true; }; "sideNavMode": { "alias": "sideNavMode"; "required": false; "isSignal": true; }; "sideNavMenuType": { "alias": "sideNavMenuType"; "required": false; "isSignal": true; }; "sideNavMenuTitle": { "alias": "sideNavMenuTitle"; "required": false; "isSignal": true; }; "sideAppOutletName": { "alias": "sideAppOutletName"; "required": false; "isSignal": true; }; "fabActions": { "alias": "fabActions"; "required": false; "isSignal": true; }; "fabHide": { "alias": "fabHide"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export declare class AppFrame extends NgAtomicComponent {
     protected store: AppFrameStore;

package/frames/auto-layout/auto-layout.frame.d.ts

@@ -1,5 +1,11 @@
 import * as i0 from "@angular/core";
+export declare class AutoLayoutFrameStore {
+    readonly type: import("@angular/core").InputSignal<"horizontal" | "vertical">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutoLayoutFrameStore, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AutoLayoutFrameStore, never, never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
 export declare class AutoLayoutFrame {
+    protected store: AutoLayoutFrameStore;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutoLayoutFrame, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutoLayoutFrame, "frames-auto-layout", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutoLayoutFrame, "frames-auto-layout", never, {}, {}, never, ["*"], true, [{ directive: typeof AutoLayoutFrameStore; inputs: { "type": "type"; }; outputs: {}; }]>;
 }

package/frames/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './progress-bar.frame';

package/frames/progress-bar/progress-bar.frame.d.ts

@@ -0,0 +1,14 @@
+import { ProgressBarMode } from '@angular/material/progress-bar';
+import { NgAtomicComponent } from '@ng-atomic/core';
+import * as i0 from "@angular/core";
+export declare class ProgressBarFrameStore {
+    readonly mode: import("@angular/core").InputSignal<ProgressBarMode>;
+    readonly isProgress: import("@angular/core").InputSignal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarFrameStore, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ProgressBarFrameStore, "frames-progress-bar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "isProgress": { "alias": "isProgress"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class ProgressBarFrame extends NgAtomicComponent {
+    protected readonly store: ProgressBarFrameStore;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarFrame, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarFrame, "frames-progress-bar", never, {}, {}, never, ["*"], true, [{ directive: typeof ProgressBarFrameStore; inputs: { "mode": "mode"; "isProgress": "isProgress"; }; outputs: {}; }]>;
+}

package/frames/router-outlet/router-outlet.frame.d.ts

@@ -1,4 +1,5 @@
-import { RouterOutlet } from '@angular/router';
+import { EventEmitter, Signal } from '@angular/core';
+import { CanActivateFn, CanDeactivateFn, RouterOutlet, Routes } from '@angular/router';
 import { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';
 import * as i0 from "@angular/core";
 export declare class RouterOutletFrameStore extends InjectableComponent {
@@ -8,15 +9,15 @@ export declare class RouterOutletFrameStore extends InjectableComponent {
             name: string;
             isActivated: (outlet: RouterOutlet) => boolean;
         }>, label?: string): import("@angular/core").Provider;
-        inject(): import("@angular/core").Signal<{
+        inject(): Signal<{
             frame: "overlay" | "lineup";
             name: string;
             isActivated: (outlet: RouterOutlet) => boolean;
         }>;
     };
-    static provideExperimental(): import("@angular/core").Provider;
-    static provideSideAppConfig: () => import("@angular/core").Provider;
-    readonly config: import("@angular/core").Signal<{
+    static provideSideAppConfig: (name?: string) => import("@angular/core").Provider;
+    static provideDefault(): import("@angular/core").Provider[];
+    readonly config: Signal<{
         frame: "overlay" | "lineup";
         name: string;
         isActivated: (outlet: RouterOutlet) => boolean;
@@ -24,13 +25,23 @@ export declare class RouterOutletFrameStore extends InjectableComponent {
     readonly frame: import("@angular/core").InputSignal<"overlay" | "lineup">;
     readonly name: import("@angular/core").InputSignal<string>;
     readonly isActivated: import("@angular/core").InputSignal<(outlet: RouterOutlet) => boolean>;
+    readonly skip: import("@angular/core").InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RouterOutletFrameStore, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RouterOutletFrameStore, "frames-router-outlet", never, { "frame": { "alias": "frame"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "isActivated": { "alias": "isActivated"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RouterOutletFrameStore, "frames-router-outlet", never, { "frame": { "alias": "frame"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "isActivated": { "alias": "isActivated"; "required": false; "isSignal": true; }; "skip": { "alias": "skip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export declare class RouterOutletFrame extends NgAtomicComponent {
     protected store: RouterOutletFrameStore;
-    readonly outlet: import("@angular/core").Signal<RouterOutlet>;
-    readonly isActivated: import("@angular/core").Signal<boolean>;
+    readonly events: EventEmitter<string>;
+    readonly outlet: Signal<RouterOutlet>;
+    readonly outlet$: import("rxjs").Observable<RouterOutlet>;
+    readonly activatedEvents$: import("rxjs").Observable<any>;
+    readonly hasNext$: import("rxjs").Observable<boolean>;
+    readonly hasNext: Signal<boolean>;
+    readonly parent: RouterOutletFrame;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<RouterOutletFrame, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RouterOutletFrame, "frames-router-outlet", never, {}, {}, never, ["*"], true, [{ directive: typeof RouterOutletFrameStore; inputs: { "frame": "frame"; "name": "name"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RouterOutletFrame, "frames-router-outlet", never, {}, { "events": "events"; }, never, ["*"], true, [{ directive: typeof RouterOutletFrameStore; inputs: { "frame": "frame"; "name": "name"; "skip": "skip"; }; outputs: {}; }]>;
 }
+export declare const canDeactivateFn: CanDeactivateFn<NgAtomicComponent | undefined>;
+export declare const canActivateFn: CanActivateFn;
+export declare function ngAtomicRoutes(routes: Routes): Routes;

package/frames/scroll/scroll.frame.d.ts

@@ -1,5 +1,9 @@
+import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class ScrollFrame {
+    protected contents: ElementRef<HTMLDivElement>;
+    isScrollBottom(): boolean;
+    scrollToBottom(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScrollFrame, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ScrollFrame, "frames-scroll", never, {}, {}, never, ["[navigator]", "[contents]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ScrollFrame, "frames-scroll", never, {}, {}, never, ["[top]", "*", "[bottom]"], true, never>;
 }

package/frames/scroll-v2/index.d.ts

@@ -1 +1 @@
-export * from './scroll.frame';
+export * from '@ng-atomic/components/frames/scroll';

package/frames/side-app/index.d.ts

@@ -0,0 +1 @@
+export * from './side-app.frame';

package/frames/side-app/side-app.frame.d.ts

@@ -0,0 +1,20 @@
+import { Route } from "@angular/router";
+import { InjectableComponent, NgAtomicComponent } from "@ng-atomic/core";
+import * as i0 from "@angular/core";
+export declare class SideAppFrameStore extends InjectableComponent {
+    static route(route: Route): {
+        outlet: string;
+        component: typeof SideAppFrame;
+        path: string;
+        providers: import("@angular/core").Provider[][];
+    } & Route;
+    static provideDefault(): import("@angular/core").Provider[];
+    readonly name: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SideAppFrameStore, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SideAppFrameStore, "frames-side-app", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class SideAppFrame extends NgAtomicComponent {
+    protected store: SideAppFrameStore;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SideAppFrame, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SideAppFrame, "frames-side-app", never, {}, {}, never, never, true, [{ directive: typeof SideAppFrameStore; inputs: { "name": "name"; }; outputs: {}; }]>;
+}

package/frames/side-nav/side-nav.frame.d.ts

@@ -11,6 +11,7 @@ export declare class SideNavFrameStore extends InjectableComponent {
     static readonly Config: {
         provide(useFactory?: import("@ng-atomic/common/services/ui").ReducerFactory<{
             actions: any[];
+            bottomActions: any[];
             menuType: "menu" | "icon-button-menu";
             menuTitle: string;
             mode: string;
@@ -18,6 +19,7 @@ export declare class SideNavFrameStore extends InjectableComponent {
         }>, label?: string): import("@angular/core").Provider;
         inject(): import("@angular/core").Signal<{
             actions: any[];
+            bottomActions: any[];
             menuType: "menu" | "icon-button-menu";
             menuTitle: string;
             mode: string;
@@ -26,22 +28,24 @@ export declare class SideNavFrameStore extends InjectableComponent {
     };
     readonly config: import("@angular/core").Signal<{
         actions: any[];
+        bottomActions: any[];
         menuType: "menu" | "icon-button-menu";
         menuTitle: string;
         mode: string;
         frameType: "lineup" | "drawer";
     }>;
     readonly actions: import("@angular/core").InputSignal<any[]>;
+    readonly bottomActions: import("@angular/core").InputSignal<any[]>;
     readonly menuType: import("@angular/core").InputSignal<"menu" | "icon-button-menu">;
     readonly menuTitle: import("@angular/core").InputSignal<string>;
     readonly mode: import("@angular/core").InputSignal<string>;
     readonly frameType: import("@angular/core").InputSignal<"lineup" | "drawer">;
     get attrFrame(): "lineup" | "drawer";
     static ɵfac: i0.ɵɵFactoryDeclaration<SideNavFrameStore, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SideNavFrameStore, "frames-side-nav", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "menuType": { "alias": "menuType"; "required": false; "isSignal": true; }; "menuTitle": { "alias": "menuTitle"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "frameType": { "alias": "frameType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SideNavFrameStore, "frames-side-nav", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "bottomActions": { "alias": "bottomActions"; "required": false; "isSignal": true; }; "menuType": { "alias": "menuType"; "required": false; "isSignal": true; }; "menuTitle": { "alias": "menuTitle"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "frameType": { "alias": "frameType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export declare class SideNavFrame extends NgAtomicComponent {
     protected store: SideNavFrameStore;
     static ɵfac: i0.ɵɵFactoryDeclaration<SideNavFrame, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavFrame, "frames-side-nav", never, {}, {}, never, ["*"], true, [{ directive: typeof SideNavFrameStore; inputs: { "actions": "actions"; "menuType": "menuType"; "menuTitle": "menuTitle"; "mode": "mode"; "frameType": "frameType"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SideNavFrame, "frames-side-nav", never, {}, {}, never, ["*"], true, [{ directive: typeof SideNavFrameStore; inputs: { "actions": "actions"; "bottomActions": "bottomActions"; "menuType": "menuType"; "menuTitle": "menuTitle"; "mode": "mode"; "frameType": "frameType"; }; outputs: {}; }]>;
 }

package/frames/tabs/tabs.frame.d.ts

@@ -2,8 +2,9 @@ import { ElementRef, QueryList, AfterContentInit } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TabsFrame implements AfterContentInit {
     tabContents: QueryList<ElementRef>;
+    protected readonly labels: import("@angular/core").InputSignal<string[]>;
     tabs: any[];
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsFrame, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabsFrame, "frames-tabs", never, {}, {}, ["tabContents"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsFrame, "frames-tabs", never, { "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, {}, ["tabContents"], never, true, never>;
 }

package/frames/vertical-hide/vertical-hide.frame.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class VerticalHideFrame {
-    mode: 'collapsed' | 'expanded';
+    readonly mode: import("@angular/core").InputSignal<"collapsed" | "expanded">;
     static ɵfac: i0.ɵɵFactoryDeclaration<VerticalHideFrame, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VerticalHideFrame, "frames-vertical-hide", never, { "mode": { "alias": "mode"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VerticalHideFrame, "frames-vertical-hide", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/molecules/actions-column/actions-column.molecule.d.ts

@@ -29,11 +29,12 @@ export declare class ActionsColumnMoleculeStore extends InjectableComponent {
     readonly headerText: import("@angular/core").InputSignal<string>;
     readonly name: import("@angular/core").InputSignal<string>;
     readonly itemActions: import("@angular/core").InputSignal<Actions>;
+    readonly sticky: import("@angular/core").InputSignal<boolean>;
     readonly style: import("@angular/core").Signal<{
         width: string;
     }>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActionsColumnMoleculeStore, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ActionsColumnMoleculeStore, never, never, { "headerText": { "alias": "headerText"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": true; "isSignal": true; }; "itemActions": { "alias": "itemActions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ActionsColumnMoleculeStore, never, never, { "headerText": { "alias": "headerText"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": true; "isSignal": true; }; "itemActions": { "alias": "itemActions"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export declare class ActionsColumnMolecule extends NgAtomicComponent implements OnInit, OnDestroy {
     private _table;
@@ -45,5 +46,5 @@ export declare class ActionsColumnMolecule extends NgAtomicComponent implements
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActionsColumnMolecule, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ActionsColumnMolecule, "molecules-actions-column", never, {}, {}, never, never, true, [{ directive: typeof ActionsColumnMoleculeStore; inputs: { "headerText": "headerText"; "name": "name"; "itemActions": "itemActions"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionsColumnMolecule, "molecules-actions-column", never, {}, {}, never, never, true, [{ directive: typeof ActionsColumnMoleculeStore; inputs: { "headerText": "headerText"; "name": "name"; "itemActions": "itemActions"; "sticky": "sticky"; }; outputs: {}; }]>;
 }

package/molecules/checkbox-column/checkbox-column.molecule.d.ts

@@ -2,18 +2,26 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { CdkCellDef, CdkColumnDef, CdkHeaderCellDef } from '@angular/cdk/table';
 import { OnInit, OnDestroy } from '@angular/core';
 import { MatCheckbox } from '@angular/material/checkbox';
-import { NgAtomicComponent } from '@ng-atomic/core';
+import { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';
 import * as i0 from "@angular/core";
 declare enum ActionId {
     CHECKBOX_CLICK = "[@ng-atomic/components/molecules/checkbox-column] Checkbox Click",
     HEADER_CHECKBOX_CLICK = "[@ng-atomic/components/molecules/checkbox-column] Header Checkbox Click"
 }
-export declare class CheckboxColumnMolecule<T> extends NgAtomicComponent implements OnInit, OnDestroy {
+export declare class CheckboxColumnMoleculeStore<T> extends InjectableComponent {
     static readonly ActionId: typeof ActionId;
-    private _table;
     readonly name: import("@angular/core").InputSignal<string>;
     readonly selection: import("@angular/core").InputSignal<SelectionModel<string>>;
     readonly isHidden: import("@angular/core").InputSignal<(item: T) => false>;
+    readonly width: import("@angular/core").InputSignal<number>;
+    readonly sticky: import("@angular/core").InputSignal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxColumnMoleculeStore<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CheckboxColumnMoleculeStore<any>, never, never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "isHidden": { "alias": "isHidden"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class CheckboxColumnMolecule<T> extends NgAtomicComponent implements OnInit, OnDestroy {
+    static readonly ActionId: typeof ActionId;
+    protected store: CheckboxColumnMoleculeStore<any>;
+    private _table;
     readonly columnDef: import("@angular/core").Signal<CdkColumnDef>;
     readonly cell: import("@angular/core").Signal<CdkCellDef>;
     readonly headerCell: import("@angular/core").Signal<CdkHeaderCellDef>;
@@ -26,6 +34,6 @@ export declare class CheckboxColumnMolecule<T> extends NgAtomicComponent impleme
     protected onHeaderCheckboxClick(item: T, event: Event): void;
     protected onCheckboxClick(item: T, event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxColumnMolecule<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxColumnMolecule<any>, "molecules-checkbox-column", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "isHidden": { "alias": "isHidden"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxColumnMolecule<any>, "molecules-checkbox-column", never, {}, {}, never, never, true, [{ directive: typeof CheckboxColumnMoleculeStore; inputs: { "name": "name"; "selection": "selection"; "isHidden": "isHidden"; "width": "width"; "sticky": "sticky"; }; outputs: {}; }]>;
 }
 export {};

package/molecules/list-item/index.d.ts

@@ -0,0 +1 @@
+export * from './list-item.molecule';

package/molecules/list-item/list-item.molecule.d.ts

@@ -0,0 +1,50 @@
+import { Action, Actions, InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';
+import * as i0 from "@angular/core";
+export declare class LinePipe {
+    protected dataAccessor: import("@ng-atomic/common/pipes/data-accessor").DataAccessor<unknown>;
+    transform(value: any): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<LinePipe, "itemToLines", true>;
+}
+declare enum ActionId {
+    CLICK_ITEM = "[@ng-atomic/components/molecules/list] Click Item",
+    ITEM_BUTTON_CLICK = "[@ng-atomic/components/molecules/list] Item Button Click"
+}
+export declare class ListItemMoleculeStore<T> extends InjectableComponent {
+    static readonly ActionId: typeof ActionId;
+    static readonly Config: {
+        provide(useFactory?: import("@ng-atomic/common/services/ui").ReducerFactory<{
+            items: any[];
+            itemActions: Actions;
+            groupedBy: string;
+            groupKeys: string[];
+            itemActionsType: "menu" | "dispatch";
+        }>, label?: string): import("@angular/core").Provider;
+        inject(): import("@angular/core").Signal<{
+            items: any[];
+            itemActions: Actions;
+            groupedBy: string;
+            groupKeys: string[];
+            itemActionsType: "menu" | "dispatch";
+        }>;
+    };
+    readonly config: import("@angular/core").Signal<{
+        items: any[];
+        itemActions: Actions;
+        groupedBy: string;
+        groupKeys: string[];
+        itemActionsType: "menu" | "dispatch";
+    }>;
+    readonly item: import("@angular/core").InputSignal<T>;
+    readonly actions: import("@angular/core").InputSignal<Action<any>[]>;
+    readonly itemActionsType: import("@angular/core").InputSignal<"menu" | "dispatch">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListItemMoleculeStore<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ListItemMoleculeStore<any>, "molecules-list-item", never, { "item": { "alias": "item"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "itemActionsType": { "alias": "itemActionsType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class ListItemMolecule<T> extends NgAtomicComponent {
+    protected readonly store: ListItemMoleculeStore<any>;
+    protected onItemActionsClick(item: T, $event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListItemMolecule<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListItemMolecule<any>, "molecules-list-item", never, {}, {}, never, never, true, [{ directive: typeof ListItemMoleculeStore; inputs: { "actions": "actions"; "item": "item"; "itemActionsType": "itemActionsType"; }; outputs: {}; }]>;
+}
+export {};

package/molecules/molecules.module.d.ts

@@ -12,6 +12,9 @@ export declare class NgAtomicMoleculesModule {
         } | {
             provide: any;
             useValue: () => Promise<import("@angular/core").Type<import("@ng-atomic/components/molecules/header").HeaderMolecule>>;
+        } | {
+            provide: any;
+            useValue: () => Promise<import("@angular/core").Type<import("@ng-atomic/components/molecules/list-item").ListItemMolecule<unknown>>>;
         } | {
             provide: any;
             useValue: () => Promise<import("@angular/core").Type<import("@ng-atomic/components/molecules/loading-box").LoadingBoxMolecule>>;