@ng-atomic/components 5.8.1 → 5.10.0

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

@@ -0,0 +1,97 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MessagesSectionOrganism } from '@ng-atomic/components/organisms/messages-section';
+import { MessageInputSectionOrganism } from '@ng-atomic/components/organisms/message-input-section';
+import { TextareaSectionOrganism } from '@ng-atomic/components/organisms/textarea-section';
+import { ScrollFrame } from '@ng-atomic/components/frames/scroll';
+import { NavigatorOrganism } from '@ng-atomic/components/organisms/navigator';
+import { FormGroup, FormControl } from '@angular/forms';
+
+class MessagesTemplate {
+    constructor() {
+        this.navStartActions = [];
+        this.navEndActions = [];
+        this.messages = [];
+        this.form = new FormGroup({
+            name: new FormControl(''),
+            description: new FormControl(''),
+            message: new FormControl(''),
+        });
+        this.action = new EventEmitter();
+    }
+}
+MessagesTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MessagesTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MessagesTemplate.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: MessagesTemplate, isStandalone: true, selector: "templates-messages", inputs: { navStartActions: "navStartActions", navEndActions: "navEndActions", messages: "messages", form: "form" }, outputs: { action: "action" }, host: { classAttribute: "template" }, ngImport: i0, template: `
+    <frames-scroll>
+      <organisms-navigator
+        [startActions]="navStartActions"
+        [endActions]="navEndActions"
+        (action)="action.emit($event)"
+        navigator
+      >
+        <span> メッセージ </span>
+      </organisms-navigator>
+      <div class="message" contents>
+        <div class="scroll">
+          <organisms-messages-section
+            [messages]="messages"
+          ></organisms-messages-section>
+        </div>
+        <organisms-textarea-section
+          [control]="form.get(['message'])"
+          (action)="action.emit($event)"
+        ></organisms-textarea-section>
+      </div>
+    </frames-scroll>
+  `, isInline: true, styles: [":host{width:100%;height:100%;background:white;display:block}:host .message{display:block;height:100%;position:relative}:host .message .scroll{height:calc(100% - 80px);overflow:scroll}:host .message organisms-textarea-section{position:absolute;overflow:hidden;--vertical-padding: 0px;width:100%;height:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MessagesSectionOrganism, selector: "organisms-messages-section", inputs: ["messages"] }, { kind: "component", type: TextareaSectionOrganism, selector: "organisms-textarea-section", inputs: ["label", "rows", "control"], outputs: ["action"] }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator", inputs: ["startActions", "endActions"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: MessagesTemplate, decorators: [{
+            type: Component,
+            args: [{ selector: 'templates-messages', standalone: true, imports: [
+                        CommonModule,
+                        MessagesSectionOrganism,
+                        MessageInputSectionOrganism,
+                        TextareaSectionOrganism,
+                        ScrollFrame,
+                        NavigatorOrganism,
+                    ], template: `
+    <frames-scroll>
+      <organisms-navigator
+        [startActions]="navStartActions"
+        [endActions]="navEndActions"
+        (action)="action.emit($event)"
+        navigator
+      >
+        <span> メッセージ </span>
+      </organisms-navigator>
+      <div class="message" contents>
+        <div class="scroll">
+          <organisms-messages-section
+            [messages]="messages"
+          ></organisms-messages-section>
+        </div>
+        <organisms-textarea-section
+          [control]="form.get(['message'])"
+          (action)="action.emit($event)"
+        ></organisms-textarea-section>
+      </div>
+    </frames-scroll>
+  `, host: { class: 'template' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:100%;height:100%;background:white;display:block}:host .message{display:block;height:100%;position:relative}:host .message .scroll{height:calc(100% - 80px);overflow:scroll}:host .message organisms-textarea-section{position:absolute;overflow:hidden;--vertical-padding: 0px;width:100%;height:80px}\n"] }]
+        }], propDecorators: { navStartActions: [{
+                type: Input
+            }], navEndActions: [{
+                type: Input
+            }], messages: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], action: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MessagesTemplate };
+//# sourceMappingURL=ng-atomic-components-templates-messages.mjs.map

package/fesm2020/ng-atomic-components-templates-messages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-templates-messages.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/messages/messages.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/messages/ng-atomic-components-templates-messages.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MessagesSectionOrganism } from '@ng-atomic/components/organisms/messages-section';\nimport { MessageInputSectionOrganism } from '@ng-atomic/components/organisms/message-input-section';\nimport { TextareaSectionOrganism } from '@ng-atomic/components/organisms/textarea-section';\nimport { ScrollFrame } from '@ng-atomic/components/frames/scroll';\nimport { NavigatorOrganism } from '@ng-atomic/components/organisms/navigator';\nimport { FormGroup } from '@angular/forms';\nimport { FormControl } from '@angular/forms';\nimport { Action } from '@ng-atomic/common/models';\n\n\n@Component({\n  selector: 'templates-messages',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MessagesSectionOrganism,\n    MessageInputSectionOrganism,\n    TextareaSectionOrganism,\n    ScrollFrame,\n    NavigatorOrganism,\n  ],\n  template: `\n    <frames-scroll>\n      <organisms-navigator\n        [startActions]=\"navStartActions\"\n        [endActions]=\"navEndActions\"\n        (action)=\"action.emit($event)\"\n        navigator\n      >\n        <span> メッセージ </span>\n      </organisms-navigator>\n      <div class=\"message\" contents>\n        <div class=\"scroll\">\n          <organisms-messages-section\n            [messages]=\"messages\"\n          ></organisms-messages-section>\n        </div>\n        <organisms-textarea-section\n          [control]=\"form.get(['message'])\"\n          (action)=\"action.emit($event)\"\n        ></organisms-textarea-section>\n      </div>\n    </frames-scroll>\n  `,\n  styleUrls: ['./messages.template.scss'],\n  host: { class: 'template' },\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MessagesTemplate {\n  @Input()\n  navStartActions: Action[] = [];\n\n  @Input()\n  navEndActions: Action[] = [];\n\n  @Input()\n  messages: {role: string, content: string}[] = [];\n\n  @Input()\n  form = new FormGroup({\n    name: new FormControl(''),\n    description: new FormControl(''),\n    message: new FormControl(''),\n  });\n\n  @Output()\n  action = new EventEmitter<Action>();\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;MAkDa,gBAAgB,CAAA;AAtC7B,IAAA,WAAA,GAAA;QAwCE,IAAe,CAAA,eAAA,GAAa,EAAE,CAAC;QAG/B,IAAa,CAAA,aAAA,GAAa,EAAE,CAAC;QAG7B,IAAQ,CAAA,QAAA,GAAsC,EAAE,CAAC;QAGjD,IAAI,CAAA,IAAA,GAAG,IAAI,SAAS,CAAC;AACnB,YAAA,IAAI,EAAE,IAAI,WAAW,CAAC,EAAE,CAAC;AACzB,YAAA,WAAW,EAAE,IAAI,WAAW,CAAC,EAAE,CAAC;AAChC,YAAA,OAAO,EAAE,IAAI,WAAW,CAAC,EAAE,CAAC;AAC7B,SAAA,CAAC,CAAC;AAGH,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAU,CAAC;AAErC,KAAA;;6GApBY,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EA3BjB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;GAsBT,EA7BC,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,sTAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,+BACZ,uBAAuB,EAAA,QAAA,EAAA,4BAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAEvB,uBAAuB,EACvB,QAAA,EAAA,4BAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,WAAW,0DACX,iBAAiB,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FA6BR,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAtC5B,SAAS;+BACE,oBAAoB,EAAA,UAAA,EAClB,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,uBAAuB;wBACvB,2BAA2B;wBAC3B,uBAAuB;wBACvB,WAAW;wBACX,iBAAiB;qBAClB,EACS,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;GAsBT,EAEK,IAAA,EAAA,EAAE,KAAK,EAAE,UAAU,EAAE,EACV,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,sTAAA,CAAA,EAAA,CAAA;8BAI/C,eAAe,EAAA,CAAA;sBADd,KAAK;gBAIN,aAAa,EAAA,CAAA;sBADZ,KAAK;gBAIN,QAAQ,EAAA,CAAA;sBADP,KAAK;gBAIN,IAAI,EAAA,CAAA;sBADH,KAAK;gBAQN,MAAM,EAAA,CAAA;sBADL,MAAM;;;ACnET;;AAEG;;;;"}

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

@@ -40,7 +40,7 @@ class SmartCrudTemplate {
     }
 }
 SmartCrudTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SmartCrudTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartCrudTemplate.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: SmartCrudTemplate, isStandalone: true, selector: "templates-smart-crud", inputs: { title: "title", form: "form", navStartActions: "navStartActions", navEndActions: "navEndActions", actions: "actions" }, outputs: { action: "action" }, host: { classAttribute: "template" }, ngImport: i0, 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-textarea-section\n        *ngSwitchCase=\"'textarea'\"\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n        [rows]=\"(entry[0] | smartField).rows\"\n      ></organisms-textarea-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-DHsS: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-DHsS: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-DHsS: 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-DHsS);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-DHsS)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-DHsS)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DomainModule }, { kind: "pipe", type: i2.DomainPipe, name: "D" }, { kind: "ngmodule", type: SmartFieldModule }, { kind: "pipe", type: i3.SmartFieldPipe, name: "smartField" }, { kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: ActionButtonsSectionOrganism, selector: "organisms-action-buttons-section", inputs: ["actions"], outputs: ["action"] }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator", inputs: ["startActions", "endActions"], outputs: ["action"] }, { kind: "component", type: DateInputSectionOrganism, selector: "organisms-date-input-section", inputs: ["control", "label", "placeholder"] }, { kind: "component", type: TextInputSectionOrganism, selector: "organisms-text-input-section", inputs: ["label", "placeholder", "type", "hint", "control"] }, { kind: "component", type: TextareaSectionOrganism, selector: "organisms-textarea-section", inputs: ["label", "rows", "control"], outputs: ["action"] }, { kind: "component", type: SelectInputSectionOrganism, selector: "organisms-select-input-section", inputs: ["label", "control", "options"] }, { kind: "component", type: HeaderMolecule, selector: "molecules-header", inputs: ["title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SmartCrudTemplate.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: SmartCrudTemplate, isStandalone: true, selector: "templates-smart-crud", inputs: { title: "title", form: "form", navStartActions: "navStartActions", navEndActions: "navEndActions", actions: "actions" }, outputs: { action: "action" }, host: { classAttribute: "template" }, ngImport: i0, 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-textarea-section\n        *ngSwitchCase=\"'textarea'\"\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n        [rows]=\"(entry[0] | smartField).rows\"\n      ></organisms-textarea-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-jf3V: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-jf3V: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-jf3V: 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-jf3V);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-jf3V)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-jf3V)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DomainModule }, { kind: "pipe", type: i2.DomainPipe, name: "D" }, { kind: "ngmodule", type: SmartFieldModule }, { kind: "pipe", type: i3.SmartFieldPipe, name: "smartField" }, { kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: ActionButtonsSectionOrganism, selector: "organisms-action-buttons-section", inputs: ["actions"], outputs: ["action"] }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator", inputs: ["startActions", "endActions"], outputs: ["action"] }, { kind: "component", type: DateInputSectionOrganism, selector: "organisms-date-input-section", inputs: ["control", "label", "placeholder"] }, { kind: "component", type: TextInputSectionOrganism, selector: "organisms-text-input-section", inputs: ["label", "placeholder", "type", "hint", "control"] }, { kind: "component", type: TextareaSectionOrganism, selector: "organisms-textarea-section", inputs: ["label", "rows", "control"], outputs: ["action"] }, { kind: "component", type: SelectInputSectionOrganism, selector: "organisms-select-input-section", inputs: ["label", "control", "options"] }, { kind: "component", type: HeaderMolecule, selector: "molecules-header", inputs: ["title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SmartCrudTemplate, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
@@ -57,7 +57,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                         TextareaSectionOrganism,
                         SelectInputSectionOrganism,
                         HeaderMolecule,
-                    ], 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-textarea-section\n        *ngSwitchCase=\"'textarea'\"\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n        [rows]=\"(entry[0] | smartField).rows\"\n      ></organisms-textarea-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-DHsS: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-DHsS: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-DHsS: 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-DHsS);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-DHsS)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-DHsS)}\n"] }]
+                    ], 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-textarea-section\n        *ngSwitchCase=\"'textarea'\"\n        [label]=\"entry[0] | D\"\n        [control]=\"entry[1]\"\n        [rows]=\"(entry[0] | smartField).rows\"\n      ></organisms-textarea-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-jf3V: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-smart-crud-jf3V: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-smart-crud-jf3V: 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-jf3V);--vertical-padding: var(--vertical-padding-SCOPED-IN-smart-crud-jf3V)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-smart-crud-jf3V)}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], form: [{

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

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output } from '@angular/core';
-import '@angular/material/legacy-paginator';
+import { EventEmitter, Directive, Output, inject, Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';
@@ -20,10 +19,39 @@ var ActionId;
     ActionId["BACK"] = "[@ng-atomic/components/templates/smart-index] Back";
     ActionId["TABLE_HEADER_CLICK"] = "[@ng-atomic/components/templates/smart-index] Table Header Click";
     ActionId["ITEM_CLICK"] = "[@ng-atomic/components/templates/smart-index] Item Click";
+    ActionId["CHECKBOX_CLICK"] = "[@ng-atomic/components/templates/smart-index] Check Item";
 })(ActionId || (ActionId = {}));
