@ng-atomic/components 18.2.0 → 18.4.0

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

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, Component, ChangeDetectionStrategy, computed, inject, Directive, ChangeDetectorRef } from '@angular/core';
+import { input, Directive, inject, Component, ChangeDetectionStrategy, computed, effect, ChangeDetectorRef } from '@angular/core';
 import { DateInputSectionOrganism } from '@ng-atomic/components/organisms/date-input-section';
 import { DomainPipe } from '@ng-atomic/common/pipes/domain';
-import { ActionInputSectionOrganismStore } from '@ng-atomic/components/organisms/action-input-section';
-import { NgAtomicComponent, InjectableComponent, _computed, Effect } from '@ng-atomic/core';
+import { InjectableComponent, NgAtomicComponent, _computed, Effect } from '@ng-atomic/core';
 import { FileInputSectionOrganism, FileInputSectionOrganismStore } from '@ng-atomic/components/organisms/file-input-section';
 import { DateRangeInputSectionOrganism } from '@ng-atomic/components/organisms/date-range-input-section';
 import { get } from 'lodash-es';
@@ -15,6 +14,7 @@ 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';
+import { DividerFrame } from '@ng-atomic/components/frames/divider';
 
 function walkControls(controls, cb, excludes = [], name = '') {
     Object.entries(controls).forEach(([key, control]) => {
@@ -42,7 +42,7 @@ var ActionId$1;
     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 {
+class NgAtomicFormSectionSwitcherStore extends InjectableComponent {
     constructor() {
         super(...arguments);
         this.name = input.required();
@@ -50,6 +50,22 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         this.field = input.required();
     }
     static { this.ActionId = ActionId$1; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgAtomicFormSectionSwitcherStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", type: NgAtomicFormSectionSwitcherStore, 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgAtomicFormSectionSwitcherStore, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-atomic-form-section-switcher',
+                    standalone: true,
+                }]
+        }] });
+class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(NgAtomicFormSectionSwitcherStore);
+    }
+    static { this.ActionId = ActionId$1; }
     dispatchFileInputAction(action, name) {
         switch (action.id) {
             case FileInputSectionOrganism.ActionId.FILE_SELECTED: {
@@ -61,14 +77,14 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgAtomicFormSectionSwitcher, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.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) {
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: NgAtomicFormSectionSwitcher, isStandalone: true, selector: "ng-atomic-form-section-switcher", usesInheritance: true, hostDirectives: [{ directive: NgAtomicFormSectionSwitcherStore, inputs: ["name", "name", "control", "control", "field", "field"] }], ngImport: i0, template: `
+    @if (store.field(); as field) {
       @switch (field.type) {
         @case ('select') {
           @defer {
             <organisms-select-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [hint]="field.hint"
               [options]="field.options"
               [placeholder]="field.placeholder"
@@ -79,19 +95,19 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
           }
         }
         @case ('date') {
-            <organisms-date-input-section
-              [label]="name() | domain"
-              [hint]="field.hint"
-              [control]="control()"
-              [actions]="field.actions"
-              (action)="dispatch($event)"
-            />
+          <organisms-date-input-section
+            [label]="store.name() | domain"
+            [hint]="field.hint"
+            [control]="store.control()"
+            [actions]="field.actions"
+            (action)="dispatch($event)"
+          />
         }
         @case ('date-range') {
           <organisms-date-range-input-section
-            [label]="name() | domain"
+            [label]="store.name() | domain"
             [hint]="field.hint"
-            [control]="control()"
+            [control]="store.control()"
             [actions]="field.actions"
             (action)="dispatch($event)"
           />
@@ -99,8 +115,8 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('text') {
           @defer {
             <organisms-text-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [actions]="field.actions"
               [hint]="field.hint"
               [placeholder]="field.placeholder"
@@ -112,8 +128,8 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('number') {
           @defer {
             <organisms-number-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [actions]="field.actions"
               [hint]="field.hint"
               [placeholder]="field.placeholder"
@@ -124,8 +140,8 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('textarea') {
           @defer {
             <organisms-textarea-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [hint]="field.hint"
               [rows]="field.rows"
               [placeholder]="field.placeholder"
@@ -136,8 +152,8 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('password') {
           @defer {
             <organisms-password-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [hint]="field.hint"
               [placeholder]="field.placeholder"
               [actions]="field.actions"
@@ -158,19 +174,19 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('file') {
           @defer {
             <organisms-file-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [hint]="field.hint"
               [progress]="field?.progress"
-              (action)="dispatchFileInputAction($event, name())"
+              (action)="dispatchFileInputAction($event, store.name())"
             />
           }
         }
         @case ('slider') {
           @defer {
             <organisms-slider-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [max]="field?.slider?.max"
               [min]="field?.slider?.min"
               [step]="field?.slider?.step"
@@ -181,7 +197,7 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('agreement') {
           @defer {
             <organisms-agreement-input-section injectable
-              [control]="control()"
+              [control]="store.control()"
               [labelTemp]="field?.labelTemp"
             />
           }
@@ -189,7 +205,7 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('preview') {
           @defer {
             <organisms-video-section injectable
-              [src]="control().value"
+              [src]="store.control().value"
               [autoplay]="false"
             />
           }
@@ -197,7 +213,7 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('preview:image') {
           @defer {
             <organisms-image-preview-section
-              [src]="control().value"
+              [src]="store.control().value"
             />
           }
         }
@@ -213,7 +229,6 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
                             DomainPipe,
                             ActionButtonsSectionOrganismStore,
                             AgreementInputSectionOrganism,
-                            ActionInputSectionOrganismStore,
                             FileInputSectionOrganismStore,
                             DateInputSectionOrganism,
                             DateRangeInputSectionOrganism,
@@ -226,13 +241,13 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
                             ImagePreviewSectionOrganism,
                             PasswordInputSectionOrganismStore,
                         ], template: `
-    @if (field(); as field) {
+    @if (store.field(); as field) {
       @switch (field.type) {
         @case ('select') {
           @defer {
             <organisms-select-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [hint]="field.hint"
               [options]="field.options"
               [placeholder]="field.placeholder"
@@ -243,19 +258,19 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
           }
         }
         @case ('date') {
-            <organisms-date-input-section
-              [label]="name() | domain"
-              [hint]="field.hint"
-              [control]="control()"
-              [actions]="field.actions"
-              (action)="dispatch($event)"
-            />
+          <organisms-date-input-section
+            [label]="store.name() | domain"
+            [hint]="field.hint"
+            [control]="store.control()"
+            [actions]="field.actions"
+            (action)="dispatch($event)"
+          />
         }
         @case ('date-range') {
           <organisms-date-range-input-section
-            [label]="name() | domain"
+            [label]="store.name() | domain"
             [hint]="field.hint"
-            [control]="control()"
+            [control]="store.control()"
             [actions]="field.actions"
             (action)="dispatch($event)"
           />
@@ -263,8 +278,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
         @case ('text') {
           @defer {
             <organisms-text-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [actions]="field.actions"
               [hint]="field.hint"
               [placeholder]="field.placeholder"
@@ -276,8 +291,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
         @case ('number') {
           @defer {
             <organisms-number-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [actions]="field.actions"
               [hint]="field.hint"
               [placeholder]="field.placeholder"
@@ -288,8 +303,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
         @case ('textarea') {
           @defer {
             <organisms-textarea-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [hint]="field.hint"
               [rows]="field.rows"
               [placeholder]="field.placeholder"
@@ -300,8 +315,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
         @case ('password') {
           @defer {
             <organisms-password-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [hint]="field.hint"
               [placeholder]="field.placeholder"
               [actions]="field.actions"
@@ -322,19 +337,19 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
         @case ('file') {
           @defer {
             <organisms-file-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [hint]="field.hint"
               [progress]="field?.progress"
-              (action)="dispatchFileInputAction($event, name())"
+              (action)="dispatchFileInputAction($event, store.name())"
             />
           }
         }
         @case ('slider') {
           @defer {
             <organisms-slider-input-section injectable
-              [label]="name() | domain"
-              [control]="control()"
+              [label]="store.name() | domain"
+              [control]="store.control()"
               [max]="field?.slider?.max"
               [min]="field?.slider?.min"
               [step]="field?.slider?.step"
@@ -345,7 +360,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
         @case ('agreement') {
           @defer {
             <organisms-agreement-input-section injectable
-              [control]="control()"
+              [control]="store.control()"
               [labelTemp]="field?.labelTemp"
             />
           }
@@ -353,7 +368,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
         @case ('preview') {
           @defer {
             <organisms-video-section injectable
-              [src]="control().value"
+              [src]="store.control().value"
               [autoplay]="false"
             />
           }
@@ -361,18 +376,24 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
         @case ('preview:image') {
           @defer {
             <organisms-image-preview-section
-              [src]="control().value"
+              [src]="store.control().value"
             />
           }
         }
         @case ('hidden') { }
       }
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
+  `, hostDirectives: [
+                            {
+                                directive: NgAtomicFormSectionSwitcherStore,
+                                inputs: ['name', 'control', 'field'],
+                            },
+                        ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
             }], ctorParameters: null, propDecorators: null }) });
 class NgAtomicFormSectionBuilder extends NgAtomicComponent {
+    static { this.ActionId = ActionId$1; }
     constructor() {
-        super(...arguments);
+        super();
         this.form = input.required();
         this.formFlatExcludes = input([]);
         this.fieldMap = input.required();
@@ -381,8 +402,7 @@ class NgAtomicFormSectionBuilder extends NgAtomicComponent {
                 if (get(fieldMap, name))
                     return get(fieldMap, name);
                 for (const key of Object.keys(fieldMap ?? {})) {
-                    const regex = new RegExp(`^${key.replace(/\./g, '\\.')}(\\..+)?$`);
-                    if (regex.test(name))
+                    if (new RegExp(key).test(name))
                         return get(fieldMap, key);
                 }
                 return undefined;
@@ -393,9 +413,11 @@ class NgAtomicFormSectionBuilder extends NgAtomicComponent {
                 field: _get(this.fieldMap(), name) ?? { type: 'text' },
             }));
         });
+        effect(() => {
+            console.debug('[NgAtomicFormSectionBuilder] controlEntries:', this.controlEntries());
+        });
     }
-    static { this.ActionId = ActionId$1; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgAtomicFormSectionBuilder, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgAtomicFormSectionBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.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
@@ -405,7 +427,7 @@ class NgAtomicFormSectionBuilder extends NgAtomicComponent {
         (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 }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-builder-zu8B: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-builder-zu8B: var(--vertical-padding)}:host{display:contents}:host ng-atomic-form-section-switcher ::ng-deep>*{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-builder-zu8B);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-builder-zu8B)}\n"], dependencies: [{ kind: "component", type: NgAtomicFormSectionSwitcher, selector: "ng-atomic-form-section-switcher" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NgAtomicFormSectionBuilder, decorators: [{
             type: Component,
@@ -420,8 +442,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
         (action)="dispatch($event)"
       />
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
-        }] });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-builder-zu8B: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-builder-zu8B: var(--vertical-padding)}:host{display:contents}:host ng-atomic-form-section-switcher ::ng-deep>*{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-builder-zu8B);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-builder-zu8B)}\n"] }]
+        }], ctorParameters: () => [] });
 
 var ActionId;
 (function (ActionId) {
@@ -487,6 +509,9 @@ class FormTemplate extends NgAtomicComponent {
     back() {
         this.dispatch({ id: ActionId.BACK });
     }
+    fileSelected(payload) {
+        this.dispatch({ id: ActionId.FILE_SELECTED, payload });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FormTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.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>
@@ -498,20 +523,24 @@ class FormTemplate extends NgAtomicComponent {
     >
       <molecules-header injectable [title]="store.title()" [description]="''"/>
     </organisms-navigator>
-    <frames-auto-layout vertical>
-      <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-divider>
+      <ng-content select="[dashboard]" first/>
+      <frames-auto-layout [type]="'vertical'" second>
+        <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-divider>
   </frames-scroll>
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-ppMb: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-ppMb: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-ppMb: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-ppMb: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-ppMb: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-ppMb: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-ppMb: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-ppMb: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-ppMb: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-ppMb: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-ppMb);--navigator-background-color-SCOPED-IN-form-ppMb: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-ppMb);--navigator-on-background-color-SCOPED-IN-form-ppMb: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-ppMb);color:var(--on-background-color-SCOPED-IN-form-ppMb)}:host frames-auto-layout{height:fit-content;--gap: var(--gap-SCOPED-IN-form-ppMb);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-ppMb)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-ppMb)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-ppMb);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-ppMb)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-ppMb);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-ppMb);--surface-color: var(--surface-color-SCOPED-IN-form-ppMb);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-ppMb);--background-color: var(--background-color-SCOPED-IN-form-ppMb);--on-background-color: var(--on-background-color-SCOPED-IN-form-ppMb)}\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-dF2r: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-dF2r: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-dF2r: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-dF2r: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-dF2r: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-dF2r: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-dF2r: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-dF2r: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-dF2r: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-dF2r: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-dF2r);--navigator-background-color-SCOPED-IN-form-dF2r: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-dF2r);--navigator-on-background-color-SCOPED-IN-form-dF2r: var(--navigator-on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-form-dF2r: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-form-dF2r: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-form-dF2r: var(--max-first-content-height)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-dF2r);color:var(--on-background-color-SCOPED-IN-form-dF2r)}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-form-dF2r);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-form-dF2r)}:host frames-auto-layout{display:flex;justify-content:flex-start;height:fit-content;--gap: var(--gap-SCOPED-IN-form-dF2r);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-dF2r);overflow:scroll}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-dF2r)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-dF2r);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-dF2r)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-dF2r);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-dF2r);--surface-color: var(--surface-color-SCOPED-IN-form-dF2r);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-dF2r);--background-color: var(--background-color-SCOPED-IN-form-dF2r);--on-background-color: var(--on-background-color-SCOPED-IN-form-dF2r)}\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", "resolvedStartActions", "endActions", "resolvedEndActions", "title"] }, { kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "directive", type: ActionButtonsSectionOrganismStore, selector: "organisms-action-buttons-section", inputs: ["actions", "type"] }, { kind: "component", type: DividerFrame, selector: "frames-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Effect(NavActionId.BACK),
@@ -519,6 +548,12 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], FormTemplate.prototype, "back", null);
+__decorate([
+    Effect(NgAtomicFormSectionBuilder.ActionId.FILE_SELECTED),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], FormTemplate.prototype, "fileSelected", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: FormTemplate, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
@@ -528,6 +563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                         NavigatorOrganismStore,
                         AutoLayoutFrame,
                         ActionButtonsSectionOrganismStore,
+                        DividerFrame,
                     ], selector: 'templates-form', template: `
   <frames-scroll>
     <organisms-navigator injectable
@@ -538,18 +574,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
     >
       <molecules-header injectable [title]="store.title()" [description]="''"/>
     </organisms-navigator>
-    <frames-auto-layout vertical>
-      <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-divider>
+      <ng-content select="[dashboard]" first/>
+      <frames-auto-layout [type]="'vertical'" second>
+        <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-divider>
   </frames-scroll>
   `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
@@ -564,12 +604,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                                 'fieldMap',
                             ],
                         },
-                    ], host: { class: 'template' }, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-ppMb: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-ppMb: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-ppMb: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-ppMb: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-ppMb: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-ppMb: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-ppMb: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-ppMb: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-ppMb: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-ppMb: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-ppMb);--navigator-background-color-SCOPED-IN-form-ppMb: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-ppMb);--navigator-on-background-color-SCOPED-IN-form-ppMb: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-ppMb);color:var(--on-background-color-SCOPED-IN-form-ppMb)}:host frames-auto-layout{height:fit-content;--gap: var(--gap-SCOPED-IN-form-ppMb);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-ppMb)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-ppMb)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-ppMb);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-ppMb)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-ppMb);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-ppMb);--surface-color: var(--surface-color-SCOPED-IN-form-ppMb);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-ppMb);--background-color: var(--background-color-SCOPED-IN-form-ppMb);--on-background-color: var(--on-background-color-SCOPED-IN-form-ppMb)}\n"] }]
-        }], propDecorators: { back: [] } });
+                    ], host: { class: 'template' }, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-dF2r: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-dF2r: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-dF2r: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-dF2r: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-dF2r: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-dF2r: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-dF2r: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-dF2r: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-dF2r: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-dF2r: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-dF2r);--navigator-background-color-SCOPED-IN-form-dF2r: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-dF2r);--navigator-on-background-color-SCOPED-IN-form-dF2r: var(--navigator-on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-form-dF2r: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-form-dF2r: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-form-dF2r: var(--max-first-content-height)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-dF2r);color:var(--on-background-color-SCOPED-IN-form-dF2r)}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-form-dF2r);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-form-dF2r)}:host frames-auto-layout{display:flex;justify-content:flex-start;height:fit-content;--gap: var(--gap-SCOPED-IN-form-dF2r);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-dF2r);overflow:scroll}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-dF2r)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-dF2r);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-dF2r)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-dF2r);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-dF2r);--surface-color: var(--surface-color-SCOPED-IN-form-dF2r);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-dF2r);--background-color: var(--background-color-SCOPED-IN-form-dF2r);--on-background-color: var(--on-background-color-SCOPED-IN-form-dF2r)}\n"] }]
+        }], propDecorators: { back: [], fileSelected: [] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FormTemplate, FormTemplateStore, NgAtomicFormSectionBuilder, NgAtomicFormSectionSwitcher };
+export { FormTemplate, FormTemplateStore, NgAtomicFormSectionBuilder, NgAtomicFormSectionSwitcher, NgAtomicFormSectionSwitcherStore };
 //# sourceMappingURL=ng-atomic-components-templates-form.mjs.map