@ng-atomic/components 19.21.8 → 19.25.0

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

@@ -15,6 +15,7 @@ import { ActionButtonsSectionOrganismStore } from '@ng-atomic/components/organis
 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';
+export * from '@ng-atomic/components/templates/form/harness';
 
 function walkControls(controls, cb, excludes = [], name = '') {
     Object.entries(controls).forEach(([key, control]) => {
@@ -84,12 +85,12 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
           @defer {
             <organisms-select-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [hint]="field.hint"
-              [options]="field.options"
-              [placeholder]="field.placeholder"
-              [actions]="field.actions"
-              [multiple]="field?.multiple"
+              [control]="$any(store.control())"
+              [hint]="$any(field.hint)"
+              [options]="$any(field.options)"
+              [placeholder]="$any(field.placeholder)"
+              [actions]="$any(field.actions)"
+              [multiple]="$any(field?.multiple)"
               (action)="dispatch($event)"
             />
           }
@@ -97,18 +98,18 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('date') {
           <organisms-date-input-section
             [label]="store.name() | domain"
-            [hint]="field.hint"
-            [control]="store.control()"
-            [actions]="field.actions"
+            [hint]="$any(field.hint)"
+            [control]="$any(store.control())"
+            [actions]="$any(field.actions)"
             (action)="dispatch($event)"
           />
         }
         @case ('date-range') {
           <organisms-date-range-input-section
             [label]="store.name() | domain"
-            [hint]="field.hint"
-            [control]="store.control()"
-            [actions]="field.actions"
+            [hint]="$any(field.hint)"
+            [control]="$any(store.control())"
+            [actions]="$any(field.actions)"
             (action)="dispatch($event)"
           />
         }
@@ -116,11 +117,11 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
           @defer {
             <organisms-text-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [actions]="field.actions"
-              [hint]="field.hint"
-              [placeholder]="field.placeholder"
-              [autoComplete]="field.autoComplete"
+              [control]="$any(store.control())"
+              [actions]="$any(field.actions)"
+              [hint]="$any(field.hint)"
+              [placeholder]="$any(field.placeholder)"
+              [autoComplete]="$any(field.autoComplete)"
               (action)="dispatch($event)"
             />
           }
@@ -129,10 +130,10 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
           @defer {
             <organisms-number-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [actions]="field.actions"
-              [hint]="field.hint"
-              [placeholder]="field.placeholder"
+              [control]="$any(store.control())"
+              [actions]="$any(field.actions)"
+              [hint]="$any(field.hint)"
+              [placeholder]="$any(field.placeholder)"
               (action)="dispatch($event)"
             />
           }
@@ -141,10 +142,10 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
           @defer {
             <organisms-textarea-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [hint]="field.hint"
-              [rows]="field.rows"
-              [placeholder]="field.placeholder"
+              [control]="$any(store.control())"
+              [hint]="$any(field.hint)"
+              [rows]="$any(field.rows)"
+              [placeholder]="$any(field.placeholder)"
               (action)="dispatch($event)"
             />
           }
@@ -153,10 +154,10 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
           @defer {
             <organisms-password-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [hint]="field.hint"
-              [placeholder]="field.placeholder"
-              [actions]="field.actions"
+              [control]="$any(store.control())"
+              [hint]="$any(field.hint)"
+              [placeholder]="$any(field.placeholder)"
+              [actions]="$any(field.actions)"
               (action)="dispatch($event)"
             />
           }
@@ -164,8 +165,8 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('action') {
           @defer {
             <organisms-action-buttons-section
-              [actions]="field?.actions"
-              [type]="field?.buttonType"
+              [actions]="$any(field?.actions)"
+              [type]="$any(field?.buttonType)"
               (action)="dispatch($event)"
               injectable
             />
@@ -175,9 +176,9 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
           @defer {
             <organisms-file-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [hint]="field.hint"
-              [progress]="field?.progress"
+              [control]="$any(store.control())"
+              [hint]="$any(field.hint)"
+              [progress]="$any(field?.progress)"
               (action)="dispatchFileInputAction($event, store.name())"
             />
           }
@@ -186,10 +187,10 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
           @defer {
             <organisms-slider-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [max]="field?.slider?.max"
-              [min]="field?.slider?.min"
-              [step]="field?.slider?.step"
+              [control]="$any(store.control())"
+              [max]="$any(field?.slider?.max)"
+              [min]="$any(field?.slider?.min)"
+              [step]="$any(field?.slider?.step)"
               (action)="dispatch($event)"
             />
           }
@@ -197,8 +198,8 @@ class NgAtomicFormSectionSwitcher extends NgAtomicComponent {
         @case ('agreement') {
           @defer {
             <organisms-agreement-input-section injectable
-              [control]="store.control()"
-              [labelTemp]="field?.labelTemp"
+              [control]="$any(store.control())"
+              [labelTemp]="$any(field?.labelTemp)"
             />
           }
         }
@@ -247,12 +248,12 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ng
           @defer {
             <organisms-select-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [hint]="field.hint"
-              [options]="field.options"
-              [placeholder]="field.placeholder"
-              [actions]="field.actions"
-              [multiple]="field?.multiple"
+              [control]="$any(store.control())"
+              [hint]="$any(field.hint)"
+              [options]="$any(field.options)"
+              [placeholder]="$any(field.placeholder)"
+              [actions]="$any(field.actions)"
+              [multiple]="$any(field?.multiple)"
               (action)="dispatch($event)"
             />
           }
@@ -260,18 +261,18 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ng
         @case ('date') {
           <organisms-date-input-section
             [label]="store.name() | domain"
-            [hint]="field.hint"
-            [control]="store.control()"
-            [actions]="field.actions"
+            [hint]="$any(field.hint)"
+            [control]="$any(store.control())"
+            [actions]="$any(field.actions)"
             (action)="dispatch($event)"
           />
         }
         @case ('date-range') {
           <organisms-date-range-input-section
             [label]="store.name() | domain"
-            [hint]="field.hint"
-            [control]="store.control()"
-            [actions]="field.actions"
+            [hint]="$any(field.hint)"
+            [control]="$any(store.control())"
+            [actions]="$any(field.actions)"
             (action)="dispatch($event)"
           />
         }
@@ -279,11 +280,11 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ng
           @defer {
             <organisms-text-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [actions]="field.actions"
-              [hint]="field.hint"
-              [placeholder]="field.placeholder"
-              [autoComplete]="field.autoComplete"
+              [control]="$any(store.control())"
+              [actions]="$any(field.actions)"
+              [hint]="$any(field.hint)"
+              [placeholder]="$any(field.placeholder)"
+              [autoComplete]="$any(field.autoComplete)"
               (action)="dispatch($event)"
             />
           }
@@ -292,10 +293,10 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ng
           @defer {
             <organisms-number-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [actions]="field.actions"
-              [hint]="field.hint"
-              [placeholder]="field.placeholder"
+              [control]="$any(store.control())"
+              [actions]="$any(field.actions)"
+              [hint]="$any(field.hint)"
+              [placeholder]="$any(field.placeholder)"
               (action)="dispatch($event)"
             />
           }
@@ -304,10 +305,10 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ng
           @defer {
             <organisms-textarea-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [hint]="field.hint"
-              [rows]="field.rows"
-              [placeholder]="field.placeholder"
+              [control]="$any(store.control())"
+              [hint]="$any(field.hint)"
+              [rows]="$any(field.rows)"
+              [placeholder]="$any(field.placeholder)"
               (action)="dispatch($event)"
             />
           }
@@ -316,10 +317,10 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ng
           @defer {
             <organisms-password-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [hint]="field.hint"
-              [placeholder]="field.placeholder"
-              [actions]="field.actions"
+              [control]="$any(store.control())"
+              [hint]="$any(field.hint)"
+              [placeholder]="$any(field.placeholder)"
+              [actions]="$any(field.actions)"
               (action)="dispatch($event)"
             />
           }
@@ -327,8 +328,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ng
         @case ('action') {
           @defer {
             <organisms-action-buttons-section
-              [actions]="field?.actions"
-              [type]="field?.buttonType"
+              [actions]="$any(field?.actions)"
+              [type]="$any(field?.buttonType)"
               (action)="dispatch($event)"
               injectable
             />
@@ -338,9 +339,9 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ng
           @defer {
             <organisms-file-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [hint]="field.hint"
-              [progress]="field?.progress"
+              [control]="$any(store.control())"
+              [hint]="$any(field.hint)"
+              [progress]="$any(field?.progress)"
               (action)="dispatchFileInputAction($event, store.name())"
             />
           }
@@ -349,10 +350,10 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ng
           @defer {
             <organisms-slider-input-section injectable
               [label]="store.name() | domain"
-              [control]="store.control()"
-              [max]="field?.slider?.max"
-              [min]="field?.slider?.min"
-              [step]="field?.slider?.step"
+              [control]="$any(store.control())"
+              [max]="$any(field?.slider?.max)"
+              [min]="$any(field?.slider?.min)"
+              [step]="$any(field?.slider?.step)"
               (action)="dispatch($event)"
             />
           }
@@ -360,8 +361,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ng
         @case ('agreement') {
           @defer {
             <organisms-agreement-input-section injectable
-              [control]="store.control()"
-              [labelTemp]="field?.labelTemp"
+              [control]="$any(store.control())"
+              [labelTemp]="$any(field?.labelTemp)"
             />
           }
         }
@@ -428,7 +429,7 @@ class NgAtomicFormSectionBuilder extends NgAtomicComponent {
         (action)="dispatch($event)"
       />
     }
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-builder-ls8E: var(--horizontal-padding);--vertical-padding: 0px;--vertical-padding-SCOPED-IN-form-builder-ls8E: var(--vertical-padding)}:host{display:contents}:host ng-atomic-form-section-switcher ::ng-deep>*{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-builder-ls8E);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-builder-ls8E)}\n"], dependencies: [{ kind: "component", type: NgAtomicFormSectionSwitcher, selector: "ng-atomic-form-section-switcher" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-builder-4UQF: var(--horizontal-padding);--vertical-padding: 0px;--vertical-padding-SCOPED-IN-form-builder-4UQF: var(--vertical-padding)}:host{display:contents}:host ng-atomic-form-section-switcher ::ng-deep>*{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-builder-4UQF);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-builder-4UQF)}\n"], dependencies: [{ kind: "component", type: NgAtomicFormSectionSwitcher, selector: "ng-atomic-form-section-switcher" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NgAtomicFormSectionBuilder, decorators: [{
             type: Component,
@@ -443,7 +444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         (action)="dispatch($event)"
       />
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-builder-ls8E: var(--horizontal-padding);--vertical-padding: 0px;--vertical-padding-SCOPED-IN-form-builder-ls8E: var(--vertical-padding)}:host{display:contents}:host ng-atomic-form-section-switcher ::ng-deep>*{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-builder-ls8E);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-builder-ls8E)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-builder-4UQF: var(--horizontal-padding);--vertical-padding: 0px;--vertical-padding-SCOPED-IN-form-builder-4UQF: var(--vertical-padding)}:host{display:contents}:host ng-atomic-form-section-switcher ::ng-deep>*{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-builder-4UQF);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-builder-4UQF)}\n"] }]
         }], ctorParameters: () => [] });
 
 var ActionId;