+class NgAtomicDirective {
+    constructor() {
+        this.action = new EventEmitter();
+    }
+    ngOnInit() {
+        this.action.subscribe(action => {
+            console.debug('NgAtomicDirective.action', action);
+        });
+    }
+    onAction(action) {
+        switch (action.id) {
+            case ActionId$1.CLICK_ITEM:
+                return this.action.emit({ ...action, id: ActionId.ITEM_CLICK });
+            default: return this.action.emit(action);
+        }
+    }
+    dispatch(action) {
+        this.action.emit(action);
+    }
+}
+NgAtomicDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgAtomicDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgAtomicDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: NgAtomicDirective, isStandalone: true, outputs: { action: "action" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NgAtomicDirective, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }], propDecorators: { action: [{
+                type: Output
+            }] } });
 class SmartIndexTemplate {
     constructor() {
-        this.ActionId = ActionId;
+        this.ngAtomic = inject(NgAtomicDirective);
         this.gridToolbarActions = [];
         this.tableChildrenKey = '';
         this.form = new FormGroup({
@@ -39,29 +67,26 @@ class SmartIndexTemplate {
         this.navEndActions = [];
         this.properties = [];
         this.selectedIdSet = new Set();
-        this.page = {
-            pageIndex: 0,
-            pageSize: 20,
-            length: 100,
-        };
         this.pageSizeOptions = [5, 10, 25, 100];
         this.queryPlaceholder = '';
         this.device = 'sp';
-        this.action = new EventEmitter();
         this.backButtonClick = new EventEmitter();
-        this.checkboxClick = new EventEmitter();
         this.pageChange = new EventEmitter();
     }
-    onAction(action) {
-        switch (action.id) {
-            case ActionId$1.CLICK_ITEM:
-                return this.action.emit({ ...action, id: ActionId.ITEM_CLICK });
-            default: return this.action.emit(action);
-        }
+    onCheckboxClickItem(item) {
+        console.debug('onCheckboxClickItem', item);
+        this.ngAtomic.action.emit({
+            id: ActionId.CHECKBOX_CLICK,
+            payload: item,
+        });
+    }
+    ngOnChanges(changes) {
+        console.debug('changed!', changes);
     }
 }
+SmartIndexTemplate.ActionId = ActionId;
 SmartIndexTemplate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SmartIndexTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartIndexTemplate.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: SmartIndexTemplate, isStandalone: true, selector: "templates-smart-index", inputs: { gridToolbarActions: "gridToolbarActions", tableChildrenKey: "tableChildrenKey", form: "form", queryControl: "queryControl", title: "title", description: "description", items: "items", itemActions: "itemActions", navStartActions: "navStartActions", navEndActions: "navEndActions", properties: "properties", selectedIdSet: "selectedIdSet", sortKey: "sortKey", sortOrder: "sortOrder", page: "page", pageSizeOptions: "pageSizeOptions", queryPlaceholder: "queryPlaceholder", device: "device" }, outputs: { action: "action", backButtonClick: "backButtonClick", checkboxClick: "checkboxClick", pageChange: "pageChange" }, host: { classAttribute: "template" }, ngImport: i0, 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 [ngSwitch]=\"device\">\n    <ng-container *ngSwitchCase=\"'sp'\">\n      <organisms-smart-list\n        [items]=\"items\"\n        (action)=\"onAction($event)\"\n      ></organisms-smart-list>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <frames-divider>\n        <ng-content first select=\"[dashboard]\"></ng-content>\n        <div style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\" second>\n          <organisms-grid-toolbar\n            [actions]=\"gridToolbarActions\"\n            (action)=\"onAction($event)\"\n          ></organisms-grid-toolbar>\n          <organisms-smart-table\n            [items]=\"items\"\n            [itemActions]=\"itemActions\"\n            [columns]=\"properties\"\n            [selectedIdSet]=\"selectedIdSet\"\n            [sortKey]=\"sortKey\"\n            [sortOrder]=\"sortOrder\"\n            [childrenKey]=\"tableChildrenKey\"\n            (action)=\"onAction($event)\"\n            (checkboxClick)=\"checkboxClick.emit($event)\"\n            (headerClick)=\"onAction({id: ActionId.TABLE_HEADER_CLICK, payload: $event})\"\n          ></organisms-smart-table>\n          <organisms-paginator\n            *ngIf=\"page\"\n            [control]=\"queryControl\"\n            [form]=\"form\"\n            [page]=\"page\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [placeholder]=\"queryPlaceholder\"\n            (pageChange)=\"pageChange.emit($event)\"\n          ></organisms-paginator>\n        </div>\n      </frames-divider>\n      \n    </ng-container>\n  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-0bnq: var(--navigator-height)}:host{width:100%;height:100%;background:white;display:block}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: DividerFrame, selector: "frames-divider" }, { kind: "component", type: GridToolbarOrganism, selector: "organisms-grid-toolbar", inputs: ["actions"], outputs: ["action"] }, { kind: "component", type: PaginatorOrganism, selector: "organisms-paginator", inputs: ["control", "form", "placeholder", "page", "pageSizeOptions"], outputs: ["pageChange"] }, { kind: "component", type: SmartTableOrganism, selector: "organisms-smart-table", inputs: ["columns", "childrenKey", "items", "itemActions", "pageSize", "selectedIdSet", "sort"], outputs: ["action", "headerClick", "checkboxClick", "pageChange", "itemCheck"] }, { kind: "component", type: SmartListOrganism, selector: "organisms-smart-list", inputs: ["items"], outputs: ["action"] }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator", inputs: ["startActions", "endActions"], outputs: ["action"] }, { kind: "component", type: HeaderMolecule, selector: "molecules-header", inputs: ["title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SmartIndexTemplate.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: SmartIndexTemplate, isStandalone: true, selector: "templates-smart-index", inputs: { gridToolbarActions: "gridToolbarActions", tableChildrenKey: "tableChildrenKey", form: "form", queryControl: "queryControl", title: "title", description: "description", items: "items", itemActions: "itemActions", navStartActions: "navStartActions", navEndActions: "navEndActions", properties: "properties", selectedIdSet: "selectedIdSet", sortKey: "sortKey", sortOrder: "sortOrder", pageSizeOptions: "pageSizeOptions", queryPlaceholder: "queryPlaceholder", device: "device" }, outputs: { backButtonClick: "backButtonClick", pageChange: "pageChange" }, host: { classAttribute: "template" }, usesOnChanges: true, hostDirectives: [{ directive: NgAtomicDirective, outputs: ["action", "action"] }], ngImport: i0, template: "<frames-scroll>\n  <organisms-navigator\n    [startActions]=\"navStartActions\"\n    [endActions]=\"navEndActions\"\n    (action)=\"ngAtomic.onAction($event)\"\n    navigator\n  >\n    <molecules-header [title]=\"title\" [description]=\"description\"></molecules-header>\n  </organisms-navigator>\n  <frames-auto-layout vertical contents [ngSwitch]=\"device\">\n    <ng-container *ngSwitchCase=\"'sp'\">\n      <organisms-smart-list\n        [items]=\"items\"\n        (action)=\"ngAtomic.onAction($event)\"\n      ></organisms-smart-list>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <frames-divider>\n        <ng-content first select=\"[dashboard]\"></ng-content>\n        <div style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\" second>\n          <organisms-grid-toolbar\n            [actions]=\"gridToolbarActions\"\n            (action)=\"ngAtomic.onAction($event)\"\n          ></organisms-grid-toolbar>\n          <organisms-smart-table\n            [items]=\"items\"\n            [itemActions]=\"itemActions\"\n            [columns]=\"properties\"\n            [selectedIdSet]=\"selectedIdSet\"\n            [sortKey]=\"sortKey\"\n            [sortOrder]=\"sortOrder\"\n            [childrenKey]=\"tableChildrenKey\"\n            (action)=\"ngAtomic.onAction($event)\"\n            (checkboxClick)=\"onCheckboxClickItem($event)\"\n            (headerClick)=\"ngAtomic.onAction({id: ActionId.TABLE_HEADER_CLICK, payload: $event})\"\n          ></organisms-smart-table>\n          <organisms-paginator\n            [form]=\"form\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [placeholder]=\"queryPlaceholder\"\n            (pageChange)=\"pageChange.emit($event)\"\n          ></organisms-paginator>\n        </div>\n      </frames-divider>\n      \n    </ng-container>\n  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-2S4F: var(--navigator-height)}:host{width:100%;height:100%;background:white;display:block}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: DividerFrame, selector: "frames-divider" }, { kind: "component", type: GridToolbarOrganism, selector: "organisms-grid-toolbar", inputs: ["actions"], outputs: ["action"] }, { kind: "component", type: PaginatorOrganism, selector: "organisms-paginator", inputs: ["form", "pageSizeOptions"] }, { kind: "component", type: SmartTableOrganism, selector: "organisms-smart-table", inputs: ["columns", "childrenKey", "items", "itemActions", "pageSize", "selectedIdSet", "sort"], outputs: ["action", "headerClick", "checkboxClick", "pageChange", "itemCheck"] }, { kind: "component", type: SmartListOrganism, selector: "organisms-smart-list", inputs: ["items"], outputs: ["action"] }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator", inputs: ["startActions", "endActions"], outputs: ["action"] }, { kind: "component", type: HeaderMolecule, selector: "molecules-header", inputs: ["title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: SmartIndexTemplate, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
@@ -76,7 +101,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                         NavigatorOrganism,
                         FiltersSectionOrganism,
                         HeaderMolecule,
-                    ], 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 [ngSwitch]=\"device\">\n    <ng-container *ngSwitchCase=\"'sp'\">\n      <organisms-smart-list\n        [items]=\"items\"\n        (action)=\"onAction($event)\"\n      ></organisms-smart-list>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <frames-divider>\n        <ng-content first select=\"[dashboard]\"></ng-content>\n        <div style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\" second>\n          <organisms-grid-toolbar\n            [actions]=\"gridToolbarActions\"\n            (action)=\"onAction($event)\"\n          ></organisms-grid-toolbar>\n          <organisms-smart-table\n            [items]=\"items\"\n            [itemActions]=\"itemActions\"\n            [columns]=\"properties\"\n            [selectedIdSet]=\"selectedIdSet\"\n            [sortKey]=\"sortKey\"\n            [sortOrder]=\"sortOrder\"\n            [childrenKey]=\"tableChildrenKey\"\n            (action)=\"onAction($event)\"\n            (checkboxClick)=\"checkboxClick.emit($event)\"\n            (headerClick)=\"onAction({id: ActionId.TABLE_HEADER_CLICK, payload: $event})\"\n          ></organisms-smart-table>\n          <organisms-paginator\n            *ngIf=\"page\"\n            [control]=\"queryControl\"\n            [form]=\"form\"\n            [page]=\"page\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [placeholder]=\"queryPlaceholder\"\n            (pageChange)=\"pageChange.emit($event)\"\n          ></organisms-paginator>\n        </div>\n      </frames-divider>\n      \n    </ng-container>\n  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-0bnq: var(--navigator-height)}:host{width:100%;height:100%;background:white;display:block}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}\n"] }]
+                    ], selector: 'templates-smart-index', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'template' }, hostDirectives: [
+                        {
+                            directive: NgAtomicDirective,
+                            outputs: ['action'],
+                        }
+                    ], template: "<frames-scroll>\n  <organisms-navigator\n    [startActions]=\"navStartActions\"\n    [endActions]=\"navEndActions\"\n    (action)=\"ngAtomic.onAction($event)\"\n    navigator\n  >\n    <molecules-header [title]=\"title\" [description]=\"description\"></molecules-header>\n  </organisms-navigator>\n  <frames-auto-layout vertical contents [ngSwitch]=\"device\">\n    <ng-container *ngSwitchCase=\"'sp'\">\n      <organisms-smart-list\n        [items]=\"items\"\n        (action)=\"ngAtomic.onAction($event)\"\n      ></organisms-smart-list>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <frames-divider>\n        <ng-content first select=\"[dashboard]\"></ng-content>\n        <div style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\" second>\n          <organisms-grid-toolbar\n            [actions]=\"gridToolbarActions\"\n            (action)=\"ngAtomic.onAction($event)\"\n          ></organisms-grid-toolbar>\n          <organisms-smart-table\n            [items]=\"items\"\n            [itemActions]=\"itemActions\"\n            [columns]=\"properties\"\n            [selectedIdSet]=\"selectedIdSet\"\n            [sortKey]=\"sortKey\"\n            [sortOrder]=\"sortOrder\"\n            [childrenKey]=\"tableChildrenKey\"\n            (action)=\"ngAtomic.onAction($event)\"\n            (checkboxClick)=\"onCheckboxClickItem($event)\"\n            (headerClick)=\"ngAtomic.onAction({id: ActionId.TABLE_HEADER_CLICK, payload: $event})\"\n          ></organisms-smart-table>\n          <organisms-paginator\n            [form]=\"form\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [placeholder]=\"queryPlaceholder\"\n            (pageChange)=\"pageChange.emit($event)\"\n          ></organisms-paginator>\n        </div>\n      </frames-divider>\n      \n    </ng-container>\n  </frames-auto-layout>\n</frames-scroll>", styles: [":host{--navigator-height: 56px;--navigator-height-SCOPED-IN-smart-index-2S4F: var(--navigator-height)}:host{width:100%;height:100%;background:white;display:block}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}\n"] }]
         }], propDecorators: { gridToolbarActions: [{
                 type: Input
             }], tableChildrenKey: [{
@@ -105,20 +135,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
                 type: Input
             }], sortOrder: [{
                 type: Input
-            }], page: [{
-                type: Input
             }], pageSizeOptions: [{
                 type: Input
             }], queryPlaceholder: [{
                 type: Input
             }], device: [{
                 type: Input
-            }], action: [{
-                type: Output
             }], backButtonClick: [{
                 type: Output
-            }], checkboxClick: [{
-                type: Output
             }], pageChange: [{
                 type: Output
             }] } });
