@ng-atomic/components 17.13.0 → 17.14.0

package/fesm2022/ng-atomic-components-pages.mjs

@@ -1,95 +1,16 @@
 import * as i0 from '@angular/core';
-import { input, Directive, inject, Component, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { IndexPageStore } from '@ng-atomic/components/pages/_index';
 import { FormPageStore } from '@ng-atomic/components/pages/form';
-import { makeConfig } from '@ng-atomic/common/services/ui';
-import { RouterOutletFrame } from '@ng-atomic/components/frames/router-outlet';
-import { TermTemplate } from '@ng-atomic/components/templates/term';
-import { InjectableComponent, _computed, NgAtomicComponent } from '@ng-atomic/core';
-
-var ActionId;
-(function (ActionId) {
-    ActionId["BACK"] = "[@ng-atomic/components/pages/terms] Back";
-})(ActionId || (ActionId = {}));
-class TermsPageStore extends InjectableComponent {
-    constructor() {
-        super(...arguments);
-        this.config = TermsPageStore.Config.inject();
-        this.navStartActions = input(_computed(() => this.config().navStartActions));
-        this.navEndActions = input(_computed(() => this.config().navEndActions));
-        this.title = input(_computed(() => this.config().title));
-        this.src = input(_computed(() => this.config().src));
-        this.data = input(_computed(() => this.config().data));
-    }
-    static { this.ActionId = ActionId; }
-    static { this.Config = makeConfig(() => {
-        return () => ({
-            navStartActions: [
-                {
-                    id: ActionId.BACK,
-                    name: '戻る',
-                    icon: 'arrow_back',
-                },
-            ],
-            navEndActions: [],
-            title: 'title',
-            src: 'src',
-            data: undefined,
-        });
-    }, ['components', 'pages', 'terms']); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: TermsPageStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: TermsPageStore, isStandalone: true, selector: "templates-term", inputs: { navStartActions: { classPropertyName: "navStartActions", publicName: "navStartActions", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: TermsPageStore, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: 'templates-term',
-                }]
-        }] });
-class TermsPage extends NgAtomicComponent {
-    constructor() {
-        super(...arguments);
-        this.store = inject(TermsPageStore);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: TermsPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: TermsPage, isStandalone: true, selector: "pages-terms", usesInheritance: true, hostDirectives: [{ directive: TermsPageStore }], ngImport: i0, template: `
-    <frames-router-outlet>
-      <templates-term
-        [data]="store.data()"
-        [src]="store.src()"
-        [title]="store.title()"
-        [navStartActions]="store.navStartActions()"
-        [navEndActions]="store.navEndActions()"
-        (action)="dispatch($event)"
-      />
-    </frames-router-outlet>
-  `, isInline: true, styles: [":host{width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "component", type: RouterOutletFrame, selector: "frames-router-outlet" }, { kind: "component", type: TermTemplate, selector: "templates-term" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: TermsPage, decorators: [{
-            type: Component,
-            args: [{ selector: 'pages-terms', standalone: true, imports: [
-                        RouterOutletFrame,
-                        TermTemplate,
-                    ], template: `
-    <frames-router-outlet>
-      <templates-term
-        [data]="store.data()"
-        [src]="store.src()"
-        [title]="store.title()"
-        [navStartActions]="store.navStartActions()"
-        [navEndActions]="store.navEndActions()"
-        (action)="dispatch($event)"
-      />
-    </frames-router-outlet>
-  `, hostDirectives: [TermsPageStore], styles: [":host{width:100%;height:100%;display:block}\n"] }]
-        }] });
+import { TermsPageStore } from '@ng-atomic/components/pages/terms';
+import { ColumnsPageStore } from '@ng-atomic/components/pages/columns';
 
 class NgAtomicPagesModule {
     static forRoot() {
         return {
             ngModule: NgAtomicPagesModule,
             providers: [
+                ColumnsPageStore.provideDefault(),
                 FormPageStore.provideDefault(),
                 IndexPageStore.provideDefault(),
                 TermsPageStore.Config.provide(),

package/fesm2022/ng-atomic-components-pages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-pages.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/pages/terms/terms.page.ts","../../../../../packages/@ng-atomic/components/src/lib/pages/pages.module.ts","../../../../../packages/@ng-atomic/components/src/lib/pages/ng-atomic-components-pages.ts"],"sourcesContent":["import { Component, Directive, InjectionToken, Input, inject, input } from '@angular/core';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { RouterOutletFrame } from '@ng-atomic/components/frames/router-outlet';\nimport { TermTemplate } from '@ng-atomic/components/templates/term';\nimport { InjectableComponent, NgAtomicComponent, _computed } from '@ng-atomic/core';\n\nenum ActionId {\n  BACK = '[@ng-atomic/components/pages/terms] Back',\n}\n@Directive({\n  standalone: true,\n  selector: 'templates-term',\n})\nexport class TermsPageStore extends InjectableComponent {\n  static readonly ActionId = ActionId;\n  static readonly Config = makeConfig(() => {\n    return () => ({\n      navStartActions: [\n        {\n          id: ActionId.BACK,\n          name: '戻る',\n          icon: 'arrow_back',\n        },\n      ],\n      navEndActions: [],\n      title: 'title',\n      src: 'src',\n      data: undefined,\n    });\n  }, ['components', 'pages', 'terms']);\n\n  readonly config = TermsPageStore.Config.inject();\n  readonly navStartActions = input(_computed(() => this.config().navStartActions));\n  readonly navEndActions = input(_computed(() => this.config().navEndActions));\n  readonly title = input(_computed(() => this.config().title));\n  readonly src = input(_computed(() => this.config().src));\n  readonly data = input(_computed(() => this.config().data));\n}\n\n@Component({\n  selector: 'pages-terms',\n  standalone: true,\n  imports: [\n    RouterOutletFrame,\n    TermTemplate,\n  ],\n  template: `\n    <frames-router-outlet>\n      <templates-term\n        [data]=\"store.data()\"\n        [src]=\"store.src()\"\n        [title]=\"store.title()\"\n        [navStartActions]=\"store.navStartActions()\"\n        [navEndActions]=\"store.navEndActions()\"\n        (action)=\"dispatch($event)\"\n      />\n    </frames-router-outlet>\n  `,\n  styleUrl: './terms.page.scss',\n  hostDirectives: [TermsPageStore]\n})\nexport class TermsPage extends NgAtomicComponent {\n  protected readonly store = inject(TermsPageStore);\n}\n","import { NgModule } from \"@angular/core\";\nimport { IndexPageStore } from \"@ng-atomic/components/pages/_index\";\nimport { FormPageStore } from \"@ng-atomic/components/pages/form\";\nimport { TermsPageStore } from \"./terms\";\n\n@NgModule({})\nexport class NgAtomicPagesModule {\n  static forRoot() {\n    return {\n      ngModule: NgAtomicPagesModule,\n      providers: [\n        FormPageStore.provideDefault(),\n        IndexPageStore.provideDefault(),\n        TermsPageStore.Config.provide(),\n      ],\n    }\n  }\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-pages.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/pages/pages.module.ts","../../../../../packages/@ng-atomic/components/src/lib/pages/ng-atomic-components-pages.ts"],"sourcesContent":["import { NgModule } from \"@angular/core\";\nimport { IndexPageStore } from \"@ng-atomic/components/pages/_index\";\nimport { FormPageStore } from \"@ng-atomic/components/pages/form\";\nimport { TermsPageStore } from \"@ng-atomic/components/pages/terms\";\nimport { ColumnsPageStore } from \"@ng-atomic/components/pages/columns\";\n\n@NgModule({})\nexport class NgAtomicPagesModule {\n  static forRoot() {\n    return {\n      ngModule: NgAtomicPagesModule,\n      providers: [\n        ColumnsPageStore.provideDefault(),\n        FormPageStore.provideDefault(),\n        IndexPageStore.provideDefault(),\n        TermsPageStore.Config.provide(),\n      ],\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAOa,mBAAmB,CAAA;AAC9B,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO;AACL,YAAA,QAAQ,EAAE,mBAAmB;AAC7B,YAAA,SAAS,EAAE;gBACT,gBAAgB,CAAC,cAAc,EAAE;gBACjC,aAAa,CAAC,cAAc,EAAE;gBAC9B,cAAc,CAAC,cAAc,EAAE;AAC/B,gBAAA,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE;AAChC,aAAA;SACF,CAAA;KACF;8GAXU,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;+GAAnB,mBAAmB,EAAA,CAAA,CAAA,EAAA;+GAAnB,mBAAmB,EAAA,CAAA,CAAA,EAAA;;2FAAnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAD/B,QAAQ;mBAAC,EAAE,CAAA;;;ACNZ;;AAEG;;;;"}

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

@@ -253,7 +253,7 @@ class IndexTemplate extends NgAtomicComponent {
       }
     </frames-auto-layout>
   </frames-scroll>
-  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-htla: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-htla: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-htla: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-htla: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-htla: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-htla: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-htla: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-htla: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-htla: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-index-htla);--navigator-background-color-SCOPED-IN-index-htla: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-htla);--navigator-on-background-color-SCOPED-IN-index-htla: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-htla);--table-background-color-SCOPED-IN-index-htla: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-htla);--table-on-background-color-SCOPED-IN-index-htla: var(--table-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-htla: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-htla: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-htla);color:var(--on-background-color-SCOPED-IN-index-htla);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-index-htla);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-htla)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-htla);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-htla)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-htla);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-htla);--surface-color: var(--surface-color-SCOPED-IN-index-htla);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-htla);--background-color: var(--background-color-SCOPED-IN-index-htla);--on-background-color: var(--on-background-color-SCOPED-IN-index-htla)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-htla);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-htla)}\n"], dependencies: [{ kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: SmartListOrganism, selector: "organisms-smart-list" }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }, { kind: "directive", type: HeaderMoleculeStore, selector: "molecules-header", inputs: ["title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-xog2: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-xog2: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-xog2: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-xog2: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-xog2: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-xog2: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-xog2: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-xog2: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-xog2: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-index-xog2);--navigator-background-color-SCOPED-IN-index-xog2: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-xog2);--navigator-on-background-color-SCOPED-IN-index-xog2: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-xog2);--table-background-color-SCOPED-IN-index-xog2: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-xog2);--table-on-background-color-SCOPED-IN-index-xog2: var(--table-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-xog2: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-xog2: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-xog2);color:var(--on-background-color-SCOPED-IN-index-xog2);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-index-xog2);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-xog2)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-xog2);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-xog2)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-xog2);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-xog2);--surface-color: var(--surface-color-SCOPED-IN-index-xog2);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-xog2);--background-color: var(--background-color-SCOPED-IN-index-xog2);--on-background-color: var(--on-background-color-SCOPED-IN-index-xog2)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-xog2);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-xog2)}\n"], dependencies: [{ kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: SmartListOrganism, selector: "organisms-smart-list" }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }, { kind: "directive", type: HeaderMoleculeStore, selector: "molecules-header", inputs: ["title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Effect(TableOrganism.ActionId.HEADER_CLICK),
@@ -413,7 +413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                         }
                     ], providers: [
                         QueryResolverService,
-                    ], styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-htla: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-htla: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-htla: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-htla: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-htla: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-htla: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-htla: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-htla: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-htla: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-index-htla);--navigator-background-color-SCOPED-IN-index-htla: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-htla);--navigator-on-background-color-SCOPED-IN-index-htla: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-htla);--table-background-color-SCOPED-IN-index-htla: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-htla);--table-on-background-color-SCOPED-IN-index-htla: var(--table-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-htla: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-htla: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-htla);color:var(--on-background-color-SCOPED-IN-index-htla);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-index-htla);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-htla)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-htla);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-htla)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-htla);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-htla);--surface-color: var(--surface-color-SCOPED-IN-index-htla);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-htla);--background-color: var(--background-color-SCOPED-IN-index-htla);--on-background-color: var(--on-background-color-SCOPED-IN-index-htla)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-htla);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-htla)}\n"] }]
+                    ], styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-xog2: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-xog2: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-xog2: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-xog2: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-xog2: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-xog2: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-xog2: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-xog2: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-xog2: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-index-xog2);--navigator-background-color-SCOPED-IN-index-xog2: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-xog2);--navigator-on-background-color-SCOPED-IN-index-xog2: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-xog2);--table-background-color-SCOPED-IN-index-xog2: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-xog2);--table-on-background-color-SCOPED-IN-index-xog2: var(--table-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-xog2: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-xog2: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-xog2);color:var(--on-background-color-SCOPED-IN-index-xog2);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-index-xog2);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-xog2)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-xog2);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-xog2)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-xog2);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-xog2);--surface-color: var(--surface-color-SCOPED-IN-index-xog2);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-xog2);--background-color: var(--background-color-SCOPED-IN-index-xog2);--on-background-color: var(--on-background-color-SCOPED-IN-index-xog2)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-xog2);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-xog2)}\n"] }]
         }], propDecorators: { onTableHeaderClick: [], onCheckboxClickItem: [], onItemClicked: [], onItemButtonClicked: [], onHeaderCheckboxClick: [], back: [] } });
 
 /**

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

@@ -19,13 +19,13 @@ class BackgroundTemplate {
         this.store = inject(BackgroundTemplateStore);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: BackgroundTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: BackgroundTemplate, isStandalone: true, selector: "templates-background", hostDirectives: [{ directive: BackgroundTemplateStore }], ngImport: i0, template: ``, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--background-color: #000000;--background-color-SCOPED-IN-background-Rf73: var(--background-color);--on-background-color: #ffffff;--on-background-color-SCOPED-IN-background-Rf73: var(--on-background-color)}:host{width:100%;height:100%;background-color:var(--background-color-SCOPED-IN-background-Rf73);color:var(--on-background-color-SCOPED-IN-background-Rf73)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: BackgroundTemplate, isStandalone: true, selector: "templates-background", hostDirectives: [{ directive: BackgroundTemplateStore }], ngImport: i0, template: ``, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--background-color: #000000;--background-color-SCOPED-IN-background-rwLv: var(--background-color);--on-background-color: #ffffff;--on-background-color-SCOPED-IN-background-rwLv: var(--on-background-color)}:host{width:100%;height:100%;background-color:var(--background-color-SCOPED-IN-background-rwLv);color:var(--on-background-color-SCOPED-IN-background-rwLv)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: BackgroundTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'templates-background', standalone: true, imports: [], template: ``, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         BackgroundTemplateStore,
-                    ], styles: [":host{width:100%;height:100%;background:#fff;display:block;--background-color: #000000;--background-color-SCOPED-IN-background-Rf73: var(--background-color);--on-background-color: #ffffff;--on-background-color-SCOPED-IN-background-Rf73: var(--on-background-color)}:host{width:100%;height:100%;background-color:var(--background-color-SCOPED-IN-background-Rf73);color:var(--on-background-color-SCOPED-IN-background-Rf73)}\n"] }]
+                    ], styles: [":host{width:100%;height:100%;background:#fff;display:block;--background-color: #000000;--background-color-SCOPED-IN-background-rwLv: var(--background-color);--on-background-color: #ffffff;--on-background-color-SCOPED-IN-background-rwLv: var(--on-background-color)}:host{width:100%;height:100%;background-color:var(--background-color-SCOPED-IN-background-rwLv);color:var(--on-background-color-SCOPED-IN-background-rwLv)}\n"] }]
         }] });
 
 /**

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

@@ -0,0 +1,161 @@
+import * as i2 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { JsonPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import * as i1 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { makeConfig } from '@ng-atomic/common/services/ui';
+import { ScrollFrame } from '@ng-atomic/components/frames/scroll-v2';
+import { HeaderMoleculeStore } from '@ng-atomic/components/molecules/header';
+import { NavigatorOrganismStore } from '@ng-atomic/components/organisms/navigator';
+import { InjectableComponent, _computed, NgAtomicComponent } from '@ng-atomic/core';
+import { injectColumnsForm } from '@ng-atomic/common/services/form/columns';
+import { computedAsync } from 'ngxtension/computed-async';
+import { startWith, map } from 'rxjs';
+import { DomainPipe } from '@ng-atomic/common/pipes/domain';
+
+class ColumnsTemplateStore extends InjectableComponent {
+    constructor() {
+        super(...arguments);
+        this.config = ColumnsTemplateStore.Config.inject();
+        this.navStartActions = input(_computed(() => this.config().navStartActions));
+        this.navEndActions = input(_computed(() => this.config().navEndActions));
+        this.title = input(_computed(() => this.config().title));
+        this.form = input(_computed(() => this.config().form));
+        this.actions = input(_computed(() => this.config().actions));
+        this.fieldMap = input(_computed(() => this.config().fieldMap));
+        this.columnIds = computedAsync(() => {
+            return this.form().valueChanges.pipe(startWith(this.form().getRawValue()), map((value) => value.ids));
+        });
+    }
+    static { this.Config = makeConfig(() => {
+        const form = injectColumnsForm();
+        return () => ({
+            navStartActions: [],
+            navEndActions: [],
+            title: '',
+            form,
+            formFlatExcludes: [],
+            actions: [],
+            fieldMap: {},
+        });
+    }, ['components', 'templates', 'columns']); }
+    static provideDefault() {
+        return [
+            ColumnsTemplateStore.Config.provide(),
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: ColumnsTemplateStore, isStandalone: true, selector: "templates-columns", inputs: { navStartActions: { classPropertyName: "navStartActions", publicName: "navStartActions", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, fieldMap: { classPropertyName: "fieldMap", publicName: "fieldMap", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsTemplateStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'templates-columns' }]
+        }] });
+class ColumnsTemplate extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(ColumnsTemplateStore);
+    }
+    onDrop(event) {
+        const ids = this.store.form().get(['ids']).value;
+        moveItemInArray(ids, event.previousIndex, event.currentIndex);
+        this.store.form().get(['ids']).patchValue([...ids]);
+    }
+    onToggle(event, id) {
+        this.store.form().get(['map', id, 'visible']).patchValue(event.checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: ColumnsTemplate, isStandalone: true, selector: "templates-columns", usesInheritance: true, hostDirectives: [{ directive: ColumnsTemplateStore, inputs: ["navStartActions", "navStartActions", "navEndActions", "navEndActions", "title", "title", "form", "form", "actions", "actions"] }], ngImport: i0, template: `
+  <frames-scroll>
+    <organisms-navigator injectable
+      [startActions]="store.navStartActions()"
+      [endActions]="store.navEndActions()"
+      (action)="dispatch($event)"
+      top
+    >
+      <molecules-header injectable [title]="store.title()" [description]="''"/>
+    </organisms-navigator>
+    <div cdkDropList (cdkDropListDropped)="onDrop($event)">
+      <mat-list>
+        @for (id of store.columnIds(); track id) {
+          <mat-list-item cdkDrag style="width: 100%;">
+            <span matListItemIcon cdkDragHandle style="cursor: move; margin-right: 16px;">
+              <mat-icon>drag_handle</mat-icon>
+            </span>
+            <span> {{ id | domain }}</span>
+            <mat-slide-toggle
+              [checked]="store.form().get(['map', id, 'visible']).value"
+              (change)="onToggle($event, id)"
+              matListItemMeta
+            />
+          </mat-list-item>
+        }
+      </mat-list>
+    </div>
+  </frames-scroll>
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-columns-kSl6: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-columns-kSl6: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-columns-kSl6: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-columns-kSl6: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-columns-kSl6: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-columns-kSl6: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-columns-kSl6: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-columns-kSl6: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-columns-kSl6: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-columns-kSl6: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-columns-kSl6);--navigator-background-color-SCOPED-IN-columns-kSl6: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-columns-kSl6);--navigator-on-background-color-SCOPED-IN-columns-kSl6: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-columns-kSl6);color:var(--on-background-color-SCOPED-IN-columns-kSl6)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-columns-kSl6);--vertical-padding: var(--vertical-padding-SCOPED-IN-columns-kSl6)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-columns-kSl6)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-columns-kSl6);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-columns-kSl6)}:host *{--primary-color: var(--primary-color-SCOPED-IN-columns-kSl6);--on-primary-color: var(--on-primary-color-SCOPED-IN-columns-kSl6);--surface-color: var(--surface-color-SCOPED-IN-columns-kSl6);--on-surface-color: var(--on-surface-color-SCOPED-IN-columns-kSl6);--background-color: var(--background-color-SCOPED-IN-columns-kSl6);--on-background-color: var(--on-background-color-SCOPED-IN-columns-kSl6)}\n"], dependencies: [{ kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }, { kind: "directive", type: HeaderMoleculeStore, selector: "molecules-header", inputs: ["title", "description"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DomainPipe, name: "domain" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ColumnsTemplate, decorators: [{
+            type: Component,
+            args: [{ selector: 'templates-columns', standalone: true, imports: [
+                        ScrollFrame,
+                        NavigatorOrganismStore,
+                        HeaderMoleculeStore,
+                        MatListModule,
+                        DragDropModule,
+                        MatSlideToggle,
+                        MatIcon,
+                        JsonPipe,
+                        DomainPipe,
+                    ], template: `
+  <frames-scroll>
+    <organisms-navigator injectable
+      [startActions]="store.navStartActions()"
+      [endActions]="store.navEndActions()"
+      (action)="dispatch($event)"
+      top
+    >
+      <molecules-header injectable [title]="store.title()" [description]="''"/>
+    </organisms-navigator>
+    <div cdkDropList (cdkDropListDropped)="onDrop($event)">
+      <mat-list>
+        @for (id of store.columnIds(); track id) {
+          <mat-list-item cdkDrag style="width: 100%;">
+            <span matListItemIcon cdkDragHandle style="cursor: move; margin-right: 16px;">
+              <mat-icon>drag_handle</mat-icon>
+            </span>
+            <span> {{ id | domain }}</span>
+            <mat-slide-toggle
+              [checked]="store.form().get(['map', id, 'visible']).value"
+              (change)="onToggle($event, id)"
+              matListItemMeta
+            />
+          </mat-list-item>
+        }
+      </mat-list>
+    </div>
+  </frames-scroll>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: ColumnsTemplateStore,
+                            inputs: [
+                                'navStartActions',
+                                'navEndActions',
+                                'title',
+                                'form',
+                                'actions',
+                            ],
+                        },
+                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-columns-kSl6: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-columns-kSl6: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-columns-kSl6: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-columns-kSl6: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-columns-kSl6: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-columns-kSl6: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-columns-kSl6: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-columns-kSl6: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-columns-kSl6: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-columns-kSl6: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-columns-kSl6);--navigator-background-color-SCOPED-IN-columns-kSl6: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-columns-kSl6);--navigator-on-background-color-SCOPED-IN-columns-kSl6: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-columns-kSl6);color:var(--on-background-color-SCOPED-IN-columns-kSl6)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-columns-kSl6);--vertical-padding: var(--vertical-padding-SCOPED-IN-columns-kSl6)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-columns-kSl6)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-columns-kSl6);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-columns-kSl6)}:host *{--primary-color: var(--primary-color-SCOPED-IN-columns-kSl6);--on-primary-color: var(--on-primary-color-SCOPED-IN-columns-kSl6);--surface-color: var(--surface-color-SCOPED-IN-columns-kSl6);--on-surface-color: var(--on-surface-color-SCOPED-IN-columns-kSl6);--background-color: var(--background-color-SCOPED-IN-columns-kSl6);--on-background-color: var(--on-background-color-SCOPED-IN-columns-kSl6)}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColumnsTemplate, ColumnsTemplateStore };
+//# sourceMappingURL=ng-atomic-components-templates-columns.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-templates-columns.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/columns/columns.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/columns/ng-atomic-components-templates-columns.ts"],"sourcesContent":["import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { JsonPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Directive, effect, inject, input } from '@angular/core';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatListModule } from '@angular/material/list';\nimport { MatSlideToggle, MatSlideToggleChange } from '@angular/material/slide-toggle';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { ScrollFrame } from '@ng-atomic/components/frames/scroll-v2';\nimport { HeaderMoleculeStore } from '@ng-atomic/components/molecules/header';\nimport { NavigatorOrganismStore } from '@ng-atomic/components/organisms/navigator';\nimport { _computed, InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';\nimport { injectColumnsForm } from '@ng-atomic/common/services/form/columns';\nimport { computedAsync } from 'ngxtension/computed-async';\nimport { map, startWith } from 'rxjs';\nimport { DomainPipe } from '@ng-atomic/common/pipes/domain';\n\n@Directive({standalone: true, selector: 'templates-columns'})\nexport class ColumnsTemplateStore extends InjectableComponent {\n  static Config = makeConfig(() => {\n    const form = injectColumnsForm();\n    return () => ({\n      navStartActions: [],\n      navEndActions: [],\n      title: '',\n      form,\n      formFlatExcludes: [],\n      actions: [],\n      fieldMap: {},\n    });\n  }, ['components', 'templates', 'columns']);\n\n  static provideDefault() {\n    return [\n      ColumnsTemplateStore.Config.provide(),\n    ];\n  }\n  readonly config = ColumnsTemplateStore.Config.inject();\n  readonly navStartActions = input(_computed(() => this.config().navStartActions));\n  readonly navEndActions = input(_computed(() => this.config().navEndActions));\n  readonly title = input(_computed(() => this.config().title));\n  readonly form = input(_computed(() => this.config().form));\n  readonly actions = input(_computed(() => this.config().actions));\n  readonly fieldMap = input(_computed(() => this.config().fieldMap));\n\n  readonly columnIds = computedAsync(() => {\n    return this.form().valueChanges.pipe(startWith(this.form().getRawValue()), map((value) => value.ids));\n  });\n}\n\n@Component({\n  selector: 'templates-columns',\n  standalone: true,\n  imports: [\n    ScrollFrame,\n    NavigatorOrganismStore,\n    HeaderMoleculeStore,\n    MatListModule,\n    DragDropModule,\n    MatSlideToggle,\n    MatIcon,\n    JsonPipe,\n    DomainPipe,\n  ],\n  template: `\n  <frames-scroll>\n    <organisms-navigator injectable\n      [startActions]=\"store.navStartActions()\"\n      [endActions]=\"store.navEndActions()\"\n      (action)=\"dispatch($event)\"\n      top\n    >\n      <molecules-header injectable [title]=\"store.title()\" [description]=\"''\"/>\n    </organisms-navigator>\n    <div cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n      <mat-list>\n        @for (id of store.columnIds(); track id) {\n          <mat-list-item cdkDrag style=\"width: 100%;\">\n            <span matListItemIcon cdkDragHandle style=\"cursor: move; margin-right: 16px;\">\n              <mat-icon>drag_handle</mat-icon>\n            </span>\n            <span> {{ id | domain }}</span>\n            <mat-slide-toggle\n              [checked]=\"store.form().get(['map', id, 'visible']).value\"\n              (change)=\"onToggle($event, id)\"\n              matListItemMeta\n            />\n          </mat-list-item>\n        }\n      </mat-list>\n    </div>\n  </frames-scroll>\n  `,\n  styleUrl: './columns.template.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: ColumnsTemplateStore,\n      inputs: [\n        'navStartActions',\n        'navEndActions',\n        'title',\n        'form',\n        'actions',\n      ],\n    },\n  ]\n})\nexport class ColumnsTemplate extends NgAtomicComponent {\n  protected store = inject(ColumnsTemplateStore);\n\n  protected onDrop(event: CdkDragDrop<string[]>) {\n    const ids = this.store.form().get(['ids']).value;\n    moveItemInArray(ids, event.previousIndex, event.currentIndex);\n    this.store.form().get(['ids']).patchValue([...ids]);\n  }\n\n  protected onToggle(event: MatSlideToggleChange, id: string) {\n    this.store.form().get(['map', id, 'visible']).patchValue(event.checked);\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-entrance.mjs

@@ -78,7 +78,7 @@ class EntranceTemplate extends NgAtomicComponent {
       }
     </frames-auto-layout>
   </frames-card>
-  `, isInline: true, styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-me1J: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-me1J: var(--background-color);--on-background-color: #333;--on-background-color-SCOPED-IN-entrance-me1J: var(--on-background-color);--page-width-lv1-SCOPED-IN-entrance-me1J: var(--page-width-lv1)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-me1J);color:var(--on-background-color-SCOPED-IN-entrance-me1J);width:100%;height:100%}:host frames-card{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}:host frames-card *{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-me1J)}:host frames-card ng-atomic-form-section-builder{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-me1J)}\n"], dependencies: [{ kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: CardFrame, selector: "frames-card" }, { kind: "component", type: HeadingOrganism, selector: "organisms-heading", inputs: ["level"] }, { kind: "component", type: NgAtomicFormSectionBuilder, selector: "ng-atomic-form-section-builder", inputs: ["form", "formFlatExcludes", "fieldMap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-QFOh: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-QFOh: var(--background-color);--on-background-color: #333;--on-background-color-SCOPED-IN-entrance-QFOh: var(--on-background-color);--page-width-lv1-SCOPED-IN-entrance-QFOh: var(--page-width-lv1)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-QFOh);color:var(--on-background-color-SCOPED-IN-entrance-QFOh);width:100%;height:100%}:host frames-card{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}:host frames-card *{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-QFOh)}:host frames-card ng-atomic-form-section-builder{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-QFOh)}\n"], dependencies: [{ kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: CardFrame, selector: "frames-card" }, { kind: "component", type: HeadingOrganism, selector: "organisms-heading", inputs: ["level"] }, { kind: "component", type: NgAtomicFormSectionBuilder, selector: "ng-atomic-form-section-builder", inputs: ["form", "formFlatExcludes", "fieldMap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceTemplate, decorators: [{
             type: Component,
@@ -116,7 +116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                             directive: EntranceTemplateStore,
                             inputs: ['form', 'actions', 'title'],
                         },
-                    ], styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-me1J: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-me1J: var(--background-color);--on-background-color: #333;--on-background-color-SCOPED-IN-entrance-me1J: var(--on-background-color);--page-width-lv1-SCOPED-IN-entrance-me1J: var(--page-width-lv1)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-me1J);color:var(--on-background-color-SCOPED-IN-entrance-me1J);width:100%;height:100%}:host frames-card{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}:host frames-card *{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-me1J)}:host frames-card ng-atomic-form-section-builder{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-me1J)}\n"] }]
+                    ], styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-QFOh: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-QFOh: var(--background-color);--on-background-color: #333;--on-background-color-SCOPED-IN-entrance-QFOh: var(--on-background-color);--page-width-lv1-SCOPED-IN-entrance-QFOh: var(--page-width-lv1)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-QFOh);color:var(--on-background-color-SCOPED-IN-entrance-QFOh);width:100%;height:100%}:host frames-card{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}:host frames-card *{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-QFOh)}:host frames-card ng-atomic-form-section-builder{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-QFOh)}\n"] }]
         }] });
 
 /**

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

@@ -470,6 +470,11 @@ class FormTemplateStore extends InjectableComponent {
             },
         });
     }, ['components', 'templates', 'form']); }
+    static provideDefault() {
+        return [
+            FormTemplateStore.Config.provide(),
+        ];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FormTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: FormTemplateStore, isStandalone: true, inputs: { navStartActions: { classPropertyName: "navStartActions", publicName: "navStartActions", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, formFlatExcludes: { classPropertyName: "formFlatExcludes", publicName: "formFlatExcludes", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, fieldMap: { classPropertyName: "fieldMap", publicName: "fieldMap", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
@@ -514,7 +519,7 @@ class FormTemplate extends NgAtomicComponent {
       />
     </frames-auto-layout>
   </frames-scroll>
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-qMp1: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-qMp1: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-qMp1: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-qMp1: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-qMp1: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-qMp1: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-qMp1: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-qMp1: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-qMp1: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-qMp1: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-qMp1);--navigator-background-color-SCOPED-IN-form-qMp1: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-qMp1);--navigator-on-background-color-SCOPED-IN-form-qMp1: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-qMp1);color:var(--on-background-color-SCOPED-IN-form-qMp1)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-form-qMp1);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-qMp1)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-qMp1)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-qMp1);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-qMp1)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-qMp1);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-qMp1);--surface-color: var(--surface-color-SCOPED-IN-form-qMp1);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-qMp1);--background-color: var(--background-color-SCOPED-IN-form-qMp1);--on-background-color: var(--on-background-color-SCOPED-IN-form-qMp1)}\n"], dependencies: [{ kind: "component", type: NgAtomicFormSectionBuilder, selector: "ng-atomic-form-section-builder", inputs: ["form", "formFlatExcludes", "fieldMap"] }, { kind: "directive", type: HeaderMoleculeStore, selector: "molecules-header", inputs: ["title", "description"] }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }, { kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "directive", type: ActionButtonsSectionOrganismStore, selector: "organisms-action-buttons-section", inputs: ["actions", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-Mbbv: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-Mbbv: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-Mbbv: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-Mbbv: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-Mbbv: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-Mbbv: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-Mbbv: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-Mbbv: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-Mbbv: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-Mbbv: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-Mbbv);--navigator-background-color-SCOPED-IN-form-Mbbv: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-Mbbv);--navigator-on-background-color-SCOPED-IN-form-Mbbv: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-Mbbv);color:var(--on-background-color-SCOPED-IN-form-Mbbv)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-form-Mbbv);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-Mbbv)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-Mbbv)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-Mbbv);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-Mbbv)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-Mbbv);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-Mbbv);--surface-color: var(--surface-color-SCOPED-IN-form-Mbbv);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-Mbbv);--background-color: var(--background-color-SCOPED-IN-form-Mbbv);--on-background-color: var(--on-background-color-SCOPED-IN-form-Mbbv)}\n"], dependencies: [{ kind: "component", type: NgAtomicFormSectionBuilder, selector: "ng-atomic-form-section-builder", inputs: ["form", "formFlatExcludes", "fieldMap"] }, { kind: "directive", type: HeaderMoleculeStore, selector: "molecules-header", inputs: ["title", "description"] }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }, { kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "directive", type: ActionButtonsSectionOrganismStore, selector: "organisms-action-buttons-section", inputs: ["actions", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Effect(NavActionId.BACK),
@@ -567,7 +572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
                                 'fieldMap',
                             ],
                         },
-                    ], host: { class: 'template' }, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-qMp1: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-qMp1: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-qMp1: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-qMp1: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-qMp1: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-qMp1: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-qMp1: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-qMp1: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-qMp1: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-qMp1: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-qMp1);--navigator-background-color-SCOPED-IN-form-qMp1: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-qMp1);--navigator-on-background-color-SCOPED-IN-form-qMp1: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-qMp1);color:var(--on-background-color-SCOPED-IN-form-qMp1)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-form-qMp1);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-qMp1)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-qMp1)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-qMp1);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-qMp1)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-qMp1);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-qMp1);--surface-color: var(--surface-color-SCOPED-IN-form-qMp1);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-qMp1);--background-color: var(--background-color-SCOPED-IN-form-qMp1);--on-background-color: var(--on-background-color-SCOPED-IN-form-qMp1)}\n"] }]
+                    ], host: { class: 'template' }, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-Mbbv: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-Mbbv: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-Mbbv: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-Mbbv: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-Mbbv: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-Mbbv: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-Mbbv: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-Mbbv: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-Mbbv: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-Mbbv: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-Mbbv);--navigator-background-color-SCOPED-IN-form-Mbbv: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-Mbbv);--navigator-on-background-color-SCOPED-IN-form-Mbbv: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-Mbbv);color:var(--on-background-color-SCOPED-IN-form-Mbbv)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-form-Mbbv);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-Mbbv)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-Mbbv)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-Mbbv);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-Mbbv)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-Mbbv);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-Mbbv);--surface-color: var(--surface-color-SCOPED-IN-form-Mbbv);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-Mbbv);--background-color: var(--background-color-SCOPED-IN-form-Mbbv);--on-background-color: var(--on-background-color-SCOPED-IN-form-Mbbv)}\n"] }]
         }], propDecorators: { back: [] } });
 
 /**