@ng-atomic/components 4.16.3 → 4.17.0

package/fesm2020/ng-atomic-components-organisms-top-navigator.mjs

@@ -27,10 +27,10 @@ TopNavigatorOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TopNav
         i0.ɵɵtextInterpolate1(" ", ctx.title || "", " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("items", ctx.items);
-    } }, dependencies: [i1.MatToolbar, i2.SmartMenuButtonAtom], styles: ["[_nghost-%COMP%]{--primary-500-SCOPED-IN-top-navigator-Jqey: var(--primary-500)}[_nghost-%COMP%]{width:100%;height:56px}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;padding:0 24px}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .title-container[_ngcontent-%COMP%]{color:var(--primary-500-SCOPED-IN-top-navigator-Jqey);font-size:1.25rem;line-height:21px}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .title-container[_ngcontent-%COMP%]   atoms-kurakatsu-logo[_ngcontent-%COMP%]{width:auto}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   atoms-user-icon[_ngcontent-%COMP%]{width:32px;height:32px}"], changeDetection: 0 });
+    } }, dependencies: [i1.MatToolbar, i2.SmartMenuButtonAtom], styles: ["[_nghost-%COMP%]{--primary-500-SCOPED-IN-top-navigator-T6uc: var(--primary-500)}[_nghost-%COMP%]{width:100%;height:56px}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;padding:0 24px}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .title-container[_ngcontent-%COMP%]{color:var(--primary-500-SCOPED-IN-top-navigator-T6uc);font-size:1.25rem;line-height:21px}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   .title-container[_ngcontent-%COMP%]   atoms-kurakatsu-logo[_ngcontent-%COMP%]{width:auto}[_nghost-%COMP%]   mat-toolbar[_ngcontent-%COMP%]   atoms-user-icon[_ngcontent-%COMP%]{width:32px;height:32px}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TopNavigatorOrganism, [{
         type: Component,
-        args: [{ selector: 'organisms-top-navigator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar color=\"primary\">\n  <div class=\"title-container\">\n    {{ title || '' }}\n  </div>\n  <div>\n    <atoms-smart-menu-button\n      [items]=\"items\"\n      (action)=\"action.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--primary-500-SCOPED-IN-top-navigator-Jqey: var(--primary-500)}:host{width:100%;height:56px}:host mat-toolbar{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;padding:0 24px}:host mat-toolbar .title-container{color:var(--primary-500-SCOPED-IN-top-navigator-Jqey);font-size:1.25rem;line-height:21px}:host mat-toolbar .title-container atoms-kurakatsu-logo{width:auto}:host mat-toolbar atoms-user-icon{width:32px;height:32px}\n"] }]
+        args: [{ selector: 'organisms-top-navigator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar color=\"primary\">\n  <div class=\"title-container\">\n    {{ title || '' }}\n  </div>\n  <div>\n    <atoms-smart-menu-button\n      [items]=\"items\"\n      (action)=\"action.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--primary-500-SCOPED-IN-top-navigator-T6uc: var(--primary-500)}:host{width:100%;height:56px}:host mat-toolbar{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;padding:0 24px}:host mat-toolbar .title-container{color:var(--primary-500-SCOPED-IN-top-navigator-T6uc);font-size:1.25rem;line-height:21px}:host mat-toolbar .title-container atoms-kurakatsu-logo{width:auto}:host mat-toolbar atoms-user-icon{width:32px;height:32px}\n"] }]
     }], null, { title: [{
             type: Input
         }], items: [{

package/fesm2020/ng-atomic-components-templates-entrance.mjs

@@ -80,10 +80,10 @@ EntranceTemplate.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntranceTe
         i0.ɵɵproperty("ngIf", ctx.isPasswordSectionShown);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("actions", ctx.actions);
-    } }, dependencies: [i1.NgIf, i2.AutoLayoutFrame, i3.CardFrame, i4.ActionButtonsSectionOrganism, i5.HeadingOrganism, i6.TextInputSectionOrganism], styles: ["[_nghost-%COMP%]{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-jwuj: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-jwuj: var(--background-color)}[_nghost-%COMP%]{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-jwuj);width:100%;height:100%}[_nghost-%COMP%]   frames-card[_ngcontent-%COMP%]{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}[_nghost-%COMP%]   frames-card[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-jwuj)}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgIf, i2.AutoLayoutFrame, i3.CardFrame, i4.ActionButtonsSectionOrganism, i5.HeadingOrganism, i6.TextInputSectionOrganism], styles: ["[_nghost-%COMP%]{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-rfVs: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-rfVs: var(--background-color)}[_nghost-%COMP%]{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-rfVs);width:100%;height:100%}[_nghost-%COMP%]   frames-card[_ngcontent-%COMP%]{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}[_nghost-%COMP%]   frames-card[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-rfVs)}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntranceTemplate, [{
         type: Component,
-        args: [{ selector: 'templates-entrance', host: { class: 'template' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<frames-card>\n  <frames-auto-layout vertical>\n    <organisms-heading>\u30ED\u30B0\u30A4\u30F3</organisms-heading>\n    <organisms-text-input-section\n      *ngIf=\"isEmailSectionShown\"\n      label=\"\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\"\n      [control]=\"form.get('email')\"\n    ></organisms-text-input-section>\n    <organisms-text-input-section\n      *ngIf=\"isPasswordSectionShown\"\n      label=\"\u30D1\u30B9\u30EF\u30FC\u30C9\"\n      [control]=\"form.get('password')\"\n    ></organisms-text-input-section>\n    <organisms-action-buttons-section\n      [actions]=\"actions\"\n      (action)=\"action.emit($event)\"\n    ></organisms-action-buttons-section>\n  </frames-auto-layout>\n</frames-card>\n", styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-jwuj: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-jwuj: var(--background-color)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-jwuj);width:100%;height:100%}:host frames-card{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}:host frames-card *{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-jwuj)}\n"] }]
+        args: [{ selector: 'templates-entrance', host: { class: 'template' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<frames-card>\n  <frames-auto-layout vertical>\n    <organisms-heading>\u30ED\u30B0\u30A4\u30F3</organisms-heading>\n    <organisms-text-input-section\n      *ngIf=\"isEmailSectionShown\"\n      label=\"\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\"\n      [control]=\"form.get('email')\"\n    ></organisms-text-input-section>\n    <organisms-text-input-section\n      *ngIf=\"isPasswordSectionShown\"\n      label=\"\u30D1\u30B9\u30EF\u30FC\u30C9\"\n      [control]=\"form.get('password')\"\n    ></organisms-text-input-section>\n    <organisms-action-buttons-section\n      [actions]=\"actions\"\n      (action)=\"action.emit($event)\"\n    ></organisms-action-buttons-section>\n  </frames-auto-layout>\n</frames-card>\n", styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-rfVs: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-rfVs: var(--background-color)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-rfVs);width:100%;height:100%}:host frames-card{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}:host frames-card *{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-rfVs)}\n"] }]
     }], null, { form: [{
             type: Input
         }], isEmailSectionShown: [{

package/fesm2020/ng-atomic-components-templates-menu.mjs

@@ -26,10 +26,10 @@ MenuTemplate.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuTemplate,
     } if (rf & 2) {
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("items", ctx.items);
-    } }, dependencies: [i1.NavigationListOrganism], styles: ["[_nghost-%COMP%]{--primary-color: #3f51b5;--primary-color-SCOPED-IN-menu-7TVO: var(--primary-color);--secondary-color: #3f51b5;--secondary-color-SCOPED-IN-menu-7TVO: var(--secondary-color);--width: 100%;--width-SCOPED-IN-menu-7TVO: var(--width);--height: 100%;--height-SCOPED-IN-menu-7TVO: var(--height)}[_nghost-%COMP%]{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-7TVO);height:var(--height-SCOPED-IN-menu-7TVO);color:#fff;background-color:var(--primary-color-SCOPED-IN-menu-7TVO)}[_nghost-%COMP%]   organisms-navigation-list[_ngcontent-%COMP%]{transition:width .5s;--primary-color: var(--primary-color-SCOPED-IN-menu-7TVO);--secondary-color: var(--secondary-color-SCOPED-IN-menu-7TVO)}"], changeDetection: 0 });
+    } }, dependencies: [i1.NavigationListOrganism], styles: ["[_nghost-%COMP%]{--primary-color: #3f51b5;--primary-color-SCOPED-IN-menu-SYSS: var(--primary-color);--secondary-color: #3f51b5;--secondary-color-SCOPED-IN-menu-SYSS: var(--secondary-color);--width: 100%;--width-SCOPED-IN-menu-SYSS: var(--width);--height: 100%;--height-SCOPED-IN-menu-SYSS: var(--height)}[_nghost-%COMP%]{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-SYSS);height:var(--height-SCOPED-IN-menu-SYSS);color:#fff;background-color:var(--primary-color-SCOPED-IN-menu-SYSS)}[_nghost-%COMP%]   organisms-navigation-list[_ngcontent-%COMP%]{transition:width .5s;--primary-color: var(--primary-color-SCOPED-IN-menu-SYSS);--secondary-color: var(--secondary-color-SCOPED-IN-menu-SYSS)}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuTemplate, [{
         type: Component,
-        args: [{ selector: 'templates-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"top\">\n  <ng-content select=[header]></ng-content>\n  <organisms-navigation-list\n    [items]=\"items\"\n    (action)=\"action.emit($event)\"\n  ></organisms-navigation-list>\n</div>\n<div class=\"bottom\">\n  <ng-content select=[footer]></ng-content>\n</div>", styles: [":host{--primary-color: #3f51b5;--primary-color-SCOPED-IN-menu-7TVO: var(--primary-color);--secondary-color: #3f51b5;--secondary-color-SCOPED-IN-menu-7TVO: var(--secondary-color);--width: 100%;--width-SCOPED-IN-menu-7TVO: var(--width);--height: 100%;--height-SCOPED-IN-menu-7TVO: var(--height)}:host{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-7TVO);height:var(--height-SCOPED-IN-menu-7TVO);color:#fff;background-color:var(--primary-color-SCOPED-IN-menu-7TVO)}:host organisms-navigation-list{transition:width .5s;--primary-color: var(--primary-color-SCOPED-IN-menu-7TVO);--secondary-color: var(--secondary-color-SCOPED-IN-menu-7TVO)}\n"] }]
+        args: [{ selector: 'templates-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"top\">\n  <ng-content select=[header]></ng-content>\n  <organisms-navigation-list\n    [items]=\"items\"\n    (action)=\"action.emit($event)\"\n  ></organisms-navigation-list>\n</div>\n<div class=\"bottom\">\n  <ng-content select=[footer]></ng-content>\n</div>", styles: [":host{--primary-color: #3f51b5;--primary-color-SCOPED-IN-menu-SYSS: var(--primary-color);--secondary-color: #3f51b5;--secondary-color-SCOPED-IN-menu-SYSS: var(--secondary-color);--width: 100%;--width-SCOPED-IN-menu-SYSS: var(--width);--height: 100%;--height-SCOPED-IN-menu-SYSS: var(--height)}:host{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-SYSS);height:var(--height-SCOPED-IN-menu-SYSS);color:#fff;background-color:var(--primary-color-SCOPED-IN-menu-SYSS)}:host organisms-navigation-list{transition:width .5s;--primary-color: var(--primary-color-SCOPED-IN-menu-SYSS);--secondary-color: var(--secondary-color-SCOPED-IN-menu-SYSS)}\n"] }]
     }], null, { items: [{
             type: Input
         }], action: [{

package/fesm2020/ng-atomic-components-templates-smart-crud.mjs

@@ -114,10 +114,10 @@ SmartCrudTemplate.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SmartCrud
         i0.ɵɵproperty("ngForOf", ctx.controls)("ngForTrackBy", ctx.trackByIndex);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("actions", ctx.actions);
-    } }, dependencies: [i1.NgForOf, i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, i2.AutoLayoutFrame, i3.ScrollFrame, i4.ActionButtonsSectionOrganism, i5.NavigatorOrganism, i6.DateInputSectionOrganism, i7.TextInputSectionOrganism, i8.SelectInputSectionOrganism, i9.HeaderMolecule, i10.DomainPipe, i11.SmartFieldPipe], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-smart-crud-Oper: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-Oper: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-Oper: var(--gap)}[_nghost-%COMP%]{display:block;width:100%;height:100%;background:white}[_nghost-%COMP%]   frames-auto-layout[_ngcontent-%COMP%]{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-smart-crud-Oper);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-Oper)}[_nghost-%COMP%]   frames-auto-layout[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-Oper)}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgForOf, i1.NgSwitch, i1.NgSwitchCase, i1.NgSwitchDefault, i2.AutoLayoutFrame, i3.ScrollFrame, i4.ActionButtonsSectionOrganism, i5.NavigatorOrganism, i6.DateInputSectionOrganism, i7.TextInputSectionOrganism, i8.SelectInputSectionOrganism, i9.HeaderMolecule, i10.DomainPipe, i11.SmartFieldPipe], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-smart-crud-2iag: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-2iag: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-2iag: var(--gap)}[_nghost-%COMP%]{display:block;width:100%;height:100%;background:white}[_nghost-%COMP%]   frames-auto-layout[_ngcontent-%COMP%]{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-smart-crud-2iag);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-2iag)}[_nghost-%COMP%]   frames-auto-layout[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-2iag)}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmartCrudTemplate, [{
         type: Component,
-        args: [{ selector: 'templates-smart-crud', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'template' }, template: "<frames-scroll>\n  <organisms-navigator \n    [startActions]=\"navStartActions\"\n    [endActions]=\"navEndActions\"\n    (action)=\"action.emit($event)\"\n    navigator\n  >\n    <molecules-header [title]=\"title\"></molecules-header>\n  </organisms-navigator>\n  <frames-auto-layout vertical contents>\n    <ng-container *ngFor=\"let entry of controls; trackBy:trackByIndex\" [ngSwitch]=\"(entry[0] | smartField)?.type\">\n      <organisms-select-input-section\n        *ngSwitchCase=\"'select'\"\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n        [options]=\"(entry[0] | smartField)?.options\"\n      ></organisms-select-input-section>\n      <organisms-date-input-section\n        *ngSwitchCase=\"'date'\"\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n      ></organisms-date-input-section>\n      <organisms-text-input-section\n        *ngSwitchCase=\"'number'\"\n        [type]=\"'number'\"\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n      ></organisms-text-input-section>\n      <organisms-text-input-section\n        *ngSwitchDefault\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n      ></organisms-text-input-section>\n    </ng-container>\n    <organisms-action-buttons-section\n      [actions]=\"actions\"\n      (action)=\"action.emit($event)\"\n    ></organisms-action-buttons-section>\n  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-smart-crud-Oper: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-Oper: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-Oper: var(--gap)}:host{display:block;width:100%;height:100%;background:white}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-smart-crud-Oper);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-Oper)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-Oper)}\n"] }]
+        args: [{ selector: 'templates-smart-crud', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'template' }, template: "<frames-scroll>\n  <organisms-navigator \n    [startActions]=\"navStartActions\"\n    [endActions]=\"navEndActions\"\n    (action)=\"action.emit($event)\"\n    navigator\n  >\n    <molecules-header [title]=\"title\"></molecules-header>\n  </organisms-navigator>\n  <frames-auto-layout vertical contents>\n    <ng-container *ngFor=\"let entry of controls; trackBy:trackByIndex\" [ngSwitch]=\"(entry[0] | smartField)?.type\">\n      <organisms-select-input-section\n        *ngSwitchCase=\"'select'\"\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n        [options]=\"(entry[0] | smartField)?.options\"\n      ></organisms-select-input-section>\n      <organisms-date-input-section\n        *ngSwitchCase=\"'date'\"\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n      ></organisms-date-input-section>\n      <organisms-text-input-section\n        *ngSwitchCase=\"'number'\"\n        [type]=\"'number'\"\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n      ></organisms-text-input-section>\n      <organisms-text-input-section\n        *ngSwitchDefault\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n      ></organisms-text-input-section>\n    </ng-container>\n    <organisms-action-buttons-section\n      [actions]=\"actions\"\n      (action)=\"action.emit($event)\"\n    ></organisms-action-buttons-section>\n  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-smart-crud-2iag: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-2iag: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-2iag: var(--gap)}:host{display:block;width:100%;height:100%;background:white}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-smart-crud-2iag);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-2iag)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-2iag)}\n"] }]
     }], null, { title: [{
             type: Input
         }], form: [{

package/fesm2020/ng-atomic-components-templates-smart-index.mjs

@@ -109,10 +109,10 @@ SmartIndexTemplate.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SmartInd
         i0.ɵɵproperty("ngIf", ctx.device === "sp");
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.device !== "sp");
-    } }, dependencies: [i1.NgIf, i2.AutoLayoutFrame, i3.ScrollFrame, i4.PaginatorOrganism, i5.SmartTableOrganism, i6.SmartListOrganism, i7.NavigatorOrganism, i8.HeaderMolecule], styles: ["[_nghost-%COMP%]{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-VaWc: var(--navigator-height)}[_nghost-%COMP%]{width:100%;height:100%;background:white;display:block}[_nghost-%COMP%]   frames-auto-layout[_ngcontent-%COMP%]{--gap: 0;--vertical-padding: 0}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgIf, i2.AutoLayoutFrame, i3.ScrollFrame, i4.PaginatorOrganism, i5.SmartTableOrganism, i6.SmartListOrganism, i7.NavigatorOrganism, i8.HeaderMolecule], styles: ["[_nghost-%COMP%]{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-IoLp: var(--navigator-height)}[_nghost-%COMP%]{width:100%;height:100%;background:white;display:block}[_nghost-%COMP%]   frames-auto-layout[_ngcontent-%COMP%]{--gap: 0;--vertical-padding: 0}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SmartIndexTemplate, [{
         type: Component,
-        args: [{ selector: 'templates-smart-index', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'template' }, template: "<frames-scroll>\n  <organisms-navigator\n    [startActions]=\"navStartActions\"\n    [endActions]=\"navEndActions\"\n    (action)=\"onAction($event)\"\n    navigator\n  >\n    <molecules-header [title]=\"title\" [description]=\"description\"></molecules-header>\n  </organisms-navigator>\n  <frames-auto-layout vertical contents>\n    <ng-container *ngIf=\"device === 'sp'\">\n      <organisms-smart-list\n        [items]=\"items\"\n        (action)=\"action.emit($event)\"\n      ></organisms-smart-list>\n    </ng-container>\n    <ng-container *ngIf=\"device !== 'sp'\">\n      <organisms-smart-table\n        [items]=\"items\"\n        [itemActions]=\"itemActions\"\n        [columns]=\"properties\"\n        [selectedIdSet]=\"selectedIdSet\"\n        [sortKey]=\"sortKey\"\n        [sortOrder]=\"sortOrder\"\n        (action)=\"action.emit($event)\"\n        (checkboxClick)=\"checkboxClick.emit($event)\"\n        (headerClick)=\"action.emit({id: ActionId.TABLE_HEADER_CLICK, payload: $event})\"\n      ></organisms-smart-table>\n      <organisms-paginator\n        *ngIf=\"page\"\n        [control]=\"queryControl\"\n        [page]=\"page\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [placeholder]=\"queryPlaceholder\"\n        (pageChange)=\"pageChange.emit($event)\"\n      ></organisms-paginator>\n    </ng-container>\n  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-VaWc: var(--navigator-height)}:host{width:100%;height:100%;background:white;display:block}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}\n"] }]
+        args: [{ selector: 'templates-smart-index', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'template' }, template: "<frames-scroll>\n  <organisms-navigator\n    [startActions]=\"navStartActions\"\n    [endActions]=\"navEndActions\"\n    (action)=\"onAction($event)\"\n    navigator\n  >\n    <molecules-header [title]=\"title\" [description]=\"description\"></molecules-header>\n  </organisms-navigator>\n  <frames-auto-layout vertical contents>\n    <ng-container *ngIf=\"device === 'sp'\">\n      <organisms-smart-list\n        [items]=\"items\"\n        (action)=\"action.emit($event)\"\n      ></organisms-smart-list>\n    </ng-container>\n    <ng-container *ngIf=\"device !== 'sp'\">\n      <organisms-smart-table\n        [items]=\"items\"\n        [itemActions]=\"itemActions\"\n        [columns]=\"properties\"\n        [selectedIdSet]=\"selectedIdSet\"\n        [sortKey]=\"sortKey\"\n        [sortOrder]=\"sortOrder\"\n        (action)=\"action.emit($event)\"\n        (checkboxClick)=\"checkboxClick.emit($event)\"\n        (headerClick)=\"action.emit({id: ActionId.TABLE_HEADER_CLICK, payload: $event})\"\n      ></organisms-smart-table>\n      <organisms-paginator\n        *ngIf=\"page\"\n        [control]=\"queryControl\"\n        [page]=\"page\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [placeholder]=\"queryPlaceholder\"\n        (pageChange)=\"pageChange.emit($event)\"\n      ></organisms-paginator>\n    </ng-container>\n  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-IoLp: var(--navigator-height)}:host{width:100%;height:100%;background:white;display:block}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}\n"] }]
     }], null, { queryControl: [{
             type: Input
         }], title: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-atomic/components",
-  "version": "4.16.3",
+  "version": "4.17.0",
   "license": "MIT",
   "module": "fesm2015/ng-atomic-components.mjs",
   "es2020": "fesm2020/ng-atomic-components.mjs",
@@ -375,12 +375,12 @@
   "peerDependencies": {
     "@angular/core": "^14.0.0",
     "@angular/platform-browser": "^14.0.0",
-    "@ng-atomic/elements": "4.16.3",
+    "@ng-atomic/elements": "4.17.0",
     "@angular/cdk": "^14.0.0",
     "@angular/material": "^14.0.0",
     "@ngneat/reactive-forms": "^4.1.0",
     "rxjs": "7.5.0",
-    "@ng-atomic/common": "4.16.3",
+    "@ng-atomic/common": "4.17.0",
     "@angular/forms": "^14.0.0",
     "@angular/animations": "^14.0.0",
     "resize-observer-polyfill": "^1.5.1",