@@ -127,5 +151,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionId, SmartIndexTemplate };
+export { ActionId, NgAtomicDirective, SmartIndexTemplate };
 //# sourceMappingURL=ng-atomic-components-templates-smart-index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-templates-smart-index.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/smart-index/smart-index.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/smart-index/smart-index.template.html","../../../../../packages/@ng-atomic/components/src/lib/templates/smart-index/ng-atomic-components-templates-smart-index.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';\nimport { CommonModule } from '@angular/common';\nimport { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';\nimport { ScrollFrame } from '@ng-atomic/components/frames/scroll';\nimport { HeaderMolecule } from '@ng-atomic/components/molecules/header';\nimport { SmartTableOrganism } from '@ng-atomic/components/organisms/smart-table';\nimport { SmartListOrganism, ActionId as ListActionId } from '@ng-atomic/components/organisms/smart-list';\nimport { NavigatorOrganism } from '@ng-atomic/components/organisms/navigator';\nimport { PaginatorOrganism } from '@ng-atomic/components/organisms/paginator';\nimport { Action } from '@ng-atomic/common/models';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { GridToolbarOrganism } from '@ng-atomic/components/organisms/grid-toolbar';\nimport { FiltersSectionOrganism } from '@ng-atomic/components/organisms/filters-section';\nimport { DividerFrame } from '@ng-atomic/components/frames/divider';\n\nexport enum ActionId {\n  BACK = '[@ng-atomic/components/templates/smart-index] Back',\n  TABLE_HEADER_CLICK = '[@ng-atomic/components/templates/smart-index] Table Header Click',\n  ITEM_CLICK = '[@ng-atomic/components/templates/smart-index] Item Click',\n}\n\n@Component({\n  standalone: true,\n  imports: [\n    CommonModule,\n    AutoLayoutFrame,\n    ScrollFrame,\n    DividerFrame,\n    GridToolbarOrganism,\n    PaginatorOrganism,\n    SmartTableOrganism,\n    SmartListOrganism,\n    NavigatorOrganism,\n    FiltersSectionOrganism,\n    HeaderMolecule,\n  ],\n  selector: 'templates-smart-index',\n  templateUrl: './smart-index.template.html',\n  styleUrls: ['./smart-index.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'template' },\n})\nexport class SmartIndexTemplate<T> {\n  protected ActionId = ActionId;\n\n  @Input()\n  gridToolbarActions: Action[] = [];\n\n  @Input()\n  tableChildrenKey: string = '';\n\n  @Input()\n  form = new FormGroup({\n    pageIndex: new FormControl(0),\n    pageSize: new FormControl(0),\n    length: new FormControl(0),\n  });\n\n  @Input()\n  queryControl = new FormControl<string>('');\n\n  @Input()\n  title: string = '';\n\n  @Input()\n  description?: string;\n\n  @Input()\n  items: T[] = [];\n\n  @Input()\n  itemActions: (item: T) => Action[] = () => [];\n\n  @Input()\n  navStartActions: Action[] = [{ id: ActionId.BACK, icon: 'arrow_back' }];\n\n  @Input()\n  navEndActions: Action[] = [];\n\n  @Input()\n  properties: (keyof T)[] =  [];\n\n  @Input()\n  selectedIdSet = new Set<string>();\n\n  @Input()\n  sortKey?: string;\n\n  @Input()\n  sortOrder?: string;\n\n  @Input()\n  page?: PageEvent = {\n    pageIndex: 0,\n    pageSize: 20,\n    length: 100,\n  };\n\n  @Input()\n  pageSizeOptions: number[] = [5, 10, 25, 100];\n\n  @Input()\n  queryPlaceholder = '';\n\n  @Input()\n  device: 'sp' | 'tablet' | 'pc' = 'sp';\n\n  @Output()\n  action = new EventEmitter<Action>();\n\n  @Output()\n  backButtonClick = new EventEmitter();\n\n  @Output()\n  checkboxClick = new EventEmitter<T>();\n\n  @Output()\n  pageChange = new EventEmitter<PageEvent>();\n\n  onAction(action: Action): void {\n    switch(action.id) {\n      case ListActionId.CLICK_ITEM:\n        return this.action.emit({...action, id: ActionId.ITEM_CLICK});\n      default: return this.action.emit(action);\n    }\n  }\n}\n","<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 [ngSwitch]=\"device\">\n    <ng-container *ngSwitchCase=\"'sp'\">\n      <organisms-smart-list\n        [items]=\"items\"\n        (action)=\"onAction($event)\"\n      ></organisms-smart-list>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <frames-divider>\n        <ng-content first select=\"[dashboard]\"></ng-content>\n        <div style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\" second>\n          <organisms-grid-toolbar\n            [actions]=\"gridToolbarActions\"\n            (action)=\"onAction($event)\"\n          ></organisms-grid-toolbar>\n          <organisms-smart-table\n            [items]=\"items\"\n            [itemActions]=\"itemActions\"\n            [columns]=\"properties\"\n            [selectedIdSet]=\"selectedIdSet\"\n            [sortKey]=\"sortKey\"\n            [sortOrder]=\"sortOrder\"\n            [childrenKey]=\"tableChildrenKey\"\n            (action)=\"onAction($event)\"\n            (checkboxClick)=\"checkboxClick.emit($event)\"\n            (headerClick)=\"onAction({id: ActionId.TABLE_HEADER_CLICK, payload: $event})\"\n          ></organisms-smart-table>\n          <organisms-paginator\n            *ngIf=\"page\"\n            [control]=\"queryControl\"\n            [form]=\"form\"\n            [page]=\"page\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [placeholder]=\"queryPlaceholder\"\n            (pageChange)=\"pageChange.emit($event)\"\n          ></organisms-paginator>\n        </div>\n      </frames-divider>\n      \n    </ng-container>\n  </frames-auto-layout>\n</frames-scroll>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ListActionId"],"mappings":"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"}