@@ -543,7 +544,7 @@ class FormTemplate extends NgAtomicComponent {
       </frames-auto-layout>
     </frames-divider>
   </frames-scroll>
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-nA7L: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-nA7L: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-nA7L: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-nA7L: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-nA7L: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-nA7L: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-nA7L: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-nA7L: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-nA7L: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-nA7L: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-nA7L);--navigator-background-color-SCOPED-IN-form-nA7L: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-nA7L);--navigator-on-background-color-SCOPED-IN-form-nA7L: var(--navigator-on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-form-nA7L: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-form-nA7L: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-form-nA7L: var(--max-first-content-height)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-nA7L);color:var(--on-background-color-SCOPED-IN-form-nA7L)}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-form-nA7L);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-form-nA7L)}:host frames-auto-layout{display:flex;justify-content:flex-start;height:fit-content;--gap: var(--gap-SCOPED-IN-form-nA7L);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-nA7L);overflow:scroll}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-nA7L)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-nA7L);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-nA7L)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-nA7L);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-nA7L);--surface-color: var(--surface-color-SCOPED-IN-form-nA7L);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-nA7L);--background-color: var(--background-color-SCOPED-IN-form-nA7L);--on-background-color: var(--on-background-color-SCOPED-IN-form-nA7L)}\n"], dependencies: [{ kind: "component", type: NgAtomicFormSectionBuilder, selector: "ng-atomic-form-section-builder", inputs: ["form", "formFlatExcludes", "fieldMap", "fieldKeys"] }, { 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"] }, { kind: "component", type: DividerFrame, selector: "frames-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-UtrU: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-UtrU: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-UtrU: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-UtrU: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-UtrU: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-UtrU: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-UtrU: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-UtrU: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-UtrU: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-UtrU: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-UtrU);--navigator-background-color-SCOPED-IN-form-UtrU: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-UtrU);--navigator-on-background-color-SCOPED-IN-form-UtrU: var(--navigator-on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-form-UtrU: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-form-UtrU: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-form-UtrU: var(--max-first-content-height)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-UtrU);color:var(--on-background-color-SCOPED-IN-form-UtrU)}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-form-UtrU);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-form-UtrU)}:host frames-auto-layout{display:flex;justify-content:flex-start;height:fit-content;--gap: var(--gap-SCOPED-IN-form-UtrU);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-UtrU);overflow:scroll}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-UtrU)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-UtrU);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-UtrU)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-UtrU);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-UtrU);--surface-color: var(--surface-color-SCOPED-IN-form-UtrU);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-UtrU);--background-color: var(--background-color-SCOPED-IN-form-UtrU);--on-background-color: var(--on-background-color-SCOPED-IN-form-UtrU)}\n"], dependencies: [{ kind: "component", type: NgAtomicFormSectionBuilder, selector: "ng-atomic-form-section-builder", inputs: ["form", "formFlatExcludes", "fieldMap", "fieldKeys"] }, { 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"] }, { kind: "component", type: DividerFrame, selector: "frames-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Effect(NavActionId.BACK),
@@ -609,7 +610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                                 'fieldKeys',
                             ],
                         },
