@ng-atomic/components 3.2.10 → 3.3.0

package/fesm2015/ng-atomic-components-frames-auto-layout.mjs

@@ -11,11 +11,11 @@ AutoLayoutFrame.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AutoLayoutF
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         }
-    }, styles: ["[_nghost-%COMP%]{--gap: 24px;--gap-SCOPED-IN-auto-layout-8lcl: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-8lcl: var(--vertical-padding)}[_nghost-%COMP%]{display:flex;width:100%;height:100%;justify-content:center;grid-gap:var(--gap-SCOPED-IN-auto-layout-8lcl);gap:var(--gap-SCOPED-IN-auto-layout-8lcl);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-8lcl) 0}[horizontal][_nghost-%COMP%]{flex-direction:row}[vertical][_nghost-%COMP%]{flex-direction:column}"], changeDetection: 0 });
+    }, styles: ["[_nghost-%COMP%]{--gap: 24px;--gap-SCOPED-IN-auto-layout-KBdo: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-KBdo: var(--vertical-padding)}[_nghost-%COMP%]{display:flex;width:100%;height:100%;justify-content:center;grid-gap:var(--gap-SCOPED-IN-auto-layout-KBdo);gap:var(--gap-SCOPED-IN-auto-layout-KBdo);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-KBdo) 0}[horizontal][_nghost-%COMP%]{flex-direction:row}[vertical][_nghost-%COMP%]{flex-direction:column}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AutoLayoutFrame, [{
             type: Component,
-            args: [{ selector: 'frames-auto-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", styles: [":host{--gap: 24px;--gap-SCOPED-IN-auto-layout-8lcl: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-8lcl: var(--vertical-padding)}:host{display:flex;width:100%;height:100%;justify-content:center;grid-gap:var(--gap-SCOPED-IN-auto-layout-8lcl);gap:var(--gap-SCOPED-IN-auto-layout-8lcl);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-8lcl) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}\n"] }]
+            args: [{ selector: 'frames-auto-layout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", styles: [":host{--gap: 24px;--gap-SCOPED-IN-auto-layout-KBdo: var(--gap);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-auto-layout-KBdo: var(--vertical-padding)}:host{display:flex;width:100%;height:100%;justify-content:center;grid-gap:var(--gap-SCOPED-IN-auto-layout-KBdo);gap:var(--gap-SCOPED-IN-auto-layout-KBdo);box-sizing:border-box;padding:var(--vertical-padding-SCOPED-IN-auto-layout-KBdo) 0}:host[horizontal]{flex-direction:row}:host[vertical]{flex-direction:column}\n"] }]
         }], null, null);
 })();
 

package/fesm2015/ng-atomic-components-frames-drawer.mjs

@@ -41,11 +41,11 @@ DrawerFrame.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawerFrame, se
         if (rf & 2) {
             i0.ɵɵproperty("autosize", false);
         }
