ngx-t-forms 0.0.1

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

@@ -0,0 +1,347 @@
+import * as i2 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-B-w5W1gG.mjs';
+import { of, map, take } from 'rxjs';
+import * as i1 from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import * as i3 from '@angular/material/button';
+import * as i5 from '@angular/material/divider';
+import * as i5$1 from '@angular/material/icon';
+import * as i6 from '@angular/material/list';
+import * as i8 from '@angular/material/progress-spinner';
+import * as i8$1 from '@angular/material/tooltip';
+import { ElementEditorTypes, SpecialElementKeys, validateApiDataFetchingConfiguration } from 'ngx-t-forms-types';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i3$1 from '@angular/material/expansion';
+import * as i4 from '@angular/material/form-field';
+import * as i9 from '@angular/material/toolbar';
+import * as i3$3 from '@angular/material/badge';
+import * as i6$1 from '@angular/material/menu';
+import * as i12 from '@angular/cdk/clipboard';
+import * as i2$1 from '@angular/cdk/drag-drop';
+import * as i3$2 from '@angular/material/card';
+
+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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SelectFormTemplateComponent, deps: [{ token: FormsStoreService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SelectFormTemplateComponent, isStandalone: true, selector: "lib-select-form-template", ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SelectFormTemplateComponent, decorators: [{
+            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"] }]
+        }], ctorParameters: () => [{ type: FormsStoreService }] });
+
+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',
+    }
+];
+
+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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormSubmissionsConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FormSubmissionsConfigComponent, isStandalone: true, selector: "app-form-submissions-config", ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i6.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i6.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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: "19.2.1", ngImport: i0, type: FormSubmissionsConfigComponent, decorators: [{
+            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"] }]
+        }], ctorParameters: () => [] });
+
+class FormsBuilderMenuComponent {
+    constructor(store) {
+        this.store = store;
+        this.form = toSignal(this.store.selectors.selectFormInEdit$.pipe(map((form) => form?.form)), {
+            initialValue: undefined
+        });
+        this.showJson = false;
+        this.items = computed(() => {
+            const configHasErrors = this.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.formCopy = computed(() => {
+            const form = this.form();
+            return JSON.stringify(form || {});
+        });
+        this.dialog = inject(MatDialog);
+        this.applyFormTemplate = (form) => this.store.actionsFormBuilder.applyFormTemplate(form);
+        this.errors = toSignal(this.store.formBuilderSelectors.formErrors$, {
+            initialValue: []
+        });
+        this.configHasErrors = computed(() => {
+            const errors = this.errors();
+            return errors?.some((error) => error.key.split('.')?.[0] === 'submissionHandle');
+        });
+    }
+    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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormsBuilderMenuComponent, deps: [{ token: FormsStoreService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FormsBuilderMenuComponent, isStandalone: true, selector: "app-forms-builder-menu", ngImport: i0, template: "<button [matBadge]=\"'!'\" matBadgeColor=\"warn\" [matTooltip]=\"(configHasErrors()) === false?'\r\nClick to view form configuration \r\n':'Click to fix or add missing form configurations'\" [matBadgeHidden]=\"!!(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 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]=\"(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>", 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.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: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i6$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.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: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], deferBlockDependencies: [() => [i12.CdkCopyToClipboard, import('@angular/cdk/drag-drop').then(m => m.CdkDrag), i2$1.CdkDragHandle, i3.MatButton, i3$2.MatCard, i3$2.MatCardActions, i3$2.MatCardContent, i5.MatDivider, i5$1.MatIcon, i9.MatToolbar, i8$1.MatTooltip, import('./ngx-t-forms-form-json-view.component-DwEXL85v.mjs').then(m => m.FormJsonViewComponent)]] }); }
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.1", ngImport: i0, type: FormsBuilderMenuComponent, resolveDeferredDeps: () => [import('@angular/cdk/drag-drop').then(m => m.CdkDrag), import('./ngx-t-forms-form-json-view.component-DwEXL85v.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: "<button [matBadge]=\"'!'\" matBadgeColor=\"warn\" [matTooltip]=\"(configHasErrors()) === false?'\r\nClick to view form configuration \r\n':'Click to fix or add missing form configurations'\" [matBadgeHidden]=\"!!(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 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]=\"(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>", 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-Bo1CKQsC.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-forms-builder-menu.component-Bo1CKQsC.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 } from '@angular/core';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { CommonModule } from '@angular/common';\r\nimport { 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 { of } from 'rxjs';\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\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.css'\r\n})\r\nexport class SelectFormTemplateComponent {\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  this.store.effects.loadForms$(of())\r\n}\r\nclose(){\r\n  this.dialogRef.close();\r\n}\r\nselectForm(form:FormInterface){\r\n  console.log(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","<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\">•</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\">•</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>","\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:`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    },\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 Validationb 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     \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    console.info(\"[Admin Panel Input Element Editor] element blur\", event)\r\n  }\r\n  inputChange(event: any, element: ElementEditorInnerSectionElementInterface) {\r\n    console.info(\"[Admin Panel Input Element Editor] input changed\", event)\r\n\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    console.info(\"[Admin Panel Input Element Editor] pass form changes\", event)\r\n    this.formInputChange(event, element)\r\n  }\r\n  formInputChange = (value: any,\r\n    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\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) {\r\n    this.store.actionsFormBuilder.removeSubmissionApi(api, this.keyInEdit)\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=\"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>","import { CommonModule } from '@angular/common';\r\nimport {  Component, computed, 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 { 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\nimport { toSignal } from '@angular/core/rxjs-interop';\r\nimport { FormInterface } from 'ngx-t-forms-types';\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 = toSignal(this.store.selectors.selectFormInEdit$.pipe(map((form) => form?.form)),\r\n    {\r\n      initialValue: undefined\r\n    })\r\n\r\n\r\n  \r\n  showJson = false;\r\n  constructor(private store: FormsStoreService) { }\r\n  items = computed(()=>{\r\n    const configHasErrors = this.configHasErrors()\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 formCopy = computed(()=>{\r\n  const form = this.form()\r\n    return  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  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        console.log(data)\r\n\r\n      }\r\n    });\r\n  }\r\n errors = toSignal(this.store.formBuilderSelectors.formErrors$,{\r\n    initialValue:[]\r\n  \r\n })\r\n\r\n  configHasErrors =computed(()=> {\r\n    const errors = this.errors()\r\n    return  errors?.some((error) => error.key.split('.')?.[0] === 'submissionHandle')\r\n  })\r\n}\r\n","<button [matBadge]=\"'!'\" matBadgeColor=\"warn\" [matTooltip]=\"(configHasErrors()) === false?'\r\nClick to view form configuration \r\n':'Click to fix or add missing form configurations'\" [matBadgeHidden]=\"!!(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 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]=\"(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>"],"names":["i1.FormsStoreService","i2","i3","i4","i5","i7","i8","i6","i9","i10","i11","i13","i14","i15"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;MAkBa,2BAA2B,CAAA;AAMxC,IAAA,WAAA,CAAoB,KAAuB,EAAA;QAAvB,IAAK,CAAA,KAAA,GAAL,KAAK;QAJzB,IAAY,CAAA,YAAA,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY;QAChD,IAAmB,CAAA,mBAAA,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,mBAAmB;AACrD,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,EAAC,YAA0C,EAAC;AAC9D,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAM,eAAe,CAAC;QAE1C,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC;;IAErC,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;AAExB,IAAA,UAAU,CAAC,IAAkB,EAAA;AAC3B,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;AACjB,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC;;AAE1B,IAAA,aAAa,CAAC,SAAgB,EAAA;AAC5B,QAAA,OAAO,SAAS,CAAC,SAAS,CAAC;;8GAjBlB,2BAA2B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,oFClBxC,4/EAqEuB,EAAA,MAAA,EAAA,CAAA,4kBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDvDX,gBAAgB,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,6GAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,8DAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,8DAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,wDAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,4IAAE,WAAW,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAI1C,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAPvC,SAAS;+BACE,0BAA0B,EAAA,UAAA,EACxB,IAAI,EACP,OAAA,EAAA,CAAC,gBAAgB,EAAE,YAAY,EAAE,WAAW,CAAC,EAAA,QAAA,EAAA,4/EAAA,EAAA,MAAA,EAAA,CAAA,4kBAAA,CAAA,EAAA;;;AEPlD,SAAW,2BAA2B,CAAE,WAA4B,EAAA;IACxE,OAAO;AAEH,QAAA;AACE,YAAA,EAAE,EAAE,sCAAsC;YAC1C,IAAI,EAAE,kBAAkB,CAAC,iBAAiB;YAC1C,QAAQ,EAAE,kBAAkB,CAAC,OAAO;AACpC,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,uBAAuB,EAAE;AACvB,gBAAA,aAAa,EAAE,WAAW,CAAC,wBAAwB,CAAW;AAC9D,gBAAA,aAAa,EAAE,WAAW,CAAC,wBAAwB;AACpD,aAAA;AACD,YAAA,IAAI,EAAE,CAA4J,0JAAA,CAAA;YAClK,QAAQ,EAAE,CAAC,MAAM,CAAC;AAClB,YAAA,KAAK,EAAE,4BAA4B;AACpC,SAAA;AAED,QAAA;YACE,IAAI,EAAE,kBAAkB,CAAC,OAAO;AAChC,YAAA,QAAQ,EAAE;gBAER,MAAM;gBACN,eAAe;gBACf,sBAAsB;AACvB,aAAA;AACD,YAAA,cAAc,EAAE;AACd,gBAAA;AACE,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,QAAQ,EAAE;wBAER,MAAM;wBACN,eAAe;wBACf,sBAAsB;AACvB,qBAAA;AACiC;AAErC,aAAA;AACD,YAAA,IAAI,EAAE,CAAyG,uGAAA,CAAA;YAC/G,QAAQ,EAAE,kBAAkB,CAAC,cAAc;AAC3C,YAAA,KAAK,EAAE,wBAAwB;AAC/B,YAAA,EAAE,EAAE;AACL,SAAA;AACD,QAAA;YACE,IAAI,EAAE,kBAAkB,CAAC,OAAO;AAChC,YAAA,QAAQ,EAAE,CAAC,MAAM,EAAC,iBAAiB,CAAC;YACpC,QAAQ,EAAE,kBAAkB,CAAC,KAAK;AAClC,YAAA,KAAK,EAAE,mBAAmB;AAC1B,YAAA,IAAI,EAAC,CAA2B,yBAAA,CAAA;AAChC,YAAA,EAAE,EAAE;AACP,SAAA;KACA;AAAA;AACE,MAAM,wBAAwB,GAAiD;AAClF,IAAA;AACI,QAAA,EAAE,EAAC,sCAAsC;QACzC,IAAI,EAAC,kBAAkB,CAAC,OAAO;AAC/B,QAAA,QAAQ,EAAC,CAAC,kBAAkB,EAAC,mBAAmB,CAAC;QACjD,QAAQ,EAAC,kBAAkB,CAAC,KAAK;AACjC,QAAA,KAAK,EAAC,oBAAoB;AAC7B,KAAA;AACD,IAAA;AACI,QAAA,EAAE,EAAC,sCAAsC;QACzC,IAAI,EAAC,kBAAkB,CAAC,OAAO;AAC/B,QAAA,QAAQ,EAAC,CAAC,kBAAkB,EAAC,gCAAgC,CAAC;QAC9D,QAAQ,EAAC,kBAAkB,CAAC,MAAM;AAClC,QAAA,KAAK,EAAC,4CAA4C;AACrD,KAAA;AACD,IAAA;AACE,QAAA,EAAE,EAAC,sCAAsC;QACzC,IAAI,EAAC,kBAAkB,CAAC,OAAO;QAC/B,QAAQ,EAAC,CAAC,eAAe,CAAC;QAC1B,QAAQ,EAAC,kBAAkB,CAAC,MAAM;AAClC,QAAA,KAAK,EAAC,mBAAmB;AAC5B;CACF;AAEO,MAAM,sBAAsB,GAAG;AACnC,IAAA;AACI,QAAA,SAAS,EAAC,MAAM;AAChB,QAAA,EAAE,EAAC,sCAAsC;AACzC,QAAA,KAAK,EAAC,0BAA0B;AAChC,QAAA,WAAW,EAAC,CAAA;AACa,gCAAA,CAAA;AACzB,QAAA,UAAU,EAAC,eAAe;AAC1B,QAAA,QAAQ,EAAG;AACd,KAAA;AACD,IAAA;AACI,QAAA,SAAS,EAAC,MAAM;AAChB,QAAA,KAAK,EAAC,wBAAwB;AAC9B,QAAA,WAAW,EAAC,CAAA;;;AAGuD,0EAAA,CAAA;AACnE,QAAA,UAAU,EAAC,cAAc;AACzB,QAAA,EAAE,EAAC,sCAAsC;AAC5C;CACH;;MCzEW,8BAA8B,CAAA;AAcjC,IAAA,aAAa,CAAC,KAAuC,EAAA;QAE3D,OAAO,QAAQ,CAAC,MAAK;AACnB,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,YAAA,IAAI,KAAK,CAAC,UAAU,KAAK,eAAe,EAAE;gBACxC,OAAO,CAAC,IAAI,EAAE,gBAAgB,EAAE,aAAa,IAAI,EAAE,EAAE,MAAM,KAAK,CAAC,GAAG,yCAAyC,GAAG,SAAS;;AAE3H,YAAA,OAAO,SAAS;AAClB,SAAC,CAAC;;AAmBJ,IAAA,WAAW,CAAC,GAAQ,EAAA;QAClB,OAAO,QAAQ,CAAC,MAAK;AACnB,YAAA,MAAM,IAAI,GAAI,IAAI,CAAC,IAAI,EAAE;YAC1B,OAAO,IAAI,EAAE,gBAAgB,GAAG,GAAyC,CAAC,IAAI,EAAE;AACjF,SAAC,CAAC;;;AAGJ,IAAA,WAAA,GAAA;AA/CA,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,wBAAwB,CAAC;AAEpD,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAI;AAErB,YAAA,OAAO,sBAAsB,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;gBAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;AACxC,gBAAA,QAAQ;AACN,oBAAA,GAAG,KAAK;oBACR;AACD,iBAAA;AACH,aAAC,CAAC;AACJ,SAAC,CAAC;AAeF,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC;AAC/B,QAAA,IAAA,CAAA,KAAK,GAAsB,IAAI,CAAC,KAAK,CAAC,KAAK;QAC3C,IAAI,CAAA,IAAA,GAAG,QAAQ,CACb,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,EAAE,IAAI,CAAC,CAAC,EACtE;AACE,YAAA,YAAY,EAAE;AACf,SAAA,CACF;QACD,IAAU,CAAA,UAAA,GAAI,QAAQ,CACpB,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,EACjD;AACE,YAAA,YAAY,EAAE;AACf,SAAA,CACF;QAkBD,IAAS,CAAA,SAAA,GAAiD,SAAS;QAcnE,IAAmB,CAAA,mBAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,WAAW,EAAE;AAC1E,YAAA,YAAY,EAAE;AACf,SAAA,CAAC;AACO,QAAA,IAAA,CAAA,cAAc,GAAG,CAAE,OAAkD,KAAG;YAC/E,OAAO,QAAQ,CAAC,MAAK;AAClB,gBAAA,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,EAAE;gBAC5C,MAAM,MAAM,GAAG,SAAS,EAAE,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;AAE1F,gBAAA,OAAO,CAAC,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;AAC3B,aAAC,CAAC;AACJ,SAAC;QA6BF,IAAe,CAAA,eAAA,GAAG,CAAC,KAAU,EAC3B,GAA8C,KAAK,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC;AAmE9G,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;;AAxH7B,IAAA,IAAI,mCAAmC,GAAA;AACrC,QAAA,OAAO,2BAA2B,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAI;AACxE,YAAA,IAAI,CAAC,EAAE,CAAC,cAAc,EAAE;AACtB,gBAAA,OAAO,IAAI;;YAEb,OAAO,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,KAAI;AACtC,gBAAA,OAAO,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;AACpE,aAAC,CAAC;AACJ,SAAC,CAAC;;AAgBL,IAAA,gBAAgB,CAAE,OAAkD,EAAA;QAIjE,MAAM,GAAG,GAAG,oCAAoC,EAAE,IAAI,CAAC,eAAe,IAAI,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,MAAM;YAC7F,OAAO,EAAE,KAAK,CAAC,OAAO;AACtB,YAAA,GAAG,EAAE,OAAO,GAAG,KAAK,CAAC;AACtB,SAAA,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,GAAG,EAAE,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;AACpF,QAAA,OAAO,MAAM;;IAEf,WAAW,CACT,KAAU,EACV,OAAkD,EAAA;AAElD,QAAA,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,KAAK,CAAC;;IAExE,WAAW,CAAC,KAAU,EAAE,OAAkD,EAAA;AACxE,QAAA,OAAO,CAAC,IAAI,CAAC,kDAAkD,EAAE,KAAK,CAAC;AAEvE,QAAA,IAAI,CAAC,2BAA2B,CAAC,KAAK,EAAE,OAAO,CAAC;;;IAGlD,eAAe,CAAC,KAAU,EAAE,OAAkD,EAAA;AAC5E,QAAA,OAAO,CAAC,IAAI,CAAC,sDAAsD,EAAE,KAAK,CAAC;AAC3E,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC;;IAItC,2BAA2B,CACzB,KAAU,EACV,GAA8C,EAAA;;QAK9C,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,QAAA,IAAI,GAAG,CAAC,aAAa,EAAE;YACrB,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAe,KAAI;AAC5C,gBAAA,0BAA0B,CACxB,OAAO,EACP,KAAK,EACL,SAAS,CACV;AACH,aAAC,CAAC;;AAGJ,QAAA,IAAI,GAAG,CAAC,QAAQ,EAAE;YAChB,0BAA0B,CACxB,OAAO,EACP,GAAG,CAAC,QAAQ,EACZ,KAAK,CACN;;QAEH,IAAI,CAAC,eAAe,GAAG;AACrB,YAAA,GAAG;SACG;;;;;;;;;AAaV,IAAA,eAAe,CAAC,SAAiB,EAAA;QAC/B,IAAI,CAAC,eAAe,GAAG;AACrB,YAAA,IAAI,EAAE;SACP;AACD,QAAA,IAAI,CAAC,SAAS,GAAG,SAAgB;;IAKnC,aAAa,GAAA;AAEX,QAAA,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,aAAa,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC;AACjF,QAAA,IAAI,CAAC,eAAe,GAAG,SAAS;AAChC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;;AAE5B,IAAA,mBAAmB,CAAC,GAA0C,EAAA;AAC5D,QAAA,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC;AACtE,QAAA,IAAI,CAAC,eAAe,GAAG,SAAS;AAChC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;;IAG5B,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,eAAe,GAAG,SAAS;AAChC,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;;IAI5B,KAAK,GAAA;;AAEH,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;;8GAtLhB,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA9B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,8BAA8B,uFC7B3C,ikKAgJM,EAAA,MAAA,EAAA,CAAA,qiBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDzHM,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,gBAAgB,0pEAAE,yBAAyB,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,YAAA,EAAA,MAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAMxD,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAT1C,SAAS;+BACE,6BAA6B,EAAA,UAAA,EAC3B,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,gBAAgB,EAAE,yBAAyB,CAAC,EAAA,QAAA,EAAA,ikKAAA,EAAA,MAAA,EAAA,CAAA,qiBAAA,CAAA,EAAA;;;MEFzD,yBAAyB,CAAA;AASpC,IAAA,WAAA,CAAoB,KAAwB,EAAA;QAAxB,IAAK,CAAA,KAAA,GAAL,KAAK;QARzB,IAAI,CAAA,IAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,EAAE,IAAI,CAAC,CAAC,EACpF;AACE,YAAA,YAAY,EAAE;AACf,SAAA,CAAC;QAIJ,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAI;AACnB,YAAA,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE;YAC9C,OAAO;AACL,gBAAA;AACE,oBAAA,KAAK,EAAE,WAAW;AAClB,oBAAA,IAAI,EAAE,cAAc;AACpB,oBAAA,IAAI,EAAE,sCAAsC;AAC5C,oBAAA,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU;AAC9B,iBAAA;AACD,gBAAA;AACE,oBAAA,KAAK,EAAE,mBAAmB;AAC1B,oBAAA,IAAI,EAAE,oDAAoD;AAC1D,oBAAA,IAAI,EAAE,KAAK;AACX,oBAAA,MAAM,EAAE,eAAe;AACvB,oBAAA,MAAM,EAAE,MAAM,IAAI,CAAC,wBAAwB;AAC5C,iBAAA;aACF;AACH,SAAC,CAAC;AACH,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAI;AACvB,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;YACtB,OAAQ,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,EAAE,CAAC;AACpC,SAAC,CAAC;AACO,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC;AAUnC,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,IAAmB,KAAK,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAiBnG,IAAM,CAAA,MAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,WAAW,EAAC;AAC3D,YAAA,YAAY,EAAC;AAEf,SAAA,CAAC;AAED,QAAA,IAAA,CAAA,eAAe,GAAE,QAAQ,CAAC,MAAI;AAC5B,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;YAC5B,OAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,kBAAkB,CAAC;AACnF,SAAC,CAAC;;IAlCF,UAAU,GAAA;QACR,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,2BAA2B,CAAC;AAE/D,QAAA,SAAS,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,IAAG;YACrD,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;;AAEhC,SAAC,CAAC;;IAGJ,wBAAwB,GAAA;QAEtB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,8BAA8B,EAC7D;AACA,YAAA,IAAI,EAAE;gBACJ,KAAK,EAAE,IAAI,CAAC;AACb;AACF,SAAA,CAAC;AAEJ,QAAA,SAAS,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,IAAG;YACrD,IAAI,IAAI,EAAE;AACR,gBAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;;AAGrB,SAAC,CAAC;;8GAzDO,yBAAyB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAN,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,ECrBtC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2xGAuGM,EDtFM,MAAA,EAAA,CAAA,yJAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,kIAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAE,IAAA,CAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,cAAA,EAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,6GAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAI,IAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAF,EAAA,CAAA,4BAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,OAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,WAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,cAAA,EAAA,QAAA,EAAA,6CAAA,EAAA,MAAA,EAAA,CAAA,sBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,4BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,YAAA,EAAA,YAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAE,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,IAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,sBAAA,EAAA,CAAA,MAAA,CAAA,GAAA,CAAA,kBAAA,EAAA,OAAA,wBAAA,CAAA,CAAA,IAAA,CAAA,CAAA,IAAA,CAAA,CAAA,OAAA,CAAA,EAAAC,IAAA,CAAA,aAAA,EAAAR,EAAA,CAAA,SAAA,EAAAS,IAAA,CAAA,OAAA,EAAAA,IAAA,CAAA,cAAA,EAAAA,IAAA,CAAA,cAAA,EAAA,EAAA,CAAA,UAAA,EAAAL,IAAA,CAAA,OAAA,EAAAM,EAAA,CAAA,UAAA,EAAAH,IAAA,CAAA,UAAA,EAAA,OAAA,qDAAA,CAAA,CAAA,IAAA,CAAA,CAAA,IAAA,CAAA,CAAA,qBAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA;;gGAI7B,yBAAyB,EAAA,mBAAA,EAAA,MAAA,CAAA,OAAA,wBAAA,CAAA,CAAA,IAAA,CAAA,CAAA,IAAA,CAAA,CAAA,OAAA,CAAA,EAAA,OAAA,qDAAA,CAAA,CAAA,IAAA,CAAA,CAAA,IAAA,CAAA,CAAA,qBAAA,CAAA,CAAA,EAAA,eAAA,EAAA,CAAA,OAAA,EAAA,qBAAA,MAAA,EAAA,UAAA,EAAA,CAAA;sBAPrC,SAAS;mCACE,wBAAwB,EAAA,UAAA,EACtB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,2xGAAA,EAAA,MAAA,EAAA,CAAA,yJAAA,CAAA,EAAA;;;;;"}

package/fesm2022/ngx-t-forms-getInputIllustration-GCSKx5e5.mjs

@@ -0,0 +1,9 @@
+import { DefaultInputConfig } from 'ngx-t-forms-types';
+
+function getInputIllustration(element) {
+    const dc = DefaultInputConfig;
+    return dc[element]?.illustration;
+}
+
+export { getInputIllustration as g };
+//# sourceMappingURL=ngx-t-forms-getInputIllustration-GCSKx5e5.mjs.map

package/fesm2022/ngx-t-forms-getInputIllustration-GCSKx5e5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-t-forms-getInputIllustration-GCSKx5e5.mjs","sources":["../../../projects/ngx-t-forms/src/lib/shared/functions/getInputIllustration.ts"],"sourcesContent":["import { DefaultInputConfig } from \"ngx-t-forms-types\"\r\nimport { ElementTypes } from \"ngx-t-forms-types\"\r\n\r\nexport function getInputIllustration(element:ElementTypes): string {\r\n   const dc= DefaultInputConfig\r\n    return dc[element]?.illustration\r\n  }"],"names":[],"mappings":";;AAGM,SAAU,oBAAoB,CAAC,OAAoB,EAAA;IACtD,MAAM,EAAE,GAAE,kBAAkB;AAC3B,IAAA,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY;AAClC;;;;"}