+{"version":3,"file":"ng-atomic-components-templates-smart-index.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/smart-index/smart-index.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/smart-index/smart-index.template.html","../../../../../packages/@ng-atomic/components/src/lib/templates/smart-index/ng-atomic-components-templates-smart-index.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, EventEmitter, Input, OnChanges, Output, SimpleChanges, inject } from '@angular/core';\nimport { LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';\nimport { CommonModule } from '@angular/common';\nimport { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';\nimport { ScrollFrame } from '@ng-atomic/components/frames/scroll';\nimport { HeaderMolecule } from '@ng-atomic/components/molecules/header';\nimport { SmartTableOrganism } from '@ng-atomic/components/organisms/smart-table';\nimport { SmartListOrganism, ActionId as ListActionId } from '@ng-atomic/components/organisms/smart-list';\nimport { NavigatorOrganism } from '@ng-atomic/components/organisms/navigator';\nimport { PaginatorOrganism } from '@ng-atomic/components/organisms/paginator';\nimport { Action } from '@ng-atomic/common/models';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { GridToolbarOrganism } from '@ng-atomic/components/organisms/grid-toolbar';\nimport { FiltersSectionOrganism } from '@ng-atomic/components/organisms/filters-section';\nimport { DividerFrame } from '@ng-atomic/components/frames/divider';\n\nexport enum ActionId {\n  BACK = '[@ng-atomic/components/templates/smart-index] Back',\n  TABLE_HEADER_CLICK = '[@ng-atomic/components/templates/smart-index] Table Header Click',\n  ITEM_CLICK = '[@ng-atomic/components/templates/smart-index] Item Click',\n  CHECKBOX_CLICK = '[@ng-atomic/components/templates/smart-index] Check Item',\n}\n\n\n@Directive({ standalone: true })\nexport class NgAtomicDirective {\n  @Output()\n  action = new EventEmitter<Action>();\n\n  ngOnInit() {\n    this.action.subscribe(action => {\n      console.debug('NgAtomicDirective.action', action);\n    });\n  }\n\n  onAction(action: Action): void {\n    switch(action.id) {\n      case ListActionId.CLICK_ITEM:\n        return this.action.emit({...action, id: ActionId.ITEM_CLICK});\n      default: return this.action.emit(action);\n    }\n  }\n\n  dispatch(action: Action): void {\n    this.action.emit(action);\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [\n    CommonModule,\n    AutoLayoutFrame,\n    ScrollFrame,\n    DividerFrame,\n    GridToolbarOrganism,\n    PaginatorOrganism,\n    SmartTableOrganism,\n    SmartListOrganism,\n    NavigatorOrganism,\n    FiltersSectionOrganism,\n    HeaderMolecule,\n  ],\n  selector: 'templates-smart-index',\n  templateUrl: './smart-index.template.html',\n  styleUrls: ['./smart-index.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'template' },\n  hostDirectives: [\n    {\n      directive: NgAtomicDirective,\n      outputs: ['action'],\n    }\n  ],\n})\nexport class SmartIndexTemplate<T> implements OnChanges {\n  static ActionId = ActionId;\n\n  protected ngAtomic = inject(NgAtomicDirective);\n\n  @Input()\n  gridToolbarActions: Action[] = [];\n\n  @Input()\n  tableChildrenKey: string = '';\n\n  @Input()\n  form = new FormGroup({\n    pageIndex: new FormControl(0),\n    pageSize: new FormControl(0),\n    length: new FormControl(0),\n  });\n\n  @Input()\n  queryControl = new FormControl<string>('');\n\n  @Input()\n  title: string = '';\n\n  @Input()\n  description?: string;\n\n  @Input()\n  items: T[] = [];\n\n  @Input()\n  itemActions: (item: T) => Action[] = () => [];\n\n  @Input()\n  navStartActions: Action[] = [{ id: ActionId.BACK, icon: 'arrow_back' }];\n\n  @Input()\n  navEndActions: Action[] = [];\n\n  @Input()\n  properties: (keyof T)[] =  [];\n\n  @Input()\n  selectedIdSet = new Set<string>();\n\n  @Input()\n  sortKey?: string;\n\n  @Input()\n  sortOrder?: string;\n\n  @Input()\n  pageSizeOptions: number[] = [5, 10, 25, 100];\n\n  @Input()\n  queryPlaceholder = '';\n\n  @Input()\n  device: 'sp' | 'tablet' | 'pc' = 'sp';\n\n  @Output()\n  backButtonClick = new EventEmitter();\n\n  @Output()\n  pageChange = new EventEmitter<PageEvent>();\n\n  onCheckboxClickItem(item: T) {\n    console.debug('onCheckboxClickItem', item);\n    this.ngAtomic.action.emit({\n      id: ActionId.CHECKBOX_CLICK,\n      payload: item,\n    });\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    console.debug('changed!', changes);\n  }\n}\n","<frames-scroll>\n  <organisms-navigator\n    [startActions]=\"navStartActions\"\n    [endActions]=\"navEndActions\"\n    (action)=\"ngAtomic.onAction($event)\"\n    navigator\n  >\n    <molecules-header [title]=\"title\" [description]=\"description\"></molecules-header>\n  </organisms-navigator>\n  <frames-auto-layout vertical contents [ngSwitch]=\"device\">\n    <ng-container *ngSwitchCase=\"'sp'\">\n      <organisms-smart-list\n        [items]=\"items\"\n        (action)=\"ngAtomic.onAction($event)\"\n      ></organisms-smart-list>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <frames-divider>\n        <ng-content first select=\"[dashboard]\"></ng-content>\n        <div style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\" second>\n          <organisms-grid-toolbar\n            [actions]=\"gridToolbarActions\"\n            (action)=\"ngAtomic.onAction($event)\"\n          ></organisms-grid-toolbar>\n          <organisms-smart-table\n            [items]=\"items\"\n            [itemActions]=\"itemActions\"\n            [columns]=\"properties\"\n            [selectedIdSet]=\"selectedIdSet\"\n            [sortKey]=\"sortKey\"\n            [sortOrder]=\"sortOrder\"\n            [childrenKey]=\"tableChildrenKey\"\n            (action)=\"ngAtomic.onAction($event)\"\n            (checkboxClick)=\"onCheckboxClickItem($event)\"\n            (headerClick)=\"ngAtomic.onAction({id: ActionId.TABLE_HEADER_CLICK, payload: $event})\"\n          ></organisms-smart-table>\n          <organisms-paginator\n            [form]=\"form\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [placeholder]=\"queryPlaceholder\"\n            (pageChange)=\"pageChange.emit($event)\"\n          ></organisms-paginator>\n        </div>\n      </frames-divider>\n      \n    </ng-container>\n  </frames-auto-layout>\n</frames-scroll>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ListActionId"],"mappings":"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"}