-    }, directives: [i1.MatDrawerContainer, i1.MatDrawer, i1.MatDrawerContent], styles: ["[_nghost-%COMP%]{--content-width: 360px;--content-width-SCOPED-IN-drawer-XkAS: var(--content-width)}[_nghost-%COMP%]   mat-drawer-content[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
+    }, directives: [i1.MatDrawerContainer, i1.MatDrawer, i1.MatDrawerContent], styles: ["[_nghost-%COMP%]{--content-width: 360px;--content-width-SCOPED-IN-drawer-F8Z8: var(--content-width)}[_nghost-%COMP%]   mat-drawer-content[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawerFrame, [{
             type: Component,
-            args: [{ selector: 'frames-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-drawer-container [autosize]=\"false\">\n  <mat-drawer #drawer mode=\"side\">\n    <ng-content select=[drawer]></ng-content>\n  </mat-drawer>\n\n  <mat-drawer-content>\n    <ng-content select=[contents]></ng-content>\n  </mat-drawer-content>\n  \n</mat-drawer-container>", styles: [":host{--content-width: 360px;--content-width-SCOPED-IN-drawer-XkAS: var(--content-width)}:host mat-drawer-content{width:100%}\n"] }]
+            args: [{ selector: 'frames-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-drawer-container [autosize]=\"false\">\n  <mat-drawer #drawer mode=\"side\">\n    <ng-content select=[drawer]></ng-content>\n  </mat-drawer>\n\n  <mat-drawer-content>\n    <ng-content select=[contents]></ng-content>\n  </mat-drawer-content>\n  \n</mat-drawer-container>", styles: [":host{--content-width: 360px;--content-width-SCOPED-IN-drawer-F8Z8: var(--content-width)}:host mat-drawer-content{width:100%}\n"] }]
         }], null, { drawer: [{
                 type: ViewChild,
                 args: [MatDrawer]

package/fesm2015/ng-atomic-components-frames-line-up-v2.mjs

@@ -179,11 +179,11 @@ LineUpFrame.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LineUpFrame, se
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("@modeChangeForNext", ctx.mode);
         }
-    }, styles: ["[_nghost-%COMP%]{--gap: 1px;--gap-SCOPED-IN-line-up-EgJn: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-EgJn: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-EgJn: var(--contents-background)}[_nghost-%COMP%]{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-line-up-EgJn);gap:var(--gap-SCOPED-IN-line-up-EgJn);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-EgJn)}[_nghost-%COMP%]   div[_ngcontent-%COMP%]{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-EgJn)}[_nghost-%COMP%]   div.main[_ngcontent-%COMP%]{overflow:hidden;justify-content:flex-end}[_nghost-%COMP%]   div.next[_ngcontent-%COMP%]{overflow:visible;justify-content:flex-start}"], data: { animation: LINE_UP_ANIMATIONS } });
+    }, styles: ["[_nghost-%COMP%]{--gap: 1px;--gap-SCOPED-IN-line-up-eKBD: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-eKBD: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-eKBD: var(--contents-background)}[_nghost-%COMP%]{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-line-up-eKBD);gap:var(--gap-SCOPED-IN-line-up-eKBD);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-eKBD)}[_nghost-%COMP%]   div[_ngcontent-%COMP%]{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-eKBD)}[_nghost-%COMP%]   div.main[_ngcontent-%COMP%]{overflow:hidden;justify-content:flex-end}[_nghost-%COMP%]   div.next[_ngcontent-%COMP%]{overflow:visible;justify-content:flex-start}"], data: { animation: LINE_UP_ANIMATIONS } });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LineUpFrame, [{
             type: Component,
-            args: [{ selector: 'frames-line-up', changeDetection: ChangeDetectionStrategy.Default, animations: LINE_UP_ANIMATIONS, template: "<div class=\"main\" [@modeChangeForMain]=\"mode\" #main>\n  <ng-content select=\"[main]\"></ng-content>\n</div>\n<div class=\"next\" [@modeChangeForNext]=\"mode\" #next>\n  <ng-content select=\"[next]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-line-up-EgJn: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-EgJn: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-EgJn: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-line-up-EgJn);gap:var(--gap-SCOPED-IN-line-up-EgJn);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-EgJn)}:host div{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-EgJn)}:host div.main{overflow:hidden;justify-content:flex-end}:host div.next{overflow:visible;justify-content:flex-start}\n"] }]
+            args: [{ selector: 'frames-line-up', changeDetection: ChangeDetectionStrategy.Default, animations: LINE_UP_ANIMATIONS, template: "<div class=\"main\" [@modeChangeForMain]=\"mode\" #main>\n  <ng-content select=\"[main]\"></ng-content>\n</div>\n<div class=\"next\" [@modeChangeForNext]=\"mode\" #next>\n  <ng-content select=\"[next]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-line-up-eKBD: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-eKBD: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-eKBD: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-line-up-eKBD);gap:var(--gap-SCOPED-IN-line-up-eKBD);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-eKBD)}:host div{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-eKBD)}:host div.main{overflow:hidden;justify-content:flex-end}:host div.next{overflow:visible;justify-content:flex-start}\n"] }]
         }], function () { return [{ type: LineUpFrameService }]; }, { hasNext: [{
                 type: Input
             }], minNextWidth: [{

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

@@ -166,11 +166,11 @@ LineUpFrame.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LineUpFrame, se
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("@pageChange", ctx.page);
         }
-    }, styles: ["[_nghost-%COMP%]{--gap: 1px;--gap-SCOPED-IN-line-up-tNmZ: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-tNmZ: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-tNmZ: var(--contents-background)}[_nghost-%COMP%]{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-line-up-tNmZ);gap:var(--gap-SCOPED-IN-line-up-tNmZ);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-tNmZ)}[_nghost-%COMP%]   .contents[_ngcontent-%COMP%]{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-tNmZ)}[_nghost-%COMP%]   .contents.main[_ngcontent-%COMP%]{overflow:hidden;justify-content:flex-end}[_nghost-%COMP%]   .contents.next[_ngcontent-%COMP%]{overflow:visible;justify-content:flex-start}"], data: { animation: LINE_UP_ANIMATIONS } });
+    }, styles: ["[_nghost-%COMP%]{--gap: 1px;--gap-SCOPED-IN-line-up-kPQ3: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-kPQ3: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-kPQ3: var(--contents-background)}[_nghost-%COMP%]{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-line-up-kPQ3);gap:var(--gap-SCOPED-IN-line-up-kPQ3);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-kPQ3)}[_nghost-%COMP%]   .contents[_ngcontent-%COMP%]{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-kPQ3)}[_nghost-%COMP%]   .contents.main[_ngcontent-%COMP%]{overflow:hidden;justify-content:flex-end}[_nghost-%COMP%]   .contents.next[_ngcontent-%COMP%]{overflow:visible;justify-content:flex-start}"], data: { animation: LINE_UP_ANIMATIONS } });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LineUpFrame, [{
             type: Component,
-            args: [{ selector: 'frames-line-up', changeDetection: ChangeDetectionStrategy.Default, animations: LINE_UP_ANIMATIONS, template: "<div class=\"main contents\" [@visibleHidden]=\"isMainHidden ? 'hidden' : 'visible' \" #main>\n  <ng-content select=\"[main]\"></ng-content>\n</div>\n<div class=\"next contents\" [@pageChange]=\"page\" #next>\n  <ng-content select=\"[next]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-line-up-tNmZ: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-tNmZ: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-tNmZ: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-line-up-tNmZ);gap:var(--gap-SCOPED-IN-line-up-tNmZ);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-tNmZ)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-tNmZ)}:host .contents.main{overflow:hidden;justify-content:flex-end}:host .contents.next{overflow:visible;justify-content:flex-start}\n"] }]
+            args: [{ selector: 'frames-line-up', changeDetection: ChangeDetectionStrategy.Default, animations: LINE_UP_ANIMATIONS, template: "<div class=\"main contents\" [@visibleHidden]=\"isMainHidden ? 'hidden' : 'visible' \" #main>\n  <ng-content select=\"[main]\"></ng-content>\n</div>\n<div class=\"next contents\" [@pageChange]=\"page\" #next>\n  <ng-content select=\"[next]\"></ng-content>\n</div>", styles: [":host{--gap: 1px;--gap-SCOPED-IN-line-up-kPQ3: var(--gap);--background: #ccc;--background-SCOPED-IN-line-up-kPQ3: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-line-up-kPQ3: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-line-up-kPQ3);gap:var(--gap-SCOPED-IN-line-up-kPQ3);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-line-up-kPQ3)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-line-up-kPQ3)}:host .contents.main{overflow:hidden;justify-content:flex-end}:host .contents.next{overflow:visible;justify-content:flex-start}\n"] }]
         }], function () { return [{ type: LineUpService }, { type: i0.ChangeDetectorRef }]; }, { isMainHidden: [{
                 type: HostBinding,
                 args: ['attr.is-main-hidden']

package/fesm2015/ng-atomic-components-frames-overlay-v2.mjs

@@ -53,11 +53,11 @@ OverlayFrame.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayFrame,
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("@hasNext", ctx.hasNext);
         }
-    }, styles: ["[_nghost-%COMP%]{--cell: 8px;--cell-SCOPED-IN-line-overlay-IJEW: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-IJEW: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-IJEW: var(--height)}[_nghost-%COMP%]{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-IJEW);height:var(--height-SCOPED-IN-line-overlay-IJEW)}[_nghost-%COMP%]   .loading[_ngcontent-%COMP%]{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-IJEW);height:var(--height-SCOPED-IN-line-overlay-IJEW);justify-content:center;align-items:center;background-color:#0006}[_nghost-%COMP%]   .main[_ngcontent-%COMP%]{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-IJEW);height:var(--height-SCOPED-IN-line-overlay-IJEW);overflow:hidden}[_nghost-%COMP%]   .main[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--cell: var(--cell-SCOPED-IN-line-overlay-IJEW);--width: var(--width-SCOPED-IN-line-overlay-IJEW);--height: var(--height-SCOPED-IN-line-overlay-IJEW)}[_nghost-%COMP%]   .next[_ngcontent-%COMP%]{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-IJEW);height:auto}[_nghost-%COMP%]   .next[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--cell: var(--cell-SCOPED-IN-line-overlay-IJEW);--width: var(--width-SCOPED-IN-line-overlay-IJEW);--height: var(--height-SCOPED-IN-line-overlay-IJEW)}"], data: { animation: [OVERLAY_ANIMATION] }, changeDetection: 0 });
+    }, styles: ["[_nghost-%COMP%]{--cell: 8px;--cell-SCOPED-IN-line-overlay-GWbQ: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-GWbQ: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-GWbQ: var(--height)}[_nghost-%COMP%]{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-GWbQ);height:var(--height-SCOPED-IN-line-overlay-GWbQ)}[_nghost-%COMP%]   .loading[_ngcontent-%COMP%]{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-GWbQ);height:var(--height-SCOPED-IN-line-overlay-GWbQ);justify-content:center;align-items:center;background-color:#0006}[_nghost-%COMP%]   .main[_ngcontent-%COMP%]{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-GWbQ);height:var(--height-SCOPED-IN-line-overlay-GWbQ);overflow:hidden}[_nghost-%COMP%]   .main[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--cell: var(--cell-SCOPED-IN-line-overlay-GWbQ);--width: var(--width-SCOPED-IN-line-overlay-GWbQ);--height: var(--height-SCOPED-IN-line-overlay-GWbQ)}[_nghost-%COMP%]   .next[_ngcontent-%COMP%]{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-GWbQ);height:auto}[_nghost-%COMP%]   .next[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--cell: var(--cell-SCOPED-IN-line-overlay-GWbQ);--width: var(--width-SCOPED-IN-line-overlay-GWbQ);--height: var(--height-SCOPED-IN-line-overlay-GWbQ)}"], data: { animation: [OVERLAY_ANIMATION] }, changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayFrame, [{
             type: Component,
-            args: [{ selector: 'frames-overlay', animations: [OVERLAY_ANIMATION], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"main\">\n    <ng-content select=[main]></ng-content>\n</div>\n<div class=\"next\" [@hasNext]=\"hasNext\">\n    <ng-content select=[next]></ng-content>\n</div>", styles: [":host{--cell: 8px;--cell-SCOPED-IN-line-overlay-IJEW: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-IJEW: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-IJEW: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-IJEW);height:var(--height-SCOPED-IN-line-overlay-IJEW)}:host .loading{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-IJEW);height:var(--height-SCOPED-IN-line-overlay-IJEW);justify-content:center;align-items:center;background-color:#0006}:host .main{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-IJEW);height:var(--height-SCOPED-IN-line-overlay-IJEW);overflow:hidden}:host .main *{--cell: var(--cell-SCOPED-IN-line-overlay-IJEW);--width: var(--width-SCOPED-IN-line-overlay-IJEW);--height: var(--height-SCOPED-IN-line-overlay-IJEW)}:host .next{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-IJEW);height:auto}:host .next *{--cell: var(--cell-SCOPED-IN-line-overlay-IJEW);--width: var(--width-SCOPED-IN-line-overlay-IJEW);--height: var(--height-SCOPED-IN-line-overlay-IJEW)}\n"] }]
+            args: [{ selector: 'frames-overlay', animations: [OVERLAY_ANIMATION], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"main\">\n    <ng-content select=[main]></ng-content>\n</div>\n<div class=\"next\" [@hasNext]=\"hasNext\">\n    <ng-content select=[next]></ng-content>\n</div>", styles: [":host{--cell: 8px;--cell-SCOPED-IN-line-overlay-GWbQ: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-GWbQ: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-GWbQ: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-GWbQ);height:var(--height-SCOPED-IN-line-overlay-GWbQ)}:host .loading{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-GWbQ);height:var(--height-SCOPED-IN-line-overlay-GWbQ);justify-content:center;align-items:center;background-color:#0006}:host .main{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-GWbQ);height:var(--height-SCOPED-IN-line-overlay-GWbQ);overflow:hidden}:host .main *{--cell: var(--cell-SCOPED-IN-line-overlay-GWbQ);--width: var(--width-SCOPED-IN-line-overlay-GWbQ);--height: var(--height-SCOPED-IN-line-overlay-GWbQ)}:host .next{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-GWbQ);height:auto}:host .next *{--cell: var(--cell-SCOPED-IN-line-overlay-GWbQ);--width: var(--width-SCOPED-IN-line-overlay-GWbQ);--height: var(--height-SCOPED-IN-line-overlay-GWbQ)}\n"] }]
         }], null, { hasNext: [{
                 type: Input
             }] });

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