-                    ], host: { class: 'template' }, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-nA7L: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-nA7L: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-nA7L: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-nA7L: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-nA7L: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-nA7L: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-nA7L: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-nA7L: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-nA7L: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-nA7L: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-nA7L);--navigator-background-color-SCOPED-IN-form-nA7L: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-nA7L);--navigator-on-background-color-SCOPED-IN-form-nA7L: var(--navigator-on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-form-nA7L: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-form-nA7L: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-form-nA7L: var(--max-first-content-height)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-nA7L);color:var(--on-background-color-SCOPED-IN-form-nA7L)}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-form-nA7L);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-form-nA7L)}:host frames-auto-layout{display:flex;justify-content:flex-start;height:fit-content;--gap: var(--gap-SCOPED-IN-form-nA7L);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-nA7L);overflow:scroll}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-nA7L)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-nA7L);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-nA7L)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-nA7L);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-nA7L);--surface-color: var(--surface-color-SCOPED-IN-form-nA7L);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-nA7L);--background-color: var(--background-color-SCOPED-IN-form-nA7L);--on-background-color: var(--on-background-color-SCOPED-IN-form-nA7L)}\n"] }]
+                    ], host: { class: 'template' }, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-UtrU: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-UtrU: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-UtrU: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-UtrU: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-UtrU: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-UtrU: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-UtrU: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-UtrU: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-UtrU: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-UtrU: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-UtrU);--navigator-background-color-SCOPED-IN-form-UtrU: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-UtrU);--navigator-on-background-color-SCOPED-IN-form-UtrU: var(--navigator-on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-form-UtrU: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-form-UtrU: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-form-UtrU: var(--max-first-content-height)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-UtrU);color:var(--on-background-color-SCOPED-IN-form-UtrU)}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-form-UtrU);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-form-UtrU)}:host frames-auto-layout{display:flex;justify-content:flex-start;height:fit-content;--gap: var(--gap-SCOPED-IN-form-UtrU);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-UtrU);overflow:scroll}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-UtrU)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-UtrU);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-UtrU)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-UtrU);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-UtrU);--surface-color: var(--surface-color-SCOPED-IN-form-UtrU);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-UtrU);--background-color: var(--background-color-SCOPED-IN-form-UtrU);--on-background-color: var(--on-background-color-SCOPED-IN-form-UtrU)}\n"] }]
         }], propDecorators: { back: [], fileSelected: [] } });
 
 /**