package/organisms/mermaid-section/mermaid-section.organism.d.ts

@@ -1,10 +1,14 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef, NgZone, OnChanges, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class MermaidSectionOrganism {
-    view: ElementRef;
+export declare class MermaidSectionOrganism implements OnChanges {
+    private ngZone;
+    constructor(ngZone: NgZone);
+    view: ElementRef<HTMLElement>;
     mermaid: string;
+    ngOnInit(): void;
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private renderMermaid;
     static ɵfac: i0.ɵɵFactoryDeclaration<MermaidSectionOrganism, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MermaidSectionOrganism, "organisms-mermaid-section", never, { "mermaid": "mermaid"; }, {}, never, never, true, never>;
 }

package/organisms/message-input-section/index.d.ts

@@ -0,0 +1 @@
+export * from './message-input-section.organism';

package/organisms/message-input-section/message-input-section.organism.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Action } from '@ng-atomic/common/models';
+import * as i0 from "@angular/core";
+export declare enum ActionId {
+    SEND = "send"
+}
+export declare class MessageInputSectionOrganism {
+    control: FormControl<string>;
+    action: EventEmitter<Action<string>>;
+    protected onSendButtonClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageInputSectionOrganism, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageInputSectionOrganism, "organisms-message-input-section", never, { "control": "control"; }, { "action": "action"; }, never, never, true, never>;
+}

