ngx-t-forms 2.0.28 → 2.0.29

package/fesm2022/{ngx-t-forms-forms-builder-menu.component-DKybEMbx.mjs → ngx-t-forms-forms-builder-menu.component-Wamzf_sq.mjs}

@@ -1,27 +1,27 @@
-import * as i2$2 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, Component, computed } from '@angular/core';
-import { g as getAvatar, F as FormsStoreService, M as MatModulesModule, D as DaysAgoPipe, N as NGX_T_FORMS_CONFIG_TOKEN, t as testAgainstItem, a as assignDeepPropertyToObject, T as TDynamicDataEditComponent } from './ngx-t-forms-ngx-t-forms-mfuTrkmM.mjs';
+import { g as getAvatar, F as FormsStoreService, M as MatModulesModule, D as DaysAgoPipe, N as NGX_T_FORMS_CONFIG_TOKEN, t as testAgainstItem, a as assignDeepPropertyToObject, T as TDynamicDataEditComponent } from './ngx-t-forms-ngx-t-forms-D9qmig6g.mjs';
 import { map, combineLatest, take } from 'rxjs';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import * as i2 from '@angular/material/button';
-import * as i2$1 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import * as i7 from '@angular/material/progress-spinner';
-import * as i8 from '@angular/material/tooltip';
+import * as i4 from '@angular/material/tooltip';
 import { ElementEditorTypes, SpecialElementKeys, validateApiDataFetchingConfiguration } from 'ngx-t-forms-types';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/cdk/clipboard';
-import * as i4 from '@angular/material/divider';
+import * as i4$1 from '@angular/material/divider';
 import * as i5 from '@angular/material/expansion';
-import * as i2$3 from '@angular/material/select';
-import * as i3$1 from '@angular/material/badge';
+import * as i3$1 from '@angular/material/select';
+import * as i3$3 from '@angular/material/badge';
 import * as i7$1 from '@angular/material/list';
 import * as i6 from '@angular/material/menu';
 import * as i1$2 from '@angular/cdk/drag-drop';