@@ -69,11 +69,11 @@ OverlayFrame.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverlayFrame,
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("@routeAnimations", ctx.prepareRoute(ctx.outlet));
         }
-    }, directives: [i1.NgIf, i2.MatProgressSpinner], styles: ["[_nghost-%COMP%]{--cell: 8px;--cell-SCOPED-IN-line-overlay-96pv: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-96pv: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-96pv: var(--height)}[_nghost-%COMP%]{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-96pv);height:var(--height-SCOPED-IN-line-overlay-96pv)}[_nghost-%COMP%]   .loading[_ngcontent-%COMP%]{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-96pv);height:var(--height-SCOPED-IN-line-overlay-96pv);justify-content:center;align-items:center;background-color:#0006}[_nghost-%COMP%]   .main.page[_ngcontent-%COMP%]{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-96pv);height:var(--height-SCOPED-IN-line-overlay-96pv);overflow:hidden}[_nghost-%COMP%]   .main.page[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--cell: var(--cell-SCOPED-IN-line-overlay-96pv);--width: var(--width-SCOPED-IN-line-overlay-96pv);--height: var(--height-SCOPED-IN-line-overlay-96pv)}[_nghost-%COMP%]   .next.page[_ngcontent-%COMP%]{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-96pv);height:auto}[_nghost-%COMP%]   .next.page[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--cell: var(--cell-SCOPED-IN-line-overlay-96pv);--width: var(--width-SCOPED-IN-line-overlay-96pv);--height: var(--height-SCOPED-IN-line-overlay-96pv)}"], data: { animation: [slideInAnimation] } });
+    }, directives: [i1.NgIf, i2.MatProgressSpinner], styles: ["[_nghost-%COMP%]{--cell: 8px;--cell-SCOPED-IN-line-overlay-i0Wk: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-i0Wk: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-i0Wk: var(--height)}[_nghost-%COMP%]{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-i0Wk);height:var(--height-SCOPED-IN-line-overlay-i0Wk)}[_nghost-%COMP%]   .loading[_ngcontent-%COMP%]{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-i0Wk);height:var(--height-SCOPED-IN-line-overlay-i0Wk);justify-content:center;align-items:center;background-color:#0006}[_nghost-%COMP%]   .main.page[_ngcontent-%COMP%]{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-i0Wk);height:var(--height-SCOPED-IN-line-overlay-i0Wk);overflow:hidden}[_nghost-%COMP%]   .main.page[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--cell: var(--cell-SCOPED-IN-line-overlay-i0Wk);--width: var(--width-SCOPED-IN-line-overlay-i0Wk);--height: var(--height-SCOPED-IN-line-overlay-i0Wk)}[_nghost-%COMP%]   .next.page[_ngcontent-%COMP%]{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-i0Wk);height:auto}[_nghost-%COMP%]   .next.page[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--cell: var(--cell-SCOPED-IN-line-overlay-i0Wk);--width: var(--width-SCOPED-IN-line-overlay-i0Wk);--height: var(--height-SCOPED-IN-line-overlay-i0Wk)}"], data: { animation: [slideInAnimation] } });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayFrame, [{
             type: Component,
-            args: [{ selector: 'frames-overlay', animations: [slideInAnimation], template: "<div class=\"loading\" *ngIf=\"isLoading\">\n    <mat-spinner></mat-spinner>\n</div>\n<div class=\"main page\">\n    <ng-content select=[mainPage]></ng-content>\n</div>\n<div class=\"next page\" [@routeAnimations]=\"prepareRoute(outlet)\">\n    <ng-content select=[nextPage]></ng-content>\n</div>", styles: [":host{--cell: 8px;--cell-SCOPED-IN-line-overlay-96pv: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-96pv: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-96pv: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-96pv);height:var(--height-SCOPED-IN-line-overlay-96pv)}:host .loading{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-96pv);height:var(--height-SCOPED-IN-line-overlay-96pv);justify-content:center;align-items:center;background-color:#0006}:host .main.page{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-96pv);height:var(--height-SCOPED-IN-line-overlay-96pv);overflow:hidden}:host .main.page *{--cell: var(--cell-SCOPED-IN-line-overlay-96pv);--width: var(--width-SCOPED-IN-line-overlay-96pv);--height: var(--height-SCOPED-IN-line-overlay-96pv)}:host .next.page{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-96pv);height:auto}:host .next.page *{--cell: var(--cell-SCOPED-IN-line-overlay-96pv);--width: var(--width-SCOPED-IN-line-overlay-96pv);--height: var(--height-SCOPED-IN-line-overlay-96pv)}\n"] }]
+            args: [{ selector: 'frames-overlay', animations: [slideInAnimation], template: "<div class=\"loading\" *ngIf=\"isLoading\">\n    <mat-spinner></mat-spinner>\n</div>\n<div class=\"main page\">\n    <ng-content select=[mainPage]></ng-content>\n</div>\n<div class=\"next page\" [@routeAnimations]=\"prepareRoute(outlet)\">\n    <ng-content select=[nextPage]></ng-content>\n</div>", styles: [":host{--cell: 8px;--cell-SCOPED-IN-line-overlay-i0Wk: var(--cell);--width: 100%;--width-SCOPED-IN-line-overlay-i0Wk: var(--width);--height: 100%;--height-SCOPED-IN-line-overlay-i0Wk: var(--height)}:host{position:relative;display:block;width:var(--width-SCOPED-IN-line-overlay-i0Wk);height:var(--height-SCOPED-IN-line-overlay-i0Wk)}:host .loading{position:absolute;z-index:1000;top:0;left:0;display:flex;width:var(--width-SCOPED-IN-line-overlay-i0Wk);height:var(--height-SCOPED-IN-line-overlay-i0Wk);justify-content:center;align-items:center;background-color:#0006}:host .main.page{position:absolute;top:0;left:0;z-index:1;width:var(--width-SCOPED-IN-line-overlay-i0Wk);height:var(--height-SCOPED-IN-line-overlay-i0Wk);overflow:hidden}:host .main.page *{--cell: var(--cell-SCOPED-IN-line-overlay-i0Wk);--width: var(--width-SCOPED-IN-line-overlay-i0Wk);--height: var(--height-SCOPED-IN-line-overlay-i0Wk)}:host .next.page{position:absolute;top:0;left:0;z-index:2;width:var(--width-SCOPED-IN-line-overlay-i0Wk);height:auto}:host .next.page *{--cell: var(--cell-SCOPED-IN-line-overlay-i0Wk);--width: var(--width-SCOPED-IN-line-overlay-i0Wk);--height: var(--height-SCOPED-IN-line-overlay-i0Wk)}\n"] }]
         }], null, { outlet: [{
                 type: Input
             }], isLoading: [{

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

@@ -19,11 +19,11 @@ ScrollFrame.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ScrollFrame, se
             i0.ɵɵprojection(3, 1);
             i0.ɵɵelementEnd();
         }
-    }, directives: [i1.IosSafariScrollBuggyfillDirective], styles: ["[_nghost-%COMP%]{--height: 100%;--height-SCOPED-IN-scroll-MRqc: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-MRqc: var(--navigator-height)}[_nghost-%COMP%]{height:var(--height-SCOPED-IN-scroll-MRqc);overflow:hidden}[_nghost-%COMP%]   .navigator-container[_ngcontent-%COMP%]{height:var(--navigator-height-SCOPED-IN-scroll-MRqc);overflow:hidden;touch-action:none}[_nghost-%COMP%]   .contents-container[_ngcontent-%COMP%]{height:calc(var(--height-SCOPED-IN-scroll-MRqc) - var(--navigator-height-SCOPED-IN-scroll-MRqc));overflow:scroll;-webkit-overflow-scrolling:touch}"], changeDetection: 0 });
+    }, directives: [i1.IosSafariScrollBuggyfillDirective], styles: ["[_nghost-%COMP%]{--height: 100%;--height-SCOPED-IN-scroll-75U5: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-75U5: var(--navigator-height)}[_nghost-%COMP%]{height:var(--height-SCOPED-IN-scroll-75U5);overflow:hidden}[_nghost-%COMP%]   .navigator-container[_ngcontent-%COMP%]{height:var(--navigator-height-SCOPED-IN-scroll-75U5);overflow:hidden;touch-action:none}[_nghost-%COMP%]   .contents-container[_ngcontent-%COMP%]{height:calc(var(--height-SCOPED-IN-scroll-75U5) - var(--navigator-height-SCOPED-IN-scroll-75U5));overflow:scroll;-webkit-overflow-scrolling:touch}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ScrollFrame, [{
             type: Component,
-            args: [{ selector: 'frames-scroll', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navigator-container\" iosSafariScrollBuggyfill>\n  <ng-content select=[navigator]></ng-content>\n</div>\n<div class=\"contents-container\">\n  <ng-content select=[contents]></ng-content>\n</div>", styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-MRqc: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-MRqc: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-MRqc);overflow:hidden}:host .navigator-container{height:var(--navigator-height-SCOPED-IN-scroll-MRqc);overflow:hidden;touch-action:none}:host .contents-container{height:calc(var(--height-SCOPED-IN-scroll-MRqc) - var(--navigator-height-SCOPED-IN-scroll-MRqc));overflow:scroll;-webkit-overflow-scrolling:touch}\n"] }]
+            args: [{ selector: 'frames-scroll', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navigator-container\" iosSafariScrollBuggyfill>\n  <ng-content select=[navigator]></ng-content>\n</div>\n<div class=\"contents-container\">\n  <ng-content select=[contents]></ng-content>\n</div>", styles: [":host{--height: 100%;--height-SCOPED-IN-scroll-75U5: var(--height);--navigator-height: 56px;--navigator-height-SCOPED-IN-scroll-75U5: var(--navigator-height)}:host{height:var(--height-SCOPED-IN-scroll-75U5);overflow:hidden}:host .navigator-container{height:var(--navigator-height-SCOPED-IN-scroll-75U5);overflow:hidden;touch-action:none}:host .contents-container{height:calc(var(--height-SCOPED-IN-scroll-75U5) - var(--navigator-height-SCOPED-IN-scroll-75U5));overflow:scroll;-webkit-overflow-scrolling:touch}\n"] }]
         }], null, null);
 })();
 

