@ng-atomic/components 17.6.0 → 17.7.0

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

@@ -1,29 +1,29 @@
-import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { input, computed, inject, Directive, ChangeDetectorRef, Component, ChangeDetectionStrategy } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
-import { ScrollFrame } from '@ng-atomic/components/frames/scroll-v2';
-import { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';
-import { HeaderMoleculeStore } from '@ng-atomic/components/molecules/header';
-import { ActionButtonsSectionOrganismStore } from '@ng-atomic/components/organisms/action-buttons-section';
-import { NavigatorOrganismStore } from '@ng-atomic/components/organisms/navigator';
+import { input, Component, ChangeDetectionStrategy, computed, inject, Directive, ChangeDetectorRef } from '@angular/core';
 import { TextareaSectionOrganismStore } from '@ng-atomic/components/organisms/textarea-section';
 import { TextInputSectionOrganismStore } from '@ng-atomic/components/organisms/text-input-section';
 import { DateInputSectionOrganism } from '@ng-atomic/components/organisms/date-input-section';
 import { SelectInputSectionOrganismStore } from '@ng-atomic/components/organisms/select-input-section';
 import { DomainPipe } from '@ng-atomic/common/pipes/domain';
-import { InjectableComponent, _computed, NgAtomicComponent, Effect } from '@ng-atomic/core';
 import { ActionInputSectionOrganismStore } from '@ng-atomic/components/organisms/action-input-section';
+import { NgAtomicComponent, InjectableComponent, _computed, Effect } from '@ng-atomic/core';
 import { FileInputSectionOrganism, FileInputSectionOrganismStore } from '@ng-atomic/components/organisms/file-input-section';
 import { AgreementInputSectionOrganism } from '@ng-atomic/components/organisms/agreement-input-section';
 import { VideoSectionOrganism } from '@ng-atomic/components/organisms/video-section';
-import { makeConfig, injectIsRootPage, injectNavStartActions, NavActionId } from '@ng-atomic/common/services/ui';
-import { get } from 'lodash-es';
 import { NumberInputSectionOrganismStore } from '@ng-atomic/components/organisms/number-input-section';
 import { ImagePreviewSectionOrganism } from '@ng-atomic/components/organisms/image-preview-section';
 import { PasswordInputSectionOrganismStore } from '@ng-atomic/components/organisms/password-input-section';
 import { DateRangeInputSectionOrganism } from '@ng-atomic/components/organisms/date-range-input-section';
 import { SliderInputSectionOrganismStore } from '@ng-atomic/components/organisms/slider-input-section';
+import { get } from 'lodash-es';
+import { __decorate, __metadata } from 'tslib';
+import { FormBuilder } from '@angular/forms';
+import { ScrollFrame } from '@ng-atomic/components/frames/scroll-v2';
+import { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';
+import { HeaderMoleculeStore } from '@ng-atomic/components/molecules/header';
+import { ActionButtonsSectionOrganismStore } from '@ng-atomic/components/organisms/action-buttons-section';
+import { NavigatorOrganismStore } from '@ng-atomic/components/organisms/navigator';
+import { makeConfig, injectIsRootPage, injectNavStartActions, NavActionId } from '@ng-atomic/common/services/ui';
 
 function walkControls(controls, cb, excludes = [], name = '') {
     Object.entries(controls).forEach(([key, control]) => {
@@ -46,6 +46,382 @@ function flatControls(form, excludes) {
     ]);
     return [...controlMap.entries()];
 }
+var ActionId$1;
+(function (ActionId) {
+    ActionId["FILE_SELECTED"] = "[@ng-atomic/components:templates/form/ng-atomic-form-section-switcher] File selected";
+    ActionId["CANCEL"] = "[@ng-atomic/components:templates/form/ng-atomic-form-section-switcher] Cancel";
+})(ActionId$1 || (ActionId$1 = {}));
+class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.name = input.required();
+        this.control = input.required();
+        this.field = input.required();
+    }
+    static { this.ActionId = ActionId$1; }
+    dispatchFileInputAction(action, name) {
+        switch (action.id) {
+            case FileInputSectionOrganism.ActionId.FILE_SELECTED: {
+                return this.dispatch({ id: ActionId$1.FILE_SELECTED, payload: { scope: name, files: action.payload } });
+            }
+            case FileInputSectionOrganism.ActionId.CANCEL: {
+                return this.dispatch({ id: ActionId$1.CANCEL, payload: { scope: name } });
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NgAtomicFormSectionSwitcher, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: NgAtomicFormSectionSwitcher, isStandalone: true, selector: "ng-atomic-form-section-switcher", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    @if (field(); as field) {
+      @switch (field.type) {
+        @case ('select') {
+          @defer {
+            <organisms-select-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [hint]="field.hint"
+              [options]="field.options"
+              [placeholder]="field.placeholder"
+              [actions]="field.actions"
+              [multiple]="field?.multiple"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('date') {
+            <organisms-date-input-section
+              [label]="name() | domain"
+              [hint]="field.hint"
+              [control]="control()"
+              [actions]="field.actions"
+              (action)="dispatch($event)"
+            />
+        }
+        @case ('date-range') {
+          <organisms-date-range-input-section
+            [label]="name() | domain"
+            [hint]="field.hint"
+            [control]="control()"
+            [actions]="field.actions"
+            (action)="dispatch($event)"
+          />
+        }
+        @case ('text') {
+          @defer {
+            <organisms-text-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [actions]="field.actions"
+              [hint]="field.hint"
+              [placeholder]="field.placeholder"
+              [autoComplete]="field.autoComplete"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('number') {
+          @defer {
+            <organisms-number-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [actions]="field.actions"
+              [hint]="field.hint"
+              [placeholder]="field.placeholder"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('textarea') {
+          @defer {
+            <organisms-textarea-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [hint]="field.hint"
+              [rows]="field.rows"
+              [placeholder]="field.placeholder"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('password') {
+          @defer {
+            <organisms-password-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [hint]="field.hint"
+              [placeholder]="field.placeholder"
+              [actions]="field.actions"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('action') {
+          @defer {
+            <organisms-action-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [hint]="field.hint"
+              [actions]="field.actions"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('file') {
+          @defer {
+            <organisms-file-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [hint]="field.hint"
+              [progress]="field?.progress"
+              (action)="dispatchFileInputAction($event, name())"
+            />
+          }
+        }
+        @case ('slider') {
+          @defer {
+            <organisms-slider-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [max]="field?.slider?.max"
+              [min]="field?.slider?.min"
+              [step]="field?.slider?.step"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('agreement') {
+          @defer {
+            <organisms-agreement-input-section injectable
+              [control]="control()"
+              [labelTemp]="field?.labelTemp"
+            />
+          }
+        }
+        @case ('preview') {
+          @defer {
+            <organisms-video-section injectable
+              [src]="control().value"
+              [autoplay]="false"
+            />
+          }
+        }
+        @case ('preview:image') {
+          @defer {
+            <organisms-image-preview-section
+              [src]="control().value"
+            />
+          }
+        }
+        @case ('hidden') { }
+      }
+    }
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "pipe", type: DomainPipe, name: "domain" }, { kind: "component", type: DateInputSectionOrganism, selector: "organisms-date-input-section" }, { kind: "component", type: DateRangeInputSectionOrganism, selector: "organisms-date-range-input-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NgAtomicFormSectionSwitcher, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-atomic-form-section-switcher', standalone: true, imports: [
+                        DomainPipe,
+                        AgreementInputSectionOrganism,
+                        ActionInputSectionOrganismStore,
+                        FileInputSectionOrganismStore,
+                        DateInputSectionOrganism,
+                        DateRangeInputSectionOrganism,
+                        TextInputSectionOrganismStore,
+                        NumberInputSectionOrganismStore,
+                        TextareaSectionOrganismStore,
+                        SelectInputSectionOrganismStore,
+                        SliderInputSectionOrganismStore,
+                        VideoSectionOrganism,
+                        ImagePreviewSectionOrganism,
+                        PasswordInputSectionOrganismStore,
+                    ], template: `
+    @if (field(); as field) {
+      @switch (field.type) {
+        @case ('select') {
+          @defer {
+            <organisms-select-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [hint]="field.hint"
+              [options]="field.options"
+              [placeholder]="field.placeholder"
+              [actions]="field.actions"
+              [multiple]="field?.multiple"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('date') {
+            <organisms-date-input-section
+              [label]="name() | domain"
+              [hint]="field.hint"
+              [control]="control()"
+              [actions]="field.actions"
+              (action)="dispatch($event)"
+            />
+        }
+        @case ('date-range') {
+          <organisms-date-range-input-section
+            [label]="name() | domain"
+            [hint]="field.hint"
+            [control]="control()"
+            [actions]="field.actions"
+            (action)="dispatch($event)"
+          />
+        }
+        @case ('text') {
+          @defer {
+            <organisms-text-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [actions]="field.actions"
+              [hint]="field.hint"
+              [placeholder]="field.placeholder"
+              [autoComplete]="field.autoComplete"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('number') {
+          @defer {
+            <organisms-number-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [actions]="field.actions"
+              [hint]="field.hint"
+              [placeholder]="field.placeholder"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('textarea') {
+          @defer {
+            <organisms-textarea-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [hint]="field.hint"
+              [rows]="field.rows"
+              [placeholder]="field.placeholder"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('password') {
+          @defer {
+            <organisms-password-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [hint]="field.hint"
+              [placeholder]="field.placeholder"
+              [actions]="field.actions"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('action') {
+          @defer {
+            <organisms-action-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [hint]="field.hint"
+              [actions]="field.actions"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('file') {
+          @defer {
+            <organisms-file-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [hint]="field.hint"
+              [progress]="field?.progress"
+              (action)="dispatchFileInputAction($event, name())"
+            />
+          }
+        }
+        @case ('slider') {
+          @defer {
+            <organisms-slider-input-section injectable
+              [label]="name() | domain"
+              [control]="control()"
+              [max]="field?.slider?.max"
+              [min]="field?.slider?.min"
+              [step]="field?.slider?.step"
+              (action)="dispatch($event)"
+            />
+          }
+        }
+        @case ('agreement') {
+          @defer {
+            <organisms-agreement-input-section injectable
+              [control]="control()"
+              [labelTemp]="field?.labelTemp"
+            />
+          }
+        }
+        @case ('preview') {
+          @defer {
+            <organisms-video-section injectable
+              [src]="control().value"
+              [autoplay]="false"
+            />
+          }
+        }
+        @case ('preview:image') {
+          @defer {
+            <organisms-image-preview-section
+              [src]="control().value"
+            />
+          }
+        }
+        @case ('hidden') { }
+      }
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
+        }] });
+class NgAtomicFormSectionBuilder extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.form = input.required();
+        this.formFlatExcludes = input([]);
+        this.fieldMap = input.required();
+        this.controlEntries = computed(() => {
+            return flatControls(this.form(), this.formFlatExcludes()).map(([name, control]) => ({
+                name,
+                control,
+                field: get(this.fieldMap(), name) ?? { type: 'text' },
+            }));
+        });
+    }
+    static { this.ActionId = ActionId$1; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NgAtomicFormSectionBuilder, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: NgAtomicFormSectionBuilder, isStandalone: true, selector: "ng-atomic-form-section-builder", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, formFlatExcludes: { classPropertyName: "formFlatExcludes", publicName: "formFlatExcludes", isSignal: true, isRequired: false, transformFunction: null }, fieldMap: { classPropertyName: "fieldMap", publicName: "fieldMap", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    @for (entry of controlEntries(); track entry.name;) {
+      <ng-atomic-form-section-switcher
+        [name]="entry.name"
+        [control]="entry.control"
+        [field]="entry.field"
+        (action)="dispatch($event)"
+      />
+    }
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: NgAtomicFormSectionSwitcher, selector: "ng-atomic-form-section-switcher", inputs: ["name", "control", "field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: NgAtomicFormSectionBuilder, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'ng-atomic-form-section-builder', imports: [
+                        NgAtomicFormSectionSwitcher,
+                    ], template: `
+    @for (entry of controlEntries(); track entry.name;) {
+      <ng-atomic-form-section-switcher
+        [name]="entry.name"
+        [control]="entry.control"
+        [field]="entry.field"
+        (action)="dispatch($event)"
+      />
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
+        }] });
+
 var ActionId;
 (function (ActionId) {
     ActionId["BACK"] = "[@ng-atomic/components/templates/form] Back";
@@ -66,12 +442,8 @@ class FormTemplateStore extends InjectableComponent {
         this.formFlatExcludes = input(_computed(() => this.config().formFlatExcludes));
         this.actions = input(_computed(() => this.config().actions));
         this.fieldMap = input(_computed(() => this.config().fieldMap));
-        this.controlEntries = computed(() => {
-            return flatControls(this.form(), this.formFlatExcludes()).map(([name, control]) => ({
-                name, control, field: get(this.fieldMap(), name) ?? { type: 'text' },
-            }));
-        });
     }
+    static { this.ActionId = ActionId; }
     static { this.Config = makeConfig(() => {
         const isRootPage = injectIsRootPage();
         const navStartActions = injectNavStartActions(isRootPage);
@@ -103,16 +475,6 @@ class FormTemplate extends NgAtomicComponent {
         this.cd = inject(ChangeDetectorRef);
     }
     static { this.ActionId = ActionId; }
-    dispatchFileInputAction(action, name) {
-        switch (action.id) {
-            case FileInputSectionOrganism.ActionId.FILE_SELECTED: {
-                return this.dispatch({ id: ActionId.FILE_SELECTED, payload: { scope: name, files: action.payload } });
-            }
-            case FileInputSectionOrganism.ActionId.CANCEL: {
-                return this.dispatch({ id: ActionId.CANCEL, payload: { scope: name } });
-            }
-        }
-    }
     ngOnInit() {
         this.store.form().statusChanges.subscribe(() => this.cd.markForCheck());
     }
@@ -120,7 +482,7 @@ class FormTemplate extends NgAtomicComponent {
         this.dispatch({ id: ActionId.BACK });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FormTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: FormTemplate, isStandalone: true, selector: "templates-form", host: { classAttribute: "template" }, usesInheritance: true, hostDirectives: [{ directive: FormTemplateStore, inputs: ["navStartActions", "navStartActions", "navEndActions", "navEndActions", "title", "title", "form", "form", "formFlatExcludes", "formFlatExcludes", "actions", "actions", "fieldMap", "fieldMap"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: FormTemplate, isStandalone: true, selector: "templates-form", host: { classAttribute: "template" }, usesInheritance: true, hostDirectives: [{ directive: FormTemplateStore, inputs: ["navStartActions", "navStartActions", "navEndActions", "navEndActions", "title", "title", "form", "form", "formFlatExcludes", "formFlatExcludes", "actions", "actions", "fieldMap", "fieldMap"] }], ngImport: i0, template: `
   <frames-scroll>
     <organisms-navigator injectable
       [startActions]="store.navStartActions()"
@@ -131,158 +493,19 @@ class FormTemplate extends NgAtomicComponent {
       <molecules-header injectable [title]="store.title()" [description]="''"/>
     </organisms-navigator>
     <frames-auto-layout vertical>
-      @for (entry of store.controlEntries(); track entry.name;) {
-        @switch (entry.field.type) {
-          @case ('select') {
-            @defer {
-              <organisms-select-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [hint]="entry.field.hint"
-                [options]="entry.field.options"
-                [placeholder]="entry.field.placeholder"
-                [actions]="entry.field.actions"
-                [multiple]="entry.field?.multiple"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('date') {
-            <!-- @defer { -->
-              <organisms-date-input-section
-                [label]="entry.name | domain"
-                [hint]="entry.field.hint"
-                [control]="entry.control"
-                [actions]="entry.field.actions"
-                (action)="dispatch($event)"
-              />
-            <!-- } -->
-          }
-          @case ('date-range') {
-            <organisms-date-range-input-section
-              [label]="entry.name | domain"
-              [hint]="entry.field.hint"
-              [control]="entry.control"
-              [actions]="entry.field.actions"
-              (action)="dispatch($event)"
-            />
-          }
-          @case ('text') {
-            @defer {
-              <organisms-text-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [actions]="entry.field.actions"
-                [hint]="entry.field.hint"
-                [placeholder]="entry.field.placeholder"
-                [autoComplete]="entry.field.autoComplete"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('number') {
-            @defer {
-              <organisms-number-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [actions]="entry.field.actions"
-                [hint]="entry.field.hint"
-                [placeholder]="entry.field.placeholder"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('textarea') {
-            @defer {
-              <organisms-textarea-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [hint]="entry.field.hint"
-                [rows]="entry.field.rows"
-                [placeholder]="entry.field.placeholder"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('password') {
-            @defer {
-              <organisms-password-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [hint]="entry.field.hint"
-                [placeholder]="entry.field.placeholder"
-                [actions]="entry.field.actions"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('action') {
-            @defer {
-              <organisms-action-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [hint]="entry.field.hint"
-                [actions]="entry.field.actions"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('file') {
-            @defer {
-              <organisms-file-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [hint]="entry.field.hint"
-                [progress]="entry.field?.progress"
-                (action)="dispatchFileInputAction($event, entry.name)"
-              />
-            }
-          }
-          @case ('slider') {
-            @defer {
-              <organisms-slider-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [max]="entry.field?.slider?.max"
-                [min]="entry.field?.slider?.min"
-                [step]="entry.field?.slider?.step"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('agreement') {
-            @defer {
-              <organisms-agreement-input-section injectable
-                [control]="entry.control"
-                [labelTemp]="entry.field?.labelTemp"
-              />
-            }
-          }
-          @case ('preview') {
-            @defer {
-              <organisms-video-section injectable
-                [src]="entry.control.value"
-                [autoplay]="false"
-              />
-            }
-          }
-          @case ('preview:image') {
-            @defer {
-              <organisms-image-preview-section
-                [src]="entry.control.value"
-              />
-            }
-          }
-          @case ('hidden') { }
-        }
-      }
+      <ng-atomic-form-section-builder
+        [form]="store.form()"
+        [formFlatExcludes]="store.formFlatExcludes()"
+        [fieldMap]="store.fieldMap()"
+        (action)="dispatch($event)"
+      />
       <organisms-action-buttons-section injectable
         [actions]="store.actions()"
         (action)="dispatch($event)"
       />
     </frames-auto-layout>
   </frames-scroll>
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-ncfX: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-ncfX: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-ncfX: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-ncfX: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-ncfX: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-ncfX: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-ncfX: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-ncfX: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-ncfX: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-ncfX: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-ncfX);--navigator-background-color-SCOPED-IN-form-ncfX: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-ncfX);--navigator-on-background-color-SCOPED-IN-form-ncfX: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-ncfX);color:var(--on-background-color-SCOPED-IN-form-ncfX)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-form-ncfX);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-ncfX)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-ncfX)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-ncfX);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-ncfX)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-ncfX);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-ncfX);--surface-color: var(--surface-color-SCOPED-IN-form-ncfX);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-ncfX);--background-color: var(--background-color-SCOPED-IN-form-ncfX);--on-background-color: var(--on-background-color-SCOPED-IN-form-ncfX)}\n"], dependencies: [{ kind: "pipe", type: DomainPipe, name: "domain" }, { kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "directive", type: ActionButtonsSectionOrganismStore, selector: "organisms-action-buttons-section", inputs: ["actions", "type"] }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }, { kind: "component", type: DateInputSectionOrganism, selector: "organisms-date-input-section" }, { kind: "component", type: DateRangeInputSectionOrganism, selector: "organisms-date-range-input-section" }, { kind: "directive", type: HeaderMoleculeStore, selector: "molecules-header", inputs: ["title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-P3hU: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-P3hU: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-P3hU: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-P3hU: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-P3hU: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-P3hU: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-P3hU: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-P3hU: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-P3hU: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-P3hU: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-P3hU);--navigator-background-color-SCOPED-IN-form-P3hU: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-P3hU);--navigator-on-background-color-SCOPED-IN-form-P3hU: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-P3hU);color:var(--on-background-color-SCOPED-IN-form-P3hU)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-form-P3hU);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-P3hU)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-P3hU)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-P3hU);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-P3hU)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-P3hU);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-P3hU);--surface-color: var(--surface-color-SCOPED-IN-form-P3hU);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-P3hU);--background-color: var(--background-color-SCOPED-IN-form-P3hU);--on-background-color: var(--on-background-color-SCOPED-IN-form-P3hU)}\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),
@@ -293,25 +516,12 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FormTemplate, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
-                        DomainPipe,
-                        AgreementInputSectionOrganism,
-                        AutoLayoutFrame,
+                        NgAtomicFormSectionBuilder,
+                        HeaderMoleculeStore,
                         ScrollFrame,
-                        ActionButtonsSectionOrganismStore,
-                        ActionInputSectionOrganismStore,
-                        FileInputSectionOrganismStore,
                         NavigatorOrganismStore,
-                        DateInputSectionOrganism,
-                        DateRangeInputSectionOrganism,
-                        TextInputSectionOrganismStore,
-                        NumberInputSectionOrganismStore,
-                        TextareaSectionOrganismStore,
-                        SelectInputSectionOrganismStore,
-                        SliderInputSectionOrganismStore,
-                        HeaderMoleculeStore,
-                        VideoSectionOrganism,
-                        ImagePreviewSectionOrganism,
-                        PasswordInputSectionOrganismStore,
+                        AutoLayoutFrame,
+                        ActionButtonsSectionOrganismStore,
                     ], selector: 'templates-form', template: `
   <frames-scroll>
     <organisms-navigator injectable
@@ -323,151 +533,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImpor
       <molecules-header injectable [title]="store.title()" [description]="''"/>
     </organisms-navigator>
     <frames-auto-layout vertical>
-      @for (entry of store.controlEntries(); track entry.name;) {
-        @switch (entry.field.type) {
-          @case ('select') {
-            @defer {
-              <organisms-select-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [hint]="entry.field.hint"
-                [options]="entry.field.options"
-                [placeholder]="entry.field.placeholder"
-                [actions]="entry.field.actions"
-                [multiple]="entry.field?.multiple"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('date') {
-            <!-- @defer { -->
-              <organisms-date-input-section
-                [label]="entry.name | domain"
-                [hint]="entry.field.hint"
-                [control]="entry.control"
-                [actions]="entry.field.actions"
-                (action)="dispatch($event)"
-              />
-            <!-- } -->
-          }
-          @case ('date-range') {
-            <organisms-date-range-input-section
-              [label]="entry.name | domain"
-              [hint]="entry.field.hint"
-              [control]="entry.control"
-              [actions]="entry.field.actions"
-              (action)="dispatch($event)"
-            />
-          }
-          @case ('text') {
-            @defer {
-              <organisms-text-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [actions]="entry.field.actions"
-                [hint]="entry.field.hint"
-                [placeholder]="entry.field.placeholder"
-                [autoComplete]="entry.field.autoComplete"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('number') {
-            @defer {
-              <organisms-number-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [actions]="entry.field.actions"
-                [hint]="entry.field.hint"
-                [placeholder]="entry.field.placeholder"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('textarea') {
-            @defer {
-              <organisms-textarea-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [hint]="entry.field.hint"
-                [rows]="entry.field.rows"
-                [placeholder]="entry.field.placeholder"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('password') {
-            @defer {
-              <organisms-password-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [hint]="entry.field.hint"
-                [placeholder]="entry.field.placeholder"
-                [actions]="entry.field.actions"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('action') {
-            @defer {
-              <organisms-action-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [hint]="entry.field.hint"
-                [actions]="entry.field.actions"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('file') {
-            @defer {
-              <organisms-file-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [hint]="entry.field.hint"
-                [progress]="entry.field?.progress"
-                (action)="dispatchFileInputAction($event, entry.name)"
-              />
-            }
-          }
-          @case ('slider') {
-            @defer {
-              <organisms-slider-input-section injectable
-                [label]="entry.name | domain"
-                [control]="entry.control"
-                [max]="entry.field?.slider?.max"
-                [min]="entry.field?.slider?.min"
-                [step]="entry.field?.slider?.step"
-                (action)="dispatch($event)"
-              />
-            }
-          }
-          @case ('agreement') {
-            @defer {
-              <organisms-agreement-input-section injectable
-                [control]="entry.control"
-                [labelTemp]="entry.field?.labelTemp"
-              />
-            }
-          }
-          @case ('preview') {
-            @defer {
-              <organisms-video-section injectable
-                [src]="entry.control.value"
-                [autoplay]="false"
-              />
-            }
-          }
-          @case ('preview:image') {
-            @defer {
-              <organisms-image-preview-section
-                [src]="entry.control.value"
-              />
-            }
-          }
-          @case ('hidden') { }
-        }
-      }
+      <ng-atomic-form-section-builder
+        [form]="store.form()"
+        [formFlatExcludes]="store.formFlatExcludes()"
+        [fieldMap]="store.fieldMap()"
+        (action)="dispatch($event)"
+      />
       <organisms-action-buttons-section injectable
         [actions]="store.actions()"
         (action)="dispatch($event)"
@@ -487,12 +558,12 @@ 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-ncfX: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-ncfX: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-ncfX: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-ncfX: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-ncfX: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-ncfX: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-ncfX: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-ncfX: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-ncfX: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-ncfX: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-ncfX);--navigator-background-color-SCOPED-IN-form-ncfX: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-ncfX);--navigator-on-background-color-SCOPED-IN-form-ncfX: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-ncfX);color:var(--on-background-color-SCOPED-IN-form-ncfX)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-form-ncfX);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-ncfX)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-ncfX)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-ncfX);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-ncfX)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-ncfX);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-ncfX);--surface-color: var(--surface-color-SCOPED-IN-form-ncfX);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-ncfX);--background-color: var(--background-color-SCOPED-IN-form-ncfX);--on-background-color: var(--on-background-color-SCOPED-IN-form-ncfX)}\n"] }]
+                    ], host: { class: 'template' }, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-P3hU: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-P3hU: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-P3hU: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-P3hU: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-P3hU: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-P3hU: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-P3hU: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-P3hU: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-P3hU: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-P3hU: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-P3hU);--navigator-background-color-SCOPED-IN-form-P3hU: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-P3hU);--navigator-on-background-color-SCOPED-IN-form-P3hU: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-P3hU);color:var(--on-background-color-SCOPED-IN-form-P3hU)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-form-P3hU);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-P3hU)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-P3hU)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-P3hU);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-P3hU)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-P3hU);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-P3hU);--surface-color: var(--surface-color-SCOPED-IN-form-P3hU);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-P3hU);--background-color: var(--background-color-SCOPED-IN-form-P3hU);--on-background-color: var(--on-background-color-SCOPED-IN-form-P3hU)}\n"] }]
         }], propDecorators: { back: [] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ActionId, FormTemplate, FormTemplateStore };
+export { FormTemplate, FormTemplateStore, NgAtomicFormSectionBuilder, NgAtomicFormSectionSwitcher };
 //# sourceMappingURL=ng-atomic-components-templates-form.mjs.map