ngx-t-forms 2.0.8 → 2.0.9

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

@@ -0,0 +1,735 @@
+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-DaAFB-HX.mjs';
+import { of, map, combineLatest, take } from 'rxjs';
+import * as i1 from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import * as i2 from '@angular/material/button';
+import * as i4 from '@angular/material/divider';
+import * as i6 from '@angular/material/icon';
+import * as i6$1 from '@angular/material/list';
+import * as i7 from '@angular/material/progress-spinner';
+import * as i8 from '@angular/material/tooltip';
+import { ElementEditorTypes, SpecialElementKeys, validateApiDataFetchingConfiguration } from 'ngx-t-forms-types';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i5 from '@angular/material/expansion';
+import * as i3 from '@angular/material/form-field';
+import * as i9 from '@angular/material/toolbar';
+import * as i3$2 from '@angular/material/badge';
+import * as i6$2 from '@angular/material/menu';
+import * as i12 from '@angular/cdk/clipboard';
+import * as i2$2 from '@angular/cdk/drag-drop';
+import * as i3$1 from '@angular/material/card';
+
+const _forTrack0$1 = ($index, $item) => $item._id;
+function SelectFormTemplateComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mat-spinner", 4);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, " Loading form templates... ");
+    i0.ɵɵelementEnd()();
+} }
+function SelectFormTemplateComponent_Conditional_7_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span")(1, "mat-icon", 13);
+    i0.ɵɵtext(2, "error");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "small");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "span", 12);
+    i0.ɵɵtext(6, "\u2022");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const form_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(form_r2.errors.length);
+} }
+function SelectFormTemplateComponent_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-list-item", 7);
+    i0.ɵɵlistener("click", function SelectFormTemplateComponent_Conditional_7_For_2_Template_mat_list_item_click_0_listener() { const form_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectForm(form_r2)); });
+    i0.ɵɵelement(1, "img", 8);
+    i0.ɵɵelementStart(2, "div", 9)(3, "div", 10);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "titlecase");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 11);
+    i0.ɵɵtemplate(7, SelectFormTemplateComponent_Conditional_7_For_2_Conditional_7_Template, 7, 1);
+    i0.ɵɵelementStart(8, "span")(9, "mat-icon");
+    i0.ɵɵtext(10, "add_circle_outline");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "small");
+    i0.ɵɵtext(12);
+    i0.ɵɵpipe(13, "daysAgo");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "span", 12);
+    i0.ɵɵtext(15, "\u2022");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "span")(17, "mat-icon");
+    i0.ɵɵtext(18, "update");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "small");
+    i0.ɵɵtext(20);
+    i0.ɵɵpipe(21, "daysAgo");
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const form_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mat-elevation-z1", true);
+    i0.ɵɵproperty("matTooltip", "Click to select this template");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("error", form_r2.errors.length > 0);
+    i0.ɵɵproperty("src", ctx_r2.getFormAvatar(form_r2.formTitle), i0.ɵɵsanitizeUrl)("alt", "form image " + form_r2.formTitle);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 11, form_r2.formTitle));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(form_r2.errors.length > 0 ? 7 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(13, 13, form_r2.createdAt));
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 15, form_r2.updatedAt), "");
+} }
+function SelectFormTemplateComponent_Conditional_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtext(1, " No form templates available. ");
+    i0.ɵɵelementEnd();
+} }
+function SelectFormTemplateComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-nav-list", 5);
+    i0.ɵɵrepeaterCreate(1, SelectFormTemplateComponent_Conditional_7_For_2_Template, 22, 17, "mat-list-item", 6, _forTrack0$1);
+    i0.ɵɵpipe(3, "async");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, SelectFormTemplateComponent_Conditional_7_Conditional_4_Template, 2, 0, "p");
+    i0.ɵɵpipe(5, "async");
+} if (rf & 2) {
+    let tmp_2_0;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(i0.ɵɵpipeBind1(3, 1, ctx_r2.selectForms$));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(((tmp_2_0 = i0.ɵɵpipeBind1(5, 3, ctx_r2.selectForms$)) == null ? null : tmp_2_0.length) === 0 ? 4 : -1);
+} }
+class SelectFormTemplateComponent {
+    constructor(store) {
+        this.store = store;
+        this.selectForms$ = this.store.selectors.selectForms$;
+        this.selectLoadingForms$ = this.store.selectors.selectLoadingForms$;
+        this.dialogRef = inject((MatDialogRef));
+        this.data = inject(MAT_DIALOG_DATA);
+        this.store.effects.loadForms$(of());
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    selectForm(form) {
+        console.log(form);
+        this.dialogRef.close(form);
+    }
+    getFormAvatar(formTitle) {
+        return getAvatar(formTitle);
+    }
+    static { this.ɵfac = function SelectFormTemplateComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SelectFormTemplateComponent)(i0.ɵɵdirectiveInject(FormsStoreService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectFormTemplateComponent, selectors: [["lib-select-form-template"]], decls: 12, vars: 4, consts: [["mat-dialog-title", ""], [2, "display", "flex", "flex-direction", "column", "height", "calc(100% - 150px)", "justify-content", "center", "align-items", "center", "padding", "24px"], [3, "align"], ["mat-stroked-button", "", 2, "width", "100%", 3, "click"], [2, "margin-bottom", "16px"], [1, "form-template-list"], [1, "form-list-item", 3, "matTooltip", "mat-elevation-z1"], [1, "form-list-item", 3, "click", "matTooltip"], ["matListItemAvatar", "", 3, "src", "alt"], ["matListItemTitle", "", 1, "form-item-content"], [1, "form-title"], [1, "form-metadata"], [1, "metadata-divider"], ["color", "warn"]], template: function SelectFormTemplateComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "h2", 0);
+            i0.ɵɵtext(1, " Choose a Form Template\n");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "p");
+            i0.ɵɵtext(3, " 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. ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "mat-dialog-content");
+            i0.ɵɵtemplate(5, SelectFormTemplateComponent_Conditional_5_Template, 4, 0, "div", 1);
+            i0.ɵɵpipe(6, "async");
+            i0.ɵɵtemplate(7, SelectFormTemplateComponent_Conditional_7_Template, 6, 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(8, "mat-divider");
+            i0.ɵɵelementStart(9, "mat-dialog-actions", 2)(10, "button", 3);
+            i0.ɵɵlistener("click", function SelectFormTemplateComponent_Template_button_click_10_listener() { return ctx.close(); });
+            i0.ɵɵtext(11, " Close ");
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(i0.ɵɵpipeBind1(6, 2, ctx.selectLoadingForms$) ? 5 : 7);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("align", "end");
+        } }, dependencies: [MatModulesModule, i2.MatButton, i1.MatDialogTitle, i1.MatDialogActions, i1.MatDialogContent, i4.MatDivider, i6.MatIcon, i6$1.MatNavList, i6$1.MatListItem, i6$1.MatListItemAvatar, i6$1.MatListItemTitle, i7.MatProgressSpinner, i8.MatTooltip, CommonModule, i2$1.AsyncPipe, i2$1.TitleCasePipe, DaysAgoPipe], styles: ["p[_ngcontent-%COMP%]{max-width:368px;padding-right:28px;padding-left:28px}h2[_ngcontent-%COMP%]{margin-bottom:0}.form-list-item[_ngcontent-%COMP%]{margin:0;border-radius:8px!important;transition:background-color .2s ease;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));height:fit-content!important;min-width:280px;max-width:none;padding-top:8px;padding-bottom:8px}.form-metadata[_ngcontent-%COMP%]{color:#0009;font-size:14px;line-height:normal;display:flex}.form-metadata[_ngcontent-%COMP%]   .metadata-divider[_ngcontent-%COMP%]{margin:0 8px}.form-metadata[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{display:inline-flex;gap:4px}.form-metadata[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{font-size:14px;height:14px;width:14px}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectFormTemplateComponent, [{
+        type: Component,
+        args: [{ selector: 'lib-select-form-template', standalone: true, imports: [MatModulesModule, CommonModule, DaysAgoPipe], template: "<h2 mat-dialog-title>\r\n    Choose a Form Template\r\n</h2>\r\n\r\n    <p>\r\n        Select a pre-built form template to start with. You can customize and save it as your own form after copying \r\n        it to the editor.\r\n    </p>\r\n\r\n    <mat-dialog-content>\r\n        \r\n    @if(selectLoadingForms$ |async){\r\n        <div style=\"display: flex; flex-direction: column; height: calc(100% - 150px); justify-content: center; align-items: center; padding:24px\">\r\n            <mat-spinner style=\"margin-bottom: 16px;\"></mat-spinner>\r\n            <span>\r\n                Loading form templates...\r\n            </span>\r\n        </div>\r\n    }@else {\r\n        <mat-nav-list class=\"form-template-list\">\r\n            @for (form of selectForms$|async; track form._id) {\r\n                     \r\n        <mat-list-item \r\n   (click)=\"selectForm(form)\"\r\n        [matTooltip]=\"'Click to select this template'\"\r\n\r\n         \r\n          [class.mat-elevation-z1]=\"true\"\r\n  \r\n        class=\"form-list-item\">\r\n        <img  [class.error]=\"form.errors.length > 0\" \r\n        matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\" [alt]=\"'form image ' + form.formTitle\">\r\n        <div matListItemTitle class=\"form-item-content\">\r\n          <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n          <div class=\"form-metadata\">\r\n          \r\n              @if(form.errors.length > 0) {\r\n                <span><mat-icon color=\"warn\">error</mat-icon>   <small>{{ form.errors.length}}</small></span>\r\n                <span class=\"metadata-divider\">\u2022</span>\r\n              }\r\n              <span><mat-icon>add_circle_outline</mat-icon> <small>{{ form.createdAt | daysAgo }}</small> </span>\r\n              <span class=\"metadata-divider\">\u2022</span>\r\n              <span><mat-icon>update</mat-icon><small> {{ form.updatedAt | daysAgo }}</small></span>\r\n             \r\n       \r\n           \r\n          </div>\r\n        </div>\r\n\r\n      </mat-list-item>\r\n      \r\n         \r\n            }\r\n        </mat-nav-list>\r\n        @if((selectForms$|async)?.length === 0){\r\n            <p>\r\n                No form templates available.\r\n            </p>\r\n        }\r\n       \r\n    }\r\n    \r\n    </mat-dialog-content>\r\n\r\n    <mat-divider></mat-divider>\r\n<mat-dialog-actions [align]=\"'end'\">\r\n    <button style=\"width: 100%;\" mat-stroked-button (click)=\"close()\">\r\n        Close\r\n    </button>\r\n  </mat-dialog-actions>", styles: ["p{max-width:368px;padding-right:28px;padding-left:28px}h2{margin-bottom:0}.form-list-item{margin:0;border-radius:8px!important;transition:background-color .2s ease;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));height:fit-content!important;min-width:280px;max-width:none;padding-top:8px;padding-bottom:8px}.form-metadata{color:#0009;font-size:14px;line-height:normal;display:flex}.form-metadata .metadata-divider{margin:0 8px}.form-metadata span{display:inline-flex;gap:4px}.form-metadata span mat-icon{font-size:14px;height:14px;width:14px}\n"] }]
+    }], () => [{ type: FormsStoreService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectFormTemplateComponent, { className: "SelectFormTemplateComponent", filePath: "lib/components/form-builder/elements/select-form-template/select-form-template.component.ts", lineNumber: 19 }); })();
+
+function SubmissionAPIListItemConfig(environment) {
+    return [
+        {
+            id: '16140923-0542-4d5d-9b63-186c1e91b1a7',
+            name: SpecialElementKeys.MatOptionsApiCall,
+            editType: ElementEditorTypes.ApiCall,
+            required: true,
+            postmanCollectionConfig: {
+                collectionUrl: environment['POSTMAN_COLLECTION_URL'],
+                collectionKey: environment['POSTMAN_COLLECTION_KEY']
+            },
+            hint: `APIs are loaded from Postman collection. Configure required headers, payload format, and response mapping before use. Ensure API is documented in Postman.`,
+            deepBind: ['data'],
+            label: 'Select form submission api',
+        },
+        {
+            name: SpecialElementKeys.Default,
+            deepBind: [
+                'data',
+                'backEndConfig',
+                'minimumInputRequired',
+            ],
+            additionalTest: [
+                {
+                    testType: 'exists',
+                    deepBind: [
+                        'data',
+                        'backEndConfig',
+                        'minimumInputRequired',
+                    ],
+                }
+            ],
+            hint: `These are payload fields that are required to be filled in order to fetch data from the selected source`,
+            editType: ElementEditorTypes.RequiredInputs,
+            label: 'Set up required inputs',
+            id: "2d0f1e18-897b-4c28-97bc-3078be09f8ee"
+        },
+        {
+            name: SpecialElementKeys.Default,
+            deepBind: ['data', 'projectFormData'],
+            editType: ElementEditorTypes.Input,
+            label: 'Project form data',
+            hint: `example data:{$formValue}`,
+            id: "$2d0f1e18-897b-4c28-97bc-3078be09f8ee"
+        },
+    ];
+}
+const SubmissionAPIOtherConfig = [
+    {
+        id: "7acaa5d1-fb37-4dc0-9f1a-53b6f36534e0",
+        name: SpecialElementKeys.Default,
+        deepBind: ['submissionHandle', 'submissionMessage'],
+        editType: ElementEditorTypes.Input,
+        label: "Submission Message",
+    },
+    {
+        id: "5636c16c-be58-48d9-b701-81fe05573a39",
+        name: SpecialElementKeys.Default,
+        deepBind: ['submissionHandle', 'innerComponentShowSubmitButton'],
+        editType: ElementEditorTypes.Toggle,
+        label: "Show submit button in inner component form",
+    },
+    {
+        id: "c9103faa-eeba-4cf3-b3d0-f25fd05ccb3c",
+        name: SpecialElementKeys.Default,
+        deepBind: ['systemDefault'],
+        editType: ElementEditorTypes.Toggle,
+        label: "Is system default",
+    }
+];
+const SubmissionDialogConfig = [
+    {
+        titleIcon: 'send',
+        id: '44023662-7343-4c93-999d-fc03c54438c3',
+        title: 'Form Submission Endpoint',
+        description: `Choose where to send your form data after submission. Connect to your database, data pipeline, or
+            third-party service.`,
+        primaryKey: 'submissionAPI',
+        elements: SubmissionAPIOtherConfig
+    },
+    {
+        titleIcon: 'rule',
+        title: 'Data Validationb Rules',
+        description: `Define validation rules to ensure data quality before form submission.
+            <br>
+            <strong>Note:</strong> All validation endpoints must return a boolean value -
+            <code>true</code> indicates valid data that will be submitted.`,
+        primaryKey: 'canSubmitAPI',
+        id: 'acac6045-5b13-4c8d-a7ee-da194ebbad41',
+    }
+];
+
+const _c0 = () => [];
+const _forTrack0 = ($index, $item) => $item.id;
+const _forTrack1 = ($index, $item) => $item._id;
+function FormSubmissionsConfigComponent_For_10_Conditional_9_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "lib-t-dynamic-data-edit", 14);
+    i0.ɵɵlistener("valueChange", function FormSubmissionsConfigComponent_For_10_Conditional_9_For_1_Template_lib_t_dynamic_data_edit_valueChange_1_listener($event) { const edit_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.passFormChanges($event, edit_r2)); })("blur", function FormSubmissionsConfigComponent_For_10_Conditional_9_For_1_Template_lib_t_dynamic_data_edit_blur_1_listener($event) { const edit_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.elementBlur($event, edit_r2)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const edit_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("editorConfig", edit_r2)("data", ctx_r2.form())("validationErrors", ctx_r2.computedErrors(edit_r2)() || i0.ɵɵpureFunction0(4, _c0))("formInputs", ctx_r2.formInputs() || i0.ɵɵpureFunction0(5, _c0));
+} }
+function FormSubmissionsConfigComponent_For_10_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, FormSubmissionsConfigComponent_For_10_Conditional_9_For_1_Template, 2, 6, "div", 10, _forTrack0);
+} if (rf & 2) {
+    const panel_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵrepeater((panel_r4 == null ? null : panel_r4.elements) || i0.ɵɵpureFunction0(0, _c0));
+} }
+function FormSubmissionsConfigComponent_For_10_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 15);
+    i0.ɵɵtext(1, " No submission endpoints configured. Add one to get started. ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const panel_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵstyleProp("color", panel_r4.error ? "var(--mat-form-field-error-text-color)" : "");
+} }
+function FormSubmissionsConfigComponent_For_10_For_16_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-list-item", 16)(1, "span", 17);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 18)(4, "div", 19)(5, "small")(6, "strong");
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(8, "div", 20)(9, "small");
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "span", 21)(12, "button", 22);
+    i0.ɵɵlistener("click", function FormSubmissionsConfigComponent_For_10_For_16_Template_button_click_12_listener() { const api_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.removeSubmissionApi(api_r6)); });
+    i0.ɵɵelementStart(13, "mat-icon");
+    i0.ɵɵtext(14, "delete");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelement(15, "mat-divider");
+} if (rf & 2) {
+    const api_r6 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("color", api_r6.httpMethod === "POST" ? "green" : "blue");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", api_r6.httpMethod, " ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", api_r6.name, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", api_r6.httpEndPoint, " ");
+} }
+function FormSubmissionsConfigComponent_For_10_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-toolbar", 13)(1, "button", 23);
+    i0.ɵɵlistener("click", function FormSubmissionsConfigComponent_For_10_Conditional_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const panel_r4 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.addNewSubmitApi(panel_r4.primaryKey)); });
+    i0.ɵɵtext(2, "Add new endpoint");
+    i0.ɵɵelementEnd()();
+} }
+function FormSubmissionsConfigComponent_For_10_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-error");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const panel_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", panel_r4.error, " ");
+} }
+function FormSubmissionsConfigComponent_For_10_Conditional_19_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "lib-t-dynamic-data-edit", 14);
+    i0.ɵɵlistener("valueChange", function FormSubmissionsConfigComponent_For_10_Conditional_19_For_2_Template_lib_t_dynamic_data_edit_valueChange_0_listener($event) { const element_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.inputChange($event, element_r10)); })("blur", function FormSubmissionsConfigComponent_For_10_Conditional_19_For_2_Template_lib_t_dynamic_data_edit_blur_0_listener($event) { const element_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.elementBlur($event, element_r10)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const element_r10 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("editorConfig", element_r10)("data", ctx_r2.dataPlaceholder)("validationErrors", ctx_r2.validationErrors(element_r10))("formInputs", ctx_r2.formInputs() || i0.ɵɵpureFunction0(4, _c0));
+} }
+function FormSubmissionsConfigComponent_For_10_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵrepeaterCreate(1, FormSubmissionsConfigComponent_For_10_Conditional_19_For_2_Template, 1, 5, "lib-t-dynamic-data-edit", 24, _forTrack0);
+    i0.ɵɵelement(3, "mat-divider");
+    i0.ɵɵelementStart(4, "mat-toolbar")(5, "button", 25);
+    i0.ɵɵlistener("click", function FormSubmissionsConfigComponent_For_10_Conditional_19_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.saveSubmitApi()); });
+    i0.ɵɵtext(6, "Save");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(7, "span", 1);
+    i0.ɵɵelementStart(8, "button", 26);
+    i0.ɵɵlistener("click", function FormSubmissionsConfigComponent_For_10_Conditional_19_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.cancelSubmitApi()); });
+    i0.ɵɵtext(9, "Cancel");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.submissionApiListItemConfigElements);
+} }
+function FormSubmissionsConfigComponent_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-expansion-panel", 5)(1, "mat-expansion-panel-header")(2, "mat-panel-title")(3, "mat-icon", 6);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(6, "mat-divider", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 8);
+    i0.ɵɵelement(8, "p", 9);
+    i0.ɵɵtemplate(9, FormSubmissionsConfigComponent_For_10_Conditional_9_Template, 2, 1);
+    i0.ɵɵelementStart(10, "div", 10)(11, "mat-nav-list")(12, "h5", 11);
+    i0.ɵɵtext(13, " API Endpoints ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(14, FormSubmissionsConfigComponent_For_10_Conditional_14_Template, 2, 2, "p", 12);
+    i0.ɵɵrepeaterCreate(15, FormSubmissionsConfigComponent_For_10_For_16_Template, 16, 5, null, null, _forTrack1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(17, FormSubmissionsConfigComponent_For_10_Conditional_17_Template, 3, 0, "mat-toolbar", 13)(18, FormSubmissionsConfigComponent_For_10_Conditional_18_Template, 2, 1, "mat-error");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(19, FormSubmissionsConfigComponent_For_10_Conditional_19_Template, 10, 0, "div", 10);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const panel_r4 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("expanded", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("color", "primary");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", panel_r4.titleIcon, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", panel_r4.title, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("innerHTML", panel_r4.description, i0.ɵɵsanitizeHtml);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(((panel_r4 == null ? null : panel_r4.elements) || i0.ɵɵpureFunction0(12, _c0)).length > 0 ? 9 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("color", panel_r4.error ? "var(--mat-form-field-error-text-color)" : "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.getFormApis(panel_r4.primaryKey)().length === 0 ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.getFormApis(panel_r4.primaryKey)());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.keyInEdit !== panel_r4.primaryKey ? 17 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(panel_r4.error ? 18 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.keyInEdit === panel_r4.primaryKey ? 19 : -1);
+} }
+class FormSubmissionsConfigComponent {
+    getPanelError(panel) {
+        return computed(() => {
+            const form = this.form();
+            if (panel.primaryKey === 'submissionAPI') {
+                return (form?.submissionHandle?.submissionAPI || []).length === 0 ? 'At least one submission API is required' : undefined;
+            }
+            return undefined;
+        });
+    }
+    getFormApis(key) {
+        return computed(() => {
+            const form = this.form();
+            return form?.submissionHandle?.[key] || [];
+        });
+    }
+    // private dialogRef: MatDialogRef<FormSubmissionsConfigComponent>,
+    constructor() {
+        this.NGX_T_FORMS_CONFIG = inject(NGX_T_FORMS_CONFIG_TOKEN);
+        this.panels = computed(() => {
+            return SubmissionDialogConfig.map((panel) => {
+                const error = this.getPanelError(panel)();
+                return ({
+                    ...panel,
+                    error
+                });
+            });
+        });
+        this._data = inject(MAT_DIALOG_DATA);
+        this.store = this._data.store;
+        this.form = toSignal(this.store.selectors.selectFormInEdit$.pipe(map((form) => form?.form)), {
+            initialValue: undefined
+        });
+        this.formInputs = toSignal(this.store.formBuilderSelectors.getAllFormInputs$, {
+            initialValue: []
+        });
+        this.keyInEdit = undefined;
+        this.formValidationError = toSignal(this.store.formBuilderSelectors.formErrors$, {
+            initialValue: []
+        });
+        this.computedErrors = (element) => {
+            return computed(() => {
+                const allErrors = this.formValidationError();
+                const errors = allErrors?.filter(error => error.key === element.deepBind?.join('.')) || [];
+                return [...[], ...errors];
+            });
+        };
+        this.formInputChange = (value, ele) => this.store.actionsFormBuilder.formInputChange(ele, value);
+        this.matDialog = inject(MatDialog);
+    }
+    get submissionApiListItemConfigElements() {
+        return SubmissionAPIListItemConfig(this.NGX_T_FORMS_CONFIG).filter((el) => {
+            if (!el.additionalTest) {
+                return true;
+            }
+            return el.additionalTest.every((test) => {
+                return testAgainstItem(test, this.dataPlaceholder || { data: {} });
+            });
+        });
+    }
+    validationErrors(element) {
+        const val = validateApiDataFetchingConfiguration((this.dataPlaceholder || {})).map((error) => ({
+            message: error.message,
+            key: 'data.' + error.key
+        }));
+        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);
+    }
+    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.info("[Admin Panel Input Element Editor] pass form changes", event);
+        this.formInputChange(event, element);
+    }
+    elementConfigurationChanged(value, ele) {
+        //
+        const applyTo = { ...this.dataPlaceholder };
+        if (ele.clearOnChange) {
+            ele.clearOnChange.forEach((clear) => {
+                assignDeepPropertyToObject(applyTo, clear, undefined);
+            });
+        }
+        if (ele.deepBind) {
+            assignDeepPropertyToObject(applyTo, ele.deepBind, value);
+        }
+        this.dataPlaceholder = {
+            ...applyTo
+        };
+        // const formClass= this.formBuilder$$.value
+        // const form = formClass?.form
+        // if (form) {
+        //   formClass?.refreshController(form)
+        // }
+        // this.formBuilder$$.value?.syncInputController();
+        // this.appStatesService.TFormBuilderService$.next(formClass)
+    }
+    addNewSubmitApi(submision) {
+        this.dataPlaceholder = {
+            data: {}
+        };
+        this.keyInEdit = submision;
+    }
+    saveSubmitApi() {
+        this.store.actionsFormBuilder.saveSubmitApi(this.dataPlaceholder, this.keyInEdit);
+        this.dataPlaceholder = undefined;
+        this.keyInEdit = undefined;
+    }
+    removeSubmissionApi(api) {
+        this.store.actionsFormBuilder.removeSubmissionApi(api, this.keyInEdit);
+        this.dataPlaceholder = undefined;
+        this.keyInEdit = undefined;
+    }
+    cancelSubmitApi() {
+        this.dataPlaceholder = undefined;
+        this.keyInEdit = undefined;
+    }
+    close() {
+        //close mat dialog
+        this.matDialog.closeAll();
+    }
+    static { this.ɵfac = function FormSubmissionsConfigComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormSubmissionsConfigComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormSubmissionsConfigComponent, selectors: [["app-form-submissions-config"]], decls: 11, vars: 0, consts: [[1, "container"], [1, "spacer"], ["mat-icon-button", "", "mat-dialog-close", ""], [2, "padding", "0px 8px 8px 8px"], ["multi", ""], [3, "expanded"], [2, "margin-right", "8px", 3, "color"], [2, "position", "absolute", "bottom", "0px", "width", "100%", "left", "0"], [1, "content"], [1, "description", 2, "color", "var(--mat-text-secondary-color)", "margin-bottom", "16px", 3, "innerHTML"], [2, "background", "azure", "padding", "8px"], ["matSubheader", "", 1, "api-list-header"], [1, "no-api-list", 3, "color"], [2, "background", "none"], [3, "valueChange", "blur", "editorConfig", "data", "validationErrors", "formInputs"], [1, "no-api-list"], [1, "api-list-item"], ["matListItemIcon", "", 1, "tag"], ["matListItemTitle", ""], [2, "line-height", "normal"], [2, "line-height", "normal", "opacity", "0.6"], ["matListItemMeta", ""], ["mat-icon-button", "", 3, "click"], ["color", "primary", "mat-stroked-button", "", 2, "width", "100%", 3, "click"], [3, "editorConfig", "data", "validationErrors", "formInputs"], ["mat-flat-button", "", "color", "primary", 3, "click"], ["mat-button", "", "color", "warn", 3, "click"]], template: function FormSubmissionsConfigComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "mat-toolbar");
+            i0.ɵɵtext(2, " Form Submission Configuration ");
+            i0.ɵɵelement(3, "span", 1);
+            i0.ɵɵelementStart(4, "button", 2)(5, "mat-icon");
+            i0.ɵɵtext(6, " close ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(7, "section", 3)(8, "mat-accordion", 4);
+            i0.ɵɵrepeaterCreate(9, FormSubmissionsConfigComponent_For_10_Template, 20, 13, "mat-expansion-panel", 5, _forTrack0);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(9);
+            i0.ɵɵrepeater(ctx.panels());
+        } }, dependencies: [CommonModule, MatModulesModule, i2.MatButton, i2.MatIconButton, i1.MatDialogClose, i4.MatDivider, i5.MatAccordion, i5.MatExpansionPanel, i5.MatExpansionPanelHeader, i5.MatExpansionPanelTitle, i6.MatIcon, i6$1.MatNavList, i6$1.MatListItem, i6$1.MatListItemIcon, i6$1.MatListSubheaderCssMatStyler, i6$1.MatListItemTitle, i6$1.MatListItemMeta, i3.MatError, i9.MatToolbar, TDynamicDataEditComponent], styles: [".api-list-item[_ngcontent-%COMP%]{background:var(--mat-toolbar-container-background-color, var(--mat-app-surface))}.tag[_ngcontent-%COMP%]{width:fit-content;font-size:small;text-align:center}.api-list-header[_ngcontent-%COMP%]{padding-left:16px}.no-api-list[_ngcontent-%COMP%]{padding-left:16px;padding-right:16px;text-align:center;font-style:italic;font-size:small}.container[_ngcontent-%COMP%]{max-width:500px;max-height:calc(100vh - 24px);background:var(--mat-toolbar-container-background-color, var(--mat-app-surface));margin:0;border:solid 1px var(--mat-divider-color, var(--mat-app-outline))}.description[_ngcontent-%COMP%]{margin-top:16px;opacity:.6px}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormSubmissionsConfigComponent, [{
+        type: Component,
+        args: [{ selector: 'app-form-submissions-config', standalone: true, imports: [CommonModule, MatModulesModule, TDynamicDataEditComponent], template: "<div class=\"container\">\r\n  <mat-toolbar>\r\n\r\n    Form Submission Configuration\r\n    <span class=\"spacer\"></span>\r\n    <button mat-icon-button mat-dialog-close>\r\n      <mat-icon>\r\n        close\r\n      </mat-icon>\r\n    </button>\r\n  </mat-toolbar>\r\n\r\n  <section style=\"padding: 0px 8px 8px 8px;\">\r\n    <mat-accordion multi>\r\n      @for (panel of panels() ; track panel.id) {\r\n      <mat-expansion-panel [expanded]=\"true\">\r\n        <mat-expansion-panel-header>\r\n          <mat-panel-title> <mat-icon [color]=\"'primary'\" style=\"margin-right: 8px;\">\r\n              {{panel.titleIcon}}\r\n            </mat-icon>\r\n            {{panel.title}}\r\n          </mat-panel-title>\r\n          <mat-divider style=\"    position: absolute;\r\n      bottom: 0px;\r\n      width: 100%;\r\n      left: 0;\"></mat-divider>\r\n        </mat-expansion-panel-header>\r\n        <div class=\"content\">\r\n          <p class=\"description\" [innerHTML]=\"panel.description\"\r\n            style=\"color: var(--mat-text-secondary-color); margin-bottom: 16px;\">\r\n          </p>\r\n          @if ((panel?.elements||[]).length>0) {\r\n          @for (edit of (panel?.elements||[]); track edit.id) {\r\n          <div style=\"background:azure;padding: 8px;\">\r\n            <lib-t-dynamic-data-edit [editorConfig]=\"edit\" [data]=\"form()\"\r\n              [validationErrors]=\"(computedErrors(edit)())||[]\" (valueChange)=\"passFormChanges($event,edit)\"\r\n              [formInputs]=\"(formInputs())||[]\" (blur)=\"elementBlur($event,edit)\">\r\n            </lib-t-dynamic-data-edit>\r\n          </div>\r\n          }\r\n          }\r\n          <div style=\"background:azure;padding: 8px;\">\r\n\r\n            <mat-nav-list>\r\n              <h5 matSubheader [style.color]=\"(panel.error)?'var(--mat-form-field-error-text-color)':''\"\r\n                class=\"api-list-header\">\r\n\r\n                API Endpoints\r\n              </h5>\r\n              @if((getFormApis(panel.primaryKey)()).length === 0){\r\n              <p [style.color]=\"(panel.error)?'var(--mat-form-field-error-text-color)':''\" class=\"no-api-list\">\r\n                No submission endpoints configured. Add one to get started.\r\n              </p>\r\n              }\r\n              @for (api of getFormApis(panel.primaryKey)(); track api._id) {\r\n\r\n              <mat-list-item class=\"api-list-item\">\r\n                <span matListItemIcon class=\"tag\" [style.color]=\"api.httpMethod === 'POST' ? 'green' : 'blue'\">\r\n\r\n                  {{api.httpMethod}}\r\n\r\n                </span>\r\n\r\n                <div matListItemTitle>\r\n                  <div style=\"line-height: normal;\">\r\n                    <small>\r\n                      <strong>\r\n                        {{api.name}}\r\n                      </strong>\r\n                    </small>\r\n\r\n                  </div>\r\n                  <div style=\"line-height: normal;opacity: 0.6;\">\r\n                    <small>\r\n                      {{api.httpEndPoint}}\r\n                    </small>\r\n                  </div>\r\n                </div>\r\n                <span matListItemMeta>\r\n                  <button (click)=\"removeSubmissionApi(api)\" mat-icon-button>\r\n                    <mat-icon>delete</mat-icon>\r\n                  </button>\r\n                </span>\r\n              </mat-list-item>\r\n              <mat-divider>\r\n              </mat-divider>\r\n\r\n\r\n\r\n              }\r\n\r\n\r\n            </mat-nav-list>\r\n\r\n            @if( keyInEdit !== panel.primaryKey ){\r\n            <mat-toolbar style=\"background:none\">\r\n              <button (click)=\"addNewSubmitApi(panel.primaryKey)\" style=\"width:100% ;\" color=\"primary\"\r\n                mat-stroked-button>Add new\r\n                endpoint</button>\r\n            </mat-toolbar>\r\n            }\r\n            @if ((panel.error)) {\r\n\r\n            <mat-error>\r\n              {{panel.error}}\r\n            </mat-error>\r\n\r\n            }\r\n\r\n          </div>\r\n\r\n\r\n\r\n          @if( keyInEdit === panel.primaryKey ){\r\n          <div style=\"background:azure;padding: 8px;\">\r\n            @for (element of submissionApiListItemConfigElements; track element.id) {\r\n\r\n\r\n            <lib-t-dynamic-data-edit [editorConfig]=\"element\" [data]=\"dataPlaceholder\"\r\n              [validationErrors]=\"validationErrors(element)\" (valueChange)=\"inputChange($event,element)\"\r\n              [formInputs]=\"(formInputs())||[]\" (blur)=\"elementBlur($event,element)\"></lib-t-dynamic-data-edit>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <mat-toolbar>\r\n              <button mat-flat-button (click)=\"saveSubmitApi()\" color=\"primary\">Save</button>\r\n              <span class=\"spacer\"></span>\r\n              <button mat-button (click)=\"cancelSubmitApi()\" color=\"warn\">Cancel</button>\r\n            </mat-toolbar>\r\n          </div>\r\n\r\n          }\r\n\r\n\r\n\r\n        </div>\r\n      </mat-expansion-panel>\r\n      }\r\n\r\n\r\n\r\n    </mat-accordion>\r\n  </section>\r\n\r\n\r\n</div>", styles: [".api-list-item{background:var(--mat-toolbar-container-background-color, var(--mat-app-surface))}.tag{width:fit-content;font-size:small;text-align:center}.api-list-header{padding-left:16px}.no-api-list{padding-left:16px;padding-right:16px;text-align:center;font-style:italic;font-size:small}.container{max-width:500px;max-height:calc(100vh - 24px);background:var(--mat-toolbar-container-background-color, var(--mat-app-surface));margin:0;border:solid 1px var(--mat-divider-color, var(--mat-app-outline))}.description{margin-top:16px;opacity:.6px}\n"] }]
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormSubmissionsConfigComponent, { className: "FormSubmissionsConfigComponent", filePath: "lib/components/form-builder/elements/form-submissions-config/form-submissions-config.component.ts", lineNumber: 30 }); })();
+
+const FormsBuilderMenuComponent_ng_container_0_div_17_Defer_3_DepsFn = () => [i12.CdkCopyToClipboard, import('@angular/cdk/drag-drop').then(m => m.CdkDrag), i2$2.CdkDragHandle, i2.MatButton, i3$1.MatCard, i3$1.MatCardActions, i3$1.MatCardContent, i4.MatDivider, i6.MatIcon, i9.MatToolbar, i8.MatTooltip, import('./ngx-t-forms-form-json-view.component-CqtTYCRH.mjs').then(m => m.FormJsonViewComponent)];
+function FormsBuilderMenuComponent_ng_container_0_For_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "div", 8)(3, "mat-error")(4, "small");
+    i0.ɵɵtext(5, " Invalid configurations ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const item_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r3.label, " ");
+} }
+function FormsBuilderMenuComponent_ng_container_0_For_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const item_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", item_r3.label, " ");
+} }
+function FormsBuilderMenuComponent_ng_container_0_For_10_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 6);
+    i0.ɵɵlistener("click", function FormsBuilderMenuComponent_ng_container_0_For_10_Template_button_click_0_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; return i0.ɵɵresetView(item_r3 == null ? null : item_r3.action()); });
+    i0.ɵɵelementStart(1, "mat-icon");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtemplate(4, FormsBuilderMenuComponent_ng_container_0_For_10_Conditional_4_Template, 6, 1)(5, FormsBuilderMenuComponent_ng_container_0_For_10_Conditional_5_Template, 1, 1);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(6, "mat-divider");
+} if (rf & 2) {
+    const item_r3 = ctx.$implicit;
+    i0.ɵɵproperty("matTooltip", item_r3.hint);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r3.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(item_r3.errors ? 4 : 5);
+} }
+function FormsBuilderMenuComponent_ng_container_0_div_17_Defer_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-card", 10)(1, "mat-toolbar", 11)(2, "span");
+    i0.ɵɵtext(3, " Json Form Value ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "span", 12);
+    i0.ɵɵelementStart(5, "mat-icon", 13);
+    i0.ɵɵtext(6, " drag_indicator ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(7, "mat-divider", 14);
+    i0.ɵɵelementStart(8, "mat-card-content", 15);
+    i0.ɵɵelement(9, "app-form-json-view");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "mat-card-actions");
+    i0.ɵɵelement(11, "span", 12);
+    i0.ɵɵelementStart(12, "button", 16);
+    i0.ɵɵlistener("click", function FormsBuilderMenuComponent_ng_container_0_div_17_Defer_1_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.showJson = false); });
+    i0.ɵɵtext(13, " Close ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 17);
+    i0.ɵɵtext(15, " Copy ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const vm_r6 = i0.ɵɵnextContext(2).ngIf;
+    i0.ɵɵadvance(14);
+    i0.ɵɵproperty("cdkCopyToClipboard", vm_r6.formCopy || "");
+} }
+function FormsBuilderMenuComponent_ng_container_0_div_17_DeferPlaceholder_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵelement(1, "mat-spinner", 19);
+    i0.ɵɵelementEnd();
+} }
+function FormsBuilderMenuComponent_ng_container_0_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵtemplate(1, FormsBuilderMenuComponent_ng_container_0_div_17_Defer_1_Template, 16, 1)(2, FormsBuilderMenuComponent_ng_container_0_div_17_DeferPlaceholder_2_Template, 2, 0);
+    i0.ɵɵdefer(3, 1, FormsBuilderMenuComponent_ng_container_0_div_17_Defer_3_DepsFn, null, 2);
+    i0.ɵɵdeferOnViewport(0, -1);
+    i0.ɵɵelementEnd();
+} }
+function FormsBuilderMenuComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "button", 2);
+    i0.ɵɵtext(2, " Config ");
+    i0.ɵɵelementStart(3, "mat-icon");
+    i0.ɵɵtext(4, " settings_suggest ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "mat-menu", null, 0)(7, "div", 3);
+    i0.ɵɵtext(8, "Form edit options");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(9, FormsBuilderMenuComponent_ng_container_0_For_10_Template, 7, 3, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(11, "button", 4);
+    i0.ɵɵlistener("click", function FormsBuilderMenuComponent_ng_container_0_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.showJson = !ctx_r3.showJson); });
+    i0.ɵɵelementStart(12, "mat-icon");
+    i0.ɵɵtext(13, "data_object");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span")(15, "div");
+    i0.ɵɵtext(16, " Show json ");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵtemplate(17, FormsBuilderMenuComponent_ng_container_0_div_17_Template, 5, 0, "div", 5);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const vm_r6 = ctx.ngIf;
+    const configMenu_r7 = i0.ɵɵreference(6);
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("matBadge", "!")("matTooltip", vm_r6.configHasErrors === false ? "\n    Click to view form configuration \n    " : "Click to fix or add missing form configurations")("matBadgeHidden", !!vm_r6.configHasErrors === false)("matMenuTriggerFor", configMenu_r7);
+    i0.ɵɵadvance(8);
+    i0.ɵɵrepeater(vm_r6.items);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("matTooltip", ctx_r3.showJson ? "Hide json" : "Show json");
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngIf", ctx_r3.showJson);
+} }
+class FormsBuilderMenuComponent {
+    constructor(store) {
+        this.store = store;
+        this.form$ = this.store.selectors.selectFormInEdit$.pipe(map((form) => form?.form));
+        this.showJson = false;
+        this.formCopy$ = this.form$.pipe(map((form) => JSON.stringify(form || {})));
+        this.dialog = inject(MatDialog);
+        this.applyFormTemplate = (form) => this.store.actionsFormBuilder.applyFormTemplate(form);
+        this.errors$ = this.store.formBuilderSelectors.formErrors$;
+        this.configHasErrors$ = this.errors$.pipe(map(errors => errors?.some(error => error.key.split('.')?.[0] === 'submissionHandle')));
+        this.items$ = this.configHasErrors$.pipe(map(configHasErrors => {
+            return [
+                {
+                    label: "Templates",
+                    icon: "content_copy",
+                    hint: "Select a form to apply as a template",
+                    action: () => this.openDialog()
+                },
+                {
+                    label: "Submission Config",
+                    hint: "Setup form submission api and other configurations",
+                    icon: "api",
+                    errors: configHasErrors,
+                    action: () => this.openFormSubmissionDialog()
+                },
+            ];
+        }));
+        this.vm$ = combineLatest([
+            this.items$,
+            this.form$,
+            this.formCopy$,
+            this
+                .configHasErrors$
+        ]).pipe(map(([items, form, formCopy, configHasErrors]) => ({ items, form, formCopy, configHasErrors })));
+    }
+    openDialog() {
+        const dialogRef = this.dialog.open(SelectFormTemplateComponent);
+        dialogRef.afterClosed().pipe(take(1)).subscribe(form => {
+            if (form) {
+                this.applyFormTemplate(form);
+            }
+        });
+    }
+    openFormSubmissionDialog() {
+        const dialogRef = this.dialog.open(FormSubmissionsConfigComponent, {
+            data: {
+                store: this.store
+            }
+        });
+        dialogRef.afterClosed().pipe(take(1)).subscribe(data => {
+            if (data) {
+                console.log(data);
+            }
+        });
+    }
+    static { this.ɵfac = function FormsBuilderMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormsBuilderMenuComponent)(i0.ɵɵdirectiveInject(FormsStoreService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormsBuilderMenuComponent, selectors: [["app-forms-builder-menu"]], decls: 2, vars: 3, consts: [["configMenu", "matMenu"], [4, "ngIf"], ["matBadgeColor", "warn", "mat-flat-button", "", 3, "matBadge", "matTooltip", "matBadgeHidden", "matMenuTriggerFor"], ["mat-subheader", "", 2, "padding-left", "16px"], ["mat-menu-item", "", 3, "click", "matTooltip"], ["class", "DragBoundary", 4, "ngIf"], ["matTooltipPosition", "right", "mat-menu-item", "", 2, "padding-top", "4px", "padding-bottom", "4px", 3, "click", "matTooltip"], ["ks", "", 2, "line-height", "normal"], [2, "line-height", "normal"], [1, "DragBoundary"], ["cdkDragBoundary", "DragBoundary", "cdkDrag", "", 1, "menuCard"], [2, "background", "var(--mat-sidenav-content-background-color)", "color", "var(--mdc-filled-button-label-text-color, var(--mat-app-on-primary))"], [1, "spacer"], ["cdkDragHandle", "", 2, "margin", "8px", "color", "var(--mat-divider-color, var(--mat-app-outline))"], [2, "margin-bottom", "12px"], [2, "overflow-y", "auto", "max-height", "calc(100vh - 150px)"], ["mat-flat-button", "", 3, "click"], ["color", "primary", "matTooltip", "Copy json to clipboard", "mat-flat-button", "", 3, "cdkCopyToClipboard"], [2, "padding", "50px", "display", "flex", "justify-content", "center", "align-items", "center", "text-align", "center"], ["diameter", "20"]], template: function FormsBuilderMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, FormsBuilderMenuComponent_ng_container_0_Template, 18, 6, "ng-container", 1);
+            i0.ɵɵpipe(1, "async");
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.vm$));
+        } }, dependencies: [CommonModule, i2$1.NgIf, i2$1.AsyncPipe, MatModulesModule, i3$2.MatBadge, i2.MatButton, i4.MatDivider, i6.MatIcon, i6$1.MatListSubheaderCssMatStyler, i6$2.MatMenu, i6$2.MatMenuItem, i6$2.MatMenuTrigger, i7.MatProgressSpinner, i3.MatError, i8.MatTooltip], styles: [".menuCard[_ngcontent-%COMP%]{width:fit-content;margin:0;resize:horizontal;z-index:2}.DragBoundary[_ngcontent-%COMP%]{position:absolute;left:0;top:74px;width:100%;height:calc(100% - 74px)}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadataAsync(FormsBuilderMenuComponent, () => [import('@angular/cdk/drag-drop').then(m => m.CdkDrag), import('./ngx-t-forms-form-json-view.component-CqtTYCRH.mjs').then(m => m.FormJsonViewComponent)], (CdkDrag, FormJsonViewComponent) => { i0.ɵsetClassMetadata(FormsBuilderMenuComponent, [{
+        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"] }]
+    }], () => [{ type: FormsStoreService }], null); }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormsBuilderMenuComponent, { className: "FormsBuilderMenuComponent", filePath: "lib/components/form-builder/elements/forms-builder-menu/forms-builder-menu.component.ts", lineNumber: 22 }); })();
+
+export { FormsBuilderMenuComponent };
+//# sourceMappingURL=ngx-t-forms-forms-builder-menu.component-DbxEBvpt.mjs.map