package/organisms/messages-section/index.d.ts

@@ -0,0 +1 @@
+export * from './messages-section.organism';

package/organisms/messages-section/messages-section.organism.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class MessagesSectionOrganism {
+    messages: {
+        role: string;
+        content: string;
+    }[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessagesSectionOrganism, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessagesSectionOrganism, "organisms-messages-section", never, { "messages": "messages"; }, {}, never, never, true, never>;
+}

package/organisms/paginator/paginator.organism.d.ts

@@ -1,19 +1,19 @@
-import { EventEmitter } from '@angular/core';
 import { LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';
 import { FormControl, FormGroup } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class PaginatorOrganism {
-    control: FormControl<string>;
     form: FormGroup<{
         pageIndex: FormControl<number>;
         pageSize: FormControl<number>;
         length: FormControl<number>;
     }>;
-    placeholder: string;
-    page: PageEvent;
     pageSizeOptions: number[];
-    pageChange: EventEmitter<PageEvent>;
+    protected get formValue$(): import("rxjs").Observable<{
+        pageIndex: number;
+        pageSize: number;
+        length: number;
+    }>;
     protected onPageChange(page: PageEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PaginatorOrganism, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PaginatorOrganism, "organisms-paginator", never, { "control": "control"; "form": "form"; "placeholder": "placeholder"; "page": "page"; "pageSizeOptions": "pageSizeOptions"; }, { "pageChange": "pageChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginatorOrganism, "organisms-paginator", never, { "form": "form"; "pageSizeOptions": "pageSizeOptions"; }, {}, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-atomic/components",
-  "version": "5.8.1",
+  "version": "5.10.0",
   "license": "MIT",
   "module": "fesm2015/ng-atomic-components.mjs",
   "es2020": "fesm2020/ng-atomic-components.mjs",
@@ -308,6 +308,22 @@
       "node": "./fesm2015/ng-atomic-components-organisms-mermaid-section.mjs",
       "default": "./fesm2020/ng-atomic-components-organisms-mermaid-section.mjs"
     },
+    "./organisms/message-input-section": {
+      "types": "./organisms/message-input-section/index.d.ts",
+      "esm2020": "./esm2020/organisms/message-input-section/ng-atomic-components-organisms-message-input-section.mjs",
+      "es2020": "./fesm2020/ng-atomic-components-organisms-message-input-section.mjs",
+      "es2015": "./fesm2015/ng-atomic-components-organisms-message-input-section.mjs",
+      "node": "./fesm2015/ng-atomic-components-organisms-message-input-section.mjs",
+      "default": "./fesm2020/ng-atomic-components-organisms-message-input-section.mjs"
+    },
+    "./organisms/messages-section": {
+      "types": "./organisms/messages-section/index.d.ts",
+      "esm2020": "./esm2020/organisms/messages-section/ng-atomic-components-organisms-messages-section.mjs",
+      "es2020": "./fesm2020/ng-atomic-components-organisms-messages-section.mjs",
+      "es2015": "./fesm2015/ng-atomic-components-organisms-messages-section.mjs",
+      "node": "./fesm2015/ng-atomic-components-organisms-messages-section.mjs",
+      "default": "./fesm2020/ng-atomic-components-organisms-messages-section.mjs"
+    },
     "./organisms/navigation-list": {
       "types": "./organisms/navigation-list/index.d.ts",
       "esm2020": "./esm2020/organisms/navigation-list/ng-atomic-components-organisms-navigation-list.mjs",
@@ -428,6 +444,14 @@
       "node": "./fesm2015/ng-atomic-components-templates-menu.mjs",
       "default": "./fesm2020/ng-atomic-components-templates-menu.mjs"
     },
+    "./templates/messages": {
+      "types": "./templates/messages/index.d.ts",
+      "esm2020": "./esm2020/templates/messages/ng-atomic-components-templates-messages.mjs",
+      "es2020": "./fesm2020/ng-atomic-components-templates-messages.mjs",
+      "es2015": "./fesm2015/ng-atomic-components-templates-messages.mjs",
+      "node": "./fesm2015/ng-atomic-components-templates-messages.mjs",
+      "default": "./fesm2020/ng-atomic-components-templates-messages.mjs"
+    },
     "./templates/smart-crud": {
       "types": "./templates/smart-crud/index.d.ts",
       "esm2020": "./esm2020/templates/smart-crud/ng-atomic-components-templates-smart-crud.mjs",
@@ -454,13 +478,13 @@
     "@storybook/theming": "^6.4.10",
     "@angular/core": "^15.0.0",
     "@angular/platform-browser": "^15.0.0",
-    "@ng-atomic/elements": "5.8.1",
+    "@ng-atomic/elements": "5.10.0",
     "@angular/cdk": "^15.0.0",
     "@angular/material": "^15.0.0",
     "@angular/forms": "^15.0.0",
     "rxjs": "^7.0.0",
-    "@ng-atomic/common": "5.8.1",
-    "@ng-atomic/storybook": "5.8.1",
+    "@ng-atomic/common": "5.10.0",
+    "@ng-atomic/storybook": "5.10.0",
     "@storybook/angular": "6.5.13",
     "@codemirror/state": "6.2.0",
     "codemirror": "^6.0.1",

package/templates/messages/index.d.ts

@@ -0,0 +1 @@
+export * from './messages.template';

package/templates/messages/messages.template.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { FormControl } from '@angular/forms';
+import { Action } from '@ng-atomic/common/models';
+import * as i0 from "@angular/core";
+export declare class MessagesTemplate {
+    navStartActions: Action[];
+    navEndActions: Action[];
+    messages: {
+        role: string;
+        content: string;
+    }[];
+    form: FormGroup<{
+        name: FormControl<string>;
+        description: FormControl<string>;
+        message: FormControl<string>;
+    }>;
+    action: EventEmitter<Action<any>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessagesTemplate, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessagesTemplate, "templates-messages", never, { "navStartActions": "navStartActions"; "navEndActions": "navEndActions"; "messages": "messages"; "form": "form"; }, { "action": "action"; }, never, never, true, never>;
+}

package/templates/smart-index/smart-index.template.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';
 import { Action } from '@ng-atomic/common/models';
 import { FormControl, FormGroup } from '@angular/forms';
@@ -6,10 +6,20 @@ import * as i0 from "@angular/core";
 export declare enum ActionId {
     BACK = "[@ng-atomic/components/templates/smart-index] Back",
     TABLE_HEADER_CLICK = "[@ng-atomic/components/templates/smart-index] Table Header Click",
-    ITEM_CLICK = "[@ng-atomic/components/templates/smart-index] Item Click"
+    ITEM_CLICK = "[@ng-atomic/components/templates/smart-index] Item Click",
+    CHECKBOX_CLICK = "[@ng-atomic/components/templates/smart-index] Check Item"
 }
-export declare class SmartIndexTemplate<T> {
-    protected ActionId: typeof ActionId;
+export declare class NgAtomicDirective {
+    action: EventEmitter<Action<any>>;
+    ngOnInit(): void;
+    onAction(action: Action): void;
+    dispatch(action: Action): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgAtomicDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgAtomicDirective, never, never, {}, { "action": "action"; }, never, never, true, never>;
+}
+export declare class SmartIndexTemplate<T> implements OnChanges {
+    static ActionId: typeof ActionId;
+    protected ngAtomic: NgAtomicDirective;
     gridToolbarActions: Action[];
     tableChildrenKey: string;
     form: FormGroup<{
@@ -28,15 +38,13 @@ export declare class SmartIndexTemplate<T> {
     selectedIdSet: Set<string>;
     sortKey?: string;
     sortOrder?: string;
-    page?: PageEvent;
     pageSizeOptions: number[];
     queryPlaceholder: string;
     device: 'sp' | 'tablet' | 'pc';
-    action: EventEmitter<Action<any>>;
     backButtonClick: EventEmitter<any>;
-    checkboxClick: EventEmitter<T>;
     pageChange: EventEmitter<PageEvent>;
-    onAction(action: Action): void;
+    onCheckboxClickItem(item: T): void;
+    ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartIndexTemplate<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SmartIndexTemplate<any>, "templates-smart-index", never, { "gridToolbarActions": "gridToolbarActions"; "tableChildrenKey": "tableChildrenKey"; "form": "form"; "queryControl": "queryControl"; "title": "title"; "description": "description"; "items": "items"; "itemActions": "itemActions"; "navStartActions": "navStartActions"; "navEndActions": "navEndActions"; "properties": "properties"; "selectedIdSet": "selectedIdSet"; "sortKey": "sortKey"; "sortOrder": "sortOrder"; "page": "page"; "pageSizeOptions": "pageSizeOptions"; "queryPlaceholder": "queryPlaceholder"; "device": "device"; }, { "action": "action"; "backButtonClick": "backButtonClick"; "checkboxClick": "checkboxClick"; "pageChange": "pageChange"; }, never, ["[dashboard]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SmartIndexTemplate<any>, "templates-smart-index", never, { "gridToolbarActions": "gridToolbarActions"; "tableChildrenKey": "tableChildrenKey"; "form": "form"; "queryControl": "queryControl"; "title": "title"; "description": "description"; "items": "items"; "itemActions": "itemActions"; "navStartActions": "navStartActions"; "navEndActions": "navEndActions"; "properties": "properties"; "selectedIdSet": "selectedIdSet"; "sortKey": "sortKey"; "sortOrder": "sortOrder"; "pageSizeOptions": "pageSizeOptions"; "queryPlaceholder": "queryPlaceholder"; "device": "device"; }, { "backButtonClick": "backButtonClick"; "pageChange": "pageChange"; }, never, ["[dashboard]"], true, [{ directive: typeof NgAtomicDirective; inputs: {}; outputs: { "action": "action"; }; }]>;
 }