-import * as i3 from '@angular/material/card';
+import * as i3$2 from '@angular/material/card';
 import * as i5$1 from '@angular/material/toolbar';
 
 class SelectFormTemplateComponent {
@@ -48,7 +48,7 @@ class SelectFormTemplateComponent {
         return getAvatar(formTitle);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SelectFormTemplateComponent, deps: [{ token: FormsStoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SelectFormTemplateComponent, isStandalone: true, selector: "lib-select-form-template", ngImport: i0, template: "<div class=\"template-select-dialog\">\r\n  <!-- Header: icon + title + subtitle per design rule \u00A74 -->\r\n  <header class=\"dialog-header\">\r\n    <div class=\"header-icon\" aria-hidden=\"true\">\r\n      <mat-icon>description</mat-icon>\r\n    </div>\r\n    <div class=\"header-text\">\r\n      <h1 class=\"header-title\">Choose a Form Template</h1>\r\n      <p class=\"header-subtitle\">\r\n        Select a pre-built form template to start with. You can customize and save it as your own form after copying it to the editor.\r\n      </p>\r\n    </div>\r\n  </header>\r\n\r\n  <section class=\"dialog-content\">\r\n    @if (selectLoadingForms$ | async) {\r\n      <div class=\"loading-state\">\r\n        <mat-spinner diameter=\"40\" aria-label=\"Loading form templates\"></mat-spinner>\r\n        <span class=\"loading-text\">Loading form templates...</span>\r\n      </div>\r\n    } @else {\r\n      <ul class=\"form-template-list\" aria-label=\"Available form templates\">\r\n        @for (form of selectForms$ | async; track form._id) {\r\n          <li>\r\n          <button\r\n            type=\"button\"\r\n            class=\"form-list-item\"\r\n            (click)=\"selectForm(form)\"\r\n            [matTooltip]=\"'Click to select this template'\"\r\n            [attr.aria-label]=\"'Select template: ' + form.formTitle\">\r\n            <img\r\n              class=\"form-avatar\"\r\n              [class.form-avatar--error]=\"form.errors.length > 0\"\r\n              [src]=\"getFormAvatar(form.formTitle)\"\r\n              [alt]=\"''\"\r\n              aria-hidden=\"true\">\r\n            <div class=\"form-item-content\">\r\n              <span class=\"form-title\">{{ form.formTitle | titlecase }}</span>\r\n              <div class=\"form-metadata\">\r\n                @if (form.errors.length > 0) {\r\n                  <span class=\"metadata-item\">\r\n                    <mat-icon color=\"warn\" aria-hidden=\"true\">error</mat-icon>\r\n                    <small>{{ form.errors.length }}</small>\r\n                  </span>\r\n                  <span class=\"metadata-divider\" aria-hidden=\"true\">\u2022</span>\r\n                }\r\n                <span class=\"metadata-item\">\r\n                  <mat-icon aria-hidden=\"true\">add_circle_outline</mat-icon>\r\n                  <small>{{ form.createdAt | daysAgo }}</small>\r\n                </span>\r\n                <span class=\"metadata-divider\" aria-hidden=\"true\">\u2022</span>\r\n                <span class=\"metadata-item\">\r\n                  <mat-icon aria-hidden=\"true\">update</mat-icon>\r\n                  <small>{{ form.updatedAt | daysAgo }}</small>\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n\r\n      @if ((selectForms$ | async)?.length === 0) {\r\n        <div class=\"empty-state\">\r\n          <mat-icon class=\"empty-state-icon\" aria-hidden=\"true\">folder_off</mat-icon>\r\n          <p>No form templates available.</p>\r\n        </div>\r\n      }\r\n    }\r\n  </section>\r\n\r\n  <footer class=\"dialog-actions\">\r\n    <button mat-button (click)=\"close()\" aria-label=\"Close dialog\">\r\n      Close\r\n    </button>\r\n  </footer>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.template-select-dialog{display:flex;flex-direction:column;min-width:28rem;max-width:36rem;max-height:calc(100vh - 24px);background:var(--mat-sys-surface, var(--mat-app-surface));overflow:hidden}.dialog-header{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem 1.5rem 0;flex-shrink:0}.header-icon{width:2.75rem;height:2.75rem;border-radius:8px;background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 12%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.header-icon mat-icon{font-size:1.5rem;width:1.5rem;height:1.5rem;color:var(--mat-sys-primary, #6750a4)}.header-text{flex:1;min-width:0}.header-title{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--mat-sys-on-surface, #1c1b1f);margin:0;line-height:1.3}.header-subtitle{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f);line-height:1.4;margin-top:.25rem;margin-bottom:0}.dialog-content{padding:1rem 1.5rem 1.5rem;overflow-y:auto;max-height:70vh;flex:1;min-height:0}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;gap:1rem;min-height:12rem}.loading-text{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f)}.form-template-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.form-list-item{display:flex;align-items:flex-start;gap:1rem;width:100%;padding:.5rem 1.25rem;min-height:2.25rem;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);border-radius:8px;background:var(--mat-sys-surface-container, var(--mat-app-surface-container-low));color:var(--mat-sys-on-surface, #1c1b1f);font-size:.875rem;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s;box-shadow:0 2px 8px #00000014}.form-list-item:hover{border-color:var(--mat-sys-primary, #6750a4);background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent)}.form-list-item:focus-visible{outline:none;border-color:var(--mat-sys-primary, #6750a4);box-shadow:0 0 0 2px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}.form-list-item:active{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 12%,transparent)}@media(prefers-color-scheme:dark){.form-list-item{box-shadow:0 1px 3px #0000004d}}.form-avatar{width:2.5rem;height:2.5rem;border-radius:6px;object-fit:cover;flex-shrink:0;display:block}.form-avatar.form-avatar--error{outline:2px solid var(--mat-sys-error, #b3261e);outline-offset:2px}.form-item-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.form-title{font-weight:600;font-size:.9375rem}.form-metadata{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;font-size:.75rem;color:var(--mat-sys-on-surface-variant, #49454f);line-height:1.35}.form-metadata .metadata-divider{margin:0 .25rem;opacity:.7}.form-metadata .metadata-item{display:inline-flex;align-items:center;gap:.25rem}.form-metadata .metadata-item mat-icon{font-size:.875rem;width:.875rem;height:.875rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem;background:var(--mat-sys-surface-container, var(--mat-app-surface-container-low));border-radius:8px;text-align:center}.empty-state p{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f);margin:0}.empty-state-icon{font-size:2rem;width:2rem;height:2rem;color:var(--mat-sys-on-surface-variant, #49454f);opacity:.7}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.5rem 1.25rem;flex-shrink:0;border-top:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SelectFormTemplateComponent, isStandalone: true, selector: "lib-select-form-template", ngImport: i0, template: "<div class=\"template-select-dialog\">\r\n  <!-- Header: icon + title + subtitle per design rule \u00A74 -->\r\n  <header class=\"dialog-header\">\r\n    <div class=\"header-icon\" aria-hidden=\"true\">\r\n      <mat-icon>description</mat-icon>\r\n    </div>\r\n    <div class=\"header-text\">\r\n      <h1 class=\"header-title\">Choose a Form Template</h1>\r\n      <p class=\"header-subtitle\">\r\n        Select a pre-built form template to start with. You can customize and save it as your own form after copying it to the editor.\r\n      </p>\r\n    </div>\r\n  </header>\r\n\r\n  <section class=\"dialog-content\">\r\n    @if (selectLoadingForms$ | async) {\r\n      <div class=\"loading-state\">\r\n        <mat-spinner diameter=\"40\" aria-label=\"Loading form templates\"></mat-spinner>\r\n        <span class=\"loading-text\">Loading form templates...</span>\r\n      </div>\r\n    } @else {\r\n      <ul class=\"form-template-list\" aria-label=\"Available form templates\">\r\n        @for (form of selectForms$ | async; track form._id) {\r\n          <li>\r\n          <button\r\n            type=\"button\"\r\n            class=\"form-list-item\"\r\n            (click)=\"selectForm(form)\"\r\n            [matTooltip]=\"'Click to select this template'\"\r\n            [attr.aria-label]=\"'Select template: ' + form.formTitle\">\r\n            <img\r\n              class=\"form-avatar\"\r\n              [class.form-avatar--error]=\"form.errors.length > 0\"\r\n              [src]=\"getFormAvatar(form.formTitle)\"\r\n              [alt]=\"''\"\r\n              aria-hidden=\"true\">\r\n            <div class=\"form-item-content\">\r\n              <span class=\"form-title\">{{ form.formTitle | titlecase }}</span>\r\n              <div class=\"form-metadata\">\r\n                @if (form.errors.length > 0) {\r\n                  <span class=\"metadata-item\">\r\n                    <mat-icon color=\"warn\" aria-hidden=\"true\">error</mat-icon>\r\n                    <small>{{ form.errors.length }}</small>\r\n                  </span>\r\n                  <span class=\"metadata-divider\" aria-hidden=\"true\">\u2022</span>\r\n                }\r\n                <span class=\"metadata-item\">\r\n                  <mat-icon aria-hidden=\"true\">add_circle_outline</mat-icon>\r\n                  <small>{{ form.createdAt | daysAgo }}</small>\r\n                </span>\r\n                <span class=\"metadata-divider\" aria-hidden=\"true\">\u2022</span>\r\n                <span class=\"metadata-item\">\r\n                  <mat-icon aria-hidden=\"true\">update</mat-icon>\r\n                  <small>{{ form.updatedAt | daysAgo }}</small>\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n\r\n      @if ((selectForms$ | async)?.length === 0) {\r\n        <div class=\"empty-state\">\r\n          <mat-icon class=\"empty-state-icon\" aria-hidden=\"true\">folder_off</mat-icon>\r\n          <p>No form templates available.</p>\r\n        </div>\r\n      }\r\n    }\r\n  </section>\r\n\r\n  <footer class=\"dialog-actions\">\r\n    <button mat-button (click)=\"close()\" aria-label=\"Close dialog\">\r\n      Close\r\n    </button>\r\n  </footer>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.template-select-dialog{display:flex;flex-direction:column;min-width:28rem;max-width:36rem;max-height:calc(100vh - 24px);background:var(--mat-sys-surface, var(--mat-app-surface));overflow:hidden}.dialog-header{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem 1.5rem 0;flex-shrink:0}.header-icon{width:2.75rem;height:2.75rem;border-radius:8px;background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 12%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.header-icon mat-icon{font-size:1.5rem;width:1.5rem;height:1.5rem;color:var(--mat-sys-primary, #6750a4)}.header-text{flex:1;min-width:0}.header-title{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--mat-sys-on-surface, #1c1b1f);margin:0;line-height:1.3}.header-subtitle{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f);line-height:1.4;margin-top:.25rem;margin-bottom:0}.dialog-content{padding:1rem 1.5rem 1.5rem;overflow-y:auto;max-height:70vh;flex:1;min-height:0}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;gap:1rem;min-height:12rem}.loading-text{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f)}.form-template-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.form-list-item{display:flex;align-items:flex-start;gap:1rem;width:100%;padding:.5rem 1.25rem;min-height:2.25rem;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);border-radius:8px;background:var(--mat-sys-surface-container, var(--mat-app-surface-container-low));color:var(--mat-sys-on-surface, #1c1b1f);font-size:.875rem;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s;box-shadow:0 2px 8px #00000014}.form-list-item:hover{border-color:var(--mat-sys-primary, #6750a4);background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 6%,transparent)}.form-list-item:focus-visible{outline:none;border-color:var(--mat-sys-primary, #6750a4);box-shadow:0 0 0 2px color-mix(in srgb,var(--mat-sys-primary, #6750a4) 25%,transparent)}.form-list-item:active{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 12%,transparent)}@media(prefers-color-scheme:dark){.form-list-item{box-shadow:0 1px 3px #0000004d}}.form-avatar{width:2.5rem;height:2.5rem;border-radius:6px;object-fit:cover;flex-shrink:0;display:block}.form-avatar.form-avatar--error{outline:2px solid var(--mat-sys-error, #b3261e);outline-offset:2px}.form-item-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.form-title{font-weight:600;font-size:.9375rem}.form-metadata{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;font-size:.75rem;color:var(--mat-sys-on-surface-variant, #49454f);line-height:1.35}.form-metadata .metadata-divider{margin:0 .25rem;opacity:.7}.form-metadata .metadata-item{display:inline-flex;align-items:center;gap:.25rem}.form-metadata .metadata-item mat-icon{font-size:.875rem;width:.875rem;height:.875rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem;background:var(--mat-sys-surface-container, var(--mat-app-surface-container-low));border-radius:8px;text-align:center}.empty-state p{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f);margin:0}.empty-state-icon{font-size:2rem;width:2rem;height:2rem;color:var(--mat-sys-on-surface-variant, #49454f);opacity:.7}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.5rem 1.25rem;flex-shrink:0;border-top:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SelectFormTemplateComponent, decorators: [{
             type: Component,
@@ -216,16 +216,13 @@ class FormSubmissionsConfigComponent {
         const errors = val?.filter(error => error.key === element.deepBind?.join('.')) || [];
         return errors;
     }
-    elementBlur(event, element) {
-        console.info("[Admin Panel Input Element Editor] element blur", event);
+    elementBlur(_event, _element) {
     }
     inputChange(event, element) {
-        console.info("[Admin Panel Input Element Editor] input changed", event);
         this.elementConfigurationChanged(event, element);
         // this.elementConfigurationChanged(event?.target?.value, element)
     }
     passFormChanges(event, element) {
-        console.error("[Admin Panel Input Element Editor] pass form changes", event);
         this.formInputChange(event, element);
     }
     elementConfigurationChanged(value, ele) {
@@ -274,7 +271,7 @@ class FormSubmissionsConfigComponent {
         this.matDialog.closeAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormSubmissionsConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormSubmissionsConfigComponent, isStandalone: true, selector: "app-form-submissions-config", ngImport: i0, template: "<div class=\"submissions-dialog\">\r\n  <!-- Header: icon + title + subtitle per design rule \u00A74 -->\r\n  <header class=\"dialog-header\">\r\n    <div class=\"header-icon\" aria-hidden=\"true\">\r\n      <mat-icon>settings</mat-icon>\r\n    </div>\r\n    <div class=\"header-text\">\r\n      <h1 class=\"header-title\">Form Submission Configuration</h1>\r\n      <p class=\"header-subtitle\">Configure how your form is submitted and validated before submission.</p>\r\n    </div>\r\n    <button mat-icon-button mat-dialog-close [attr.aria-label]=\"'Close dialog'\" class=\"header-close\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </header>\r\n\r\n  <section class=\"dialog-content\">\r\n    <mat-accordion multi>\r\n      @for (panel of panels(); track panel.id) {\r\n        <mat-expansion-panel [expanded]=\"true\" class=\"config-panel\">\r\n          <mat-expansion-panel-header class=\"panel-header\">\r\n            <mat-panel-title class=\"panel-title\">\r\n              <mat-icon class=\"panel-icon\" [color]=\"'primary'\">{{ panel.titleIcon }}</mat-icon>\r\n              {{ panel.title }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n\r\n          <div class=\"panel-content\">\r\n            <p class=\"panel-description\" [innerHTML]=\"panel.description\"></p>\r\n\r\n            <!-- Dynamic form elements (submission message, toggles, etc.) -->\r\n            @if ((panel?.elements || []).length > 0) {\r\n              <div class=\"edit-section\">\r\n                @for (edit of (panel?.elements || []); track edit.id) {\r\n                  <div class=\"edit-field\">\r\n                    <lib-t-dynamic-data-edit\r\n                      [editorConfig]=\"edit\"\r\n                      [data]=\"form()\"\r\n                      [validationErrors]=\"(computedErrors(edit)()) || []\"\r\n                      (valueChange)=\"passFormChanges($event, edit)\"\r\n                      [formInputs]=\"(formInputs()) || []\"\r\n                      (blur)=\"elementBlur($event, edit)\">\r\n                    </lib-t-dynamic-data-edit>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <!-- API endpoints list -->\r\n            <div class=\"api-section\">\r\n              <h3 class=\"api-section-header\" [class.api-section-header--error]=\"panel.error\">\r\n                {{ panel.primaryKey === 'submissionAPI' ? 'Submission Endpoints' : 'Validation Endpoints' }}\r\n              </h3>\r\n\r\n              @if ((getFormApis(panel.primaryKey)()).length === 0) {\r\n                <div class=\"empty-state\" [class.empty-state--error]=\"panel.error\">\r\n                  <mat-icon class=\"empty-state-icon\">add_link</mat-icon>\r\n                  <p>\r\n                    {{ panel.primaryKey === 'submissionAPI'\r\n                      ? 'No submission endpoints configured. Add one to send form data.'\r\n                      : 'No validation endpoints configured. Add one to validate data before submission.' }}\r\n                  </p>\r\n                </div>\r\n              }\r\n\r\n              @for (api of getFormApis(panel.primaryKey)(); track api._id) {\r\n                <div class=\"api-list-item\">\r\n                  <span class=\"api-method-tag\" [class.api-method-tag--post]=\"api.httpMethod === 'POST'\">\r\n                    {{ api.httpMethod }}\r\n                  </span>\r\n                  <div class=\"api-details\">\r\n                    <span class=\"api-name\">{{ api.name }}</span>\r\n                    <span class=\"api-endpoint\" [matTooltip]=\"api.httpEndPoint\" matTooltipPosition=\"above\">\r\n                      {{ api.httpEndPoint }}\r\n                    </span>\r\n                  </div>\r\n                  <div class=\"api-item-actions\">\r\n                    <button\r\n                      [cdkCopyToClipboard]=\"api.httpEndPoint || ''\"\r\n                      mat-icon-button\r\n                      matTooltip=\"Copy URL\"\r\n                      [attr.aria-label]=\"'Copy endpoint URL'\"\r\n                      class=\"api-copy-btn\"\r\n                      (click)=\"$event.stopPropagation()\">\r\n                      <mat-icon>content_copy</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      (click)=\"removeSubmissionApi(api,panel.primaryKey)\"\r\n                      mat-icon-button\r\n                      matTooltip=\"Remove endpoint\"\r\n                      [attr.aria-label]=\"'Remove endpoint ' + api.name\"\r\n                      class=\"api-remove-btn\">\r\n                      <mat-icon>delete</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n                <mat-divider></mat-divider>\r\n              }\r\n\r\n              @if (keyInEdit !== panel.primaryKey) {\r\n                <div class=\"api-actions\">\r\n                  <button\r\n                    (click)=\"addNewSubmitApi(panel.primaryKey)\"\r\n                    mat-stroked-button\r\n                    color=\"primary\"\r\n                    class=\"add-endpoint-btn\">\r\n                    <mat-icon>add</mat-icon>\r\n                    Add new endpoint\r\n                  </button>\r\n                </div>\r\n              }\r\n\r\n              @if (panel.error) {\r\n                <mat-error class=\"panel-error\">{{ panel.error }}</mat-error>\r\n              }\r\n            </div>\r\n\r\n            <!-- Inline edit form for new/editing endpoint -->\r\n            @if (keyInEdit === panel.primaryKey) {\r\n              <div class=\"edit-section edit-section--inline\">\r\n                @for (element of submissionApiListItemConfigElements; track element.id) {\r\n                  <div class=\"edit-field\">\r\n                    <lib-t-dynamic-data-edit\r\n                      [editorConfig]=\"element\"\r\n                      [data]=\"dataPlaceholder\"\r\n                      [validationErrors]=\"validationErrors(element)\"\r\n                      (valueChange)=\"inputChange($event, element)\"\r\n                      [formInputs]=\"(formInputs()) || []\"\r\n                      (blur)=\"elementBlur($event, element)\">\r\n                    </lib-t-dynamic-data-edit>\r\n                  </div>\r\n                }\r\n                <mat-divider></mat-divider>\r\n                <div class=\"inline-edit-actions\">\r\n                  <button mat-flat-button (click)=\"saveSubmitApi()\" color=\"primary\">Save</button>\r\n                  <button mat-button (click)=\"cancelSubmitApi()\" color=\"warn\">Cancel</button>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-accordion>\r\n  </section>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.submissions-dialog{display:flex;flex-direction:column;min-width:28rem;max-width:36rem;max-height:calc(100vh - 24px);background:var(--mat-sys-surface, var(--mat-app-surface));border:1px solid var(--mat-sys-outline-variant, var(--mat-divider-color));overflow:hidden}.dialog-header{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem 1.5rem 0;flex-shrink:0}.header-icon{width:2.75rem;height:2.75rem;border-radius:8px;background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 12%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.header-icon mat-icon{font-size:1.5rem;width:1.5rem;height:1.5rem;color:var(--mat-sys-primary, #6750a4)}.header-text{flex:1;min-width:0}.header-title{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--mat-sys-on-surface, #1c1b1f);margin:0;line-height:1.3}.header-subtitle{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f);line-height:1.4;margin-top:.25rem;margin-bottom:0}.header-close{margin-top:-.5rem;margin-right:-.5rem}.dialog-content{padding:1rem 1.5rem 1.5rem;overflow-y:auto;max-height:70vh;flex:1;min-height:0}.config-panel{border-radius:12px;box-shadow:0 2px 8px #00000014;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);overflow:hidden;margin-bottom:1rem}.config-panel:last-child{margin-bottom:0}.panel-header{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 4%,transparent);border-bottom:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 10%,transparent)}.panel-title{display:flex;align-items:center;gap:.75rem;font-weight:600}.panel-icon{margin-right:0;font-size:1.25rem;width:1.25rem;height:1.25rem}.panel-content{padding:1.25rem;display:flex;flex-direction:column;gap:1rem;background:var(--mat-sys-surface-container, var(--mat-sys-surface))}.panel-description{font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f);line-height:1.35;margin:0 0 1rem}.edit-section{background:var(--mat-sys-surface-container-high, var(--mat-sys-surface-container));border-radius:8px;padding:1rem;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 10%,transparent)}.edit-section--inline{margin-top:.5rem}.edit-field{margin-bottom:1rem}.edit-field:last-child{margin-bottom:0}.api-section{background:var(--mat-sys-surface-container-high, var(--mat-sys-surface-container));border-radius:8px;padding:1rem;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 10%,transparent)}.api-section-header{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--mat-sys-on-surface-variant, #49454f);margin:0 0 1rem;padding-left:.25rem}.api-section-header--error{color:var(--mat-sys-error, #b3261e)}.empty-state{display:flex;align-items:center;gap:.5rem;padding:1rem;background:var(--mat-sys-surface-container-highest, #e8e0ec);border-radius:8px;font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f);margin:0 0 1rem}.empty-state p{margin:0;flex:1}.empty-state--error{color:var(--mat-sys-error, #b3261e)}.empty-state-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;opacity:.8}.api-list-item{display:flex;align-items:center;gap:1rem;padding:.5rem 0;min-height:2.75rem}.api-method-tag{flex-shrink:0;padding:.25rem .5rem;font-size:.75rem;font-weight:600;border-radius:6px;text-align:center;min-width:3rem;background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 10%,transparent);color:var(--mat-sys-primary, #6750a4)}.api-method-tag--post{background:color-mix(in srgb,#2e7d32 12%,transparent);color:#2e7d32}.api-details{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.api-name{font-size:.875rem;font-weight:600;color:var(--mat-sys-on-surface, #1c1b1f);line-height:1.3}.api-endpoint{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #49454f);opacity:.85;line-height:1.3;max-width:18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:help}.api-item-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.api-copy-btn:hover mat-icon,.api-remove-btn:hover mat-icon{color:var(--mat-sys-primary, #6750a4)}.api-remove-btn:hover mat-icon{color:var(--mat-sys-error, #b3261e)}.api-actions{margin-top:1rem}.add-endpoint-btn{width:100%;border-style:dashed;padding:.5rem .875rem;font-size:.8125rem}.add-endpoint-btn mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;margin-right:.5rem}.panel-error{margin-top:.5rem;font-size:.75rem}.inline-edit-actions{display:flex;justify-content:flex-end;gap:.75rem;padding-top:1rem;margin-top:.5rem}@media(prefers-color-scheme:dark){.config-panel{box-shadow:0 1px 3px #0000004d}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TDynamicDataEditComponent, selector: "lib-t-dynamic-data-edit", inputs: ["editorConfig", "formInputs", "data", "validationErrors"], outputs: ["valueChange", "blur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormSubmissionsConfigComponent, isStandalone: true, selector: "app-form-submissions-config", ngImport: i0, template: "<div class=\"submissions-dialog\">\r\n  <!-- Header: icon + title + subtitle per design rule \u00A74 -->\r\n  <header class=\"dialog-header\">\r\n    <div class=\"header-icon\" aria-hidden=\"true\">\r\n      <mat-icon>settings</mat-icon>\r\n    </div>\r\n    <div class=\"header-text\">\r\n      <h1 class=\"header-title\">Form Submission Configuration</h1>\r\n      <p class=\"header-subtitle\">Configure how your form is submitted and validated before submission.</p>\r\n    </div>\r\n    <button mat-icon-button mat-dialog-close [attr.aria-label]=\"'Close dialog'\" class=\"header-close\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </header>\r\n\r\n  <section class=\"dialog-content\">\r\n    <mat-accordion multi>\r\n      @for (panel of panels(); track panel.id) {\r\n        <mat-expansion-panel [expanded]=\"true\" class=\"config-panel\">\r\n          <mat-expansion-panel-header class=\"panel-header\">\r\n            <mat-panel-title class=\"panel-title\">\r\n              <mat-icon class=\"panel-icon\" [color]=\"'primary'\">{{ panel.titleIcon }}</mat-icon>\r\n              {{ panel.title }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n\r\n          <div class=\"panel-content\">\r\n            <p class=\"panel-description\" [innerHTML]=\"panel.description\"></p>\r\n\r\n            <!-- Dynamic form elements (submission message, toggles, etc.) -->\r\n            @if ((panel?.elements || []).length > 0) {\r\n              <div class=\"edit-section\">\r\n                @for (edit of (panel?.elements || []); track edit.id) {\r\n                  <div class=\"edit-field\">\r\n                    <lib-t-dynamic-data-edit\r\n                      [editorConfig]=\"edit\"\r\n                      [data]=\"form()\"\r\n                      [validationErrors]=\"(computedErrors(edit)()) || []\"\r\n                      (valueChange)=\"passFormChanges($event, edit)\"\r\n                      [formInputs]=\"(formInputs()) || []\"\r\n                      (blur)=\"elementBlur($event, edit)\">\r\n                    </lib-t-dynamic-data-edit>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <!-- API endpoints list -->\r\n            <div class=\"api-section\">\r\n              <h3 class=\"api-section-header\" [class.api-section-header--error]=\"panel.error\">\r\n                {{ panel.primaryKey === 'submissionAPI' ? 'Submission Endpoints' : 'Validation Endpoints' }}\r\n              </h3>\r\n\r\n              @if ((getFormApis(panel.primaryKey)()).length === 0) {\r\n                <div class=\"empty-state\" [class.empty-state--error]=\"panel.error\">\r\n                  <mat-icon class=\"empty-state-icon\">add_link</mat-icon>\r\n                  <p>\r\n                    {{ panel.primaryKey === 'submissionAPI'\r\n                      ? 'No submission endpoints configured. Add one to send form data.'\r\n                      : 'No validation endpoints configured. Add one to validate data before submission.' }}\r\n                  </p>\r\n                </div>\r\n              }\r\n\r\n              @for (api of getFormApis(panel.primaryKey)(); track api._id) {\r\n                <div class=\"api-list-item\">\r\n                  <span class=\"api-method-tag\" [class.api-method-tag--post]=\"api.httpMethod === 'POST'\">\r\n                    {{ api.httpMethod }}\r\n                  </span>\r\n                  <div class=\"api-details\">\r\n                    <span class=\"api-name\">{{ api.name }}</span>\r\n                    <span class=\"api-endpoint\" [matTooltip]=\"api.httpEndPoint\" matTooltipPosition=\"above\">\r\n                      {{ api.httpEndPoint }}\r\n                    </span>\r\n                  </div>\r\n                  <div class=\"api-item-actions\">\r\n                    <button\r\n                      [cdkCopyToClipboard]=\"api.httpEndPoint || ''\"\r\n                      mat-icon-button\r\n                      matTooltip=\"Copy URL\"\r\n                      [attr.aria-label]=\"'Copy endpoint URL'\"\r\n                      class=\"api-copy-btn\"\r\n                      (click)=\"$event.stopPropagation()\">\r\n                      <mat-icon>content_copy</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      (click)=\"removeSubmissionApi(api,panel.primaryKey)\"\r\n                      mat-icon-button\r\n                      matTooltip=\"Remove endpoint\"\r\n                      [attr.aria-label]=\"'Remove endpoint ' + api.name\"\r\n                      class=\"api-remove-btn\">\r\n                      <mat-icon>delete</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n                <mat-divider></mat-divider>\r\n              }\r\n\r\n              @if (keyInEdit !== panel.primaryKey) {\r\n                <div class=\"api-actions\">\r\n                  <button\r\n                    (click)=\"addNewSubmitApi(panel.primaryKey)\"\r\n                    mat-stroked-button\r\n                    color=\"primary\"\r\n                    class=\"add-endpoint-btn\">\r\n                    <mat-icon>add</mat-icon>\r\n                    Add new endpoint\r\n                  </button>\r\n                </div>\r\n              }\r\n\r\n              @if (panel.error) {\r\n                <mat-error class=\"panel-error\">{{ panel.error }}</mat-error>\r\n              }\r\n            </div>\r\n\r\n            <!-- Inline edit form for new/editing endpoint -->\r\n            @if (keyInEdit === panel.primaryKey) {\r\n              <div class=\"edit-section edit-section--inline\">\r\n                @for (element of submissionApiListItemConfigElements; track element.id) {\r\n                  <div class=\"edit-field\">\r\n                    <lib-t-dynamic-data-edit\r\n                      [editorConfig]=\"element\"\r\n                      [data]=\"dataPlaceholder\"\r\n                      [validationErrors]=\"validationErrors(element)\"\r\n                      (valueChange)=\"inputChange($event, element)\"\r\n                      [formInputs]=\"(formInputs()) || []\"\r\n                      (blur)=\"elementBlur($event, element)\">\r\n                    </lib-t-dynamic-data-edit>\r\n                  </div>\r\n                }\r\n                <mat-divider></mat-divider>\r\n                <div class=\"inline-edit-actions\">\r\n                  <button mat-flat-button (click)=\"saveSubmitApi()\" color=\"primary\">Save</button>\r\n                  <button mat-button (click)=\"cancelSubmitApi()\" color=\"warn\">Cancel</button>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-accordion>\r\n  </section>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.submissions-dialog{display:flex;flex-direction:column;min-width:28rem;max-width:36rem;max-height:calc(100vh - 24px);background:var(--mat-sys-surface, var(--mat-app-surface));border:1px solid var(--mat-sys-outline-variant, var(--mat-divider-color));overflow:hidden}.dialog-header{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem 1.5rem 0;flex-shrink:0}.header-icon{width:2.75rem;height:2.75rem;border-radius:8px;background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 12%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.header-icon mat-icon{font-size:1.5rem;width:1.5rem;height:1.5rem;color:var(--mat-sys-primary, #6750a4)}.header-text{flex:1;min-width:0}.header-title{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--mat-sys-on-surface, #1c1b1f);margin:0;line-height:1.3}.header-subtitle{font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f);line-height:1.4;margin-top:.25rem;margin-bottom:0}.header-close{margin-top:-.5rem;margin-right:-.5rem}.dialog-content{padding:1rem 1.5rem 1.5rem;overflow-y:auto;max-height:70vh;flex:1;min-height:0}.config-panel{border-radius:12px;box-shadow:0 2px 8px #00000014;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 15%,transparent);overflow:hidden;margin-bottom:1rem}.config-panel:last-child{margin-bottom:0}.panel-header{background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 4%,transparent);border-bottom:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 10%,transparent)}.panel-title{display:flex;align-items:center;gap:.75rem;font-weight:600}.panel-icon{margin-right:0;font-size:1.25rem;width:1.25rem;height:1.25rem}.panel-content{padding:1.25rem;display:flex;flex-direction:column;gap:1rem;background:var(--mat-sys-surface-container, var(--mat-sys-surface))}.panel-description{font-size:.8125rem;color:var(--mat-sys-on-surface-variant, #49454f);line-height:1.35;margin:0 0 1rem}.edit-section{background:var(--mat-sys-surface-container-high, var(--mat-sys-surface-container));border-radius:8px;padding:1rem;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 10%,transparent)}.edit-section--inline{margin-top:.5rem}.edit-field{margin-bottom:1rem}.edit-field:last-child{margin-bottom:0}.api-section{background:var(--mat-sys-surface-container-high, var(--mat-sys-surface-container));border-radius:8px;padding:1rem;border:1px solid color-mix(in srgb,var(--mat-sys-outline, #79747e) 10%,transparent)}.api-section-header{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--mat-sys-on-surface-variant, #49454f);margin:0 0 1rem;padding-left:.25rem}.api-section-header--error{color:var(--mat-sys-error, #b3261e)}.empty-state{display:flex;align-items:center;gap:.5rem;padding:1rem;background:var(--mat-sys-surface-container-highest, #e8e0ec);border-radius:8px;font-size:.875rem;color:var(--mat-sys-on-surface-variant, #49454f);margin:0 0 1rem}.empty-state p{margin:0;flex:1}.empty-state--error{color:var(--mat-sys-error, #b3261e)}.empty-state-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;opacity:.8}.api-list-item{display:flex;align-items:center;gap:1rem;padding:.5rem 0;min-height:2.75rem}.api-method-tag{flex-shrink:0;padding:.25rem .5rem;font-size:.75rem;font-weight:600;border-radius:6px;text-align:center;min-width:3rem;background:color-mix(in srgb,var(--mat-sys-primary, #6750a4) 10%,transparent);color:var(--mat-sys-primary, #6750a4)}.api-method-tag--post{background:color-mix(in srgb,#2e7d32 12%,transparent);color:#2e7d32}.api-details{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.api-name{font-size:.875rem;font-weight:600;color:var(--mat-sys-on-surface, #1c1b1f);line-height:1.3}.api-endpoint{font-size:.75rem;color:var(--mat-sys-on-surface-variant, #49454f);opacity:.85;line-height:1.3;max-width:18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:help}.api-item-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.api-copy-btn:hover mat-icon,.api-remove-btn:hover mat-icon{color:var(--mat-sys-primary, #6750a4)}.api-remove-btn:hover mat-icon{color:var(--mat-sys-error, #b3261e)}.api-actions{margin-top:1rem}.add-endpoint-btn{width:100%;border-style:dashed;padding:.5rem .875rem;font-size:.8125rem}.add-endpoint-btn mat-icon{font-size:1.25rem;width:1.25rem;height:1.25rem;margin-right:.5rem}.panel-error{margin-top:.5rem;font-size:.75rem}.inline-edit-actions{display:flex;justify-content:flex-end;gap:.75rem;padding-top:1rem;margin-top:.5rem}@media(prefers-color-scheme:dark){.config-panel{box-shadow:0 1px 3px #0000004d}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TDynamicDataEditComponent, selector: "lib-t-dynamic-data-edit", inputs: ["editorConfig", "formInputs", "data", "validationErrors"], outputs: ["valueChange", "blur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormSubmissionsConfigComponent, decorators: [{
             type: Component,
@@ -333,17 +330,16 @@ class FormsBuilderMenuComponent {
         });
         dialogRef.afterClosed().pipe(take(1)).subscribe(data => {
             if (data) {
-                console.log(data);
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormsBuilderMenuComponent, deps: [{ token: FormsStoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormsBuilderMenuComponent, isStandalone: true, selector: "app-forms-builder-menu", ngImport: i0, template: "\r\n<ng-container *ngIf=\"(  vm$|async) as vm\">\r\n\r\n    <button [matBadge]=\"'!'\" matBadgeColor=\"warn\" [matTooltip]=\"vm.configHasErrors === false?'\r\n    Click to view form configuration \r\n    ':'Click to fix or add missing form configurations'\" [matBadgeHidden]=\"!!(vm.configHasErrors) === false\"\r\n        [matMenuTriggerFor]=\"configMenu\" mat-flat-button>\r\n        Config\r\n        <mat-icon>\r\n            settings_suggest\r\n        </mat-icon>\r\n    </button>\r\n    \r\n    <mat-menu #configMenu=\"matMenu\">\r\n    \r\n    \r\n        <div mat-subheader style=\"padding-left: 16px;\">Form edit options</div>\r\n        @for(item of vm.items;track item){\r\n        <button [matTooltip]=\"item.hint\" matTooltipPosition=\"right\" style=\"padding-top:4px;padding-bottom:4px\"\r\n            (click)=\"item?.action()\" mat-menu-item>\r\n            <mat-icon>{{item.icon}}</mat-icon>\r\n    \r\n            <span>\r\n                @if (item.errors) {\r\n                <div style=\"line-height: normal;\"ks>\r\n                    {{item.label}}\r\n                </div>\r\n                <div style=\"line-height: normal;\">\r\n    \r\n                    <mat-error>\r\n                        <small>\r\n                            Invalid configurations\r\n                        </small>\r\n    \r\n                    </mat-error>\r\n                </div>\r\n                }@else {\r\n    \r\n                {{item.label}}\r\n    \r\n                }\r\n    \r\n    \r\n            </span>\r\n    \r\n        </button>\r\n        <mat-divider></mat-divider>\r\n        }\r\n        <button [matTooltip]=\"showJson?'Hide json':'Show json'\" (click)=\"showJson= !showJson\" mat-menu-item>\r\n            <mat-icon>data_object</mat-icon>\r\n    \r\n            <span>\r\n                <div>\r\n                    Show json\r\n                </div>\r\n    \r\n    \r\n    \r\n            </span>\r\n        </button>\r\n        \r\n    </mat-menu>\r\n    \r\n    <div *ngIf=\"showJson\" class=\"DragBoundary\">\r\n        @defer (on viewport) {\r\n        <mat-card cdkDragBoundary=\"DragBoundary\" cdkDrag class=\"menuCard\">\r\n            <mat-toolbar\r\n                style=\"background: var(--mat-sidenav-content-background-color);color:var(--mdc-filled-button-label-text-color, var(--mat-app-on-primary))\">\r\n                <span>\r\n                    Json Form Value\r\n                </span>\r\n                <span class=\"spacer\"></span>\r\n    \r\n                <mat-icon cdkDragHandle style=\"\r\n                margin:8px;\r\n                color:var(--mat-divider-color, var(--mat-app-outline))\">\r\n                    drag_indicator\r\n                </mat-icon>\r\n            </mat-toolbar>\r\n            <mat-divider style=\"margin-bottom: 12px;\"></mat-divider>\r\n    \r\n    \r\n            <mat-card-content style=\" overflow-y: auto;\r\n        max-height: calc(100vh - 150px);\">\r\n                <app-form-json-view></app-form-json-view>\r\n            </mat-card-content>\r\n            <mat-card-actions>\r\n                <span class=\"spacer\"></span>\r\n                <button (click)=\"showJson = false\" mat-flat-button>\r\n                    Close\r\n                </button>\r\n                <button color=\"primary\" [cdkCopyToClipboard]=\"(vm.formCopy)||''\" matTooltip=\"Copy json to clipboard\"\r\n                    mat-flat-button>\r\n                    Copy\r\n                </button>\r\n    \r\n            </mat-card-actions>\r\n    \r\n    \r\n        </mat-card>\r\n       }@placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n          </div>\r\n      \r\n        }\r\n    </div>\r\n</ng-container>\r\n", styles: [".menuCard{width:fit-content;margin:0;resize:horizontal;z-index:2}.DragBoundary{position:absolute;left:0;top:74px;width:100%;height:calc(100% - 74px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }], deferBlockDependencies: [() => [i1.CdkCopyToClipboard, import('@angular/cdk/drag-drop').then(m => m.CdkDrag), i1$2.CdkDragHandle, i2.MatButton, i3.MatCard, i3.MatCardActions, i3.MatCardContent, i4.MatDivider, i2$1.MatIcon, i5$1.MatToolbar, i8.MatTooltip, import('./ngx-t-forms-form-json-view.component-00g2e0dT.mjs').then(m => m.FormJsonViewComponent)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormsBuilderMenuComponent, isStandalone: true, selector: "app-forms-builder-menu", ngImport: i0, template: "\r\n<ng-container *ngIf=\"(  vm$|async) as vm\">\r\n\r\n    <button [matBadge]=\"'!'\" matBadgeColor=\"warn\" [matTooltip]=\"vm.configHasErrors === false?'\r\n    Click to view form configuration \r\n    ':'Click to fix or add missing form configurations'\" [matBadgeHidden]=\"!!(vm.configHasErrors) === false\"\r\n        [matMenuTriggerFor]=\"configMenu\" mat-flat-button>\r\n        Config\r\n        <mat-icon>\r\n            settings_suggest\r\n        </mat-icon>\r\n    </button>\r\n    \r\n    <mat-menu #configMenu=\"matMenu\">\r\n    \r\n    \r\n        <div mat-subheader style=\"padding-left: 16px;\">Form edit options</div>\r\n        @for(item of vm.items;track item){\r\n        <button [matTooltip]=\"item.hint\" matTooltipPosition=\"right\" style=\"padding-top:4px;padding-bottom:4px\"\r\n            (click)=\"item?.action()\" mat-menu-item>\r\n            <mat-icon>{{item.icon}}</mat-icon>\r\n    \r\n            <span>\r\n                @if (item.errors) {\r\n                <div style=\"line-height: normal;\"ks>\r\n                    {{item.label}}\r\n                </div>\r\n                <div style=\"line-height: normal;\">\r\n    \r\n                    <mat-error>\r\n                        <small>\r\n                            Invalid configurations\r\n                        </small>\r\n    \r\n                    </mat-error>\r\n                </div>\r\n                }@else {\r\n    \r\n                {{item.label}}\r\n    \r\n                }\r\n    \r\n    \r\n            </span>\r\n    \r\n        </button>\r\n        <mat-divider></mat-divider>\r\n        }\r\n        <button [matTooltip]=\"showJson?'Hide json':'Show json'\" (click)=\"showJson= !showJson\" mat-menu-item>\r\n            <mat-icon>data_object</mat-icon>\r\n    \r\n            <span>\r\n                <div>\r\n                    Show json\r\n                </div>\r\n    \r\n    \r\n    \r\n            </span>\r\n        </button>\r\n        \r\n    </mat-menu>\r\n    \r\n    <div *ngIf=\"showJson\" class=\"DragBoundary\">\r\n        @defer (on viewport) {\r\n        <mat-card cdkDragBoundary=\"DragBoundary\" cdkDrag class=\"menuCard\">\r\n            <mat-toolbar\r\n                style=\"background: var(--mat-sidenav-content-background-color);color:var(--mdc-filled-button-label-text-color, var(--mat-app-on-primary))\">\r\n                <span>\r\n                    Json Form Value\r\n                </span>\r\n                <span class=\"spacer\"></span>\r\n    \r\n                <mat-icon cdkDragHandle style=\"\r\n                margin:8px;\r\n                color:var(--mat-divider-color, var(--mat-app-outline))\">\r\n                    drag_indicator\r\n                </mat-icon>\r\n            </mat-toolbar>\r\n            <mat-divider style=\"margin-bottom: 12px;\"></mat-divider>\r\n    \r\n    \r\n            <mat-card-content style=\" overflow-y: auto;\r\n        max-height: calc(100vh - 150px);\">\r\n                <app-form-json-view></app-form-json-view>\r\n            </mat-card-content>\r\n            <mat-card-actions>\r\n                <span class=\"spacer\"></span>\r\n                <button (click)=\"showJson = false\" mat-flat-button>\r\n                    Close\r\n                </button>\r\n                <button color=\"primary\" [cdkCopyToClipboard]=\"(vm.formCopy)||''\" matTooltip=\"Copy json to clipboard\"\r\n                    mat-flat-button>\r\n                    Copy\r\n                </button>\r\n    \r\n            </mat-card-actions>\r\n    \r\n    \r\n        </mat-card>\r\n       }@placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n          </div>\r\n      \r\n        }\r\n    </div>\r\n</ng-container>\r\n", styles: [".menuCard{width:fit-content;margin:0;resize:horizontal;z-index:2}.DragBoundary{position:absolute;left:0;top:74px;width:100%;height:calc(100% - 74px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], deferBlockDependencies: [() => [i1.CdkCopyToClipboard, import('@angular/cdk/drag-drop').then(m => m.CdkDrag), i1$2.CdkDragHandle, i2.MatButton, i3$2.MatCard, i3$2.MatCardActions, i3$2.MatCardContent, i4$1.MatDivider, i3.MatIcon, i5$1.MatToolbar, i4.MatTooltip, import('./ngx-t-forms-form-json-view.component-DePf44w6.mjs').then(m => m.FormJsonViewComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.5", ngImport: i0, type: FormsBuilderMenuComponent, resolveDeferredDeps: () => [import('@angular/cdk/drag-drop').then(m => m.CdkDrag), import('./ngx-t-forms-form-json-view.component-00g2e0dT.mjs').then(m => m.FormJsonViewComponent)], resolveMetadata: (CdkDrag, FormJsonViewComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.5", ngImport: i0, type: FormsBuilderMenuComponent, resolveDeferredDeps: () => [import('@angular/cdk/drag-drop').then(m => m.CdkDrag), import('./ngx-t-forms-form-json-view.component-DePf44w6.mjs').then(m => m.FormJsonViewComponent)], resolveMetadata: (CdkDrag, FormJsonViewComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'app-forms-builder-menu', standalone: true, imports: [CommonModule, MatModulesModule, FormJsonViewComponent, CdkDrag], template: "\r\n<ng-container *ngIf=\"(  vm$|async) as vm\">\r\n\r\n    <button [matBadge]=\"'!'\" matBadgeColor=\"warn\" [matTooltip]=\"vm.configHasErrors === false?'\r\n    Click to view form configuration \r\n    ':'Click to fix or add missing form configurations'\" [matBadgeHidden]=\"!!(vm.configHasErrors) === false\"\r\n        [matMenuTriggerFor]=\"configMenu\" mat-flat-button>\r\n        Config\r\n        <mat-icon>\r\n            settings_suggest\r\n        </mat-icon>\r\n    </button>\r\n    \r\n    <mat-menu #configMenu=\"matMenu\">\r\n    \r\n    \r\n        <div mat-subheader style=\"padding-left: 16px;\">Form edit options</div>\r\n        @for(item of vm.items;track item){\r\n        <button [matTooltip]=\"item.hint\" matTooltipPosition=\"right\" style=\"padding-top:4px;padding-bottom:4px\"\r\n            (click)=\"item?.action()\" mat-menu-item>\r\n            <mat-icon>{{item.icon}}</mat-icon>\r\n    \r\n            <span>\r\n                @if (item.errors) {\r\n                <div style=\"line-height: normal;\"ks>\r\n                    {{item.label}}\r\n                </div>\r\n                <div style=\"line-height: normal;\">\r\n    \r\n                    <mat-error>\r\n                        <small>\r\n                            Invalid configurations\r\n                        </small>\r\n    \r\n                    </mat-error>\r\n                </div>\r\n                }@else {\r\n    \r\n                {{item.label}}\r\n    \r\n                }\r\n    \r\n    \r\n            </span>\r\n    \r\n        </button>\r\n        <mat-divider></mat-divider>\r\n        }\r\n        <button [matTooltip]=\"showJson?'Hide json':'Show json'\" (click)=\"showJson= !showJson\" mat-menu-item>\r\n            <mat-icon>data_object</mat-icon>\r\n    \r\n            <span>\r\n                <div>\r\n                    Show json\r\n                </div>\r\n    \r\n    \r\n    \r\n            </span>\r\n        </button>\r\n        \r\n    </mat-menu>\r\n    \r\n    <div *ngIf=\"showJson\" class=\"DragBoundary\">\r\n        @defer (on viewport) {\r\n        <mat-card cdkDragBoundary=\"DragBoundary\" cdkDrag class=\"menuCard\">\r\n            <mat-toolbar\r\n                style=\"background: var(--mat-sidenav-content-background-color);color:var(--mdc-filled-button-label-text-color, var(--mat-app-on-primary))\">\r\n                <span>\r\n                    Json Form Value\r\n                </span>\r\n                <span class=\"spacer\"></span>\r\n    \r\n                <mat-icon cdkDragHandle style=\"\r\n                margin:8px;\r\n                color:var(--mat-divider-color, var(--mat-app-outline))\">\r\n                    drag_indicator\r\n                </mat-icon>\r\n            </mat-toolbar>\r\n            <mat-divider style=\"margin-bottom: 12px;\"></mat-divider>\r\n    \r\n    \r\n            <mat-card-content style=\" overflow-y: auto;\r\n        max-height: calc(100vh - 150px);\">\r\n                <app-form-json-view></app-form-json-view>\r\n            </mat-card-content>\r\n            <mat-card-actions>\r\n                <span class=\"spacer\"></span>\r\n                <button (click)=\"showJson = false\" mat-flat-button>\r\n                    Close\r\n                </button>\r\n                <button color=\"primary\" [cdkCopyToClipboard]=\"(vm.formCopy)||''\" matTooltip=\"Copy json to clipboard\"\r\n                    mat-flat-button>\r\n                    Copy\r\n                </button>\r\n    \r\n            </mat-card-actions>\r\n    \r\n    \r\n        </mat-card>\r\n       }@placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n          </div>\r\n      \r\n        }\r\n    </div>\r\n</ng-container>\r\n", styles: [".menuCard{width:fit-content;margin:0;resize:horizontal;z-index:2}.DragBoundary{position:absolute;left:0;top:74px;width:100%;height:calc(100% - 74px)}\n"] }]
             }], ctorParameters: () => [{ type: FormsStoreService }], propDecorators: null }) });
 
 export { FormsBuilderMenuComponent };
-//# sourceMappingURL=ngx-t-forms-forms-builder-menu.component-DKybEMbx.mjs.map
+//# sourceMappingURL=ngx-t-forms-forms-builder-menu.component-Wamzf_sq.mjs.map

package/fesm2022/ngx-t-forms-forms-builder-menu.component-Wamzf_sq.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-forms-builder-menu.component-Wamzf_sq.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/select-form-template/select-form-template.component.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/select-form-template/select-form-template.component.html","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/form-submissions-config/config.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/form-submissions-config/form-submissions-config.component.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/form-submissions-config/form-submissions-config.component.html","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/forms-builder-menu/forms-builder-menu.component.ts","../../../projects/ngx-t-forms/src/lib/components/form-builder/elements/forms-builder-menu/forms-builder-menu.component.html"],"sourcesContent":["import { Component, inject, OnInit } from '@angular/core';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\r\nimport {MAT_DIALOG_DATA} from '@angular/material/dialog';\r\nimport { FormsStoreService } from '../../../forms/store/forms-store.service';\r\nimport { getAvatar } from '../../../../shared/functions/getAvatar';\r\n\r\nimport { DaysAgoPipe } from '../../../../../lib/shared/pipes/date/days-ago.pipe';\r\nimport { FormInterface } from 'ngx-t-forms-types';\r\nimport { MatSnackBar } from '@angular/material/snack-bar';\r\n@Component({\r\n  selector: 'lib-select-form-template',\r\n  standalone: true,\r\n  imports: [MatModulesModule, CommonModule, DaysAgoPipe],\r\n  templateUrl: './select-form-template.component.html',\r\n  styleUrl: './select-form-template.component.scss'\r\n})\r\nexport class SelectFormTemplateComponent implements OnInit {\r\n\r\nselectForms$ = this.store.selectors.selectForms$\r\nselectLoadingForms$ = this.store.selectors.selectLoadingForms$\r\nreadonly dialogRef = inject(MatDialogRef< SelectFormTemplateComponent>);\r\nreadonly data = inject<any>(MAT_DIALOG_DATA);\r\nconstructor(private store:FormsStoreService){\r\n\r\n}\r\n  ngOnInit(): void {\r\n    this.store.effects.loadForms$()\r\n  }\r\nclose(){\r\n  this.dialogRef.close();\r\n}\r\n\r\n dialog = inject(MatDialog);\r\n snackBar = inject(MatSnackBar);\r\nselectForm(form:FormInterface){\r\n  this.store.actionsFormBuilder.applyFormTemplate(form)\r\n  this.dialogRef.close(form) \r\n}\r\n  getFormAvatar(formTitle:string){\r\n    return getAvatar(formTitle)\r\n  }\r\n}\r\n","<div class=\"template-select-dialog\">\r\n  <!-- Header: icon + title + subtitle per design rule §4 -->\r\n  <header class=\"dialog-header\">\r\n    <div class=\"header-icon\" aria-hidden=\"true\">\r\n      <mat-icon>description</mat-icon>\r\n    </div>\r\n    <div class=\"header-text\">\r\n      <h1 class=\"header-title\">Choose a Form Template</h1>\r\n      <p class=\"header-subtitle\">\r\n        Select a pre-built form template to start with. You can customize and save it as your own form after copying it to the editor.\r\n      </p>\r\n    </div>\r\n  </header>\r\n\r\n  <section class=\"dialog-content\">\r\n    @if (selectLoadingForms$ | async) {\r\n      <div class=\"loading-state\">\r\n        <mat-spinner diameter=\"40\" aria-label=\"Loading form templates\"></mat-spinner>\r\n        <span class=\"loading-text\">Loading form templates...</span>\r\n      </div>\r\n    } @else {\r\n      <ul class=\"form-template-list\" aria-label=\"Available form templates\">\r\n        @for (form of selectForms$ | async; track form._id) {\r\n          <li>\r\n          <button\r\n            type=\"button\"\r\n            class=\"form-list-item\"\r\n            (click)=\"selectForm(form)\"\r\n            [matTooltip]=\"'Click to select this template'\"\r\n            [attr.aria-label]=\"'Select template: ' + form.formTitle\">\r\n            <img\r\n              class=\"form-avatar\"\r\n              [class.form-avatar--error]=\"form.errors.length > 0\"\r\n              [src]=\"getFormAvatar(form.formTitle)\"\r\n              [alt]=\"''\"\r\n              aria-hidden=\"true\">\r\n            <div class=\"form-item-content\">\r\n              <span class=\"form-title\">{{ form.formTitle | titlecase }}</span>\r\n              <div class=\"form-metadata\">\r\n                @if (form.errors.length > 0) {\r\n                  <span class=\"metadata-item\">\r\n                    <mat-icon color=\"warn\" aria-hidden=\"true\">error</mat-icon>\r\n                    <small>{{ form.errors.length }}</small>\r\n                  </span>\r\n                  <span class=\"metadata-divider\" aria-hidden=\"true\">•</span>\r\n                }\r\n                <span class=\"metadata-item\">\r\n                  <mat-icon aria-hidden=\"true\">add_circle_outline</mat-icon>\r\n                  <small>{{ form.createdAt | daysAgo }}</small>\r\n                </span>\r\n                <span class=\"metadata-divider\" aria-hidden=\"true\">•</span>\r\n                <span class=\"metadata-item\">\r\n                  <mat-icon aria-hidden=\"true\">update</mat-icon>\r\n                  <small>{{ form.updatedAt | daysAgo }}</small>\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </button>\r\n          </li>\r\n        }\r\n      </ul>\r\n\r\n      @if ((selectForms$ | async)?.length === 0) {\r\n        <div class=\"empty-state\">\r\n          <mat-icon class=\"empty-state-icon\" aria-hidden=\"true\">folder_off</mat-icon>\r\n          <p>No form templates available.</p>\r\n        </div>\r\n      }\r\n    }\r\n  </section>\r\n\r\n  <footer class=\"dialog-actions\">\r\n    <button mat-button (click)=\"close()\" aria-label=\"Close dialog\">\r\n      Close\r\n    </button>\r\n  </footer>\r\n</div>\r\n","\r\n\r\nimport { ConfigurationValidTestInterface, ElementEditorInnerSectionElementInterface, ElementEditorTypes, NgxTFormsConfig, SpecialElementKeys } from \"ngx-t-forms-types\"\r\n\r\n\r\n\r\n\r\nexport function  SubmissionAPIListItemConfig (environment: NgxTFormsConfig): ElementEditorInnerSectionElementInterface[]{\r\n  return [\r\n\r\n      {\r\n        id: '16140923-0542-4d5d-9b63-186c1e91b1a7',\r\n        name: SpecialElementKeys.MatOptionsApiCall,\r\n        editType: ElementEditorTypes.ApiCall,\r\n        required: true,\r\n        postmanCollectionConfig: {\r\n          collectionUrl: environment['POSTMAN_COLLECTION_URL'] as string,\r\n          collectionKey: environment['POSTMAN_COLLECTION_KEY'] as string\r\n        },\r\n        hint: `APIs are loaded from Postman collection. Configure required headers, payload format, and response mapping before use. Ensure API is documented in Postman.`,\r\n        deepBind: ['data'],\r\n        label: 'Select form submission api',\r\n      },\r\n      \r\n      {\r\n        name: SpecialElementKeys.Default,\r\n        deepBind: [\r\n\r\n          'data',\r\n          'backEndConfig',\r\n          'minimumInputRequired',\r\n        ],\r\n        additionalTest: [\r\n          {\r\n            testType: 'exists',\r\n            deepBind: [\r\n\r\n              'data',\r\n              'backEndConfig',\r\n              'minimumInputRequired',\r\n            ],\r\n          } as ConfigurationValidTestInterface\r\n\r\n        ],\r\n        hint: `These are payload fields that are required to be filled in order to fetch data from the selected source`,\r\n        editType: ElementEditorTypes.RequiredInputs,\r\n        label: 'Set up required inputs',\r\n        id: \"2d0f1e18-897b-4c28-97bc-3078be09f8ee\"\r\n      },\r\n      {\r\n        name: SpecialElementKeys.Default,\r\n        deepBind: ['data','projectFormData'],\r\n        editType: ElementEditorTypes.Input,\r\n        label: 'Project form data',\r\n        hint: 'JSON template for the payload. Use {$formValue} to include submitted form data. Example: {\"data\": {$formValue}}',\r\n        id: \"$2d0f1e18-897b-4c28-97bc-3078be09f8ee\"\r\n    },\r\n    ]}\r\nexport const SubmissionAPIOtherConfig : ElementEditorInnerSectionElementInterface[] = [\r\n    {\r\n        id:\"7acaa5d1-fb37-4dc0-9f1a-53b6f36534e0\",\r\n        name:SpecialElementKeys.Default,\r\n        deepBind:['submissionHandle','submissionMessage'],\r\n        editType:ElementEditorTypes.Input,\r\n        label:\"Submission Message\",\r\n        hint:\"Message shown to the user after successful form submission.\",\r\n    },\r\n    {\r\n        id:\"5636c16c-be58-48d9-b701-81fe05573a39\",\r\n        name:SpecialElementKeys.Default,\r\n        deepBind:['submissionHandle','innerComponentShowSubmitButton'],\r\n        editType:ElementEditorTypes.Toggle,\r\n        label:\"Show submit button in inner component form\",\r\n    },\r\n    {\r\n      id:\"c9103faa-eeba-4cf3-b3d0-f25fd05ccb3c\",\r\n      name:SpecialElementKeys.Default,\r\n      deepBind:['systemDefault'],\r\n      editType:ElementEditorTypes.Toggle,\r\n      label:\"Is system default\",\r\n  }\r\n] \r\n  \r\n export const SubmissionDialogConfig = [\r\n    {\r\n        titleIcon:'send',\r\n        id:'44023662-7343-4c93-999d-fc03c54438c3',\r\n        title:'Form Submission Endpoint',\r\n        description:`Choose where to send your form data after submission. Connect to your database, data pipeline, or\r\n            third-party service.`,\r\n        primaryKey:'submissionAPI',\r\n        elements : SubmissionAPIOtherConfig \r\n    },\r\n    {\r\n        titleIcon:'rule',\r\n        title:'Data Validation Rules',\r\n        description:`Define validation rules to ensure data quality before form submission.\r\n            <br>\r\n            <strong>Note:</strong> All validation endpoints must return a boolean value -\r\n            <code>true</code> indicates valid data that will be submitted.`,\r\n        primaryKey:'canSubmitAPI',\r\n        id:'acac6045-5b13-4c8d-a7ee-da194ebbad41',\r\n    }\r\n ]","import { Component, computed, inject } from '@angular/core';\r\n\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\n\r\nimport { SubmissionAPIListItemConfig, SubmissionDialogConfig } from './config';\r\nimport { MAT_DIALOG_DATA, MatDialog, } from '@angular/material/dialog';\r\nimport { FormsStoreService } from '../../../forms/store/forms-store.service';\r\nimport { testAgainstItem } from '../../../t-dynamic-data-edit/functions/testData';\r\n\r\nimport { TDynamicDataEditComponent } from '../../../t-dynamic-data-edit/t-dynamic-data-edit.component';\r\n\r\nimport { assignDeepPropertyToObject } from '../../../../../lib/shared';\r\nimport { NGX_T_FORMS_CONFIG_TOKEN } from '../../../../../lib/injection-tokens';\r\n\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\nimport { APIDataFetchingConfigurationInterface, ElementEditorInnerSectionElementInterface, validateApiDataFetchingConfiguration } from 'ngx-t-forms-types';\r\nimport { map } from 'rxjs';\r\n\r\n\r\n@Component({\r\n  selector: 'app-form-submissions-config',\r\n  standalone: true,\r\n  imports: [CommonModule, MatModulesModule, TDynamicDataEditComponent],\r\n\r\n  templateUrl: './form-submissions-config.component.html',\r\n  styleUrl: './form-submissions-config.component.scss',\r\n\r\n})\r\nexport class FormSubmissionsConfigComponent {\r\n  NGX_T_FORMS_CONFIG = inject(NGX_T_FORMS_CONFIG_TOKEN)\r\n\r\n  panels = computed(() => {\r\n    return SubmissionDialogConfig.map((panel) => {\r\n      const error = this.getPanelError(panel)()\r\n      return ({\r\n        ...panel,\r\n        error\r\n      })\r\n    });\r\n  })\r\n\r\n  private getPanelError(panel: typeof SubmissionDialogConfig[0]) {\r\n\r\n    return computed(() => {\r\n      const form = this.form()\r\n      if (panel.primaryKey === 'submissionAPI') {\r\n        return (form?.submissionHandle?.submissionAPI || []).length === 0 ? 'At least one submission API is required' : undefined\r\n      }\r\n      return undefined;\r\n    })\r\n\r\n  }\r\n\r\n\r\n  _data = inject(MAT_DIALOG_DATA)\r\n  store: FormsStoreService = this._data.store\r\n  form = toSignal(\r\n    this.store.selectors.selectFormInEdit$.pipe(map((form) => form?.form)),\r\n    {\r\n      initialValue: undefined\r\n    }\r\n  )\r\n  formInputs = toSignal(\r\n    this.store.formBuilderSelectors.getAllFormInputs$,\r\n    {\r\n      initialValue: []\r\n    }\r\n  )\r\n  getFormApis(key: any) {\r\n    return computed(() => {\r\n      const form = this.form()\r\n      return form?.submissionHandle?.[key as ('submissionAPI' | 'canSubmitAPI')] || []\r\n    })\r\n  }\r\n  // private dialogRef: MatDialogRef<FormSubmissionsConfigComponent>,\r\n  constructor(\r\n  ) {\r\n\r\n\r\n\r\n\r\n  }\r\n  dataPlaceholder: undefined | {\r\n    data: APIDataFetchingConfigurationInterface\r\n  }\r\n  keyInEdit: 'submissionAPI' | 'canSubmitAPI' | undefined = undefined\r\n  get submissionApiListItemConfigElements(): ElementEditorInnerSectionElementInterface[] {\r\n    return SubmissionAPIListItemConfig(this.NGX_T_FORMS_CONFIG).filter((el) => {\r\n      if (!el.additionalTest) {\r\n        return true\r\n      }\r\n      return el.additionalTest.every((test) => {\r\n        return testAgainstItem(test, this.dataPlaceholder || { data: {} })\r\n      })\r\n    })\r\n  }\r\n\r\n\r\n\r\n  formValidationError = toSignal(this.store.formBuilderSelectors.formErrors$, {\r\n    initialValue: []\r\n  })\r\n  readonly computedErrors = (element: ElementEditorInnerSectionElementInterface) => {\r\n    return computed(() => {\r\n      const allErrors = this.formValidationError();\r\n      const errors = allErrors?.filter(error => error.key === element.deepBind?.join('.')) || []\r\n\r\n      return [...[], ...errors];\r\n    })\r\n  }\r\n  validationErrors(element: ElementEditorInnerSectionElementInterface): {\r\n    key: string;\r\n    message: string;\r\n  }[] {\r\n    const val = validateApiDataFetchingConfiguration((this.dataPlaceholder || {})).map((error) => ({\r\n      message: error.message,\r\n      key: 'data.' + error.key\r\n    }))\r\n\r\n    const errors = val?.filter(error => error.key === element.deepBind?.join('.')) || []\r\n    return errors\r\n  }\r\n  elementBlur(\r\n    _event: any,\r\n    _element: ElementEditorInnerSectionElementInterface\r\n  ) {\r\n  }\r\n  inputChange(event: any, element: ElementEditorInnerSectionElementInterface) {\r\n    this.elementConfigurationChanged(event, element)\r\n    // this.elementConfigurationChanged(event?.target?.value, element)\r\n  }\r\n  passFormChanges(event: any, element: ElementEditorInnerSectionElementInterface) {\r\n    this.formInputChange(event, element)\r\n  }\r\n  formInputChange = (value: any, ele: ElementEditorInnerSectionElementInterface) => this.store.actionsFormBuilder.formInputChange(ele, value)\r\n  elementConfigurationChanged(\r\n    value: any,\r\n    ele: ElementEditorInnerSectionElementInterface\r\n  ) {\r\n\r\n\r\n    const applyTo = { ...this.dataPlaceholder }\r\n    if (ele.clearOnChange) {\r\n      ele.clearOnChange.forEach((clear: string[]) => {\r\n        assignDeepPropertyToObject(\r\n          applyTo,\r\n          clear,\r\n          undefined\r\n        );\r\n      })\r\n\r\n    }\r\n    if (ele.deepBind) {\r\n      assignDeepPropertyToObject(\r\n        applyTo,\r\n        ele.deepBind,\r\n        value\r\n      );\r\n    }\r\n    this.dataPlaceholder = {\r\n      ...applyTo\r\n    } as any\r\n\r\n    // const formClass= this.formBuilder$$.value\r\n    // const form = formClass?.form\r\n    // if (form) {\r\n    //   formClass?.refreshController(form)\r\n    // }\r\n\r\n    // this.formBuilder$$.value?.syncInputController();\r\n    // this.appStatesService.TFormBuilderService$.next(formClass)\r\n\r\n\r\n  }\r\n  addNewSubmitApi(submision: string) {\r\n    this.dataPlaceholder = {\r\n      data: {} as any\r\n    }\r\n    this.keyInEdit = submision as any\r\n\r\n\r\n\r\n  }\r\n  saveSubmitApi() {\r\n\r\n    this.store.actionsFormBuilder.saveSubmitApi(this.dataPlaceholder, this.keyInEdit)\r\n    this.dataPlaceholder = undefined\r\n    this.keyInEdit = undefined\r\n  }\r\n  removeSubmissionApi(api: APIDataFetchingConfigurationInterface, key: string) {\r\n    this.store.actionsFormBuilder.removeSubmissionApi(api, key as any)\r\n    this.dataPlaceholder = undefined\r\n    this.keyInEdit = undefined\r\n\r\n  }\r\n  cancelSubmitApi() {\r\n    this.dataPlaceholder = undefined\r\n    this.keyInEdit = undefined\r\n\r\n  }\r\n  matDialog = inject(MatDialog)\r\n  close() {\r\n    //close mat dialog\r\n    this.matDialog.closeAll()\r\n\r\n  }\r\n\r\n}\r\n","<div class=\"submissions-dialog\">\r\n  <!-- Header: icon + title + subtitle per design rule §4 -->\r\n  <header class=\"dialog-header\">\r\n    <div class=\"header-icon\" aria-hidden=\"true\">\r\n      <mat-icon>settings</mat-icon>\r\n    </div>\r\n    <div class=\"header-text\">\r\n      <h1 class=\"header-title\">Form Submission Configuration</h1>\r\n      <p class=\"header-subtitle\">Configure how your form is submitted and validated before submission.</p>\r\n    </div>\r\n    <button mat-icon-button mat-dialog-close [attr.aria-label]=\"'Close dialog'\" class=\"header-close\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </header>\r\n\r\n  <section class=\"dialog-content\">\r\n    <mat-accordion multi>\r\n      @for (panel of panels(); track panel.id) {\r\n        <mat-expansion-panel [expanded]=\"true\" class=\"config-panel\">\r\n          <mat-expansion-panel-header class=\"panel-header\">\r\n            <mat-panel-title class=\"panel-title\">\r\n              <mat-icon class=\"panel-icon\" [color]=\"'primary'\">{{ panel.titleIcon }}</mat-icon>\r\n              {{ panel.title }}\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n\r\n          <div class=\"panel-content\">\r\n            <p class=\"panel-description\" [innerHTML]=\"panel.description\"></p>\r\n\r\n            <!-- Dynamic form elements (submission message, toggles, etc.) -->\r\n            @if ((panel?.elements || []).length > 0) {\r\n              <div class=\"edit-section\">\r\n                @for (edit of (panel?.elements || []); track edit.id) {\r\n                  <div class=\"edit-field\">\r\n                    <lib-t-dynamic-data-edit\r\n                      [editorConfig]=\"edit\"\r\n                      [data]=\"form()\"\r\n                      [validationErrors]=\"(computedErrors(edit)()) || []\"\r\n                      (valueChange)=\"passFormChanges($event, edit)\"\r\n                      [formInputs]=\"(formInputs()) || []\"\r\n                      (blur)=\"elementBlur($event, edit)\">\r\n                    </lib-t-dynamic-data-edit>\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n\r\n            <!-- API endpoints list -->\r\n            <div class=\"api-section\">\r\n              <h3 class=\"api-section-header\" [class.api-section-header--error]=\"panel.error\">\r\n                {{ panel.primaryKey === 'submissionAPI' ? 'Submission Endpoints' : 'Validation Endpoints' }}\r\n              </h3>\r\n\r\n              @if ((getFormApis(panel.primaryKey)()).length === 0) {\r\n                <div class=\"empty-state\" [class.empty-state--error]=\"panel.error\">\r\n                  <mat-icon class=\"empty-state-icon\">add_link</mat-icon>\r\n                  <p>\r\n                    {{ panel.primaryKey === 'submissionAPI'\r\n                      ? 'No submission endpoints configured. Add one to send form data.'\r\n                      : 'No validation endpoints configured. Add one to validate data before submission.' }}\r\n                  </p>\r\n                </div>\r\n              }\r\n\r\n              @for (api of getFormApis(panel.primaryKey)(); track api._id) {\r\n                <div class=\"api-list-item\">\r\n                  <span class=\"api-method-tag\" [class.api-method-tag--post]=\"api.httpMethod === 'POST'\">\r\n                    {{ api.httpMethod }}\r\n                  </span>\r\n                  <div class=\"api-details\">\r\n                    <span class=\"api-name\">{{ api.name }}</span>\r\n                    <span class=\"api-endpoint\" [matTooltip]=\"api.httpEndPoint\" matTooltipPosition=\"above\">\r\n                      {{ api.httpEndPoint }}\r\n                    </span>\r\n                  </div>\r\n                  <div class=\"api-item-actions\">\r\n                    <button\r\n                      [cdkCopyToClipboard]=\"api.httpEndPoint || ''\"\r\n                      mat-icon-button\r\n                      matTooltip=\"Copy URL\"\r\n                      [attr.aria-label]=\"'Copy endpoint URL'\"\r\n                      class=\"api-copy-btn\"\r\n                      (click)=\"$event.stopPropagation()\">\r\n                      <mat-icon>content_copy</mat-icon>\r\n                    </button>\r\n                    <button\r\n                      (click)=\"removeSubmissionApi(api,panel.primaryKey)\"\r\n                      mat-icon-button\r\n                      matTooltip=\"Remove endpoint\"\r\n                      [attr.aria-label]=\"'Remove endpoint ' + api.name\"\r\n                      class=\"api-remove-btn\">\r\n                      <mat-icon>delete</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n                <mat-divider></mat-divider>\r\n              }\r\n\r\n              @if (keyInEdit !== panel.primaryKey) {\r\n                <div class=\"api-actions\">\r\n                  <button\r\n                    (click)=\"addNewSubmitApi(panel.primaryKey)\"\r\n                    mat-stroked-button\r\n                    color=\"primary\"\r\n                    class=\"add-endpoint-btn\">\r\n                    <mat-icon>add</mat-icon>\r\n                    Add new endpoint\r\n                  </button>\r\n                </div>\r\n              }\r\n\r\n              @if (panel.error) {\r\n                <mat-error class=\"panel-error\">{{ panel.error }}</mat-error>\r\n              }\r\n            </div>\r\n\r\n            <!-- Inline edit form for new/editing endpoint -->\r\n            @if (keyInEdit === panel.primaryKey) {\r\n              <div class=\"edit-section edit-section--inline\">\r\n                @for (element of submissionApiListItemConfigElements; track element.id) {\r\n                  <div class=\"edit-field\">\r\n                    <lib-t-dynamic-data-edit\r\n                      [editorConfig]=\"element\"\r\n                      [data]=\"dataPlaceholder\"\r\n                      [validationErrors]=\"validationErrors(element)\"\r\n                      (valueChange)=\"inputChange($event, element)\"\r\n                      [formInputs]=\"(formInputs()) || []\"\r\n                      (blur)=\"elementBlur($event, element)\">\r\n                    </lib-t-dynamic-data-edit>\r\n                  </div>\r\n                }\r\n                <mat-divider></mat-divider>\r\n                <div class=\"inline-edit-actions\">\r\n                  <button mat-flat-button (click)=\"saveSubmitApi()\" color=\"primary\">Save</button>\r\n                  <button mat-button (click)=\"cancelSubmitApi()\" color=\"warn\">Cancel</button>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        </mat-expansion-panel>\r\n      }\r\n    </mat-accordion>\r\n  </section>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\r\nimport { Component, inject } from '@angular/core';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { FormJsonViewComponent } from '../form-json-view/form-json-view.component';\r\nimport { combineLatest, map, take, } from 'rxjs';\r\nimport { CdkDrag } from '@angular/cdk/drag-drop';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { SelectFormTemplateComponent } from '../select-form-template/select-form-template.component';\r\nimport { FormSubmissionsConfigComponent } from '../form-submissions-config/form-submissions-config.component'\r\nimport { FormsStoreService } from '../../../forms/store/forms-store.service';\r\n\r\n\r\nimport { FormInterface } from 'ngx-t-forms-types';\r\nimport { MatSnackBar } from '@angular/material/snack-bar';\r\n\r\n@Component({\r\n  selector: 'app-forms-builder-menu',\r\n  standalone: true,\r\n  imports: [CommonModule, MatModulesModule, FormJsonViewComponent, CdkDrag],\r\n  templateUrl: './forms-builder-menu.component.html',\r\n  styleUrl: './forms-builder-menu.component.scss',\r\n})\r\nexport class FormsBuilderMenuComponent {\r\n  form$ = this.store.selectors.selectFormInEdit$.pipe(map((form) => form?.form))\r\n\r\n\r\n  showJson = false;\r\n  \r\n snackBar = inject(MatSnackBar);\r\n  constructor(private store: FormsStoreService) { }\r\n\r\n\r\n\r\n\r\n  formCopy$ = this.form$.pipe(\r\n    map((\r\n      form\r\n    ) => JSON.stringify(form || {}))\r\n  )\r\n  readonly dialog = inject(MatDialog);\r\n  openDialog() {\r\n    const dialogRef = this.dialog.open(SelectFormTemplateComponent);\r\n\r\n    dialogRef.afterClosed().pipe(take(1)).subscribe(form => {\r\n      if (form) {\r\n        this.applyFormTemplate(form)\r\n      }\r\n    });\r\n  }\r\n  \r\n  applyFormTemplate = (form: FormInterface) => this.store.actionsFormBuilder.applyFormTemplate(form)\r\n  openFormSubmissionDialog() {\r\n\r\n    const dialogRef = this.dialog.open(FormSubmissionsConfigComponent\r\n      , {\r\n        data: {\r\n          store: this.store\r\n        }\r\n      })\r\n\r\n    dialogRef.afterClosed().pipe(take(1)).subscribe(data => {\r\n      if (data) {\r\n      }\r\n    });\r\n  }\r\n  errors$ = this.store.formBuilderSelectors.formErrors$\r\n\r\n  configHasErrors$ =  this.errors$.pipe(\r\n    map(errors => errors?.some(error => error.key.split('.')?.[0] === 'submissionHandle'))\r\n  )\r\n  items$ = this.configHasErrors$.pipe(\r\n    map(configHasErrors =>{\r\n   \r\n      return [\r\n        {\r\n          label: \"Templates\",\r\n          icon: \"content_copy\",\r\n          hint: \"Select a form to apply as a template\",\r\n          action: () => this.openDialog()\r\n        },\r\n        {\r\n          label: \"Submission Config\",\r\n          hint: \"Setup form submission api and other configurations\",\r\n          icon: \"api\",\r\n          errors: configHasErrors,\r\n          action: () => this.openFormSubmissionDialog()\r\n        },\r\n      ]\r\n    })\r\n  )\r\n  vm$ = combineLatest(\r\n    [\r\n      this.items$,\r\n      this.form$,\r\n      this.formCopy$,\r\n      this\r\n.configHasErrors$\r\n    ]\r\n  ).pipe(\r\n    map(([items, form, formCopy,configHasErrors]) => ({ items, form, formCopy,configHasErrors }))\r\n  )\r\n\r\n}\r\n","\r\n<ng-container *ngIf=\"(  vm$|async) as vm\">\r\n\r\n    <button [matBadge]=\"'!'\" matBadgeColor=\"warn\" [matTooltip]=\"vm.configHasErrors === false?'\r\n    Click to view form configuration \r\n    ':'Click to fix or add missing form configurations'\" [matBadgeHidden]=\"!!(vm.configHasErrors) === false\"\r\n        [matMenuTriggerFor]=\"configMenu\" mat-flat-button>\r\n        Config\r\n        <mat-icon>\r\n            settings_suggest\r\n        </mat-icon>\r\n    </button>\r\n    \r\n    <mat-menu #configMenu=\"matMenu\">\r\n    \r\n    \r\n        <div mat-subheader style=\"padding-left: 16px;\">Form edit options</div>\r\n        @for(item of vm.items;track item){\r\n        <button [matTooltip]=\"item.hint\" matTooltipPosition=\"right\" style=\"padding-top:4px;padding-bottom:4px\"\r\n            (click)=\"item?.action()\" mat-menu-item>\r\n            <mat-icon>{{item.icon}}</mat-icon>\r\n    \r\n            <span>\r\n                @if (item.errors) {\r\n                <div style=\"line-height: normal;\"ks>\r\n                    {{item.label}}\r\n                </div>\r\n                <div style=\"line-height: normal;\">\r\n    \r\n                    <mat-error>\r\n                        <small>\r\n                            Invalid configurations\r\n                        </small>\r\n    \r\n                    </mat-error>\r\n                </div>\r\n                }@else {\r\n    \r\n                {{item.label}}\r\n    \r\n                }\r\n    \r\n    \r\n            </span>\r\n    \r\n        </button>\r\n        <mat-divider></mat-divider>\r\n        }\r\n        <button [matTooltip]=\"showJson?'Hide json':'Show json'\" (click)=\"showJson= !showJson\" mat-menu-item>\r\n            <mat-icon>data_object</mat-icon>\r\n    \r\n            <span>\r\n                <div>\r\n                    Show json\r\n                </div>\r\n    \r\n    \r\n    \r\n            </span>\r\n        </button>\r\n        \r\n    </mat-menu>\r\n    \r\n    <div *ngIf=\"showJson\" class=\"DragBoundary\">\r\n        @defer (on viewport) {\r\n        <mat-card cdkDragBoundary=\"DragBoundary\" cdkDrag class=\"menuCard\">\r\n            <mat-toolbar\r\n                style=\"background: var(--mat-sidenav-content-background-color);color:var(--mdc-filled-button-label-text-color, var(--mat-app-on-primary))\">\r\n                <span>\r\n                    Json Form Value\r\n                </span>\r\n                <span class=\"spacer\"></span>\r\n    \r\n                <mat-icon cdkDragHandle style=\"\r\n                margin:8px;\r\n                color:var(--mat-divider-color, var(--mat-app-outline))\">\r\n                    drag_indicator\r\n                </mat-icon>\r\n            </mat-toolbar>\r\n            <mat-divider style=\"margin-bottom: 12px;\"></mat-divider>\r\n    \r\n    \r\n            <mat-card-content style=\" overflow-y: auto;\r\n        max-height: calc(100vh - 150px);\">\r\n                <app-form-json-view></app-form-json-view>\r\n            </mat-card-content>\r\n            <mat-card-actions>\r\n                <span class=\"spacer\"></span>\r\n                <button (click)=\"showJson = false\" mat-flat-button>\r\n                    Close\r\n                </button>\r\n                <button color=\"primary\" [cdkCopyToClipboard]=\"(vm.formCopy)||''\" matTooltip=\"Copy json to clipboard\"\r\n                    mat-flat-button>\r\n                    Copy\r\n                </button>\r\n    \r\n            </mat-card-actions>\r\n    \r\n    \r\n        </mat-card>\r\n       }@placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n          </div>\r\n      \r\n        }\r\n    </div>\r\n</ng-container>\r\n"],"names":["i1.FormsStoreService","i4","i5","i3","i6","i7","i8","i9","i10","i11","i2","i12","i13","i14","i15"],"mappings":"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"}

package/fesm2022/{ngx-t-forms-input-editor.component-otrfAVh7.mjs → ngx-t-forms-input-editor.component-D4xHO76K.mjs}

@@ -2,19 +2,19 @@ import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, Component } from '@angular/core';
-import { F as FormsStoreService, M as MatModulesModule, _ as _isEqual, T as TDynamicDataEditComponent, b as TDynamicDataViewComponent } from './ngx-t-forms-ngx-t-forms-mfuTrkmM.mjs';
+import { F as FormsStoreService, M as MatModulesModule, _ as _isEqual, T as TDynamicDataEditComponent, b as TDynamicDataViewComponent } from './ngx-t-forms-ngx-t-forms-D9qmig6g.mjs';
 import { DefaultInputConfig } from 'ngx-t-forms-types';
 import { take, distinctUntilChanged, tap, combineLatest, map } from 'rxjs';
 import * as i7 from '@angular/material/list';
 import * as i4 from '@angular/material/divider';
-import * as i2$2 from '@angular/material/button';
-import * as i3 from '@angular/material/card';
+import * as i2$1 from '@angular/material/button';
+import * as i3$1 from '@angular/material/card';
 import * as i5 from '@angular/material/expansion';
-import * as i2$1 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import * as i7$1 from '@angular/material/progress-spinner';
-import * as i2$3 from '@angular/material/select';
+import * as i3$2 from '@angular/material/select';
 import * as i5$1 from '@angular/material/toolbar';
-import * as i8 from '@angular/material/tooltip';
+import * as i4$1 from '@angular/material/tooltip';
 import * as i1 from '@angular/cdk/drag-drop';
 
 class DefaultElementComponent {
@@ -100,7 +100,7 @@ class InputElementEditorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InputElementEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: InputElementEditorComponent, isStandalone: true, selector: "app-input-element-editor", ngImport: i0, template: "<mat-toolbar class=\"section-header\">\r\n    <span class=\"header\">Element configuration</span>\r\n    <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n<mat-divider></mat-divider>\r\n<ng-container *ngIf=\"(vm$ |async) as vm\">\r\n    @defer (on viewport) {\r\n\r\n    <mat-accordion togglePosition=\"before\">\r\n        @for(section of (vm.inputElementEditorConfigs.editorSections||[]); track section.id) {\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    {{section.label}}\r\n                    <span class=\"spacer\"></span>\r\n                    @if (section.hasErrors) {\r\n                    <mat-icon color=\"warn\">error</mat-icon>\r\n                    }\r\n                    <span class=\"showItemValue\" *ngIf=\"section.showItemValue && !!(vm.inputInEdit)\">\r\n                        {{ vm.inputInEdit[section.showItemValue]}}\r\n                    </span>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n\r\n            <div style=\"margin-top: 16px;\"></div>\r\n\r\n            <!-- Element type selector (only in first section) -->\r\n            @if($index === 0) {\r\n            <mat-nav-list>\r\n                <mat-list-item [disabled]=\"vm.inputInEdit?.systemDefault\" matTooltip=\"Change input element\"\r\n                    (click)=\"vm.inputInEdit?.systemDefault? '':clearInputInEdit()\">\r\n                    <img matListItemAvatar [src]=\"(vm.defaultInputInEdit)?.illustration\"\r\n                        [alt]=\"(vm.defaultInputInEdit)?.label\">\r\n                    <span matListItemTitle>{{ (vm.defaultInputInEdit)?.label}}</span>\r\n                    <span matListItemMeta>\r\n                        <mat-icon>arrow_forward_ios</mat-icon>\r\n                    </span>\r\n                </mat-list-item>\r\n                <mat-divider></mat-divider>\r\n            </mat-nav-list>\r\n            }\r\n\r\n            <!-- Section elements -->\r\n            @for(element of section.elements; track element.id) {\r\n            <p style=\"margin-bottom: 16px; margin-top: 8px;\">\r\n                @defer (on viewport) {\r\n                <lib-t-dynamic-data-edit [editorConfig]=\"element\" [data]=\"(vm.inputInEdit)\"\r\n                    [validationErrors]=\"element.computedErrors||[]\"\r\n                    (valueChange)=\"elementConfigurationChanged($event, element)\" [formInputs]=\"(vm.formInputs)||[]\"\r\n                    (blur)=\"elementBlur($event, element)\">\r\n                </lib-t-dynamic-data-edit>\r\n                } @placeholder {\r\n            <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n                <mat-spinner diameter=\"18\"></mat-spinner>\r\n            </div>\r\n            }\r\n            </p>\r\n            }\r\n        </mat-expansion-panel>\r\n        }\r\n    </mat-accordion>\r\n    } @placeholder {\r\n    <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n        <mat-spinner diameter=\"50\" />\r\n    </div>\r\n    } @error {\r\n    <div style=\"padding: 16px;\">\r\n        <mat-error>\r\n            <h3>Error loading element editor</h3>\r\n            <p>An error occurred while loading the element editor. Please try again later.</p>\r\n        </mat-error>\r\n    </div>\r\n\r\n    }\r\n\r\n\r\n\r\n\r\n\r\n    <!-- Diagnostic section -->\r\n    <mat-toolbar class=\"section-header\">\r\n        <span class=\"header\">Diagnostic data</span>\r\n        <span class=\"spacer\"></span>\r\n    </mat-toolbar>\r\n    <mat-divider></mat-divider>\r\n\r\n    <mat-accordion togglePosition=\"before\">\r\n\r\n        @if(((vm.inputInEditValidationErrors)||[]).length > 0) {\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    Validation Errors\r\n                    <span class=\"spacer\"></span>\r\n                    <mat-error>\r\n                        {{(vm.inputInEditValidationErrors).length||''}}\r\n                    </mat-error>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div style=\"margin-top: 16px;\"></div>\r\n            <mat-error style=\"border: solid 1px; border-radius: 8px; padding: 16px;\">\r\n                <h1>All configuration errors:</h1>\r\n                <p>\r\n                    {{(vm.inputInEditValidationErrors).length||''}} errors found. When an error is found, the input will\r\n                    not\r\n                    be saved.\r\n                </p>\r\n                <ul>\r\n                    @for(error of (vm.inputInEditValidationErrors); track error.key) {\r\n                    <li>\r\n                        <strong>{{error.key}}</strong> {{error.message}}\r\n                    </li>\r\n                    }\r\n                </ul>\r\n            </mat-error>\r\n        </mat-expansion-panel>\r\n        }\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header style=\"    padding-right: 0px;\">\r\n                <mat-panel-title>\r\n                    Complete Virtual Model\r\n                    <span class=\"spacer\"></span>\r\n                    <button mat-icon-button (click)=\"showDebugData()\">\r\n                        <mat-icon>\r\n                            troubleshoot\r\n                        </mat-icon>\r\n                    </button>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div style=\"margin-top: 16px;\"></div>\r\n            <mat-card style=\"padding: 16px;\">\r\n\r\n                <lib-t-dynamic-data-view [data]=\"({\r\n            'Default Input Template InEdit': vm.defaultInputInEdit,\r\n            'Input In Edit': vm.inputInEdit,\r\n            'Input Editor Sections': vm.inputElementEditorConfigs?.editorSections,\r\n            })\"></lib-t-dynamic-data-view>\r\n\r\n            </mat-card>\r\n        </mat-expansion-panel>\r\n\r\n    </mat-accordion>\r\n</ng-container>", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.header{margin-bottom:0;font-size:small;opacity:.6}.section-header{height:38px;margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: TDynamicDataViewComponent, selector: "lib-t-dynamic-data-view", inputs: ["data"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], deferBlockDependencies: [() => [i2.NgIf, i4.MatDivider, i5.MatAccordion, i5.MatExpansionPanel, i5.MatExpansionPanelHeader, i5.MatExpansionPanelTitle, i2$1.MatIcon, i7.MatNavList, i7.MatListItem, i7.MatListItemAvatar, i7.MatListItemTitle, i7.MatListItemMeta, i7$1.MatProgressSpinner, i8.MatTooltip], () => [TDynamicDataEditComponent]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: InputElementEditorComponent, isStandalone: true, selector: "app-input-element-editor", ngImport: i0, template: "<mat-toolbar class=\"section-header\">\r\n    <span class=\"header\">Element configuration</span>\r\n    <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n<mat-divider></mat-divider>\r\n<ng-container *ngIf=\"(vm$ |async) as vm\">\r\n    @defer (on viewport) {\r\n\r\n    <mat-accordion togglePosition=\"before\">\r\n        @for(section of (vm.inputElementEditorConfigs.editorSections||[]); track section.id) {\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    {{section.label}}\r\n                    <span class=\"spacer\"></span>\r\n                    @if (section.hasErrors) {\r\n                    <mat-icon color=\"warn\">error</mat-icon>\r\n                    }\r\n                    <span class=\"showItemValue\" *ngIf=\"section.showItemValue && !!(vm.inputInEdit)\">\r\n                        {{ vm.inputInEdit[section.showItemValue]}}\r\n                    </span>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n\r\n            <div style=\"margin-top: 16px;\"></div>\r\n\r\n            <!-- Element type selector (only in first section) -->\r\n            @if($index === 0) {\r\n            <mat-nav-list>\r\n                <mat-list-item [disabled]=\"vm.inputInEdit?.systemDefault\" matTooltip=\"Change input element\"\r\n                    (click)=\"vm.inputInEdit?.systemDefault? '':clearInputInEdit()\">\r\n                    <img matListItemAvatar [src]=\"(vm.defaultInputInEdit)?.illustration\"\r\n                        [alt]=\"(vm.defaultInputInEdit)?.label\">\r\n                    <span matListItemTitle>{{ (vm.defaultInputInEdit)?.label}}</span>\r\n                    <span matListItemMeta>\r\n                        <mat-icon>arrow_forward_ios</mat-icon>\r\n                    </span>\r\n                </mat-list-item>\r\n                <mat-divider></mat-divider>\r\n            </mat-nav-list>\r\n            }\r\n\r\n            <!-- Section elements -->\r\n            @for(element of section.elements; track element.id) {\r\n            <p style=\"margin-bottom: 16px; margin-top: 8px;\">\r\n                @defer (on viewport) {\r\n                <lib-t-dynamic-data-edit \r\n                [editorConfig]=\"element\" \r\n                [data]=\"(vm.inputInEdit)\"\r\n                [validationErrors]=\"element.computedErrors||[]\"\r\n                (valueChange)=\"elementConfigurationChanged($event, element)\" [formInputs]=\"(vm.formInputs)||[]\"\r\n                (blur)=\"elementBlur($event, element)\">\r\n                </lib-t-dynamic-data-edit>\r\n                } @placeholder {\r\n            <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n                <mat-spinner diameter=\"18\"></mat-spinner>\r\n            </div>\r\n            }\r\n            </p>\r\n            }\r\n        </mat-expansion-panel>\r\n        }\r\n    </mat-accordion>\r\n    } @placeholder {\r\n    <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n        <mat-spinner diameter=\"50\" />\r\n    </div>\r\n    } @error {\r\n    <div style=\"padding: 16px;\">\r\n        <mat-error>\r\n            <h3>Error loading element editor</h3>\r\n            <p>An error occurred while loading the element editor. Please try again later.</p>\r\n        </mat-error>\r\n    </div>\r\n\r\n    }\r\n\r\n\r\n\r\n\r\n\r\n    <!-- Diagnostic section -->\r\n    <mat-toolbar class=\"section-header\">\r\n        <span class=\"header\">Diagnostic data</span>\r\n        <span class=\"spacer\"></span>\r\n    </mat-toolbar>\r\n    <mat-divider></mat-divider>\r\n\r\n    <mat-accordion togglePosition=\"before\">\r\n\r\n        @if(((vm.inputInEditValidationErrors)||[]).length > 0) {\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    Validation Errors\r\n                    <span class=\"spacer\"></span>\r\n                    <mat-error>\r\n                        {{(vm.inputInEditValidationErrors).length||''}}\r\n                    </mat-error>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div style=\"margin-top: 16px;\"></div>\r\n            <mat-error style=\"border: solid 1px; border-radius: 8px; padding: 16px;\">\r\n                <h1>All configuration errors:</h1>\r\n                <p>\r\n                    {{(vm.inputInEditValidationErrors).length||''}} errors found. When an error is found, the input will\r\n                    not\r\n                    be saved.\r\n                </p>\r\n                <ul>\r\n                    @for(error of (vm.inputInEditValidationErrors); track error.key) {\r\n                    <li>\r\n                        <strong>{{error.key}}</strong> {{error.message}}\r\n                    </li>\r\n                    }\r\n                </ul>\r\n            </mat-error>\r\n        </mat-expansion-panel>\r\n        }\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header style=\"    padding-right: 0px;\">\r\n                <mat-panel-title>\r\n                    Complete Virtual Model\r\n                    <span class=\"spacer\"></span>\r\n                    <button mat-icon-button (click)=\"showDebugData()\">\r\n                        <mat-icon>\r\n                            troubleshoot\r\n                        </mat-icon>\r\n                    </button>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div style=\"margin-top: 16px;\"></div>\r\n            <mat-card style=\"padding: 16px;\">\r\n\r\n                <lib-t-dynamic-data-view [data]=\"({\r\n            'Default Input Template InEdit': vm.defaultInputInEdit,\r\n            'Input In Edit': vm.inputInEdit,\r\n            'Input Editor Sections': vm.inputElementEditorConfigs?.editorSections,\r\n            })\"></lib-t-dynamic-data-view>\r\n\r\n            </mat-card>\r\n        </mat-expansion-panel>\r\n\r\n    </mat-accordion>\r\n</ng-container>", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.header{margin-bottom:0;font-size:small;opacity:.6}.section-header{height:38px;margin-top:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i3$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: TDynamicDataViewComponent, selector: "lib-t-dynamic-data-view", inputs: ["data"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], deferBlockDependencies: [() => [i2.NgIf, i4.MatDivider, i5.MatAccordion, i5.MatExpansionPanel, i5.MatExpansionPanelHeader, i5.MatExpansionPanelTitle, i3.MatIcon, i7.MatNavList, i7.MatListItem, i7.MatListItemAvatar, i7.MatListItemTitle, i7.MatListItemMeta, i7$1.MatProgressSpinner, i4$1.MatTooltip], () => [TDynamicDataEditComponent]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InputElementEditorComponent, decorators: [{
             type: Component,
@@ -109,7 +109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         MatModulesModule,
                         TDynamicDataEditComponent,
                         TDynamicDataViewComponent
-                    ], template: "<mat-toolbar class=\"section-header\">\r\n    <span class=\"header\">Element configuration</span>\r\n    <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n<mat-divider></mat-divider>\r\n<ng-container *ngIf=\"(vm$ |async) as vm\">\r\n    @defer (on viewport) {\r\n\r\n    <mat-accordion togglePosition=\"before\">\r\n        @for(section of (vm.inputElementEditorConfigs.editorSections||[]); track section.id) {\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    {{section.label}}\r\n                    <span class=\"spacer\"></span>\r\n                    @if (section.hasErrors) {\r\n                    <mat-icon color=\"warn\">error</mat-icon>\r\n                    }\r\n                    <span class=\"showItemValue\" *ngIf=\"section.showItemValue && !!(vm.inputInEdit)\">\r\n                        {{ vm.inputInEdit[section.showItemValue]}}\r\n                    </span>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n\r\n            <div style=\"margin-top: 16px;\"></div>\r\n\r\n            <!-- Element type selector (only in first section) -->\r\n            @if($index === 0) {\r\n            <mat-nav-list>\r\n                <mat-list-item [disabled]=\"vm.inputInEdit?.systemDefault\" matTooltip=\"Change input element\"\r\n                    (click)=\"vm.inputInEdit?.systemDefault? '':clearInputInEdit()\">\r\n                    <img matListItemAvatar [src]=\"(vm.defaultInputInEdit)?.illustration\"\r\n                        [alt]=\"(vm.defaultInputInEdit)?.label\">\r\n                    <span matListItemTitle>{{ (vm.defaultInputInEdit)?.label}}</span>\r\n                    <span matListItemMeta>\r\n                        <mat-icon>arrow_forward_ios</mat-icon>\r\n                    </span>\r\n                </mat-list-item>\r\n                <mat-divider></mat-divider>\r\n            </mat-nav-list>\r\n            }\r\n\r\n            <!-- Section elements -->\r\n            @for(element of section.elements; track element.id) {\r\n            <p style=\"margin-bottom: 16px; margin-top: 8px;\">\r\n                @defer (on viewport) {\r\n                <lib-t-dynamic-data-edit [editorConfig]=\"element\" [data]=\"(vm.inputInEdit)\"\r\n                    [validationErrors]=\"element.computedErrors||[]\"\r\n                    (valueChange)=\"elementConfigurationChanged($event, element)\" [formInputs]=\"(vm.formInputs)||[]\"\r\n                    (blur)=\"elementBlur($event, element)\">\r\n                </lib-t-dynamic-data-edit>\r\n                } @placeholder {\r\n            <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n                <mat-spinner diameter=\"18\"></mat-spinner>\r\n            </div>\r\n            }\r\n            </p>\r\n            }\r\n        </mat-expansion-panel>\r\n        }\r\n    </mat-accordion>\r\n    } @placeholder {\r\n    <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n        <mat-spinner diameter=\"50\" />\r\n    </div>\r\n    } @error {\r\n    <div style=\"padding: 16px;\">\r\n        <mat-error>\r\n            <h3>Error loading element editor</h3>\r\n            <p>An error occurred while loading the element editor. Please try again later.</p>\r\n        </mat-error>\r\n    </div>\r\n\r\n    }\r\n\r\n\r\n\r\n\r\n\r\n    <!-- Diagnostic section -->\r\n    <mat-toolbar class=\"section-header\">\r\n        <span class=\"header\">Diagnostic data</span>\r\n        <span class=\"spacer\"></span>\r\n    </mat-toolbar>\r\n    <mat-divider></mat-divider>\r\n\r\n    <mat-accordion togglePosition=\"before\">\r\n\r\n        @if(((vm.inputInEditValidationErrors)||[]).length > 0) {\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    Validation Errors\r\n                    <span class=\"spacer\"></span>\r\n                    <mat-error>\r\n                        {{(vm.inputInEditValidationErrors).length||''}}\r\n                    </mat-error>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div style=\"margin-top: 16px;\"></div>\r\n            <mat-error style=\"border: solid 1px; border-radius: 8px; padding: 16px;\">\r\n                <h1>All configuration errors:</h1>\r\n                <p>\r\n                    {{(vm.inputInEditValidationErrors).length||''}} errors found. When an error is found, the input will\r\n                    not\r\n                    be saved.\r\n                </p>\r\n                <ul>\r\n                    @for(error of (vm.inputInEditValidationErrors); track error.key) {\r\n                    <li>\r\n                        <strong>{{error.key}}</strong> {{error.message}}\r\n                    </li>\r\n                    }\r\n                </ul>\r\n            </mat-error>\r\n        </mat-expansion-panel>\r\n        }\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header style=\"    padding-right: 0px;\">\r\n                <mat-panel-title>\r\n                    Complete Virtual Model\r\n                    <span class=\"spacer\"></span>\r\n                    <button mat-icon-button (click)=\"showDebugData()\">\r\n                        <mat-icon>\r\n                            troubleshoot\r\n                        </mat-icon>\r\n                    </button>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div style=\"margin-top: 16px;\"></div>\r\n            <mat-card style=\"padding: 16px;\">\r\n\r\n                <lib-t-dynamic-data-view [data]=\"({\r\n            'Default Input Template InEdit': vm.defaultInputInEdit,\r\n            'Input In Edit': vm.inputInEdit,\r\n            'Input Editor Sections': vm.inputElementEditorConfigs?.editorSections,\r\n            })\"></lib-t-dynamic-data-view>\r\n\r\n            </mat-card>\r\n        </mat-expansion-panel>\r\n\r\n    </mat-accordion>\r\n</ng-container>", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.header{margin-bottom:0;font-size:small;opacity:.6}.section-header{height:38px;margin-top:12px}\n"] }]
+                    ], template: "<mat-toolbar class=\"section-header\">\r\n    <span class=\"header\">Element configuration</span>\r\n    <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n<mat-divider></mat-divider>\r\n<ng-container *ngIf=\"(vm$ |async) as vm\">\r\n    @defer (on viewport) {\r\n\r\n    <mat-accordion togglePosition=\"before\">\r\n        @for(section of (vm.inputElementEditorConfigs.editorSections||[]); track section.id) {\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    {{section.label}}\r\n                    <span class=\"spacer\"></span>\r\n                    @if (section.hasErrors) {\r\n                    <mat-icon color=\"warn\">error</mat-icon>\r\n                    }\r\n                    <span class=\"showItemValue\" *ngIf=\"section.showItemValue && !!(vm.inputInEdit)\">\r\n                        {{ vm.inputInEdit[section.showItemValue]}}\r\n                    </span>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n\r\n            <div style=\"margin-top: 16px;\"></div>\r\n\r\n            <!-- Element type selector (only in first section) -->\r\n            @if($index === 0) {\r\n            <mat-nav-list>\r\n                <mat-list-item [disabled]=\"vm.inputInEdit?.systemDefault\" matTooltip=\"Change input element\"\r\n                    (click)=\"vm.inputInEdit?.systemDefault? '':clearInputInEdit()\">\r\n                    <img matListItemAvatar [src]=\"(vm.defaultInputInEdit)?.illustration\"\r\n                        [alt]=\"(vm.defaultInputInEdit)?.label\">\r\n                    <span matListItemTitle>{{ (vm.defaultInputInEdit)?.label}}</span>\r\n                    <span matListItemMeta>\r\n                        <mat-icon>arrow_forward_ios</mat-icon>\r\n                    </span>\r\n                </mat-list-item>\r\n                <mat-divider></mat-divider>\r\n            </mat-nav-list>\r\n            }\r\n\r\n            <!-- Section elements -->\r\n            @for(element of section.elements; track element.id) {\r\n            <p style=\"margin-bottom: 16px; margin-top: 8px;\">\r\n                @defer (on viewport) {\r\n                <lib-t-dynamic-data-edit \r\n                [editorConfig]=\"element\" \r\n                [data]=\"(vm.inputInEdit)\"\r\n                [validationErrors]=\"element.computedErrors||[]\"\r\n                (valueChange)=\"elementConfigurationChanged($event, element)\" [formInputs]=\"(vm.formInputs)||[]\"\r\n                (blur)=\"elementBlur($event, element)\">\r\n                </lib-t-dynamic-data-edit>\r\n                } @placeholder {\r\n            <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n                <mat-spinner diameter=\"18\"></mat-spinner>\r\n            </div>\r\n            }\r\n            </p>\r\n            }\r\n        </mat-expansion-panel>\r\n        }\r\n    </mat-accordion>\r\n    } @placeholder {\r\n    <div style=\"padding: 50px; display:flex; justify-content:center; align-items:center; text-align: center;\">\r\n        <mat-spinner diameter=\"50\" />\r\n    </div>\r\n    } @error {\r\n    <div style=\"padding: 16px;\">\r\n        <mat-error>\r\n            <h3>Error loading element editor</h3>\r\n            <p>An error occurred while loading the element editor. Please try again later.</p>\r\n        </mat-error>\r\n    </div>\r\n\r\n    }\r\n\r\n\r\n\r\n\r\n\r\n    <!-- Diagnostic section -->\r\n    <mat-toolbar class=\"section-header\">\r\n        <span class=\"header\">Diagnostic data</span>\r\n        <span class=\"spacer\"></span>\r\n    </mat-toolbar>\r\n    <mat-divider></mat-divider>\r\n\r\n    <mat-accordion togglePosition=\"before\">\r\n\r\n        @if(((vm.inputInEditValidationErrors)||[]).length > 0) {\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    Validation Errors\r\n                    <span class=\"spacer\"></span>\r\n                    <mat-error>\r\n                        {{(vm.inputInEditValidationErrors).length||''}}\r\n                    </mat-error>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div style=\"margin-top: 16px;\"></div>\r\n            <mat-error style=\"border: solid 1px; border-radius: 8px; padding: 16px;\">\r\n                <h1>All configuration errors:</h1>\r\n                <p>\r\n                    {{(vm.inputInEditValidationErrors).length||''}} errors found. When an error is found, the input will\r\n                    not\r\n                    be saved.\r\n                </p>\r\n                <ul>\r\n                    @for(error of (vm.inputInEditValidationErrors); track error.key) {\r\n                    <li>\r\n                        <strong>{{error.key}}</strong> {{error.message}}\r\n                    </li>\r\n                    }\r\n                </ul>\r\n            </mat-error>\r\n        </mat-expansion-panel>\r\n        }\r\n        <mat-expansion-panel>\r\n            <mat-expansion-panel-header style=\"    padding-right: 0px;\">\r\n                <mat-panel-title>\r\n                    Complete Virtual Model\r\n                    <span class=\"spacer\"></span>\r\n                    <button mat-icon-button (click)=\"showDebugData()\">\r\n                        <mat-icon>\r\n                            troubleshoot\r\n                        </mat-icon>\r\n                    </button>\r\n                    <mat-divider style=\"position: absolute; left:0px; width:100%; bottom:0px;\"></mat-divider>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div style=\"margin-top: 16px;\"></div>\r\n            <mat-card style=\"padding: 16px;\">\r\n\r\n                <lib-t-dynamic-data-view [data]=\"({\r\n            'Default Input Template InEdit': vm.defaultInputInEdit,\r\n            'Input In Edit': vm.inputInEdit,\r\n            'Input Editor Sections': vm.inputElementEditorConfigs?.editorSections,\r\n            })\"></lib-t-dynamic-data-view>\r\n\r\n            </mat-card>\r\n        </mat-expansion-panel>\r\n\r\n    </mat-accordion>\r\n</ng-container>", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.header{margin-bottom:0;font-size:small;opacity:.6}.section-header{height:38px;margin-top:12px}\n"] }]
         }] });
 
 class InputEditorComponent {
@@ -133,7 +133,7 @@ class InputEditorComponent {
         return this.store.formBuilderSelectors.inputInEditValidationErrors$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InputEditorComponent, deps: [{ token: FormsStoreService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: InputEditorComponent, isStandalone: true, selector: "app-input-editor", ngImport: i0, template: "<mat-card \r\n\r\nstyle=\"\r\n\r\nbackground: var(--mat-sys-surface-container, var(--mat-app-surface));\r\nmargin:0px;\r\nborder:solid 1px var(--mat-divider-color, var(--mat-app-outline))\">\r\n \r\n    <mat-card-header >\r\n        <mat-card-title>\r\n            {{\r\n                !!(inputInEdit$|async)?.element\r\n                  ? \"Edit \" +      (inputInEdit$|async)?.label + \" element\"\r\n                  : \"Setup Form Element\"\r\n              }}\r\n        </mat-card-title>\r\n        <mat-card-subtitle>   {{\r\n            !!(inputInEdit$|async)?.element? \"Configure the element below\": \"Form element are components making up a form section. Types of form elements are defined by their behaviour and use case, for example a date range picker is well suited to determine duration.\"\r\n          }}</mat-card-subtitle>\r\n          <button style=\"position: absolute;right:4px\" mat-icon-button cdkDragHandle >\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n      </mat-card-header>\r\n    \r\n\r\n\r\n        @if(!!((inputInEdit$|async))?.element){\r\n            <app-input-element-editor \r\n            style=\"background: var(--mat-sys-surface-container, var(--mat-app-surface))\">\r\n          </app-input-element-editor>\r\n        }@else{\r\n            <app-default-element  style=\"background: var(--mat-sys-surface-container, var(--mat-app-surface))\"></app-default-element>\r\n        }\r\n        <br>\r\n\r\n      <br>\r\n      <mat-divider style=\"position: sticky;bottom: 53px;\"></mat-divider>\r\n     <mat-toolbar style=\"position: sticky;bottom: 0;\">\r\n      <span class=\"spacer\"></span>\r\n            <button (click)=\"closeEditor()\" class=\"\" mat-button>close</button>\r\n   \r\n            <button *ngIf=\"!((inputInEdit$|async))?.id\" mat-flat-button \r\n            (click)=\"saveInput()\"\r\n            [disabled]=\"((validationErrors$|async)||[]).length>0\"\r\n            color=\"primary\">save new input</button>\r\n     </mat-toolbar>\r\n\r\n     \r\n</mat-card>\r\n", styles: ["mat-card{margin:16px}mat-card-content{overflow-y:auto;max-height:calc(100vh - 190px)}mat-card-actions{position:sticky;bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: DefaultElementComponent, selector: "app-default-element" }, { kind: "component", type: InputElementEditorComponent, selector: "app-input-element-editor" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: InputEditorComponent, isStandalone: true, selector: "app-input-editor", ngImport: i0, template: "<mat-card \r\n\r\nstyle=\"\r\n\r\nbackground: var(--mat-sys-surface-container, var(--mat-app-surface));\r\nmargin:0px;\r\nborder:solid 1px var(--mat-divider-color, var(--mat-app-outline))\">\r\n \r\n    <mat-card-header >\r\n        <mat-card-title>\r\n            {{\r\n                !!(inputInEdit$|async)?.element\r\n                  ? \"Edit \" +      (inputInEdit$|async)?.label + \" element\"\r\n                  : \"Setup Form Element\"\r\n              }}\r\n        </mat-card-title>\r\n        <mat-card-subtitle>   {{\r\n            !!(inputInEdit$|async)?.element? \"Configure the element below\": \"Form element are components making up a form section. Types of form elements are defined by their behaviour and use case, for example a date range picker is well suited to determine duration.\"\r\n          }}</mat-card-subtitle>\r\n          <button style=\"position: absolute;right:4px\" mat-icon-button cdkDragHandle >\r\n            <mat-icon>drag_indicator</mat-icon>\r\n          </button>\r\n      </mat-card-header>\r\n    \r\n\r\n\r\n        @if(!!((inputInEdit$|async))?.element){\r\n            <app-input-element-editor \r\n            style=\"background: var(--mat-sys-surface-container, var(--mat-app-surface))\">\r\n          </app-input-element-editor>\r\n        }@else{\r\n            <app-default-element  style=\"background: var(--mat-sys-surface-container, var(--mat-app-surface))\"></app-default-element>\r\n        }\r\n        <br>\r\n\r\n      <br>\r\n      <mat-divider style=\"position: sticky;bottom: 53px;\"></mat-divider>\r\n     <mat-toolbar style=\"position: sticky;bottom: 0;\">\r\n      <span class=\"spacer\"></span>\r\n            <button (click)=\"closeEditor()\" class=\"\" mat-button>close</button>\r\n   \r\n            <button *ngIf=\"!((inputInEdit$|async))?.id\" mat-flat-button \r\n            (click)=\"saveInput()\"\r\n            [disabled]=\"((validationErrors$|async)||[]).length>0\"\r\n            color=\"primary\">save new input</button>\r\n     </mat-toolbar>\r\n\r\n     \r\n</mat-card>\r\n", styles: ["mat-card{margin:16px}mat-card-content{overflow-y:auto;max-height:calc(100vh - 190px)}mat-card-actions{position:sticky;bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: DefaultElementComponent, selector: "app-default-element" }, { kind: "component", type: InputElementEditorComponent, selector: "app-input-element-editor" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InputEditorComponent, decorators: [{
             type: Component,
@@ -144,4 +144,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }], ctorParameters: () => [{ type: FormsStoreService }] });
 
 export { InputEditorComponent };
-//# sourceMappingURL=ngx-t-forms-input-editor.component-otrfAVh7.mjs.map
+//# sourceMappingURL=ngx-t-forms-input-editor.component-D4xHO76K.mjs.map