package/fesm2015/ng-atomic-components-frames-smart-menu.mjs

@@ -40,11 +40,11 @@ SmartMenuFrame.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SmartMenuFra
             i0.ɵɵprojection(5, 1);
             i0.ɵɵelementEnd();
         }
-    }, styles: ["[_nghost-%COMP%]{--gap: 1px;--gap-SCOPED-IN-smart-menu-6aNB: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-6aNB: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-6aNB: var(--contents-background)}[_nghost-%COMP%]{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-smart-menu-6aNB);gap:var(--gap-SCOPED-IN-smart-menu-6aNB);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-6aNB)}[_nghost-%COMP%]   .contents[_ngcontent-%COMP%]{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-6aNB)}[_nghost-%COMP%]   .contents.menu[_ngcontent-%COMP%]{overflow:hidden;justify-content:flex-end}[_nghost-%COMP%]   .contents.contents[_ngcontent-%COMP%]{overflow:visible;justify-content:flex-start}"], changeDetection: 0 });
+    }, styles: ["[_nghost-%COMP%]{--gap: 1px;--gap-SCOPED-IN-smart-menu-a5re: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-a5re: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-a5re: var(--contents-background)}[_nghost-%COMP%]{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-smart-menu-a5re);gap:var(--gap-SCOPED-IN-smart-menu-a5re);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-a5re)}[_nghost-%COMP%]   .contents[_ngcontent-%COMP%]{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-a5re)}[_nghost-%COMP%]   .contents.menu[_ngcontent-%COMP%]{overflow:hidden;justify-content:flex-end}[_nghost-%COMP%]   .contents.contents[_ngcontent-%COMP%]{overflow:visible;justify-content:flex-start}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmartMenuFrame, [{
             type: Component,
-            args: [{ 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-6aNB: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-6aNB: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-6aNB: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-smart-menu-6aNB);gap:var(--gap-SCOPED-IN-smart-menu-6aNB);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-6aNB)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-6aNB)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"] }]
+            args: [{ 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-a5re: var(--gap);--background: #ccc;--background-SCOPED-IN-smart-menu-a5re: var(--background);--contents-background: transparent;--contents-background-SCOPED-IN-smart-menu-a5re: var(--contents-background)}:host{position:relative;display:flex;justify-content:flex-start;grid-gap:var(--gap-SCOPED-IN-smart-menu-a5re);gap:var(--gap-SCOPED-IN-smart-menu-a5re);width:-moz-fit-content;width:fit-content;height:100%;background:var(--background-SCOPED-IN-smart-menu-a5re)}:host .contents{display:flex;max-width:-moz-fit-content;max-width:fit-content;height:100%;background:var(--contents-background-SCOPED-IN-smart-menu-a5re)}:host .contents.menu{overflow:hidden;justify-content:flex-end}:host .contents.contents{overflow:visible;justify-content:flex-start}\n"] }]
         }], null, { isMainHidden: [{
                 type: HostBinding,
                 args: ['attr.is-main-hidden']

package/fesm2015/ng-atomic-components-molecules-date-input-field.mjs

@@ -59,11 +59,11 @@ DateInputFieldMolecule.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Date
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.hint);
         }
-    }, directives: [i1.MatFormField, i1.MatLabel, i2.MatInput, i3.DefaultValueAccessor, i4.MatDatepickerInput, i3.NgControlStatus, i3.FormControlDirective, i4.MatDatepickerToggle, i1.MatSuffix, i4.MatDatepicker, i5.NgIf, i1.MatHint], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-gDRF: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%}[_nghost-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
+    }, directives: [i1.MatFormField, i1.MatLabel, i2.MatInput, i3.DefaultValueAccessor, i4.MatDatepickerInput, i3.NgControlStatus, i3.FormControlDirective, i4.MatDatepickerToggle, i1.MatSuffix, i4.MatDatepicker, i5.NgIf, i1.MatHint], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-I6o9: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%}[_nghost-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateInputFieldMolecule, [{
             type: Component,
-            args: [{ selector: 'molecules-date-input-field', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule field' }, template: "<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput [formControl]=\"control\" [placeholder]=\"placeholder\" [matDatepicker]=\"picker\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint *ngIf=\"hint\">{{ hint }}</mat-hint>\n</mat-form-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-gDRF: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'molecules-date-input-field', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule field' }, template: "<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput [formControl]=\"control\" [placeholder]=\"placeholder\" [matDatepicker]=\"picker\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-hint *ngIf=\"hint\">{{ hint }}</mat-hint>\n</mat-form-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-I6o9: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }], null, { _control: [{
                 type: Input,
                 args: ['control']

package/fesm2015/ng-atomic-components-molecules-navigation-list-item.mjs

@@ -0,0 +1,87 @@
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import * as i1 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i2 from '@ng-atomic/components/atoms/icon';
+import { IconModule } from '@ng-atomic/components/atoms/icon';
+import * as i3 from '@angular/material/core';
+import { CommonModule } from '@angular/common';
+
+class NavigationListItemMolecule {
+    constructor() {
+        this.selected = false;
+    }
+}
+NavigationListItemMolecule.ɵfac = function NavigationListItemMolecule_Factory(t) { return new (t || NavigationListItemMolecule)(); };
+NavigationListItemMolecule.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationListItemMolecule, selectors: [["molecules-navigation-list-item"]], inputs: { item: "item", selected: "selected" }, decls: 4, vars: 5, consts: [[3, "value", "selected"], ["mat-list-icon", "", 3, "name", "color"], ["mat-line", ""]], template: function NavigationListItemMolecule_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "mat-list-option", 0);
+            i0.ɵɵelement(1, "atoms-icon", 1);
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd()();
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("value", ctx.item.id)("selected", ctx.selected);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("name", ctx.item == null ? null : ctx.item.icon)("color", ctx.item == null ? null : ctx.item.color);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.item.name);
+        }
+    }, directives: [i1.MatListOption, i2.IconAtom, i1.MatListIconCssMatStyler, i3.MatLine], styles: [":host{display:block}\n"], encapsulation: 2, changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationListItemMolecule, [{
+            type: Component,
+            args: [{ selector: 'molecules-navigation-list-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-option [value]=\"item.id\" [selected]=\"selected\">\n  <atoms-icon mat-list-icon [name]=\"item?.icon\" [color]=\"item?.color\"></atoms-icon>\n  <div mat-line>{{item.name}}</div>\n</mat-list-option>", styles: [":host{display:block}\n"] }]
+        }], null, { item: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }] });
+})();
+
+class NavigationListItemModule {
+}
+NavigationListItemModule.ɵfac = function NavigationListItemModule_Factory(t) { return new (t || NavigationListItemModule)(); };
+NavigationListItemModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NavigationListItemModule });
+NavigationListItemModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
+            CommonModule,
+            // Materials
+            MatListModule,
+            // Atoms
+            IconModule,
+        ]] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationListItemModule, [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        NavigationListItemMolecule
+                    ],
+                    imports: [
+                        CommonModule,
+                        // Materials
+                        MatListModule,
+                        // Atoms
+                        IconModule,
+                    ],
+                    exports: [
+                        NavigationListItemMolecule
+                    ]
+                }]
+        }], null, null);
+})();
+(function () {
+    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NavigationListItemModule, { declarations: [NavigationListItemMolecule], imports: [CommonModule,
+            // Materials
+            MatListModule,
+            // Atoms
+            IconModule], exports: [NavigationListItemMolecule] });
+})();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavigationListItemModule, NavigationListItemMolecule };
+//# sourceMappingURL=ng-atomic-components-molecules-navigation-list-item.mjs.map

