@ng-atomic/components 3.2.9 → 3.2.10

package/fesm2020/ng-atomic-components-organisms-text-input-section.mjs

@@ -18,10 +18,10 @@ TextInputSectionOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Te
         i0.ɵɵelement(0, "molecules-text-input-field", 0);
     } 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-ADZL: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-ADZL);box-sizing:border-box}[_nghost-%COMP%]   .molecule.input-field[_ngcontent-%COMP%], [_nghost-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}"] });
+    } }, directives: [i1.TextInputFieldMolecule], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-text-input-section-h0dr: var(--horizontal-padding)}[_nghost-%COMP%]{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-h0dr);box-sizing:border-box}[_nghost-%COMP%]   .molecule.input-field[_ngcontent-%COMP%], [_nghost-%COMP%]   mat-form-field[_ngcontent-%COMP%]{width:100%}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextInputSectionOrganism, [{
         type: Component,
-        args: [{ selector: 'organisms-text-input-section', template: "<molecules-text-input-field\n  type=\"text\"\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-ADZL: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-ADZL);box-sizing:border-box}:host .molecule.input-field,:host mat-form-field{width:100%}\n"] }]
+        args: [{ selector: 'organisms-text-input-section', template: "<molecules-text-input-field\n  type=\"text\"\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-h0dr: var(--horizontal-padding)}:host{display:block;width:100%;padding:0 var(--horizontal-padding-SCOPED-IN-text-input-section-h0dr);box-sizing:border-box}:host .molecule.input-field,:host mat-form-field{width:100%}\n"] }]
     }], null, { label: [{
             type: Input
         }], placeholder: [{

package/fesm2020/ng-atomic-components-organisms-textarea-section.mjs

@@ -14,10 +14,10 @@ TextareaSectionOrganism.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Tex
         i0.ɵɵelement(0, "molecules-textarea-field", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("label", ctx.label);
-    } }, directives: [i1.TextareaFieldMolecule], styles: ["[_nghost-%COMP%]{--vertical-padding: 16px;--vertical-padding-SCOPED-IN-textarea-section-boBK: var(--vertical-padding)}[_nghost-%COMP%]{display:block;padding:0 var(--vertical-padding-SCOPED-IN-textarea-section-boBK);box-sizing:border-box}[_nghost-%COMP%]   molecules-textarea-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
+    } }, directives: [i1.TextareaFieldMolecule], styles: ["[_nghost-%COMP%]{--vertical-padding: 16px;--vertical-padding-SCOPED-IN-textarea-section-lJ6G: var(--vertical-padding)}[_nghost-%COMP%]{display:block;padding:0 var(--vertical-padding-SCOPED-IN-textarea-section-lJ6G);box-sizing:border-box}[_nghost-%COMP%]   molecules-textarea-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextareaSectionOrganism, [{
         type: Component,
-        args: [{ selector: 'organisms-textarea-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<molecules-textarea-field\n  [label]=\"label\"\n></molecules-textarea-field>", styles: [":host{--vertical-padding: 16px;--vertical-padding-SCOPED-IN-textarea-section-boBK: var(--vertical-padding)}:host{display:block;padding:0 var(--vertical-padding-SCOPED-IN-textarea-section-boBK);box-sizing:border-box}:host molecules-textarea-field{width:100%}\n"] }]
+        args: [{ selector: 'organisms-textarea-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<molecules-textarea-field\n  [label]=\"label\"\n></molecules-textarea-field>", styles: [":host{--vertical-padding: 16px;--vertical-padding-SCOPED-IN-textarea-section-lJ6G: var(--vertical-padding)}:host{display:block;padding:0 var(--vertical-padding-SCOPED-IN-textarea-section-lJ6G);box-sizing:border-box}:host molecules-textarea-field{width:100%}\n"] }]
     }], null, { label: [{
             type: Input
         }] }); })();

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("actionItems", ctx.actionItems);
-    } }, directives: [i1.MatToolbar, i2.SmartMenuButtonAtom], styles: ["[_nghost-%COMP%]{--primary-500-SCOPED-IN-top-navigator-jgUD: 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-jgUD);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 });
+    } }, directives: [i1.MatToolbar, i2.SmartMenuButtonAtom], styles: ["[_nghost-%COMP%]{--primary-500-SCOPED-IN-top-navigator-tpu9: 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-tpu9);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      [actionItems]=\"actionItems\"\n      (actionItemClick)=\"actionItemClick.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--primary-500-SCOPED-IN-top-navigator-jgUD: 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-jgUD);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      [actionItems]=\"actionItems\"\n      (actionItemClick)=\"actionItemClick.emit($event)\"\n    ></atoms-smart-menu-button>\n  </div>\n</mat-toolbar>\n", styles: [":host{--primary-500-SCOPED-IN-top-navigator-tpu9: 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-tpu9);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
         }], actionItems: [{

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

@@ -59,10 +59,10 @@ EntranceTemplate.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntranceTe
         i0.ɵɵproperty("ngIf", ctx.isPasswordSectionShown);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("actionItems", ctx.actionItems);
-    } }, directives: [i1.CardFrame, i2.AutoLayoutFrame, i3.HeadingOrganism, i4.NgIf, i5.TextInputSectionOrganism, i6.ActionButtonsSectionOrganism, i7.SocialLoginSectionOrganism], styles: ["[_nghost-%COMP%]{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-Pyfk: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-Pyfk: var(--background-color)}[_nghost-%COMP%]{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-Pyfk);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-Pyfk)}"], changeDetection: 0 });
+    } }, directives: [i1.CardFrame, i2.AutoLayoutFrame, i3.HeadingOrganism, i4.NgIf, i5.TextInputSectionOrganism, i6.ActionButtonsSectionOrganism, i7.SocialLoginSectionOrganism], styles: ["[_nghost-%COMP%]{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-Dawy: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-Dawy: var(--background-color)}[_nghost-%COMP%]{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-Dawy);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-Dawy)}"], 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      [actionItems]=\"actionItems\"\n    ></organisms-action-buttons-section>\n    <organisms-social-login-section\n      (signInWithGoogleButtonClick)=\"signInWithGoogleButtonClick.emit()\"\n    ></organisms-social-login-section>\n  </frames-auto-layout>\n</frames-card>\n", styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-Pyfk: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-Pyfk: var(--background-color)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-Pyfk);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-Pyfk)}\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      [actionItems]=\"actionItems\"\n    ></organisms-action-buttons-section>\n    <organisms-social-login-section\n      (signInWithGoogleButtonClick)=\"signInWithGoogleButtonClick.emit()\"\n    ></organisms-social-login-section>\n  </frames-auto-layout>\n</frames-card>\n", styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-Dawy: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-Dawy: var(--background-color)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-Dawy);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-Dawy)}\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("actionItems", ctx.actionItems);
-    } }, directives: [i1.MenuOrganism], styles: ["[_nghost-%COMP%]{--primary-color: blue;--primary-color-SCOPED-IN-menu-X20Z: var(--primary-color);--width: 100%;--width-SCOPED-IN-menu-X20Z: var(--width);--height: 100%;--height-SCOPED-IN-menu-X20Z: var(--height)}[_nghost-%COMP%]{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-X20Z);height:var(--height-SCOPED-IN-menu-X20Z);color:#fff;background-color:var(--primary-color-SCOPED-IN-menu-X20Z)}[_nghost-%COMP%]   organisms-menu[_ngcontent-%COMP%]{transition:width .5s;--primary-color: var(--primary-color-SCOPED-IN-menu-X20Z)}"], changeDetection: 0 });
+    } }, directives: [i1.MenuOrganism], styles: ["[_nghost-%COMP%]{--primary-color: blue;--primary-color-SCOPED-IN-menu-8PyS: var(--primary-color);--width: 100%;--width-SCOPED-IN-menu-8PyS: var(--width);--height: 100%;--height-SCOPED-IN-menu-8PyS: var(--height)}[_nghost-%COMP%]{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-8PyS);height:var(--height-SCOPED-IN-menu-8PyS);color:#fff;background-color:var(--primary-color-SCOPED-IN-menu-8PyS)}[_nghost-%COMP%]   organisms-menu[_ngcontent-%COMP%]{transition:width .5s;--primary-color: var(--primary-color-SCOPED-IN-menu-8PyS)}"], 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-menu\n    [actionItems]=\"actionItems\"\n    (actionItemClick)=\"actionItemClick.emit($event)\"\n  ></organisms-menu>\n</div>\n<div class=\"bottom\">\n  <ng-content select=[footer]></ng-content>\n</div>", styles: [":host{--primary-color: blue;--primary-color-SCOPED-IN-menu-X20Z: var(--primary-color);--width: 100%;--width-SCOPED-IN-menu-X20Z: var(--width);--height: 100%;--height-SCOPED-IN-menu-X20Z: var(--height)}:host{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-X20Z);height:var(--height-SCOPED-IN-menu-X20Z);color:#fff;background-color:var(--primary-color-SCOPED-IN-menu-X20Z)}:host organisms-menu{transition:width .5s;--primary-color: var(--primary-color-SCOPED-IN-menu-X20Z)}\n"] }]
+        args: [{ selector: 'templates-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"top\">\n  <ng-content select=[header]></ng-content>\n  <organisms-menu\n    [actionItems]=\"actionItems\"\n    (actionItemClick)=\"actionItemClick.emit($event)\"\n  ></organisms-menu>\n</div>\n<div class=\"bottom\">\n  <ng-content select=[footer]></ng-content>\n</div>", styles: [":host{--primary-color: blue;--primary-color-SCOPED-IN-menu-8PyS: var(--primary-color);--width: 100%;--width-SCOPED-IN-menu-8PyS: var(--width);--height: 100%;--height-SCOPED-IN-menu-8PyS: var(--height)}:host{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-8PyS);height:var(--height-SCOPED-IN-menu-8PyS);color:#fff;background-color:var(--primary-color-SCOPED-IN-menu-8PyS)}:host organisms-menu{transition:width .5s;--primary-color: var(--primary-color-SCOPED-IN-menu-8PyS)}\n"] }]
     }], null, { actionItems: [{
             type: Input
         }], actionItemClick: [{

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

@@ -123,10 +123,10 @@ SmartCrudTemplate.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SmartCrud
         i0.ɵɵproperty("ngForOf", ctx.controls)("ngForTrackBy", ctx.trackByIndex);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("actionItems", ctx.actionItems);
-    } }, directives: [i1.ScrollFrame, i2.BackNavigatorOrganism, i3.AutoLayoutFrame, i4.NgForOf, i4.NgSwitch, i4.NgSwitchCase, i5.SelectInputSectionOrganism, i6.DateInputSectionOrganism, i7.TextInputSectionOrganism, i4.NgSwitchDefault, i8.ActionButtonsSectionOrganism], pipes: [i9.SmartFieldPipe, i10.DomainPipe], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-smart-crud-AmcG: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-AmcG: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-AmcG: 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-AmcG);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-AmcG)}[_nghost-%COMP%]   frames-auto-layout[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-AmcG)}"], changeDetection: 0 });
+    } }, directives: [i1.ScrollFrame, i2.BackNavigatorOrganism, i3.AutoLayoutFrame, i4.NgForOf, i4.NgSwitch, i4.NgSwitchCase, i5.SelectInputSectionOrganism, i6.DateInputSectionOrganism, i7.TextInputSectionOrganism, i4.NgSwitchDefault, i8.ActionButtonsSectionOrganism], pipes: [i9.SmartFieldPipe, i10.DomainPipe], styles: ["[_nghost-%COMP%]{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-smart-crud-SPfP: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-SPfP: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-SPfP: 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-SPfP);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-SPfP)}[_nghost-%COMP%]   frames-auto-layout[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-SPfP)}"], 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-back-navigator \n    [actionItems]=\"menuActionItems\"\n    [canBack]=\"canBack\"\n    [title]=\"title\"\n    (actionItemClick)=\"actionItemClick.emit($event)\"\n    (backButtonClick)=\"backButtonClick.emit()\"\n    navigator\n  ></organisms-back-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      [actionItems]=\"actionItems\"\n      (actionItemClick)=\"onActionButtonClick($event)\"\n    ></organisms-action-buttons-section>\n  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-smart-crud-AmcG: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-AmcG: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-AmcG: 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-AmcG);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-AmcG)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-AmcG)}\n"] }]
+        args: [{ selector: 'templates-smart-crud', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'template' }, template: "<frames-scroll>\n  <organisms-back-navigator \n    [actionItems]=\"menuActionItems\"\n    [canBack]=\"canBack\"\n    [title]=\"title\"\n    (actionItemClick)=\"actionItemClick.emit($event)\"\n    (backButtonClick)=\"backButtonClick.emit()\"\n    navigator\n  ></organisms-back-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      [actionItems]=\"actionItems\"\n      (actionItemClick)=\"onActionButtonClick($event)\"\n    ></organisms-action-buttons-section>\n  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-smart-crud-SPfP: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-SPfP: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-SPfP: 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-SPfP);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-SPfP)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-SPfP)}\n"] }]
     }], null, { canBack: [{
             type: Input
         }], name: [{

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

@@ -79,10 +79,10 @@ SmartIndexTemplate.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SmartInd
         i0.ɵɵproperty("items", ctx.items)("actionItems", ctx.actionItems)("columns", ctx.properties)("selectedIdSet", ctx.selectedIdSet)("sortKey", ctx.sortKey)("sortOrder", ctx.sortOrder);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.page);
-    } }, directives: [i1.ScrollFrame, i2.BackNavigatorOrganism, i3.AutoLayoutFrame, i4.SmartTableOrganism, i5.NgIf, i6.PaginatorOrganism], styles: ["[_nghost-%COMP%]{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-4yrw: 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 });
+    } }, directives: [i1.ScrollFrame, i2.BackNavigatorOrganism, i3.AutoLayoutFrame, i4.SmartTableOrganism, i5.NgIf, i6.PaginatorOrganism], styles: ["[_nghost-%COMP%]{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-KTWP: 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-back-navigator\n    [canBack]=\"canBack\"\n    [title]=\"title\"\n    [description]=\"description\"\n    [actionItems]=\"menuActionItems\"\n    (actionItemClick)=\"actionItemClick.emit($event)\"\n    (backButtonClick)=\"backButtonClick.emit()\"\n    navigator\n  ></organisms-back-navigator>\n  <frames-auto-layout vertical contents>\n    <organisms-smart-table\n      [items]=\"items\"\n      [actionItems]=\"actionItems\"\n      [columns]=\"properties\"\n      [selectedIdSet]=\"selectedIdSet\"\n      [sortKey]=\"sortKey\"\n      [sortOrder]=\"sortOrder\"\n      (actionItemClick)=\"actionItemClick.emit($event)\"\n      (checkboxClick)=\"checkboxClick.emit($event)\"\n      (headerClick)=\"tableHeaderClick.emit($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  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-4yrw: 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-back-navigator\n    [canBack]=\"canBack\"\n    [title]=\"title\"\n    [description]=\"description\"\n    [actionItems]=\"menuActionItems\"\n    (actionItemClick)=\"actionItemClick.emit($event)\"\n    (backButtonClick)=\"backButtonClick.emit()\"\n    navigator\n  ></organisms-back-navigator>\n  <frames-auto-layout vertical contents>\n    <organisms-smart-table\n      [items]=\"items\"\n      [actionItems]=\"actionItems\"\n      [columns]=\"properties\"\n      [selectedIdSet]=\"selectedIdSet\"\n      [sortKey]=\"sortKey\"\n      [sortOrder]=\"sortOrder\"\n      (actionItemClick)=\"actionItemClick.emit($event)\"\n      (checkboxClick)=\"checkboxClick.emit($event)\"\n      (headerClick)=\"tableHeaderClick.emit($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  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-KTWP: var(--navigator-height)}:host{width:100%;height:100%;background:white;display:block}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}\n"] }]
     }], null, { canBack: [{
             type: Input
         }], queryControl: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-atomic/components",
-  "version": "3.2.9",
+  "version": "3.2.10",
   "license": "MIT",
   "module": "fesm2015/ng-atomic-components.mjs",
   "es2020": "fesm2020/ng-atomic-components.mjs",
@@ -357,13 +357,13 @@
     "prepublishOnly": "node --eval \"console.error('ERROR: Trying to publish a package that has been compiled by Ivy in full compilation mode. This is not allowed.\\nPlease delete and rebuild the package with Ivy partial compilation mode, before attempting to publish.\\n')\" && exit 1"
   },
   "peerDependencies": {
-    "@ng-atomic/elements": "3.2.9",
+    "@ng-atomic/elements": "3.2.10",
     "@angular/cdk": "13.3.9",
     "@ngneat/reactive-forms": "^4.1.0",
     "rxjs": "^7.0.0",
-    "@ng-atomic/common": "3.2.9",
+    "@ng-atomic/common": "3.2.10",
     "@angular/forms": "13.3.11",
-    "@ng-atomic/storybook": "3.2.9",
+    "@ng-atomic/storybook": "3.2.10",
     "@angular/animations": "13.3.11",
     "resize-observer-polyfill": "^1.5.1",
     "@angular/router": "13.3.11",