@ng-atomic/components 16.2.0 → 16.3.1

package/fesm2022/ng-atomic-components-templates-icon-button-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-templates-icon-button-menu.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/icon-button-menu/icon-button-menu.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/icon-button-menu/ng-atomic-components-templates-icon-button-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, InjectionToken, Input, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Action } from '@ng-atomic/core';\nimport { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\n\n@Directive({ standalone: true, selector: 'templates-icon-button-menu' })\nexport class IconButtonMenuTemplateStore extends InjectableComponent {\n  static TOKEN = new InjectionToken('IconButtonMenuTemplateStore');\n  @Input() actions: Action[] = [];\n}\n\n@Component({\n  selector: 'templates-icon-button-menu',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatButtonModule,\n    MatIconModule,\n  ],\n  template: `\n    <button\n      mat-icon-button\n      color=\"basic\"\n      *ngFor=\"let action of store.actions\"\n      (click)=\"dispatch(action)\"\n    >\n      <mat-icon>{{ action.icon }}</mat-icon>\n    </button>\n  `,\n  styleUrls: ['./icon-button-menu.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: IconButtonMenuTemplateStore,\n      inputs: ['actions'],\n    },\n  ]\n})\nexport class IconButtonMenuTemplate extends NgAtomicComponent {\n  protected store = inject(IconButtonMenuTemplateStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-atomic-components-templates-icon-button-menu.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/icon-button-menu/icon-button-menu.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/icon-button-menu/ng-atomic-components-templates-icon-button-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { Action, TokenizedType } from '@ng-atomic/core';\nimport { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'templates-icon-button-menu' })\nexport class IconButtonMenuTemplateStore extends InjectableComponent {\n  readonly actions = input<Action[]>([]);\n}\n\n@Component({\n  selector: 'templates-icon-button-menu',\n  standalone: true,\n  imports: [\n    MatButtonModule,\n    MatIconModule,\n  ],\n  template: `\n    @for (action of store.actions(); track action.id) {\n      <button mat-icon-button color=\"basic\" (click)=\"dispatch(action)\">\n        <mat-icon>{{ action.icon }}</mat-icon>\n      </button>\n    }\n  `,\n  styleUrls: ['./icon-button-menu.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: IconButtonMenuTemplateStore,\n      inputs: ['actions'],\n    },\n  ]\n})\nexport class IconButtonMenuTemplate extends NgAtomicComponent {\n  protected store = inject(IconButtonMenuTemplateStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAQO,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,mBAAmB,CAAA;AAA7D,IAAA,WAAA,GAAA;;AACI,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAW,EAAE,CAAC,CAAC;AACxC,KAAA;8GAFY,2BAA2B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;AAA3B,2BAA2B,GAAA,UAAA,CAAA;AAFvC,IAAA,aAAa,EAAE;AAEH,CAAA,EAAA,2BAA2B,CAEvC,CAAA;2FAFY,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBADvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,4BAA4B,EAAE,CAAA;;AA4BjE,MAAO,sBAAuB,SAAQ,iBAAiB,CAAA;AAvB7D,IAAA,WAAA,GAAA;;AAwBY,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,2BAA2B,CAAC,CAAC;AACvD,KAAA;8GAFY,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,4BAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EA3BtB,2BAA2B,EAW5B,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;GAMT,EATC,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4vBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,2IACf,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAkBJ,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAvBlC,SAAS;+BACE,4BAA4B,EAAA,UAAA,EAC1B,IAAI,EACP,OAAA,EAAA;wBACP,eAAe;wBACf,aAAa;qBACd,EACS,QAAA,EAAA,CAAA;;;;;;GAMT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,2BAA2B;4BACtC,MAAM,EAAE,CAAC,SAAS,CAAC;AACpB,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,4vBAAA,CAAA,EAAA,CAAA;;;ACjCH;;AAEG;;;;"}

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

@@ -5,10 +5,10 @@ import * as i1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 class LoadingTemplate {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoadingTemplate, isStandalone: true, selector: "templates-loading", ngImport: i0, template: "<mat-spinner></mat-spinner>\n", styles: [":host{display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: LoadingTemplate, isStandalone: true, selector: "templates-loading", ngImport: i0, template: "<mat-spinner></mat-spinner>\n", styles: [":host{display:flex;width:100%;height:100%;justify-content:center;align-items:center;background-color:#0006}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'templates-loading', standalone: true, imports: [
                         CommonModule,

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-templates-loading.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/loading/loading.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/loading/loading.template.html","../../../../../packages/@ng-atomic/components/src/lib/templates/loading/ng-atomic-components-templates-loading.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\n\n@Component({\n  selector: 'templates-loading',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatProgressSpinnerModule,\n  ],\n  templateUrl: './loading.template.html',\n  styleUrls: ['./loading.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LoadingTemplate { }\n","<mat-spinner></mat-spinner>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAea,eAAe,CAAA;+GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,ECf5B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,+BACA,EDOI,MAAA,EAAA,CAAA,+GAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,8BACZ,wBAAwB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAMf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAX3B,SAAS;+BACE,mBAAmB,EAAA,UAAA,EACjB,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,wBAAwB;qBACzB,EAGgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,+GAAA,CAAA,EAAA,CAAA;;;AEbjD;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-templates-loading.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/loading/loading.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/loading/loading.template.html","../../../../../packages/@ng-atomic/components/src/lib/templates/loading/ng-atomic-components-templates-loading.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\n\n@Component({\n  selector: 'templates-loading',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatProgressSpinnerModule,\n  ],\n  templateUrl: './loading.template.html',\n  styleUrls: ['./loading.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LoadingTemplate { }\n","<mat-spinner></mat-spinner>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAea,eAAe,CAAA;8GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,ECf5B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,+BACA,EDOI,MAAA,EAAA,CAAA,+GAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,8BACZ,wBAAwB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAMf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAX3B,SAAS;+BACE,mBAAmB,EAAA,UAAA,EACjB,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,wBAAwB;qBACzB,EAGgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,+GAAA,CAAA,EAAA,CAAA;;;AEbjD;;AAEG;;;;"}

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

@@ -1,68 +1,65 @@
-import { CommonModule } from '@angular/common';
+import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Input, inject, Component, ChangeDetectionStrategy } from '@angular/core';
-import { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { InjectableComponent, TokenizedType, NgAtomicComponent } from '@ng-atomic/core';
 import { NavigationListOrganismStore } from '@ng-atomic/components/organisms/navigation-list';
 import { MenuFooterOrganismStore } from '@ng-atomic/components/organisms/menu-footer';
 import { MenuHeaderOrganismStore } from '@ng-atomic/components/organisms/menu-header';
 
-class MenuTemplateStore extends InjectableComponent {
+let MenuTemplateStore = class MenuTemplateStore extends InjectableComponent {
     constructor() {
         super(...arguments);
-        this.actions = [];
+        this.actions = input([]);
+        this.title = input();
     }
-    static { this.TOKEN = new InjectionToken('[@ng-atomic/components] MenuTemplateStore'); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MenuTemplateStore, isStandalone: true, selector: "templates-menu", inputs: { actions: "actions" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuTemplateStore, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MenuTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: MenuTemplateStore, isStandalone: true, selector: "templates-menu", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+};
+MenuTemplateStore = __decorate([
+    TokenizedType()
+], MenuTemplateStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MenuTemplateStore, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: 'templates-menu' }]
-        }], propDecorators: { actions: [{
-                type: Input
-            }] } });
+        }] });
 class MenuTemplate extends NgAtomicComponent {
     constructor() {
         super(...arguments);
         this.store = inject(MenuTemplateStore);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuTemplate, isStandalone: true, selector: "templates-menu", usesInheritance: true, hostDirectives: [{ directive: MenuTemplateStore, inputs: ["actions", "actions"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MenuTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: MenuTemplate, isStandalone: true, selector: "templates-menu", usesInheritance: true, hostDirectives: [{ directive: MenuTemplateStore, inputs: ["actions", "actions", "title", "title"] }], ngImport: i0, template: `
   <div class="top">
-    <organisms-menu-header injectable></organisms-menu-header>
+    <organisms-menu-header [title]="store.title()" injectable/>
     <organisms-navigation-list injectable
-      [actions]="store.actions"
+      [actions]="store.actions()"
       (action)="dispatch($event)"
-    ></organisms-navigation-list>
+    />
   </div>
-  <organisms-menu-footer injectable></organisms-menu-footer>
-  `, isInline: true, styles: [":host{--primary-color: #3f51b5;--primary-color-SCOPED-IN-menu-WsyA: var(--primary-color);--secondary-color: #3f51b5;--secondary-color-SCOPED-IN-menu-WsyA: var(--secondary-color);--width: 100%;--width-SCOPED-IN-menu-WsyA: var(--width);--height: 100%;--height-SCOPED-IN-menu-WsyA: var(--height)}:host{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-WsyA);height:var(--height-SCOPED-IN-menu-WsyA);color:#fff;background-color:var(--primary-color-SCOPED-IN-menu-WsyA)}:host organisms-navigation-list{transition:width .5s;--primary-color: var(--primary-color-SCOPED-IN-menu-WsyA);--secondary-color: var(--secondary-color-SCOPED-IN-menu-WsyA)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: MenuHeaderOrganismStore, selector: "organisms-menu-header" }, { kind: "directive", type: NavigationListOrganismStore, selector: "organisms-navigation-list", inputs: ["actions"] }, { kind: "directive", type: 
-                // NavigationListOrganism,
-                MenuFooterOrganismStore, selector: "organisms-menu-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  <organisms-menu-footer injectable/>
+  `, isInline: true, styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-menu-1ogJ: var(--primary-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-menu-1ogJ: var(--background-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-menu-1ogJ: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-menu-1ogJ: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-menu-1ogJ: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-menu-1ogJ: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-menu-1ogJ: var(--on-surface-color);--width: 100%;--width-SCOPED-IN-menu-1ogJ: var(--width);--height: 100%;--height-SCOPED-IN-menu-1ogJ: var(--height)}:host{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-1ogJ);height:var(--height-SCOPED-IN-menu-1ogJ);color:var(--on-background-color-SCOPED-IN-menu-1ogJ);background-color:var(--background-color-SCOPED-IN-menu-1ogJ);transition:background-color .5s ease-in-out,width .5s}:host *{--primary-color: var(--primary-color-SCOPED-IN-menu-1ogJ);--background-color: var(--background-color-SCOPED-IN-menu-1ogJ);--surface-color: var(--surface-color-SCOPED-IN-menu-1ogJ);--on-primary-color: var(--on-primary-color-SCOPED-IN-menu-1ogJ);--on-background-color: var(--on-background-color-SCOPED-IN-menu-1ogJ);--on-surface-color: var(--on-surface-color-SCOPED-IN-menu-1ogJ)}\n"], dependencies: [{ kind: "directive", type: MenuHeaderOrganismStore, selector: "organisms-menu-header", inputs: ["title"] }, { kind: "directive", type: NavigationListOrganismStore, selector: "organisms-navigation-list", inputs: ["actions"] }, { kind: "directive", type: MenuFooterOrganismStore, selector: "organisms-menu-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MenuTemplate, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
-                        CommonModule,
                         MenuHeaderOrganismStore,
                         NavigationListOrganismStore,
-                        // NavigationListOrganism,
-                        MenuFooterOrganismStore
+                        MenuFooterOrganismStore,
                     ], selector: 'templates-menu', template: `
   <div class="top">
-    <organisms-menu-header injectable></organisms-menu-header>
+    <organisms-menu-header [title]="store.title()" injectable/>
     <organisms-navigation-list injectable
-      [actions]="store.actions"
+      [actions]="store.actions()"
       (action)="dispatch($event)"
-    ></organisms-navigation-list>
+    />
   </div>
-  <organisms-menu-footer injectable></organisms-menu-footer>
+  <organisms-menu-footer injectable/>
   `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: MenuTemplateStore,
-                            inputs: ['actions'],
+                            inputs: ['actions', 'title'],
                         },
-                    ], styles: [":host{--primary-color: #3f51b5;--primary-color-SCOPED-IN-menu-WsyA: var(--primary-color);--secondary-color: #3f51b5;--secondary-color-SCOPED-IN-menu-WsyA: var(--secondary-color);--width: 100%;--width-SCOPED-IN-menu-WsyA: var(--width);--height: 100%;--height-SCOPED-IN-menu-WsyA: var(--height)}:host{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-WsyA);height:var(--height-SCOPED-IN-menu-WsyA);color:#fff;background-color:var(--primary-color-SCOPED-IN-menu-WsyA)}:host organisms-navigation-list{transition:width .5s;--primary-color: var(--primary-color-SCOPED-IN-menu-WsyA);--secondary-color: var(--secondary-color-SCOPED-IN-menu-WsyA)}\n"] }]
+                    ], styles: [":host{--primary-color: #404040;--primary-color-SCOPED-IN-menu-1ogJ: var(--primary-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-menu-1ogJ: var(--background-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-menu-1ogJ: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-menu-1ogJ: var(--surface-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-menu-1ogJ: var(--on-primary-color);--on-background-color: #404040;--on-background-color-SCOPED-IN-menu-1ogJ: var(--on-background-color);--on-surface-color: #404040;--on-surface-color-SCOPED-IN-menu-1ogJ: var(--on-surface-color);--width: 100%;--width-SCOPED-IN-menu-1ogJ: var(--width);--height: 100%;--height-SCOPED-IN-menu-1ogJ: var(--height)}:host{display:flex;flex-direction:column;justify-content:space-between;width:var(--width-SCOPED-IN-menu-1ogJ);height:var(--height-SCOPED-IN-menu-1ogJ);color:var(--on-background-color-SCOPED-IN-menu-1ogJ);background-color:var(--background-color-SCOPED-IN-menu-1ogJ);transition:background-color .5s ease-in-out,width .5s}:host *{--primary-color: var(--primary-color-SCOPED-IN-menu-1ogJ);--background-color: var(--background-color-SCOPED-IN-menu-1ogJ);--surface-color: var(--surface-color-SCOPED-IN-menu-1ogJ);--on-primary-color: var(--on-primary-color-SCOPED-IN-menu-1ogJ);--on-background-color: var(--on-background-color-SCOPED-IN-menu-1ogJ);--on-surface-color: var(--on-surface-color-SCOPED-IN-menu-1ogJ)}\n"] }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-templates-menu.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/menu/menu.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/menu/ng-atomic-components-templates-menu.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Directive, InjectionToken, Input, Type, inject } from '@angular/core';\nimport { Action } from '@ng-atomic/core';\nimport { InjectableComponent } from '@ng-atomic/core';\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { NavigationListOrganismStore } from '@ng-atomic/components/organisms/navigation-list';\nimport { MenuFooterOrganismStore } from '@ng-atomic/components/organisms/menu-footer';\nimport { MenuHeaderOrganismStore } from '@ng-atomic/components/organisms/menu-header';\n\n@Directive({ standalone: true, selector: 'templates-menu' })\nexport class MenuTemplateStore extends InjectableComponent {\n  static readonly TOKEN = new InjectionToken<Type<MenuTemplateStore>>('[@ng-atomic/components] MenuTemplateStore');\n  @Input() actions: Action<string>[] = [];\n}\n\n@Component({\n  standalone: true,\n  imports: [\n    CommonModule,\n    MenuHeaderOrganismStore,\n    NavigationListOrganismStore,\n    // NavigationListOrganism,\n    MenuFooterOrganismStore\n  ],\n  selector: 'templates-menu',\n  template: `\n  <div class=\"top\">\n    <organisms-menu-header injectable></organisms-menu-header>\n    <organisms-navigation-list injectable\n      [actions]=\"store.actions\"\n      (action)=\"dispatch($event)\"\n    ></organisms-navigation-list>\n  </div>\n  <organisms-menu-footer injectable></organisms-menu-footer>\n  `,\n  styleUrls: ['./menu.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: MenuTemplateStore,\n      inputs: ['actions'],\n    },\n  ]\n})\nexport class MenuTemplate extends NgAtomicComponent {\n  protected store = inject(MenuTemplateStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAUM,MAAO,iBAAkB,SAAQ,mBAAmB,CAAA;AAD1D,IAAA,WAAA,GAAA;;QAGW,IAAO,CAAA,OAAA,GAAqB,EAAE,CAAC;AACzC,KAAA;AAFiB,IAAA,SAAA,IAAA,CAAA,KAAK,GAAG,IAAI,cAAc,CAA0B,2CAA2C,CAAC,CAAC,EAAA;+GADtG,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;4FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA;8BAGhD,OAAO,EAAA,CAAA;sBAAf,KAAK;;AAgCF,MAAO,YAAa,SAAQ,iBAAiB,CAAA;AA7BnD,IAAA,WAAA,GAAA;;AA8BY,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAC7C,KAAA;+GAFY,YAAY,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAlCZ,iBAAiB,EAelB,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;AAST,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,krBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAhBC,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,uBAAuB,EAAA,QAAA,EAAA,uBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACvB,2BAA2B,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;gBAE3B,uBAAuB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAsBd,YAAY,EAAA,UAAA,EAAA,CAAA;kBA7BxB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;wBACZ,uBAAuB;wBACvB,2BAA2B;;wBAE3B,uBAAuB;AACxB,qBAAA,EAAA,QAAA,EACS,gBAAgB,EAChB,QAAA,EAAA,CAAA;;;;;;;;;GAST,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,iBAAiB;4BAC5B,MAAM,EAAE,CAAC,SAAS,CAAC;AACpB,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,krBAAA,CAAA,EAAA,CAAA;;;AC1CH;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-templates-menu.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/menu/menu.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/menu/ng-atomic-components-templates-menu.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { Action, TokenizedType } from '@ng-atomic/core';\nimport { InjectableComponent } from '@ng-atomic/core';\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { NavigationListOrganismStore } from '@ng-atomic/components/organisms/navigation-list';\nimport { MenuFooterOrganismStore } from '@ng-atomic/components/organisms/menu-footer';\nimport { MenuHeaderOrganismStore } from '@ng-atomic/components/organisms/menu-header';\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'templates-menu' })\nexport class MenuTemplateStore extends InjectableComponent {\n  readonly actions = input<Action[]>([]);\n  readonly title = input<string>();\n}\n\n@Component({\n  standalone: true,\n  imports: [\n    MenuHeaderOrganismStore,\n    NavigationListOrganismStore,\n    MenuFooterOrganismStore,\n  ],\n  selector: 'templates-menu',\n  template: `\n  <div class=\"top\">\n    <organisms-menu-header [title]=\"store.title()\" injectable/>\n    <organisms-navigation-list injectable\n      [actions]=\"store.actions()\"\n      (action)=\"dispatch($event)\"\n    />\n  </div>\n  <organisms-menu-footer injectable/>\n  `,\n  styleUrls: ['./menu.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: MenuTemplateStore,\n      inputs: ['actions', 'title'],\n    },\n  ]\n})\nexport class MenuTemplate extends NgAtomicComponent {\n  protected store = inject(MenuTemplateStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AAUO,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,mBAAmB,CAAA;AAAnD,IAAA,WAAA,GAAA;;AACI,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAW,EAAE,CAAC,CAAC;QAC9B,IAAK,CAAA,KAAA,GAAG,KAAK,EAAU,CAAC;AAClC,KAAA;8GAHY,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;AAAjB,iBAAiB,GAAA,UAAA,CAAA;AAF7B,IAAA,aAAa,EAAE;AAEH,CAAA,EAAA,iBAAiB,CAG7B,CAAA;2FAHY,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA;;AAiCrD,MAAO,YAAa,SAAQ,iBAAiB,CAAA;AA3BnD,IAAA,WAAA,GAAA;;AA4BY,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAC7C,KAAA;8GAFY,YAAY,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAhCZ,iBAAiB,EAalB,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,OAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;AAST,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,s7CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAdC,uBAAuB,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACvB,2BAA2B,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC3B,uBAAuB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAsBd,YAAY,EAAA,UAAA,EAAA,CAAA;kBA3BxB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACP,OAAA,EAAA;wBACP,uBAAuB;wBACvB,2BAA2B;wBAC3B,uBAAuB;AACxB,qBAAA,EAAA,QAAA,EACS,gBAAgB,EAChB,QAAA,EAAA,CAAA;;;;;;;;;GAST,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,iBAAiB;AAC5B,4BAAA,MAAM,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;AAC7B,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,s7CAAA,CAAA,EAAA,CAAA;;;ACxCH;;AAEG;;;;"}

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

@@ -1,18 +1,22 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild } 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 { ScrollFrame } from '@ng-atomic/components/frames/scroll-v2';
 import { NavigatorOrganism } from '@ng-atomic/components/organisms/navigator';
 import { FormGroup, FormControl } from '@angular/forms';
 
 class MessagesTemplate {
     constructor() {
+        this.title = 'title';
         this.navStartActions = [];
         this.navEndActions = [];
         this.messages = [];
+        this.actions = [];
+        this.placeholder = 'メッセージを入力';
+        this.isMessageCreating = false;
         this.form = new FormGroup({
             name: new FormControl(''),
             description: new FormControl(''),
@@ -20,32 +24,44 @@ class MessagesTemplate {
         });
         this.action = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessagesTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: `
+    ngAfterViewInit() {
+        this.scrollFrame.scrollToBottom();
+    }
+    ngOnChanges(changes) {
+        if (changes.messages && this.scrollFrame.isScrollBottom()) {
+            setTimeout(() => this.scrollFrame.scrollToBottom());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MessagesTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: MessagesTemplate, isStandalone: true, selector: "templates-messages", inputs: { title: "title", navStartActions: "navStartActions", navEndActions: "navEndActions", messages: "messages", actions: "actions", placeholder: "placeholder", isMessageCreating: "isMessageCreating", form: "form" }, outputs: { action: "action" }, host: { classAttribute: "template" }, viewQueries: [{ propertyName: "scrollFrame", first: true, predicate: ScrollFrame, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <frames-scroll>
       <organisms-navigator
         [startActions]="navStartActions"
         [endActions]="navEndActions"
         (action)="action.emit($event)"
-        navigator
+        top
       >
-        <span> メッセージ </span>
+        <span> {{ title }} </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>
+      <organisms-messages-section
+        [isMessageCreating]="isMessageCreating"
+        [messages]="messages"
+        contents
+      />
+      <organisms-textarea-section
+        [actions]="actions"
+        [control]="form.get(['message'])"
+        [rows]="3"
+        [floatLabel]="'always'"
+        [label]="'入力'"
+        [placeholder]="placeholder"
+        (action)="action.emit($event)"
+        bottom
+      />
     </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", "placeholder", "hint", "control"], outputs: ["action"] }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator", inputs: ["startActions", "endActions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block}:host .message{display:block;height:100%;position:relative}: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", "isMessageCreating"] }, { kind: "component", type: TextareaSectionOrganism, selector: "organisms-textarea-section" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessagesTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: MessagesTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'templates-messages', standalone: true, imports: [
                         CommonModule,
@@ -60,33 +76,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [startActions]="navStartActions"
         [endActions]="navEndActions"
         (action)="action.emit($event)"
-        navigator
+        top
       >
-        <span> メッセージ </span>
+        <span> {{ title }} </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>
+      <organisms-messages-section
+        [isMessageCreating]="isMessageCreating"
+        [messages]="messages"
+        contents
+      />
+      <organisms-textarea-section
+        [actions]="actions"
+        [control]="form.get(['message'])"
+        [rows]="3"
+        [floatLabel]="'always'"
+        [label]="'入力'"
+        [placeholder]="placeholder"
+        (action)="action.emit($event)"
+        bottom
+      />
     </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: [{
+  `, host: { class: 'template' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:100%;height:100%;background:#fff;display:block}:host .message{display:block;height:100%;position:relative}:host .message organisms-textarea-section{position:absolute;overflow:hidden;--vertical-padding: 0px;width:100%;height:80px}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], navStartActions: [{
                 type: Input
             }], navEndActions: [{
                 type: Input
             }], messages: [{
                 type: Input
+            }], actions: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], isMessageCreating: [{
+                type: Input
             }], form: [{
                 type: Input
             }], action: [{
                 type: Output
+            }], scrollFrame: [{
+                type: ViewChild,
+                args: [ScrollFrame, { static: true }]
             }] } });
 
 /**

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

@@ -1 +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/core';\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;+GApBY,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,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,aAAA,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,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FA6BR,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;;;;"}
+{"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, SimpleChanges, ViewChild } 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-v2';\nimport { NavigatorOrganism } from '@ng-atomic/components/organisms/navigator';\nimport { FormGroup } from '@angular/forms';\nimport { FormControl } from '@angular/forms';\nimport { Action } from '@ng-atomic/core';\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        top\n      >\n        <span> {{ title }} </span>\n      </organisms-navigator>\n      <organisms-messages-section\n        [isMessageCreating]=\"isMessageCreating\"\n        [messages]=\"messages\"\n        contents\n      />\n      <organisms-textarea-section\n        [actions]=\"actions\"\n        [control]=\"form.get(['message'])\"\n        [rows]=\"3\"\n        [floatLabel]=\"'always'\"\n        [label]=\"'入力'\"\n        [placeholder]=\"placeholder\"\n        (action)=\"action.emit($event)\"\n        bottom\n      />\n    </frames-scroll>\n  `,\n  styleUrls: ['./messages.template.scss'],\n  host: { class: 'template' },\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MessagesTemplate {\n  @Input() title = 'title';\n  @Input() navStartActions: Action[] = [];\n  @Input() navEndActions: Action[] = [];\n  @Input() messages: {role: string, content: string}[] = [];\n  @Input() actions: Action[] = [];\n  @Input() placeholder = 'メッセージを入力';\n  @Input() isMessageCreating: false | string = false;\n\n  @Input()\n  form = new FormGroup({\n    name: new FormControl(''),\n    description: new FormControl(''),\n    message: new FormControl(''),\n  });\n\n  @Output() action = new EventEmitter<Action>();\n\n  @ViewChild(ScrollFrame, {static: true})\n  scrollFrame: ScrollFrame;\n\n  ngAfterViewInit() {\n    this.scrollFrame.scrollToBottom();\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes.messages && this.scrollFrame.isScrollBottom()) {\n      setTimeout(() => this.scrollFrame.scrollToBottom());\n    }\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,10 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
 import { ScrollFrame } from '@ng-atomic/components/frames/scroll-v2';
 import { HeaderMolecule } from '@ng-atomic/components/molecules/header';
 import { NavigatorOrganism } from '@ng-atomic/components/organisms/navigator';
-import { NgAtomicComponent, Effect } from '@ng-atomic/core';
+import { InjectableComponent, NgAtomicComponent, Effect } from '@ng-atomic/core';
 import { SelectionListOrganism } from '@ng-atomic/components/organisms/selection-list';
 import { ActionButtonsSectionOrganism } from '@ng-atomic/components/organisms/action-buttons-section';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -16,61 +15,62 @@ var ActionId;
     ActionId["SUBMIT"] = "[@ng-atomic/components/templates/selection] Submit";
     ActionId["TOGGLE_OPTION"] = "[@ng-atomic/components/templates/selection-list] Toggle Option";
 })(ActionId || (ActionId = {}));
+class SelectionTemplateStore extends InjectableComponent {
+    constructor() {
+        super(...arguments);
+        this.navStartActions = input([
+            { id: ActionId.BACK, icon: 'arrow_back', name: 'Back' },
+        ]);
+        this.navEndActions = input([]);
+        this.actions = input([
+            { id: ActionId.SUBMIT, icon: 'check', name: 'Submit', color: 'primary' },
+        ]);
+        this.itemActions = input(() => []);
+        this.title = input('');
+        this.items = input([]);
+        this.selection = input(new SelectionModel(false));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SelectionTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: SelectionTemplateStore, isStandalone: true, selector: "templates-selection", inputs: { navStartActions: { classPropertyName: "navStartActions", publicName: "navStartActions", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SelectionTemplateStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'templates-selection' }]
+        }] });
 class SelectionTemplate extends NgAtomicComponent {
     constructor() {
         super(...arguments);
-        this.navStartActions = [
-            {
-                id: ActionId.BACK,
-                icon: 'arrow_back',
-                name: 'Back',
-            }
-        ];
-        this.navEndActions = [];
-        this.actions = [
-            {
-                id: ActionId.SUBMIT,
-                icon: 'check',
-                name: 'Submit',
-            },
-        ];
-        this.itemActions = () => [];
-        this.title = '';
-        this.items = [];
-        this.selection = new SelectionModel(false);
+        this.store = inject(SelectionTemplateStore);
     }
     static { this.ActionId = ActionId; }
     toggleOption(item) {
-        this.dispatch({
-            id: ActionId.TOGGLE_OPTION,
-            payload: item,
-        });
+        this.dispatch({ id: ActionId.TOGGLE_OPTION, payload: item });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SelectionTemplate, isStandalone: true, selector: "templates-selection", inputs: { navStartActions: "navStartActions", navEndActions: "navEndActions", actions: "actions", itemActions: "itemActions", title: "title", items: "items", selection: "selection" }, host: { classAttribute: "template" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SelectionTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: SelectionTemplate, isStandalone: true, selector: "templates-selection", host: { classAttribute: "template" }, usesInheritance: true, hostDirectives: [{ directive: SelectionTemplateStore, inputs: ["navStartActions", "navStartActions", "navEndActions", "navEndActions", "actions", "actions", "itemActions", "itemActions", "title", "title", "items", "items", "selection", "selection"] }], ngImport: i0, template: `
   <frames-scroll>
     <organisms-navigator 
-      [startActions]="navStartActions"
-      [endActions]="navEndActions"
+      [startActions]="store.navStartActions()"
+      [endActions]="store.navEndActions()"
       (action)="dispatch($event)"
       top
     >
-      <molecules-header [title]="title"></molecules-header>
+      <molecules-header [title]="store.title()" />
     </organisms-navigator>
     <organisms-selection-list
-      [items]="items"
-      [itemActions]="itemActions"
-      [selection]="selection"
+      [items]="store.items()"
+      [itemActions]="store.itemActions()"
+      [selection]="store.selection()"
       (action)="dispatch($event)"
       contents
-    ></organisms-selection-list>
+    />
     <organisms-action-buttons-section
-      [actions]="actions"
+      [actions]="store.actions()"
       (action)="dispatch($event)"
       bottom
-    ></organisms-action-buttons-section>
+    />
   </frames-scroll>
-  `, isInline: true, styles: [":host{width:100%;height:100%;background:white;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator", inputs: ["startActions", "endActions"] }, { kind: "component", type: HeaderMolecule, selector: "molecules-header", inputs: ["title", "description"] }, { kind: "component", type: SelectionListOrganism, selector: "organisms-selection-list", inputs: ["items", "itemActions", "selection"] }, { kind: "component", type: ActionButtonsSectionOrganism, selector: "organisms-action-buttons-section", inputs: ["actions"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-selection-FTtd: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-selection-FTtd: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-selection-FTtd: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-selection-FTtd: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-selection-FTtd: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-selection-FTtd: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-selection-FTtd: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-selection-FTtd: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-selection-FTtd: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-selection-FTtd);--navigator-background-color-SCOPED-IN-selection-FTtd: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-selection-FTtd);--navigator-on-background-color-SCOPED-IN-selection-FTtd: var(--navigator-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-selection-FTtd: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-selection-FTtd: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-selection-FTtd);transition:background-color .5s ease-in-out}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-selection-FTtd);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-selection-FTtd)}:host *{--primary-color: var(--primary-color-SCOPED-IN-selection-FTtd);--on-primary-color: var(--on-primary-color-SCOPED-IN-selection-FTtd);--surface-color: var(--surface-color-SCOPED-IN-selection-FTtd);--on-surface-color: var(--on-surface-color-SCOPED-IN-selection-FTtd);--background-color: var(--background-color-SCOPED-IN-selection-FTtd);--on-background-color: var(--on-background-color-SCOPED-IN-selection-FTtd)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-selection-FTtd);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-selection-FTtd)}:host organisms-action-buttons-section{margin-bottom:24px}\n"], dependencies: [{ kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: NavigatorOrganism, selector: "organisms-navigator" }, { kind: "component", type: HeaderMolecule, selector: "molecules-header" }, { kind: "component", type: SelectionListOrganism, selector: "organisms-selection-list", inputs: ["items", "itemActions", "selection"] }, { kind: "component", type: ActionButtonsSectionOrganism, selector: "organisms-action-buttons-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Effect(SelectionListOrganism.ActionId.TOGGLE_OPTION),
@@ -78,10 +78,9 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], SelectionTemplate.prototype, "toggleOption", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: SelectionTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'templates-selection', standalone: true, imports: [
-                        CommonModule,
                         ScrollFrame,
                         NavigatorOrganism,
                         HeaderMolecule,
@@ -90,46 +89,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     ], template: `
   <frames-scroll>
     <organisms-navigator 
-      [startActions]="navStartActions"
-      [endActions]="navEndActions"
+      [startActions]="store.navStartActions()"
+      [endActions]="store.navEndActions()"
       (action)="dispatch($event)"
       top
     >
-      <molecules-header [title]="title"></molecules-header>
+      <molecules-header [title]="store.title()" />
     </organisms-navigator>
     <organisms-selection-list
-      [items]="items"
-      [itemActions]="itemActions"
-      [selection]="selection"
+      [items]="store.items()"
+      [itemActions]="store.itemActions()"
+      [selection]="store.selection()"
       (action)="dispatch($event)"
       contents
-    ></organisms-selection-list>
+    />
     <organisms-action-buttons-section
-      [actions]="actions"
+      [actions]="store.actions()"
       (action)="dispatch($event)"
       bottom
-    ></organisms-action-buttons-section>
+    />
   </frames-scroll>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'template' }, styles: [":host{width:100%;height:100%;background:white;display:block}\n"] }]
-        }], propDecorators: { navStartActions: [{
-                type: Input
-            }], navEndActions: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], itemActions: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], selection: [{
-                type: Input
-            }], toggleOption: [] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: SelectionTemplateStore,
+                            inputs: ['navStartActions', 'navEndActions', 'actions', 'itemActions', 'title', 'items', 'selection'],
+                        },
+                    ], host: { class: 'template' }, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-selection-FTtd: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-selection-FTtd: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-selection-FTtd: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-selection-FTtd: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-selection-FTtd: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-selection-FTtd: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-selection-FTtd: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-selection-FTtd: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-selection-FTtd: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-selection-FTtd);--navigator-background-color-SCOPED-IN-selection-FTtd: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-selection-FTtd);--navigator-on-background-color-SCOPED-IN-selection-FTtd: var(--navigator-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-selection-FTtd: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-selection-FTtd: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-selection-FTtd);transition:background-color .5s ease-in-out}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-selection-FTtd);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-selection-FTtd)}:host *{--primary-color: var(--primary-color-SCOPED-IN-selection-FTtd);--on-primary-color: var(--on-primary-color-SCOPED-IN-selection-FTtd);--surface-color: var(--surface-color-SCOPED-IN-selection-FTtd);--on-surface-color: var(--on-surface-color-SCOPED-IN-selection-FTtd);--background-color: var(--background-color-SCOPED-IN-selection-FTtd);--on-background-color: var(--on-background-color-SCOPED-IN-selection-FTtd)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-selection-FTtd);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-selection-FTtd)}:host organisms-action-buttons-section{margin-bottom:24px}\n"] }]
+        }], propDecorators: { toggleOption: [] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SelectionTemplate };
+export { SelectionTemplate, SelectionTemplateStore };
 //# sourceMappingURL=ng-atomic-components-templates-selection.mjs.map