package/fesm2015/ng-atomic-components-molecules-navigation-list-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-molecules-navigation-list-item.mjs","sources":["../../../../libs/components/src/molecules/navigation-list-item/navigation-list-item.molecule.ts","../../../../libs/components/src/molecules/navigation-list-item/navigation-list-item.molecule.html","../../../../libs/components/src/molecules/navigation-list-item/navigation-list-item.module.ts","../../../../libs/components/src/molecules/navigation-list-item/ng-atomic-components-molecules-navigation-list-item.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core';\nimport { ActionItem } from '@ng-atomic/common/models';\n\n@Component({\n  selector: 'molecules-navigation-list-item',\n  templateUrl: './navigation-list-item.molecule.html',\n  styleUrls: ['./navigation-list-item.molecule.scss'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NavigationListItemMolecule {\n\n  @Input()\n  item!: ActionItem;\n\n  @Input()\n  selected = false;\n\n}\n","<mat-list-option [value]=\"item.id\" [selected]=\"selected\">\n  <atoms-icon mat-list-icon [name]=\"item?.icon\" [color]=\"item?.color\"></atoms-icon>\n  <div mat-line>{{item.name}}</div>\n</mat-list-option>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatListModule } from '@angular/material/list';\nimport { IconModule } from '@ng-atomic/components/atoms/icon';\n\nimport { NavigationListItemMolecule } from './navigation-list-item.molecule';\n\n\n\n@NgModule({\n  declarations: [\n    NavigationListItemMolecule\n  ],\n  imports: [\n    CommonModule,\n    // Materials\n    MatListModule,\n    // Atoms\n    IconModule,\n  ],\n  exports: [\n    NavigationListItemMolecule\n  ]\n})\nexport class NavigationListItemModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/ng-atomic-components-molecules-select-input-field.mjs

@@ -49,11 +49,11 @@ SelectInputFieldMolecule.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Se
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngForOf", ctx.options)("ngForTrackBy", ctx.value);
         }
