ngx-histaff-alpha 5.3.2 → 5.3.3

package/fesm2022/{ngx-histaff-alpha-core-form-design.component-BAQldwh8.mjs → ngx-histaff-alpha-core-form-design.component-CCVshW2-.mjs}

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { inject, ChangeDetectorRef, Component, signal, effect, HostListener, ChangeDetectionStrategy, Injectable, computed, ViewContainerRef, Input, EventEmitter, Output, Renderer2, input, viewChild, isDevMode } from '@angular/core';
 import { trigger, state, transition, style, animate, query, stagger } from '@angular/animations';
-import { v as CoreFormDesignService, C as CoreWorkflowService, B as BaseEditComponent, A as AlertService, w as EnumCorePageEditMode, E as EnumFormBaseContolType, x as EnumCoreButtonVNSCode, y as noneAutoClosedAlertOptions, i as DialogService, M as MultiLanguageService, d as CorePageHeaderComponent, z as CoreFormComponent, G as CoreButtonGroupVnsComponent, h as TranslatePipe, f as BaseComponent, I as EnumCoreTablePipeType, K as CoreCheckboxComponent, m as CoreDropdownComponent, T as TooltipDirective, l as DomService, L as EnumFormDesignMode, u as ApplicationHelpService, a as EnumCoreFormControlSeekerSourceType, O as TableCellPipe, H as HotKeysDirective, P as CoreControlComponent, n as CoreChecklistComponent, p as CoreFormControlSeekerComponent, Q as CoreAttachmentComponent, o as CoreDatePickerComponent, t as CoreRadioGroupComponent, R as CoreMonthSelectorComponent, q as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-i0RDcl3T.mjs';
+import { g as CoreFormDesignService, C as CoreWorkflowService, B as BaseEditComponent, A as AlertService, w as AppConfigService, x as EnumCorePageEditMode, y as EnumCoreButtonVNSCode, R as READONLY_WORKFLOW_FIELDS, z as noneAutoClosedAlertOptions, j as DialogService, M as MultiLanguageService, d as CorePageHeaderComponent, G as CoreFormComponent, I as CoreButtonGroupVnsComponent, i as TranslatePipe, E as EnumFormBaseContolType, f as BaseComponent, K as EnumCoreTablePipeType, L as CoreCheckboxComponent, n as CoreDropdownComponent, T as TooltipDirective, m as DomService, O as EnumFormDesignMode, v as ApplicationHelpService, a as EnumCoreFormControlSeekerSourceType, P as TableCellPipe, H as HotKeysDirective, Q as CoreControlComponent, o as CoreChecklistComponent, q as CoreFormControlSeekerComponent, S as CoreAttachmentComponent, p as CoreDatePickerComponent, u as CoreRadioGroupComponent, U as CoreMonthSelectorComponent, r as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-Q7u6fsp_.mjs';
 import * as i1 from '@angular/forms';
-import { Validators, FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { NgStyle, NgTemplateOutlet } from '@angular/common';
 import { BehaviorSubject, catchError, of, filter, distinctUntilChanged, tap, switchMap } from 'rxjs';
-import { EnumTranslateKey } from 'alpha-global-constants';
 import { Router, ActivatedRoute } from '@angular/router';
-import { LiveFormComponent } from './ngx-histaff-alpha-live-form.component-BshGWHPO.mjs';
+import { EnumTranslateKey } from 'alpha-global-constants';
+import { LiveFormComponent } from './ngx-histaff-alpha-live-form.component-Dk1vh34D.mjs';
 
 const slideFromTopFadeIn = trigger('slideFromTopFadeIn', [
     state('in', style({ opacity: 1, transform: 'translateY(0)' })),
@@ -52,7 +52,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             args: [{ selector: 'save-live-json', imports: [], template: "<pre class=\"json-preview\">{{ fds.$saveLiveJson() }}</pre>", styles: [".json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:390px;height:calc(100vh - 125px);margin:0}\n"] }]
         }] });
 
-const URL_PATTERN = '^(https?:\\/\\/[^\\s]+|\\/api(\\/[-\\w._]+)+)$';
 class FormMetadataComponent extends BaseEditComponent {
     onEscape() {
         this.coreFormDesignService.$showFormMetadata.set(false);
@@ -75,316 +74,14 @@ class FormMetadataComponent extends BaseEditComponent {
         this.cdr = inject(ChangeDetectorRef);
         this.alertService = inject(AlertService);
         this.router = inject(Router);
+        this.appConfigService = inject(AppConfigService);
+        this.form = this.coreFormDesignService.formMetadata;
         this.$loading = signal(false);
         this.checkError$ = new BehaviorSubject(false);
         this.mode$ = new BehaviorSubject(EnumCorePageEditMode.UPDATE);
-        this.customButtonChecklistOptions$ = new BehaviorSubject([]);
-        this.$sections = signal([
-            {
-                caption: 'Primary properties',
-                rows: [
-                    [
-                        {
-                            field: 'id',
-                            flexSize: 0,
-                            hidden: true,
-                            value: null,
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            label: 'ID'
-                        },
-                        {
-                            field: 'name',
-                            flexSize: 4,
-                            value: '',
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            label: 'Form Name',
-                            type: 'string',
-                            validators: [
-                                {
-                                    name: 'required',
-                                    validator: Validators.required,
-                                    errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_REQUIRED
-                                },
-                                {
-                                    name: 'minLength',
-                                    validator: Validators.minLength(5),
-                                    errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_MIN_LENGTH
-                                }
-                            ]
-                        },
-                        {
-                            field: 'captionCode',
-                            flexSize: 4,
-                            value: '',
-                            hint: 'Helps to display form caption in multi languages',
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            label: 'Caption Code',
-                            type: 'string',
-                            validators: [
-                                {
-                                    name: 'required',
-                                    validator: Validators.required,
-                                    errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_REQUIRED
-                                },
-                                {
-                                    name: 'minLength',
-                                    validator: Validators.minLength(10),
-                                    errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_MIN_LENGTH
-                                }
-                            ]
-                        },
-                        {
-                            field: 'entityTable',
-                            flexSize: 4,
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            value: '',
-                            hint: "The primary table name related to the form",
-                            label: 'Entity Table Name',
-                            type: 'string'
-                        },
-                    ],
-                    [
-                        {
-                            field: 'submitApi',
-                            flexSize: 4,
-                            value: '',
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            label: 'Submit API URL',
-                            hint: 'This is an API endpoint with [HttpPost] verb',
-                            type: 'string',
-                            validators: [
-                                {
-                                    name: 'required',
-                                    validator: Validators.required,
-                                    errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_REQUIRED
-                                },
-                                {
-                                    name: 'minLength',
-                                    validator: Validators.minLength(10),
-                                    errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_MIN_LENGTH
-                                },
-                                {
-                                    name: 'pattern',
-                                    validator: Validators.pattern(URL_PATTERN),
-                                    errorMessage: 'UI_FORM_CONTROL_ERROR_PATTERN'
-                                }
-                            ]
-                        },
-                        {
-                            field: 'postSubmitRoute',
-                            flexSize: 4,
-                            value: '',
-                            hint: 'After success submition, the App will redirect to this route (full URL)',
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            label: 'Post Submit Route',
-                            type: 'string',
-                            validators: [
-                                {
-                                    name: 'pattern',
-                                    validator: Validators.pattern(URL_PATTERN),
-                                    errorMessage: 'UI_FORM_CONTROL_ERROR_PATTERN'
-                                }
-                            ]
-                        },
-                        {
-                            field: 'postCancelRoute',
-                            flexSize: 4,
-                            value: '',
-                            hint: 'After cancelation, the App will redirect to this route (full URL)',
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            label: 'Post Cancel Route',
-                            type: 'string',
-                            validators: [
-                                {
-                                    name: 'pattern',
-                                    validator: Validators.pattern(URL_PATTERN),
-                                    errorMessage: 'UI_FORM_CONTROL_ERROR_PATTERN'
-                                }
-                            ]
-                        }
-                    ],
-                    [
-                        {
-                            field: 'normalMode',
-                            flexSize: 4,
-                            value: false,
-                            controlType: EnumFormBaseContolType.CHECKBOX,
-                            hint: 'If normal mode is set to false, the form will be displayed as a modal popup',
-                            label: 'Normal Display Mode',
-                            type: 'boolean'
-                        },
-                        {
-                            field: 'autoGetByIdOff',
-                            flexSize: 4,
-                            value: false,
-                            hint: "If checked, the form won't call the GetById API ayt its startup",
-                            controlType: EnumFormBaseContolType.CHECKBOX,
-                            label: 'Disable Auto Get By ID',
-                            type: 'checkbox'
-                        },
-                        {
-                            field: 'hasIdOfStringType',
-                            flexSize: 4,
-                            value: false,
-                            controlType: EnumFormBaseContolType.CHECKBOX,
-                            label: 'ID is String?',
-                            type: 'checkbox'
-                        }
-                    ],
-                ]
-            },
-            {
-                caption: 'CRUD',
-                rows: [
-                    [
-                        {
-                            field: 'crudCreate',
-                            value: '',
-                            label: 'Create Endpoint',
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            flexSize: 4,
-                            type: 'string',
-                            hint: 'POST endpoint for creating new records',
-                            validators: [
-                                {
-                                    name: 'pattern',
-                                    validator: Validators.pattern(URL_PATTERN),
-                                    errorMessage: 'UI_FORM_CONTROL_ERROR_PATTERN'
-                                }
-                            ]
-                        },
-                        {
-                            field: 'crudRead',
-                            label: 'Read (GetById) Endpoint',
-                            value: '',
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            flexSize: 4,
-                            type: 'string',
-                            hint: 'GET endpoint to retrieve by ID',
-                            validators: [
-                                {
-                                    name: 'required',
-                                    validator: Validators.required,
-                                    errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_REQUIRED
-                                },
-                                {
-                                    name: 'minLength',
-                                    validator: Validators.minLength(5),
-                                    errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_MIN_LENGTH
-                                },
-                                {
-                                    name: 'pattern',
-                                    validator: Validators.pattern(URL_PATTERN),
-                                    errorMessage: 'UI_FORM_CONTROL_ERROR_PATTERN'
-                                }
-                            ]
-                        },
-                        {
-                            field: 'crudUpdate',
-                            label: 'Update Endpoint',
-                            value: '',
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            flexSize: 4,
-                            type: 'string',
-                            hint: 'POST endpoint for updates',
-                            validators: [
-                                {
-                                    name: 'required',
-                                    validator: Validators.required,
-                                    errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_REQUIRED
-                                },
-                                {
-                                    name: 'minLength',
-                                    validator: Validators.minLength(5),
-                                    errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_MIN_LENGTH
-                                },
-                                {
-                                    name: 'pattern',
-                                    validator: Validators.pattern(URL_PATTERN),
-                                    errorMessage: 'UI_FORM_CONTROL_ERROR_PATTERN'
-                                }
-                            ]
-                        },
-                    ],
-                    [
-                        {
-                            field: 'crudReadChildren',
-                            value: '',
-                            label: 'Read Children Endpoint',
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            flexSize: 4,
-                            type: 'string',
-                            hint: 'Optional endpoint to fetch related child records',
-                            validators: [
-                                {
-                                    name: 'pattern',
-                                    validator: Validators.pattern(URL_PATTERN),
-                                    errorMessage: 'UI_FORM_CONTROL_ERROR_PATTERN'
-                                }
-                            ]
-                        },
-                        {
-                            field: 'crudDelete',
-                            value: '',
-                            label: 'Delete Endpoint',
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            flexSize: 4,
-                            type: 'string',
-                            hint: 'Optional DELETE endpoint',
-                            validators: [
-                                {
-                                    name: 'pattern',
-                                    validator: Validators.pattern(URL_PATTERN),
-                                    errorMessage: 'UI_FORM_CONTROL_ERROR_PATTERN'
-                                }
-                            ]
-                        },
-                    ]
-                ]
-            },
-            {
-                caption: 'Buttons & Actions',
-                rows: [
-                    [
-                        {
-                            field: 'customFormButtonItems',
-                            flexSize: 8,
-                            controlType: EnumFormBaseContolType.CHECKLIST,
-                            hint: "If you want to replace the default [Cancel, Submit] buttons",
-                            checklistOptions$: this.customButtonChecklistOptions$,
-                            getByIdObject$: new BehaviorSubject({}),
-                            shownFrom: '_',
-                            value: null,
-                            label: 'Custom Buttons',
-                            type: 'string[]'
-                        },
-                        {
-                            field: 'width',
-                            flexSize: 4,
-                            controlType: EnumFormBaseContolType.TEXTBOX,
-                            hint: "Width of the form",
-                            value: null,
-                            label: 'Width',
-                            type: 'number'
-                        },
-                        /*
-                        // Simply ignored for now
-                        {
-                          field: 'entityUniqueIndexesJson',
-                          flexSize: 4,
-                          controlType: EnumFormBaseContolType.TEXTAREA,
-                          textareaRows: 1,
-                          hint: "It helps to detect duplicated values if needed",
-                          value: '',
-                          label: 'Entity Unique Indexes (JSON)',
-                          type: 'string'
-                        }
-                        */
-                    ]
-                ]
-            }
-        ]);
-        this.$isInWorkflowDesign = signal(false);
+        this.customButtonChecklistOptions$ = this.coreFormDesignService.formMetadataCustomButtonChecklistOptions$;
+        this.$sections = this.coreFormDesignService.$formMetadataSections;
+        this.$isInWorkflowDesign = this.coreFormDesignService.$isInWorkflowDesign;
         this.customButtons = [
             EnumCoreButtonVNSCode.NONE_HEADER_SAVE,
         ];
@@ -397,13 +94,9 @@ class FormMetadataComponent extends BaseEditComponent {
         effect(() => {
             const isInWorkflowDesign = this.$isInWorkflowDesign();
             if (isInWorkflowDesign) {
-                this.form.get('name')?.patchValue(this.wfs.$currentFlow()?.name);
-                this.form.get('name')?.disable();
-                this.form.get('entityTable')?.patchValue('WF_INSTANCE');
-                this.form.get('entityTable')?.disable();
-                this.$sections.update(sections => {
-                    sections[1].hidden = true;
-                    return sections;
+                READONLY_WORKFLOW_FIELDS.forEach(x => {
+                    const control = this.form.get(x);
+                    control?.disable();
                 });
             }
             else {
@@ -478,7 +171,17 @@ class FormMetadataComponent extends BaseEditComponent {
                 this.coreFormDesignService.$customFormButtonItems.set(undefined);
             }
         });
+        const widthField = form.get('width');
+        if (!!widthField) {
+            widthField.valueChanges.subscribe(width => {
+                console.warn(`WAR [width$] changed explicitly:`, width);
+            });
+        }
+        else {
+            console.warn(`WAR [widthField] not found`);
+        }
         form.valueChanges.subscribe(value => {
+            console.warn('[width] from form.valueChanges', value?.width);
             const current = this.coreFormDesignService.$afInstance();
             const { crudCreate, crudRead, crudUpdate, crudDelete, crudReadChildren, 
             // ES6 destructuring: Pull id out of the object and throw it away under the name _ignored — don’t include it in rest
@@ -494,8 +197,10 @@ class FormMetadataComponent extends BaseEditComponent {
             const next = {
                 ...current,
                 ...rest,
+                width: rest.width ?? current.width, // That way, rogue undefined values can’t silently override valid ones.
                 crud: updatedCrud
             };
+            console.warn('[SET $afInstance width] from FormMetadataComponent', next.width);
             this.coreFormDesignService.$afInstance.set(next);
         });
         form.statusChanges.subscribe(status => {
@@ -506,7 +211,7 @@ class FormMetadataComponent extends BaseEditComponent {
     }
     ngAfterViewInit() {
         // Defer to next tick to avoid ExpressionChangedAfterItHasBeenCheckedError
-        this.$isInWorkflowDesign.set(this.router.url.includes('/workflow/process-design'));
+        this.$isInWorkflowDesign.set(this.router.url.includes('/workflow/design'));
         setTimeout(() => {
             const allButtons = Object.values(EnumCoreButtonVNSCode);
             const noneHeaderOptions = allButtons
@@ -528,7 +233,7 @@ class FormMetadataComponent extends BaseEditComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormMetadataComponent, deps: [{ token: DialogService }, { token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: FormMetadataComponent, isStandalone: true, selector: "form-metadata", host: { listeners: { "document:keydown.escape": "onEscape($event)", "window:click": "onWindowClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-metadata-container\">\r\n\r\n    <div class=\"metadata-body\">\r\n\r\n        <div class=\"header-n-form\">\r\n\r\n            <div class=\"h15\"></div>\r\n\r\n            <div class=\"d-flex d-flex-start w-100 pr1rem\">\r\n                <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\" (buttonClick)=\"onButtonClick($event)\"\r\n                    [shownItems]=\"customButtons\" class=\"buttonGroupCustom\"></core-button-group-vns>\r\n            </div>\r\n            <div class=\"h15\"></div>\r\n        \r\n\r\n            <div class=\"header-wrapper\">\r\n                <core-page-header [title]=\"'FORM OVERVIEW'\" [hideButtonGroup]=\"true\"></core-page-header>\r\n                <div class=\"close-wrapper\" (click)=\"onClose()\">\r\n                    <i class=\"feather-x\"></i>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"af-instance\">\r\n\r\n                <div class=\"af-instance-left\">\r\n                    <core-form [inputSections]=\"$sections()\" [width]=\"800\" [mode$]=\"mode$\" [checkError$]=\"checkError$\"\r\n                        [hideButtons]=\"true\" (onFormCreated)=\"onFormCreated($event)\"></core-form>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"af-instance-right\">\r\n            <save-live-json></save-live-json>\r\n        </div>\r\n\r\n\r\n    </div>\r\n\r\n</div>", styles: [".form-metadata-container .header-wrapper{padding:0 15px}.form-metadata-container .header-wrapper .close-wrapper{display:flex;position:absolute;right:7px;top:8px;width:24px;height:24px;color:#848484;cursor:pointer}.form-metadata-container .header-wrapper .close-wrapper i{font-size:24px}.form-metadata-container .af-instance{display:flex}.form-metadata-container .h15{height:15px!important}.form-metadata-container .pr1rem{padding-right:1rem}.form-metadata-container .metadata-body{display:flex;align-items:flex-start;justify-content:space-between}.form-metadata-container .af-instance-right{margin-top:45px;margin-right:15px}\n"], dependencies: [{ kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$", "hideButtons", "forceCreateNewForm", "secondBottomTemplateRef"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "component", type: SaveLiveJsonComponent, selector: "save-live-json" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "fixedShow", "shownItems", "showCaption", "lastChildEffectOff"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: FormMetadataComponent, isStandalone: true, selector: "form-metadata", host: { listeners: { "document:keydown.escape": "onEscape($event)", "window:click": "onWindowClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-metadata-container\">\r\n\r\n    <div class=\"metadata-body\">\r\n\r\n        <div class=\"header-n-form\">\r\n\r\n            @if (!$isInWorkflowDesign()) {\r\n\r\n                <div class=\"h15\"></div>\r\n\r\n                <div class=\"d-flex d-flex-start w-100 pr1rem\">\r\n                    <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\" (buttonClick)=\"onButtonClick($event)\"\r\n                        [shownItems]=\"customButtons\" class=\"buttonGroupCustom\"></core-button-group-vns>\r\n                </div>\r\n                <div class=\"h15\"></div>\r\n\r\n                <div class=\"header-wrapper\">\r\n                    <core-page-header [title]=\"'FORM OVERVIEW'\" [hideButtonGroup]=\"true\"></core-page-header>\r\n                    <div class=\"close-wrapper\" (click)=\"onClose()\">\r\n                        <i class=\"feather-x\"></i>\r\n                    </div>\r\n                </div>\r\n\r\n            }        \r\n\r\n\r\n\r\n            <div class=\"af-instance\">\r\n\r\n                <div class=\"af-instance-left\">\r\n                    <core-form \r\n                        [inputSections]=\"$sections()\" \r\n                        [width]=\"800\" \r\n                        [mode$]=\"mode$\" \r\n                        [checkError$]=\"checkError$\"\r\n                        [hideButtons]=\"true\" \r\n                        [forceCreateNewForm]=\"true\"\r\n                        [hideDevSector]=\"!!$isInWorkflowDesign()\"\r\n                        (onFormCreated)=\"onFormCreated($event)\" />\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        @if (!$isInWorkflowDesign()) {\r\n            <div class=\"af-instance-right\">\r\n                <save-live-json></save-live-json>\r\n            </div>\r\n        }\r\n\r\n\r\n    </div>\r\n\r\n</div>", styles: [".form-metadata-container .header-wrapper{padding:0 15px}.form-metadata-container .header-wrapper .close-wrapper{display:flex;position:absolute;right:7px;top:8px;width:24px;height:24px;color:#848484;cursor:pointer}.form-metadata-container .header-wrapper .close-wrapper i{font-size:24px}.form-metadata-container .af-instance{display:flex}.form-metadata-container .h15{height:15px!important}.form-metadata-container .pr1rem{padding-right:1rem}.form-metadata-container .metadata-body{display:flex;align-items:flex-start;justify-content:space-between}.form-metadata-container .af-instance-right{margin-top:45px;margin-right:15px}\n"], dependencies: [{ kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$", "hideButtons", "forceCreateNewForm", "secondBottomTemplateRef", "hideDevSector"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "component", type: SaveLiveJsonComponent, selector: "save-live-json" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "fixedShow", "shownItems", "showCaption", "lastChildEffectOff"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormMetadataComponent, decorators: [{
             type: Component,
@@ -538,7 +243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         CoreFormComponent,
                         SaveLiveJsonComponent,
                         CoreButtonGroupVnsComponent
-                    ], template: "<div class=\"form-metadata-container\">\r\n\r\n    <div class=\"metadata-body\">\r\n\r\n        <div class=\"header-n-form\">\r\n\r\n            <div class=\"h15\"></div>\r\n\r\n            <div class=\"d-flex d-flex-start w-100 pr1rem\">\r\n                <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\" (buttonClick)=\"onButtonClick($event)\"\r\n                    [shownItems]=\"customButtons\" class=\"buttonGroupCustom\"></core-button-group-vns>\r\n            </div>\r\n            <div class=\"h15\"></div>\r\n        \r\n\r\n            <div class=\"header-wrapper\">\r\n                <core-page-header [title]=\"'FORM OVERVIEW'\" [hideButtonGroup]=\"true\"></core-page-header>\r\n                <div class=\"close-wrapper\" (click)=\"onClose()\">\r\n                    <i class=\"feather-x\"></i>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"af-instance\">\r\n\r\n                <div class=\"af-instance-left\">\r\n                    <core-form [inputSections]=\"$sections()\" [width]=\"800\" [mode$]=\"mode$\" [checkError$]=\"checkError$\"\r\n                        [hideButtons]=\"true\" (onFormCreated)=\"onFormCreated($event)\"></core-form>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"af-instance-right\">\r\n            <save-live-json></save-live-json>\r\n        </div>\r\n\r\n\r\n    </div>\r\n\r\n</div>", styles: [".form-metadata-container .header-wrapper{padding:0 15px}.form-metadata-container .header-wrapper .close-wrapper{display:flex;position:absolute;right:7px;top:8px;width:24px;height:24px;color:#848484;cursor:pointer}.form-metadata-container .header-wrapper .close-wrapper i{font-size:24px}.form-metadata-container .af-instance{display:flex}.form-metadata-container .h15{height:15px!important}.form-metadata-container .pr1rem{padding-right:1rem}.form-metadata-container .metadata-body{display:flex;align-items:flex-start;justify-content:space-between}.form-metadata-container .af-instance-right{margin-top:45px;margin-right:15px}\n"] }]
+                    ], template: "<div class=\"form-metadata-container\">\r\n\r\n    <div class=\"metadata-body\">\r\n\r\n        <div class=\"header-n-form\">\r\n\r\n            @if (!$isInWorkflowDesign()) {\r\n\r\n                <div class=\"h15\"></div>\r\n\r\n                <div class=\"d-flex d-flex-start w-100 pr1rem\">\r\n                    <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\" (buttonClick)=\"onButtonClick($event)\"\r\n                        [shownItems]=\"customButtons\" class=\"buttonGroupCustom\"></core-button-group-vns>\r\n                </div>\r\n                <div class=\"h15\"></div>\r\n\r\n                <div class=\"header-wrapper\">\r\n                    <core-page-header [title]=\"'FORM OVERVIEW'\" [hideButtonGroup]=\"true\"></core-page-header>\r\n                    <div class=\"close-wrapper\" (click)=\"onClose()\">\r\n                        <i class=\"feather-x\"></i>\r\n                    </div>\r\n                </div>\r\n\r\n            }        \r\n\r\n\r\n\r\n            <div class=\"af-instance\">\r\n\r\n                <div class=\"af-instance-left\">\r\n                    <core-form \r\n                        [inputSections]=\"$sections()\" \r\n                        [width]=\"800\" \r\n                        [mode$]=\"mode$\" \r\n                        [checkError$]=\"checkError$\"\r\n                        [hideButtons]=\"true\" \r\n                        [forceCreateNewForm]=\"true\"\r\n                        [hideDevSector]=\"!!$isInWorkflowDesign()\"\r\n                        (onFormCreated)=\"onFormCreated($event)\" />\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        @if (!$isInWorkflowDesign()) {\r\n            <div class=\"af-instance-right\">\r\n                <save-live-json></save-live-json>\r\n            </div>\r\n        }\r\n\r\n\r\n    </div>\r\n\r\n</div>", styles: [".form-metadata-container .header-wrapper{padding:0 15px}.form-metadata-container .header-wrapper .close-wrapper{display:flex;position:absolute;right:7px;top:8px;width:24px;height:24px;color:#848484;cursor:pointer}.form-metadata-container .header-wrapper .close-wrapper i{font-size:24px}.form-metadata-container .af-instance{display:flex}.form-metadata-container .h15{height:15px!important}.form-metadata-container .pr1rem{padding-right:1rem}.form-metadata-container .metadata-body{display:flex;align-items:flex-start;justify-content:space-between}.form-metadata-container .af-instance-right{margin-top:45px;margin-right:15px}\n"] }]
         }], ctorParameters: () => [{ type: DialogService }, { type: MultiLanguageService }], propDecorators: { onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -1467,14 +1172,11 @@ class CoreFormDesignComponent extends BaseComponent {
         effect(() => {
             this.idStream$.next(this.$id());
         });
-        this.applicationHelpService.activeKey$.subscribe(x => {
+        this.applicationHelpService.activeKey$.pipe(distinctUntilChanged()).subscribe(x => {
             switch (x) {
                 case 'F3':
                     this.coreFormDesignService.$fieldSettingPanelOpen.set(true);
                     break;
-                case 'F4':
-                    this.coreFormDesignService.$showFormMetadata.set(true);
-                    break;
                 case 'F6':
                     this.coreFormDesignService.$mode.set(EnumFormDesignMode.Preview);
                     break;
@@ -1807,7 +1509,8 @@ class CoreFormDesignComponent extends BaseComponent {
                     this.coreFormDesignService.$afInstance.set(this.coreFormDesignService.mapFromAfInstanceDTO(x.body.innerBody));
                     this.coreFormDesignService.syncPlaceholderSectionsFromInstance();
                     this.coreFormDesignService.$shouldPatchMetadataForm.set(true);
-                    setTimeout(() => this.wfs.$initialFormDesignJson.set(this.coreFormDesignService.$saveLiveJson()));
+                    const saveLiveJson = this.coreFormDesignService.$saveLiveJson();
+                    setTimeout(() => this.wfs.$initialFormDesignJson.set(saveLiveJson));
                 }
             }));
             if (!this.$idAsInput()) {
@@ -1827,52 +1530,9 @@ class CoreFormDesignComponent extends BaseComponent {
                         return;
                     }
                     this.idStream$.next(id);
-                    /*
-                    if (id !== '0') {
-                      this.coreFormDesignService.editMode$.next(EnumCorePageEditMode.UPDATE);
-                      this.coreFormDesignService.$submitText.set(EnumTranslateKey.UI_EDIT_FORM_BUTTON_SAVE);
-                      this.$loading.set(true);
-        
-                      this.subscriptions.push(
-                        this.coreFormDesignService.getById(id)
-                          .pipe(
-                            catchError(err => {
-                              this.$loading.set(false);
-                              const msg =
-                                err?.error?.message ||       // API-defined message
-                                err?.message ||              // Native JS or HttpErrorResponse
-                                err?.statusText ||           // Fallback
-                                'An unknown error occurred.';
-        
-                              this.alertService.error(msg, noneAutoClosedAlertOptions);
-                              return of(err);
-                            })
-                          )
-                          .subscribe(x => {
-                            this.$loading.set(false);
-                            if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
-                              this.coreFormDesignService.$afInstance.set(
-                                this.coreFormDesignService.mapFromAfInstanceDTO(x.body.innerBody)
-                              )
-                              this.coreFormDesignService.syncPlaceholderSectionsFromInstance();
-                              this.coreFormDesignService.$shouldPatchMetadataForm.set(true);
-                            }
-                          })
-                      )
-                    }
-                    */
-                    /*
-                    const workflowId = this.route.parent?.snapshot.paramMap.get('id');
-                    const hasProcessDesignSegment = this.router.url.includes('process-design');
-                    if (!!workflowId && !!hasProcessDesignSegment) {
-                      this.wfs.getById(workflowId);
-                    }
-                    */
                 }));
             }
-            // if (!!this.workflow) {
-            //   this.wfs.getById(this.workflow.id)
-            // }
+            console.warn('InitialFormDesignJson on load', this.wfs.$initialFormDesignJson());
         });
     }
     onControlParamsChange(updated) {
@@ -1943,7 +1603,7 @@ class CoreFormDesignComponent extends BaseComponent {
             this.listenerFn();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormDesignComponent, isStandalone: true, selector: "core-form-design", inputs: { $idAsInput: { classPropertyName: "$idAsInput", publicName: "$idAsInput", isSignal: true, isRequired: false, transformFunction: null }, $id: { classPropertyName: "$id", publicName: "$id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "$settingPanel", first: true, predicate: ["settingPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F4', 'F6', 'Escape']\">\r\n\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n    <ng-template #formMetadata>\r\n        <form-metadata></form-metadata>\r\n    </ng-template>\r\n\r\n    <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n        [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n    </aside>\r\n\r\n    <div class=\"field-setting-panel\" [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" #settingPanel>\r\n        @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n            <field-setting></field-setting>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"form-design-left\">\r\n\r\n        @switch ($leftPanelMode()) {\r\n            @case (enumLeftPanelMode.FieldCollection) {\r\n                @for (category of controlCategories; track $index) {\r\n                    <div class=\"category-name\">\r\n                        {{ category.name }}\r\n                    </div>\r\n                    <ul>\r\n                        @for (control of category.controls; track $index) {\r\n                        <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT'\">\r\n                            <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </li>\r\n                        <div class=\"space\"></div>\r\n                        }\r\n                    </ul>\r\n                    }\r\n            }\r\n            @case (enumLeftPanelMode.SelectedFieldJson) {\r\n                <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() | tableCell : 'TRIM' : lang }}</pre>\r\n            }\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"form-design-right\">\r\n\r\n        @if (coreFormDesignService.$mode() === enumType.Default) {\r\n            <div class=\"form-wrapper\">\r\n            <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n                <div class=\"form-cells\">\r\n\r\n                    <div class=\"form-tool-bar\">\r\n                        <button class=\"core-button-vns-container\" (click)=\"showMetadata()\" [appTooltip]=\"'You can use F4 key to show form Metadata'\">Show Metadata</button>\r\n                        <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n                    </div>\r\n    \r\n                    @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n                        <div class=\"form-section-placeholder\">\r\n\r\n                          <div class=\"section-header\">\r\n\r\n                            <div class=\"section-img-wrapper\">\r\n                                <div class=\"section-img\"></div>\r\n                            </div>\r\n\r\n                            <label contenteditable=\"true\"\r\n                                (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n                                (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n                            >{{ section.caption }}</label>\r\n\r\n                            <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n                                <i class=\"feather-x\"></i>\r\n                            </div>\r\n                            \r\n                          </div>\r\n                      \r\n                          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n                            <div class=\"form-row-wrapper\">\r\n                                <div class=\"form-row\">\r\n                                    @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n                                      <div class=\"form-cell drop-target\" \r\n                                           [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n                                           [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n                                           (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n                                           (dragover)=\"onDragOver($event)\"\r\n                                           (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           [class.selected]=\"cell?.selected\"\r\n                                           [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n                                           [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n                                           (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n                                      >\r\n\r\n\r\n                                        @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n                                                @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n                                                    <label contenteditable=\"true\"\r\n                                                      (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n                                                      (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n                                                      [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n                                                      [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n                                                    >{{ cell.control.label || 'label' }}</label>\r\n                                                    <core-control \r\n                                                    [control]=\"getControl(cell)!\" \r\n                                                    [form]=\"formDesign\"\r\n                                                    [checkError$]=\"checkError$\" />\r\n      \r\n                                                    <div class=\"field-toolbar\">\r\n                                                      <ul>\r\n                                                          <li>\r\n                                                              <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n                                                                  <i class=\"feather-settings\"></i>\r\n                                                              </div>\r\n                                                          </li>\r\n                                                          <li>\r\n                                                              <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n                                                                  <i class=\"feather-x\"></i>\r\n                                                              </div>\r\n                                                          </li>\r\n                                                      </ul>\r\n                                                    </div>\r\n        \r\n                                              } @else {\r\n                                                <div class=\"placeholder\">Drop here</div>\r\n                                              }\r\n\r\n                                              @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n                                                <div class=\"merge-toolbar\">\r\n                                                    <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n                                                </div>\r\n                                              }\r\n    \r\n                                        }\r\n\r\n                                      </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row-tool-bar\">\r\n                                    <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n                                </div>\r\n                            </div>\r\n\r\n                          }\r\n                        </div>\r\n                    }\r\n                      \r\n              \r\n                </div>\r\n            </form>\r\n            </div>\r\n        } @else if (!!$sections()) {\r\n\r\n\r\n            @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n                <live-form [$designMode]=\"true\" />\r\n            } @else {\r\n                <live-form [$designMode]=\"true\" ($onClose)=\"closePreview()\"></live-form>\r\n            }\r\n\r\n\r\n        } @else {\r\n            <h2>$sections() empty / null / undefined</h2>\r\n        }\r\n\r\n\r\n        \r\n    </div>\r\n    @if ($loading()) {\r\n        <core-toast-loading></core-toast-loading>\r\n    }\r\n    \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-core-page-header-height));top:calc(var(--size-core-page-header-height) + var(--size-header-height));right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out;z-index:99}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 155px)}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoreToastLoadingComponent, selector: "core-toast-loading" }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: FormMetadataComponent, selector: "form-metadata" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "directive", type: HotKeysDirective, selector: "[hotKeys]", inputs: ["hotKeys"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "component", type: FieldSettingComponent, selector: "field-setting" }, { kind: "component", type: LiveFormComponent, selector: "live-form", inputs: ["$designMode"], outputs: ["$onClose"] }], animations: [slideFromTopFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormDesignComponent, isStandalone: true, selector: "core-form-design", inputs: { $idAsInput: { classPropertyName: "$idAsInput", publicName: "$idAsInput", isSignal: true, isRequired: false, transformFunction: null }, $id: { classPropertyName: "$id", publicName: "$id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "$settingPanel", first: true, predicate: ["settingPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n    <ng-template #formMetadata>\r\n        <form-metadata></form-metadata>\r\n    </ng-template>\r\n\r\n    @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n        <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n            [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n        >\r\n            <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n        </aside>\r\n    }\r\n\r\n    <div class=\"field-setting-panel\" [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" #settingPanel>\r\n        @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n            <field-setting></field-setting>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"form-design-left\">\r\n\r\n        @switch ($leftPanelMode()) {\r\n            @case (enumLeftPanelMode.FieldCollection) {\r\n                @for (category of controlCategories; track $index) {\r\n                    <div class=\"category-name\">\r\n                        {{ category.name }}\r\n                    </div>\r\n                    <ul>\r\n                        @for (control of category.controls; track $index) {\r\n                        <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT'\">\r\n                            <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </li>\r\n                        <div class=\"space\"></div>\r\n                        }\r\n                    </ul>\r\n                    }\r\n            }\r\n            @case (enumLeftPanelMode.SelectedFieldJson) {\r\n                <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() | tableCell : 'TRIM' : lang }}</pre>\r\n            }\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"form-design-right\">\r\n        @if (coreFormDesignService.$mode() === enumType.Default) {\r\n            <div class=\"form-wrapper\">\r\n\r\n                @if (!!coreFormDesignService.$isInWorkflowDesign()) {\r\n                    <form-metadata></form-metadata>\r\n                }\r\n\r\n                <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n                <div class=\"form-cells\">\r\n\r\n                    <div class=\"form-tool-bar\">\r\n                        @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n                            <button class=\"core-button-vns-container\" (click)=\"showMetadata()\" [appTooltip]=\"'You can use F4 key to show form Metadata'\">Show Metadata</button>\r\n                        }\r\n                        <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n                    </div>\r\n    \r\n                    @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n                        <div class=\"form-section-placeholder\">\r\n\r\n                          <div class=\"section-header\">\r\n\r\n                            <div class=\"section-img-wrapper\">\r\n                                <div class=\"section-img\"></div>\r\n                            </div>\r\n\r\n                            <label contenteditable=\"true\"\r\n                                (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n                                (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n                            >{{ section.caption }}</label>\r\n\r\n                            <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n                                <i class=\"feather-x\"></i>\r\n                            </div>\r\n                            \r\n                          </div>\r\n                      \r\n                          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n                            <div class=\"form-row-wrapper\">\r\n                                <div class=\"form-row\">\r\n                                    @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n                                      <div class=\"form-cell drop-target\" \r\n                                           [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n                                           [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n                                           (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n                                           (dragover)=\"onDragOver($event)\"\r\n                                           (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           [class.selected]=\"cell?.selected\"\r\n                                           [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n                                           [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n                                           (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n                                      >\r\n\r\n\r\n                                        @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n                                                @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n                                                    <label contenteditable=\"true\"\r\n                                                      (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n                                                      (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n                                                      [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n                                                      [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n                                                    >{{ cell.control.label || 'label' }}</label>\r\n                                                    <core-control \r\n                                                    [control]=\"getControl(cell)!\" \r\n                                                    [form]=\"formDesign\"\r\n                                                    [checkError$]=\"checkError$\" />\r\n      \r\n                                                    <div class=\"field-toolbar\">\r\n                                                      <ul>\r\n                                                          <li>\r\n                                                              <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n                                                                  <i class=\"feather-settings\"></i>\r\n                                                              </div>\r\n                                                          </li>\r\n                                                          <li>\r\n                                                              <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n                                                                  <i class=\"feather-x\"></i>\r\n                                                              </div>\r\n                                                          </li>\r\n                                                      </ul>\r\n                                                    </div>\r\n        \r\n                                              } @else {\r\n                                                <div class=\"placeholder\">Drop here</div>\r\n                                              }\r\n\r\n                                              @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n                                                <div class=\"merge-toolbar\">\r\n                                                    <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n                                                </div>\r\n                                              }\r\n    \r\n                                        }\r\n\r\n                                      </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row-tool-bar\">\r\n                                    <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n                                </div>\r\n                            </div>\r\n\r\n                          }\r\n                        </div>\r\n                    }\r\n                      \r\n              \r\n                </div>\r\n            </form>\r\n            </div>\r\n        } @else if (!!$sections()) {\r\n\r\n\r\n            @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n                <live-form [$designMode]=\"true\" />\r\n            } @else {\r\n                <live-form [$designMode]=\"true\" ($onClose)=\"closePreview()\"></live-form>\r\n            }\r\n\r\n\r\n        } @else {\r\n            <h2>$sections() empty / null / undefined</h2>\r\n        }\r\n\r\n\r\n        \r\n    </div>\r\n    @if ($loading()) {\r\n        <core-toast-loading></core-toast-loading>\r\n    }\r\n    \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-core-page-header-height));top:calc(var(--size-core-page-header-height) + var(--size-header-height));right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out;z-index:99}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 155px)}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoreToastLoadingComponent, selector: "core-toast-loading" }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: FormMetadataComponent, selector: "form-metadata" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "directive", type: HotKeysDirective, selector: "[hotKeys]", inputs: ["hotKeys"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "component", type: FieldSettingComponent, selector: "field-setting" }, { kind: "component", type: LiveFormComponent, selector: "live-form", inputs: ["$designMode"], outputs: ["$onClose"] }], animations: [slideFromTopFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, decorators: [{
             type: Component,
@@ -1972,7 +1632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         CoreCurrencyInputComponent,
                         FieldSettingComponent,
                         LiveFormComponent,
-                    ], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F4', 'F6', 'Escape']\">\r\n\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n    <ng-template #formMetadata>\r\n        <form-metadata></form-metadata>\r\n    </ng-template>\r\n\r\n    <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n        [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n    >\r\n        <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n    </aside>\r\n\r\n    <div class=\"field-setting-panel\" [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" #settingPanel>\r\n        @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n            <field-setting></field-setting>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"form-design-left\">\r\n\r\n        @switch ($leftPanelMode()) {\r\n            @case (enumLeftPanelMode.FieldCollection) {\r\n                @for (category of controlCategories; track $index) {\r\n                    <div class=\"category-name\">\r\n                        {{ category.name }}\r\n                    </div>\r\n                    <ul>\r\n                        @for (control of category.controls; track $index) {\r\n                        <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT'\">\r\n                            <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </li>\r\n                        <div class=\"space\"></div>\r\n                        }\r\n                    </ul>\r\n                    }\r\n            }\r\n            @case (enumLeftPanelMode.SelectedFieldJson) {\r\n                <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() | tableCell : 'TRIM' : lang }}</pre>\r\n            }\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"form-design-right\">\r\n\r\n        @if (coreFormDesignService.$mode() === enumType.Default) {\r\n            <div class=\"form-wrapper\">\r\n            <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n                <div class=\"form-cells\">\r\n\r\n                    <div class=\"form-tool-bar\">\r\n                        <button class=\"core-button-vns-container\" (click)=\"showMetadata()\" [appTooltip]=\"'You can use F4 key to show form Metadata'\">Show Metadata</button>\r\n                        <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n                    </div>\r\n    \r\n                    @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n                        <div class=\"form-section-placeholder\">\r\n\r\n                          <div class=\"section-header\">\r\n\r\n                            <div class=\"section-img-wrapper\">\r\n                                <div class=\"section-img\"></div>\r\n                            </div>\r\n\r\n                            <label contenteditable=\"true\"\r\n                                (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n                                (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n                            >{{ section.caption }}</label>\r\n\r\n                            <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n                                <i class=\"feather-x\"></i>\r\n                            </div>\r\n                            \r\n                          </div>\r\n                      \r\n                          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n                            <div class=\"form-row-wrapper\">\r\n                                <div class=\"form-row\">\r\n                                    @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n                                      <div class=\"form-cell drop-target\" \r\n                                           [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n                                           [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n                                           (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n                                           (dragover)=\"onDragOver($event)\"\r\n                                           (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           [class.selected]=\"cell?.selected\"\r\n                                           [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n                                           [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n                                           (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n                                      >\r\n\r\n\r\n                                        @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n                                                @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n                                                    <label contenteditable=\"true\"\r\n                                                      (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n                                                      (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n                                                      [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n                                                      [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n                                                    >{{ cell.control.label || 'label' }}</label>\r\n                                                    <core-control \r\n                                                    [control]=\"getControl(cell)!\" \r\n                                                    [form]=\"formDesign\"\r\n                                                    [checkError$]=\"checkError$\" />\r\n      \r\n                                                    <div class=\"field-toolbar\">\r\n                                                      <ul>\r\n                                                          <li>\r\n                                                              <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n                                                                  <i class=\"feather-settings\"></i>\r\n                                                              </div>\r\n                                                          </li>\r\n                                                          <li>\r\n                                                              <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n                                                                  <i class=\"feather-x\"></i>\r\n                                                              </div>\r\n                                                          </li>\r\n                                                      </ul>\r\n                                                    </div>\r\n        \r\n                                              } @else {\r\n                                                <div class=\"placeholder\">Drop here</div>\r\n                                              }\r\n\r\n                                              @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n                                                <div class=\"merge-toolbar\">\r\n                                                    <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n                                                </div>\r\n                                              }\r\n    \r\n                                        }\r\n\r\n                                      </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row-tool-bar\">\r\n                                    <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n                                </div>\r\n                            </div>\r\n\r\n                          }\r\n                        </div>\r\n                    }\r\n                      \r\n              \r\n                </div>\r\n            </form>\r\n            </div>\r\n        } @else if (!!$sections()) {\r\n\r\n\r\n            @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n                <live-form [$designMode]=\"true\" />\r\n            } @else {\r\n                <live-form [$designMode]=\"true\" ($onClose)=\"closePreview()\"></live-form>\r\n            }\r\n\r\n\r\n        } @else {\r\n            <h2>$sections() empty / null / undefined</h2>\r\n        }\r\n\r\n\r\n        \r\n    </div>\r\n    @if ($loading()) {\r\n        <core-toast-loading></core-toast-loading>\r\n    }\r\n    \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-core-page-header-height));top:calc(var(--size-core-page-header-height) + var(--size-header-height));right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out;z-index:99}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 155px)}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"] }]
+                    ], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n    <ng-template #formMetadata>\r\n        <form-metadata></form-metadata>\r\n    </ng-template>\r\n\r\n    @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n        <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n            [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n        >\r\n            <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n        </aside>\r\n    }\r\n\r\n    <div class=\"field-setting-panel\" [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" #settingPanel>\r\n        @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n            <field-setting></field-setting>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"form-design-left\">\r\n\r\n        @switch ($leftPanelMode()) {\r\n            @case (enumLeftPanelMode.FieldCollection) {\r\n                @for (category of controlCategories; track $index) {\r\n                    <div class=\"category-name\">\r\n                        {{ category.name }}\r\n                    </div>\r\n                    <ul>\r\n                        @for (control of category.controls; track $index) {\r\n                        <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT'\">\r\n                            <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </li>\r\n                        <div class=\"space\"></div>\r\n                        }\r\n                    </ul>\r\n                    }\r\n            }\r\n            @case (enumLeftPanelMode.SelectedFieldJson) {\r\n                <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() | tableCell : 'TRIM' : lang }}</pre>\r\n            }\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"form-design-right\">\r\n        @if (coreFormDesignService.$mode() === enumType.Default) {\r\n            <div class=\"form-wrapper\">\r\n\r\n                @if (!!coreFormDesignService.$isInWorkflowDesign()) {\r\n                    <form-metadata></form-metadata>\r\n                }\r\n\r\n                <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n                <div class=\"form-cells\">\r\n\r\n                    <div class=\"form-tool-bar\">\r\n                        @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n                            <button class=\"core-button-vns-container\" (click)=\"showMetadata()\" [appTooltip]=\"'You can use F4 key to show form Metadata'\">Show Metadata</button>\r\n                        }\r\n                        <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n                    </div>\r\n    \r\n                    @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n                        <div class=\"form-section-placeholder\">\r\n\r\n                          <div class=\"section-header\">\r\n\r\n                            <div class=\"section-img-wrapper\">\r\n                                <div class=\"section-img\"></div>\r\n                            </div>\r\n\r\n                            <label contenteditable=\"true\"\r\n                                (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n                                (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n                            >{{ section.caption }}</label>\r\n\r\n                            <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n                                <i class=\"feather-x\"></i>\r\n                            </div>\r\n                            \r\n                          </div>\r\n                      \r\n                          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n                            <div class=\"form-row-wrapper\">\r\n                                <div class=\"form-row\">\r\n                                    @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n                                      <div class=\"form-cell drop-target\" \r\n                                           [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n                                           [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n                                           (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n                                           (dragover)=\"onDragOver($event)\"\r\n                                           (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           [class.selected]=\"cell?.selected\"\r\n                                           [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n                                           [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n                                           (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n                                      >\r\n\r\n\r\n                                        @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n                                                @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n                                                    <label contenteditable=\"true\"\r\n                                                      (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n                                                      (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n                                                      [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n                                                      [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n                                                    >{{ cell.control.label || 'label' }}</label>\r\n                                                    <core-control \r\n                                                    [control]=\"getControl(cell)!\" \r\n                                                    [form]=\"formDesign\"\r\n                                                    [checkError$]=\"checkError$\" />\r\n      \r\n                                                    <div class=\"field-toolbar\">\r\n                                                      <ul>\r\n                                                          <li>\r\n                                                              <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n                                                                  <i class=\"feather-settings\"></i>\r\n                                                              </div>\r\n                                                          </li>\r\n                                                          <li>\r\n                                                              <div class=\"field-tool pointer\" (click)=\"deleteField(row, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n                                                                  <i class=\"feather-x\"></i>\r\n                                                              </div>\r\n                                                          </li>\r\n                                                      </ul>\r\n                                                    </div>\r\n        \r\n                                              } @else {\r\n                                                <div class=\"placeholder\">Drop here</div>\r\n                                              }\r\n\r\n                                              @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n                                                <div class=\"merge-toolbar\">\r\n                                                    <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n                                                </div>\r\n                                              }\r\n    \r\n                                        }\r\n\r\n                                      </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row-tool-bar\">\r\n                                    <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n                                </div>\r\n                            </div>\r\n\r\n                          }\r\n                        </div>\r\n                    }\r\n                      \r\n              \r\n                </div>\r\n            </form>\r\n            </div>\r\n        } @else if (!!$sections()) {\r\n\r\n\r\n            @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n                <live-form [$designMode]=\"true\" />\r\n            } @else {\r\n                <live-form [$designMode]=\"true\" ($onClose)=\"closePreview()\"></live-form>\r\n            }\r\n\r\n\r\n        } @else {\r\n            <h2>$sections() empty / null / undefined</h2>\r\n        }\r\n\r\n\r\n        \r\n    </div>\r\n    @if ($loading()) {\r\n        <core-toast-loading></core-toast-loading>\r\n    }\r\n    \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-core-page-header-height));top:calc(var(--size-core-page-header-height) + var(--size-header-height));right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out;z-index:99}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;color:#fff;overflow-y:hidden}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 155px)}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"] }]
         }], ctorParameters: () => [{ type: MultiLanguageService }] });
 
 var coreFormDesign_component = /*#__PURE__*/Object.freeze({
@@ -1981,4 +1641,4 @@ var coreFormDesign_component = /*#__PURE__*/Object.freeze({
 });
 
 export { CoreToastLoadingComponent as C, CoreFormDesignComponent as a, coreFormDesign_component as c };
-//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-BAQldwh8.mjs.map
+//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-CCVshW2-.mjs.map