-    }, directives: [i1.MatFormField, i1.MatLabel, i2.MatSelect, i3.NgControlStatus, i3.FormControlDirective, i4.NgForOf, i5.MatOption], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-FwHQ: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%}[_nghost-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
+    }, directives: [i1.MatFormField, i1.MatLabel, i2.MatSelect, i3.NgControlStatus, i3.FormControlDirective, i4.NgForOf, i5.MatOption], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-uUS9: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%}[_nghost-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectInputFieldMolecule, [{
             type: Component,
-            args: [{ selector: 'molecules-select-input-field', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule input-field field' }, template: "<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]=\"control\">\n    <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-FwHQ: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'molecules-select-input-field', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule input-field field' }, template: "<mat-form-field appearance=\"outline\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [formControl]=\"control\">\n    <mat-option *ngFor=\"let option of options; trackBy value;\" [value]=\"option.value\">\n      {{ option.name }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-select-input-field-uUS9: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }], null, { label: [{
                 type: Input
             }], control: [{

package/fesm2015/ng-atomic-components-organisms-action-buttons-section.mjs

@@ -36,11 +36,11 @@ ActionButtonsSectionOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
         if (rf & 2) {
             i0.ɵɵproperty("ngForOf", ctx.actionItems)("ngForTrackBy", ctx.trackById);
         }
-    }, directives: [i1.NgForOf, i2.MatButton], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-action-buttons-section-Ktaz: var(--horizontal-padding)}[_nghost-%COMP%]{display:flex;flex-direction:row;grid-gap:8px;gap:8px;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-action-buttons-section-Ktaz);box-sizing:border-box}[_nghost-%COMP%]   button[_ngcontent-%COMP%]{width:100%;height:48px}"], changeDetection: 0 });
+    }, directives: [i1.NgForOf, i2.MatButton], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-action-buttons-section-ldwv: var(--horizontal-padding)}[_nghost-%COMP%]{display:flex;flex-direction:row;grid-gap:8px;gap:8px;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-action-buttons-section-ldwv);box-sizing:border-box}[_nghost-%COMP%]   button[_ngcontent-%COMP%]{width:100%;height:48px}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionButtonsSectionOrganism, [{
             type: Component,
-            args: [{ selector: 'organisms-action-buttons-section', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'organism section' }, template: "<ng-container *ngFor=\"let item of actionItems; trackBy: trackById\">\n  <button mat-raised-button color=\"primary\" (click)=\"actionItemClick.emit([item])\">{{ item?.name }}</button>\n</ng-container>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-action-buttons-section-Ktaz: var(--horizontal-padding)}:host{display:flex;flex-direction:row;grid-gap:8px;gap:8px;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-action-buttons-section-Ktaz);box-sizing:border-box}:host button{width:100%;height:48px}\n"] }]
+            args: [{ selector: 'organisms-action-buttons-section', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'organism section' }, template: "<ng-container *ngFor=\"let item of actionItems; trackBy: trackById\">\n  <button mat-raised-button color=\"primary\" (click)=\"actionItemClick.emit([item])\">{{ item?.name }}</button>\n</ng-container>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-action-buttons-section-ldwv: var(--horizontal-padding)}:host{display:flex;flex-direction:row;grid-gap:8px;gap:8px;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-action-buttons-section-ldwv);box-sizing:border-box}:host button{width:100%;height:48px}\n"] }]
         }], null, { actionItems: [{
                 type: Input
             }], actionItemClick: [{

package/fesm2015/ng-atomic-components-organisms-back-navigator.mjs

@@ -54,11 +54,11 @@ BackNavigatorOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BackN
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("actionItems", ctx.actionItems);
         }
-    }, directives: [i1.MatToolbar, i2.NgIf, i3.MatButton, i4.MatIcon, i5.SmartMenuButtonAtom], styles: ["[_nghost-%COMP%]{--height: 64px;--height-SCOPED-IN-back-navigator-6A91: var(--height)}[_nghost-%COMP%]{display:block;width:100%;height:var(--height-SCOPED-IN-back-navigator-6A91)}[_nghost-%COMP%]   div.text[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}[_nghost-%COMP%]   div.text[_ngcontent-%COMP%]   .description[_ngcontent-%COMP%]{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}[_nghost-%COMP%]   div[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}"], changeDetection: 0 });
+    }, directives: [i1.MatToolbar, i2.NgIf, i3.MatButton, i4.MatIcon, i5.SmartMenuButtonAtom], styles: ["[_nghost-%COMP%]{--height: 64px;--height-SCOPED-IN-back-navigator-WqjW: var(--height)}[_nghost-%COMP%]{display:block;width:100%;height:var(--height-SCOPED-IN-back-navigator-WqjW)}[_nghost-%COMP%]   div.text[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}[_nghost-%COMP%]   div.text[_ngcontent-%COMP%]   .description[_ngcontent-%COMP%]{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}[_nghost-%COMP%]   div[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BackNavigatorOrganism, [{
             type: Component,
-            args: [{ selector: 'organisms-back-navigator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar color=\"primary\">\n  <div>\n    <button mat-icon-button *ngIf=\"canBack\" (click)=\"backButtonClick.emit()\">\n      <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"text\">\n      <span class=\"title\">{{ title || '' }}</span>\n      <span class=\"description\">{{ description || '' }}</span>\n    </div>\n  </div>\n  <div>\n    <atoms-smart-menu-button\n      [actionItems]=\"actionItems\"\n      (actionItemClick)=\"actionItemClick.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--height: 64px;--height-SCOPED-IN-back-navigator-6A91: var(--height)}:host{display:block;width:100%;height:var(--height-SCOPED-IN-back-navigator-6A91)}:host div.text{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}:host div.text .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}:host mat-toolbar{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}:host div{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: 'organisms-back-navigator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar color=\"primary\">\n  <div>\n    <button mat-icon-button *ngIf=\"canBack\" (click)=\"backButtonClick.emit()\">\n      <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"text\">\n      <span class=\"title\">{{ title || '' }}</span>\n      <span class=\"description\">{{ description || '' }}</span>\n    </div>\n  </div>\n  <div>\n    <atoms-smart-menu-button\n      [actionItems]=\"actionItems\"\n      (actionItemClick)=\"actionItemClick.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--height: 64px;--height-SCOPED-IN-back-navigator-WqjW: var(--height)}:host{display:block;width:100%;height:var(--height-SCOPED-IN-back-navigator-WqjW)}:host div.text{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}:host div.text .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}:host mat-toolbar{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}:host div{display:flex;justify-content:center;align-items:center}\n"] }]
         }], null, { canBack: [{
                 type: Input
             }], title: [{

package/fesm2015/ng-atomic-components-organisms-card-input-section.mjs

@@ -20,11 +20,11 @@ CardInputSectionOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ca
         if (rf & 2) {
             i0.ɵɵproperty("control", ctx.control)("label", ctx.label)("placeholder", ctx.placeholder);
         }
-    }, directives: [i1.TextInputFieldMolecule], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-xDr0: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-xDr0);box-sizing:border-box}[_nghost-%COMP%]   .molecule.input-field[_ngcontent-%COMP%], [_nghost-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
+    }, directives: [i1.TextInputFieldMolecule], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-wsrm: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-wsrm);box-sizing:border-box}[_nghost-%COMP%]   .molecule.input-field[_ngcontent-%COMP%], [_nghost-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CardInputSectionOrganism, [{
             type: Component,
-            args: [{ selector: 'organisms-card-input-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<molecules-text-input-field\n  type=\"text\"\n  name=\"cardNumber\"\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-xDr0: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-xDr0);box-sizing:border-box}:host .molecule.input-field,:host mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'organisms-card-input-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<molecules-text-input-field\n  type=\"text\"\n  name=\"cardNumber\"\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-wsrm: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-wsrm);box-sizing:border-box}:host .molecule.input-field,:host mat-form-field{width:100%}\n"] }]
         }], null, { control: [{
                 type: Input
             }], label: [{

package/fesm2015/ng-atomic-components-organisms-cvc-and-exp-input-section.mjs

@@ -34,11 +34,11 @@ CvcAndExpInputSectionOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("control", ctx.form.get("cvc"));
         }
-    }, directives: [i1.SelectInputFieldMolecule, i2.TextInputFieldMolecule], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-i5Si: var(--horizontal-padding)}[_nghost-%COMP%]{display:flex;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-i5Si);box-sizing:border-box}[_nghost-%COMP%]   .field[_ngcontent-%COMP%]:not(:first-child){margin-left:8px}[_nghost-%COMP%]   .year.field[_ngcontent-%COMP%], [_nghost-%COMP%]   .month.field[_ngcontent-%COMP%]{width:auto}[_nghost-%COMP%]   .cvc.field[_ngcontent-%COMP%]{width:100px}"], changeDetection: 0 });
+    }, directives: [i1.SelectInputFieldMolecule, i2.TextInputFieldMolecule], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-3gOv: var(--horizontal-padding)}[_nghost-%COMP%]{display:flex;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-3gOv);box-sizing:border-box}[_nghost-%COMP%]   .field[_ngcontent-%COMP%]:not(:first-child){margin-left:8px}[_nghost-%COMP%]   .year.field[_ngcontent-%COMP%], [_nghost-%COMP%]   .month.field[_ngcontent-%COMP%]{width:auto}[_nghost-%COMP%]   .cvc.field[_ngcontent-%COMP%]{width:100px}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CvcAndExpInputSectionOrganism, [{
             type: Component,
-            args: [{ selector: 'organisms-cvc-and-exp-input-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<molecules-select-input-field\n  class=\"year field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u5E74)\"\n  [control]=\"form.get('expYear')\"\n  [options]=\"yearOptions\"\n></molecules-select-input-field>\n<molecules-select-input-field\n  class=\"month field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u6708)\"\n  [control]=\"form.get('expMonth')\"\n  [options]=\"monthOptions\"\n></molecules-select-input-field>\n<molecules-text-input-field\n  class=\"cvc field\"\n  type=\"text\"\n  name=\"cardNumber\"\n  label=\"CVC\"\n  placeholder=\"4\u6841\u306E\u756A\u53F7\"\n  [control]=\"form.get('cvc')\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-i5Si: var(--horizontal-padding)}:host{display:flex;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-i5Si);box-sizing:border-box}:host .field:not(:first-child){margin-left:8px}:host .year.field,:host .month.field{width:auto}:host .cvc.field{width:100px}\n"] }]
+            args: [{ selector: 'organisms-cvc-and-exp-input-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<molecules-select-input-field\n  class=\"year field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u5E74)\"\n  [control]=\"form.get('expYear')\"\n  [options]=\"yearOptions\"\n></molecules-select-input-field>\n<molecules-select-input-field\n  class=\"month field\"\n  label=\"\u6709\u52B9\u671F\u9650(\u6708)\"\n  [control]=\"form.get('expMonth')\"\n  [options]=\"monthOptions\"\n></molecules-select-input-field>\n<molecules-text-input-field\n  class=\"cvc field\"\n  type=\"text\"\n  name=\"cardNumber\"\n  label=\"CVC\"\n  placeholder=\"4\u6841\u306E\u756A\u53F7\"\n  [control]=\"form.get('cvc')\"\n></molecules-text-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-3gOv: var(--horizontal-padding)}:host{display:flex;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-3gOv);box-sizing:border-box}:host .field:not(:first-child){margin-left:8px}:host .year.field,:host .month.field{width:auto}:host .cvc.field{width:100px}\n"] }]
         }], null, { form: [{
                 type: Input
             }] });

package/fesm2015/ng-atomic-components-organisms-date-input-section.mjs

@@ -20,11 +20,11 @@ DateInputSectionOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Da
         if (rf & 2) {
             i0.ɵɵproperty("control", ctx.control)("label", ctx.label)("placeholder", ctx.placeholder);
         }
-    }, directives: [i1.DateInputFieldMolecule], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-section-Ih97: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-date-input-section-Ih97);box-sizing:border-box}[_nghost-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
+    }, directives: [i1.DateInputFieldMolecule], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-section-HAb6: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-date-input-section-HAb6);box-sizing:border-box}[_nghost-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateInputSectionOrganism, [{
             type: Component,
-            args: [{ selector: 'organisms-date-input-section', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'organism section' }, template: "<molecules-date-input-field\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-date-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-section-Ih97: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-date-input-section-Ih97);box-sizing:border-box}:host mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'organisms-date-input-section', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'organism section' }, template: "<molecules-date-input-field\n  [control]=\"control\"\n  [label]=\"label\"\n  [placeholder]=\"placeholder\"\n></molecules-date-input-field>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-section-HAb6: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-date-input-section-HAb6);box-sizing:border-box}:host mat-form-field{width:100%}\n"] }]
         }], null, { control: [{
                 type: Input
             }], label: [{

package/fesm2015/ng-atomic-components-organisms-heading.mjs

@@ -150,11 +150,11 @@ HeadingOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeadingOrga
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngSwitchCase", 6);
         }
-    }, directives: [i1.NgSwitch, i1.NgSwitchDefault, i1.NgTemplateOutlet, i1.NgSwitchCase], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-heading-NBHh: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%;box-sizing:border-box;padding:0 var(--horizontal-padding-SCOPED-IN-heading-NBHh)}"], changeDetection: 0 });
+    }, directives: [i1.NgSwitch, i1.NgSwitchDefault, i1.NgTemplateOutlet, i1.NgSwitchCase], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-heading-hf6J: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%;box-sizing:border-box;padding:0 var(--horizontal-padding-SCOPED-IN-heading-hf6J)}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeadingOrganism, [{
             type: Component,
-            args: [{ selector: 'organisms-heading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #temp><ng-content></ng-content></ng-template>\n\n<ng-container [ngSwitch]=\"level\">\n  <h1 *ngSwitchDefault><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h1>\n  <h2 *ngSwitchCase=\"2\"><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h2>\n  <h3 *ngSwitchCase=\"3\"><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h3>\n  <h4 *ngSwitchCase=\"4\"><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h4>\n  <h5 *ngSwitchCase=\"5\"><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h5>\n  <h6 *ngSwitchCase=\"6\"><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h6>\n</ng-container>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-heading-NBHh: var(--horizontal-padding)}:host{display:block;width:100%;box-sizing:border-box;padding:0 var(--horizontal-padding-SCOPED-IN-heading-NBHh)}\n"] }]
+            args: [{ selector: 'organisms-heading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #temp><ng-content></ng-content></ng-template>\n\n<ng-container [ngSwitch]=\"level\">\n  <h1 *ngSwitchDefault><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h1>\n  <h2 *ngSwitchCase=\"2\"><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h2>\n  <h3 *ngSwitchCase=\"3\"><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h3>\n  <h4 *ngSwitchCase=\"4\"><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h4>\n  <h5 *ngSwitchCase=\"5\"><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h5>\n  <h6 *ngSwitchCase=\"6\"><ng-container *ngTemplateOutlet=\"temp;\"></ng-container></h6>\n</ng-container>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-heading-hf6J: var(--horizontal-padding)}:host{display:block;width:100%;box-sizing:border-box;padding:0 var(--horizontal-padding-SCOPED-IN-heading-hf6J)}\n"] }]
         }], null, { level: [{
                 type: Input
             }] });

package/fesm2015/ng-atomic-components-organisms-navigation-list.mjs

@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@ng-atomic/components/molecules/navigation-list-item';
+import { NavigationListItemModule } from '@ng-atomic/components/molecules/navigation-list-item';
+
+function NavigationListOrganism_molecules_navigation_list_item_1_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r3 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "molecules-navigation-list-item", 2);
+        i0.ɵɵlistener("click", function NavigationListOrganism_molecules_navigation_list_item_1_Template_molecules_navigation_list_item_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r3); const item_r1 = restoredCtx.$implicit; const ctx_r2 = i0.ɵɵnextContext(); return ctx_r2.action.emit(item_r1.id); });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const item_r1 = ctx.$implicit;
+        i0.ɵɵproperty("item", item_r1);
+    }
+}
+class NavigationListOrganism {
+    constructor() {
+        this.items = [];
+        this.action = new EventEmitter();
+    }
+}
+NavigationListOrganism.ɵfac = function NavigationListOrganism_Factory(t) { return new (t || NavigationListOrganism)(); };
+NavigationListOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationListOrganism, selectors: [["organisms-navigation-list"]], inputs: { items: "items" }, outputs: { action: "action" }, decls: 2, vars: 2, consts: [[3, "multiple"], [3, "item", "click", 4, "ngFor", "ngForOf"], [3, "item", "click"]], template: function NavigationListOrganism_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "mat-selection-list", 0);
+            i0.ɵɵtemplate(1, NavigationListOrganism_molecules_navigation_list_item_1_Template, 1, 1, "molecules-navigation-list-item", 1);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("multiple", false);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngForOf", ctx.items);
+        }
+    }, directives: [i1.MatSelectionList, i2.NgForOf, i3.NavigationListItemMolecule], styles: ["[_nghost-%COMP%]{--primary-color: #3f51b5;--primary-color-SCOPED-IN-navigation-list-k3LV: var(--primary-color);--secondary-color: #3f51b5;--secondary-color-SCOPED-IN-navigation-list-k3LV: var(--secondary-color);--color: white;--color-SCOPED-IN-navigation-list-k3LV: var(--color)}[_nghost-%COMP%]{display:block;width:100%;height:100%;background:var(--primary-color-SCOPED-IN-navigation-list-k3LV);color:var(--color-SCOPED-IN-navigation-list-k3LV);box-sizing:border-box}[_nghost-%COMP%]   .mat-list-item[_ngcontent-%COMP%]{height:3rem!important}[_nghost-%COMP%]     .mat-list-item .mat-list-item-content{display:flex;align-items:center;grid-gap:8px;padding-top:8px;padding-bottom:8px;cursor:pointer;color:var(--color-SCOPED-IN-navigation-list-k3LV);font-size:12px}[_nghost-%COMP%]     .mat-list-item .mat-list-text{padding-left:8px!important}"], changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationListOrganism, [{
+            type: Component,
+            args: [{ selector: 'organisms-navigation-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-selection-list [multiple]=\"false\">\n  <molecules-navigation-list-item\n    *ngFor=\"let item of items\" \n    [item]=\"item\"\n    (click)=\"action.emit(item.id)\"\n  ></molecules-navigation-list-item>\n</mat-selection-list>", styles: [":host{--primary-color: #3f51b5;--primary-color-SCOPED-IN-navigation-list-k3LV: var(--primary-color);--secondary-color: #3f51b5;--secondary-color-SCOPED-IN-navigation-list-k3LV: var(--secondary-color);--color: white;--color-SCOPED-IN-navigation-list-k3LV: var(--color)}:host{display:block;width:100%;height:100%;background:var(--primary-color-SCOPED-IN-navigation-list-k3LV);color:var(--color-SCOPED-IN-navigation-list-k3LV);box-sizing:border-box}:host .mat-list-item{height:3rem!important}:host ::ng-deep .mat-list-item .mat-list-item-content{display:flex;align-items:center;grid-gap:8px;padding-top:8px;padding-bottom:8px;cursor:pointer;color:var(--color-SCOPED-IN-navigation-list-k3LV);font-size:12px}:host ::ng-deep .mat-list-item .mat-list-text{padding-left:8px!important}\n"] }]
+        }], null, { items: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }] });
+})();
+
+class NavigationListModule {
+}
+NavigationListModule.ɵfac = function NavigationListModule_Factory(t) { return new (t || NavigationListModule)(); };
+NavigationListModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NavigationListModule });
+NavigationListModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [[
+            CommonModule,
+            // Materials
+            MatListModule,
+            // Molecules
+            NavigationListItemModule,
+        ]] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationListModule, [{
+            type: NgModule,
+            args: [{
+                    declarations: [NavigationListOrganism],
+                    imports: [
+                        CommonModule,
+                        // Materials
+                        MatListModule,
+                        // Molecules
+                        NavigationListItemModule,
+                    ],
+                    exports: [NavigationListOrganism]
+                }]
+        }], null, null);
+})();
+(function () {
+    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NavigationListModule, { declarations: [NavigationListOrganism], imports: [CommonModule,
+            // Materials
+            MatListModule,
+            // Molecules
+            NavigationListItemModule], exports: [NavigationListOrganism] });
+})();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavigationListModule, NavigationListOrganism };
+//# sourceMappingURL=ng-atomic-components-organisms-navigation-list.mjs.map

package/fesm2015/ng-atomic-components-organisms-navigation-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-organisms-navigation-list.mjs","sources":["../../../../libs/components/src/organisms/navigation-list/navigation-list.organism.html","../../../../libs/components/src/organisms/navigation-list/navigation-list.organism.ts","../../../../libs/components/src/organisms/navigation-list/navigation-list.module.ts","../../../../libs/components/src/organisms/navigation-list/ng-atomic-components-organisms-navigation-list.ts"],"sourcesContent":["<mat-selection-list [multiple]=\"false\">\n  <molecules-navigation-list-item\n    *ngFor=\"let item of items\" \n    [item]=\"item\"\n    (click)=\"action.emit(item.id)\"\n  ></molecules-navigation-list-item>\n</mat-selection-list>","import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';\nimport { ActionItem } from '@ng-atomic/common/models';\n\n@Component({\n  selector: 'organisms-navigation-list',\n  templateUrl: './navigation-list.organism.html',\n  styleUrls: ['./navigation-list.organism.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NavigationListOrganism {\n  @Input()\n  items: ActionItem[] = [];\n\n  @Output()\n  action = new EventEmitter<string>();\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatListModule } from '@angular/material/list';\nimport { NavigationListItemModule } from '@ng-atomic/components/molecules/navigation-list-item';\n\nimport { NavigationListOrganism } from './navigation-list.organism';\n\n@NgModule({\n  declarations: [NavigationListOrganism],\n  imports: [\n    CommonModule,\n    // Materials\n    MatListModule,\n    // Molecules\n    NavigationListItemModule,\n  ],\n  exports: [NavigationListOrganism]\n})\nexport class NavigationListModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/ng-atomic-components-organisms-navigator.mjs

@@ -54,11 +54,11 @@ NavigatorOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigator
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("actionItems", ctx.actionItems);
         }
-    }, directives: [i1.MatToolbar, i2.NgIf, i3.MatButton, i4.MatIcon, i5.SmartMenuButtonAtom], styles: ["[_nghost-%COMP%]{--height: 64px;--height-SCOPED-IN-navigator-qLnM: var(--height)}[_nghost-%COMP%]{display:block;width:100%;height:var(--height-SCOPED-IN-navigator-qLnM)}[_nghost-%COMP%]   div.text[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}[_nghost-%COMP%]   div.text[_ngcontent-%COMP%]   .description[_ngcontent-%COMP%]{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}[_nghost-%COMP%]   div[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}"], changeDetection: 0 });
+    }, directives: [i1.MatToolbar, i2.NgIf, i3.MatButton, i4.MatIcon, i5.SmartMenuButtonAtom], styles: ["[_nghost-%COMP%]{--height: 64px;--height-SCOPED-IN-navigator-6Kr1: var(--height)}[_nghost-%COMP%]{display:block;width:100%;height:var(--height-SCOPED-IN-navigator-6Kr1)}[_nghost-%COMP%]   div.text[_ngcontent-%COMP%]{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}[_nghost-%COMP%]   div.text[_ngcontent-%COMP%]   .description[_ngcontent-%COMP%]{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}[_nghost-%COMP%]   div[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigatorOrganism, [{
             type: Component,
-            args: [{ selector: 'organisms-navigator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar color=\"primary\">\n  <div>\n    <button mat-icon-button *ngIf=\"canBack\" (click)=\"backButtonClick.emit()\">\n      <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"text\">\n      <span class=\"title\">{{ title || '' }}</span>\n      <span class=\"description\">{{ description || '' }}</span>\n    </div>\n  </div>\n  <div>\n    <atoms-smart-menu-button\n      [actionItems]=\"actionItems\"\n      (actionItemClick)=\"actionItemClick.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--height: 64px;--height-SCOPED-IN-navigator-qLnM: var(--height)}:host{display:block;width:100%;height:var(--height-SCOPED-IN-navigator-qLnM)}:host div.text{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}:host div.text .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}:host mat-toolbar{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}:host div{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: 'organisms-navigator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar color=\"primary\">\n  <div>\n    <button mat-icon-button *ngIf=\"canBack\" (click)=\"backButtonClick.emit()\">\n      <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div class=\"text\">\n      <span class=\"title\">{{ title || '' }}</span>\n      <span class=\"description\">{{ description || '' }}</span>\n    </div>\n  </div>\n  <div>\n    <atoms-smart-menu-button\n      [actionItems]=\"actionItems\"\n      (actionItemClick)=\"actionItemClick.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--height: 64px;--height-SCOPED-IN-navigator-6Kr1: var(--height)}:host{display:block;width:100%;height:var(--height-SCOPED-IN-navigator-6Kr1)}:host div.text{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}:host div.text .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}:host mat-toolbar{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}:host div{display:flex;justify-content:center;align-items:center}\n"] }]
         }], null, { canBack: [{
                 type: Input
             }], title: [{