ngx-histaff-alpha 5.1.8 → 5.1.9

package/fesm2022/ngx-histaff-alpha-core-form-design.component-BVDW_HiI.mjs

@@ -0,0 +1,1851 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, computed, Component, signal, effect, HostListener, ChangeDetectionStrategy, Injectable, ViewContainerRef, Input, EventEmitter, Output, Renderer2, ViewChild } from '@angular/core';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import { C as CoreFormDesignService, B as BaseEditComponent, A as AlertService, E as EnumCorePageEditMode, a as EnumFormBaseContolType, b as EnumCoreButtonVNSCode, n as noneAutoClosedAlertOptions, D as DialogService, c as CorePageHeaderComponent, d as CoreFormComponent, e as CoreButtonGroupVnsComponent, T as TranslatePipe, f as BaseComponent, g as EnumCoreTablePipeType, h as CoreCheckboxComponent, i as CoreDropdownComponent, M as MultiLanguageService, j as TooltipDirective, k as EnumFormDesignMode, l as EnumCoreFormControlSeekerSourceType, F as FullscreenModalLoaderComponent, m as TableCellPipe, o as CoreControlComponent, p as CoreChecklistComponent, q as CoreFormControlSeekerComponent, r as CoreAttachmentComponent, s as CoreDatePickerComponent, t as CoreRadioGroupComponent, u as CoreMonthSelectorComponent, v as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-BuRoId1C.mjs';
+import * as i1 from '@angular/forms';
+import { Validators, FormsModule, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { NgStyle, NgTemplateOutlet } from '@angular/common';
+import { BehaviorSubject, catchError, of } from 'rxjs';
+import { EnumTranslateKey } from 'alpha-global-constants';
+import { ActivatedRoute } from '@angular/router';
+
+const slideFromTopFadeIn = trigger('slideFromTopFadeIn', [
+    state('in', style({ opacity: 1, transform: 'translateY(0)' })),
+    state('out', style({ opacity: 0, transform: 'translateY(-50vh)' })),
+    transition('out => in', [
+        animate('200ms ease-out')
+    ]),
+    transition('in => out', [
+        animate('150ms ease-in')
+    ])
+]);
+
+class SaveLiveJsonComponent {
+    constructor() {
+        this.coreFormDesignService = inject(CoreFormDesignService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.json$ = computed(() => {
+            const removeSignalKeysDeep = (obj) => {
+                if (Array.isArray(obj)) {
+                    return obj.map(removeSignalKeysDeep);
+                }
+                if (obj && typeof obj === 'object') {
+                    return Object.entries(obj)
+                        .filter(([key]) => !key.endsWith('$'))
+                        .reduce((acc, [key, value]) => {
+                        acc[key] = removeSignalKeysDeep(value);
+                        return acc;
+                    }, {});
+                }
+                return obj;
+            };
+            const instance = this.coreFormDesignService.$afInstance();
+            const cleanedInstance = removeSignalKeysDeep(instance); // Remove signals or $ fields
+            return JSON.stringify(cleanedInstance, null, 2);
+        });
+    }
+    copyToClipboard() {
+        navigator.clipboard.writeText(this.json$());
+    }
+    download() {
+        const blob = new Blob([this.json$()], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${this.coreFormDesignService.$afInstance().name || 'form'}.json`;
+        link.click();
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.cdr.markForCheck());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SaveLiveJsonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: SaveLiveJsonComponent, isStandalone: true, selector: "save-live-json", ngImport: i0, template: "<pre class=\"json-preview\">{{ json$() }}</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 - 230px);margin:0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SaveLiveJsonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'save-live-json', imports: [], template: "<pre class=\"json-preview\">{{ json$() }}</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 - 230px);margin:0}\n"] }]
+        }] });
+
+const URL_PATTERN = '^(https?:\\/\\/[^\\s]+|\\/api(\\/[-\\w._]+)+)$';
+class FormMetadataComponent extends BaseEditComponent {
+    onEscape() {
+        this.coreFormDesignService.$showFormMetadata.set(false);
+    }
+    onWindowClick(_) {
+        /*
+        Trigger	What Happens
+      🖱️ First Click:	Opens checklist overlay, but Angular hasn’t re-checked the DOM yet → markForCheck() is called, but view not updated yet
+    🖱️   Second Click:	Now DOM is updated, click is registered inside the actual rendered checklist, interaction works
+        */
+        //This lets Angular finish updating the DOM before running change detection.
+        setTimeout(() => this.cdr.markForCheck());
+    }
+    constructor(dialogService) {
+        super(dialogService);
+        this.dialogService = dialogService;
+        this.coreFormDesignService = inject(CoreFormDesignService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.alertService = inject(AlertService);
+        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.customButtons = [
+            EnumCoreButtonVNSCode.NONE_HEADER_SAVE,
+        ];
+        effect(() => {
+            if (this.coreFormDesignService.$shouldPatchMetadataForm()) {
+                this.patchFormFromInstance();
+                this.coreFormDesignService.$shouldPatchMetadataForm.set(false); // ✅ reset
+            }
+        });
+    }
+    patchFormFromInstance() {
+        const instance = this.coreFormDesignService.$afInstance();
+        this.form.patchValue({
+            name: instance.name,
+            captionCode: instance.captionCode,
+            entityTable: instance.entityTable ?? '',
+            submitApi: instance.submitApi,
+            postSubmitRoute: instance.postSubmitRoute ?? '',
+            postCancelRoute: instance.postCancelRoute ?? '',
+            normalMode: instance.normalMode ?? false,
+            autoGetByIdOff: instance.autoGetByIdOff ?? false,
+            hasIdOfStringType: instance.hasIdOfStringType ?? false,
+            customFormButtonItems: instance.customFormButtonItems ?? [],
+            crudCreate: instance.crud?.c ?? '',
+            crudRead: instance.crud?.r ?? '',
+            crudUpdate: instance.crud?.u ?? '',
+            crudDelete: instance.crud?.d ?? '',
+            crudReadChildren: instance.crud?.rChildren ?? '',
+            entityUniqueIndexesJson: JSON.stringify(instance.entityUniqueIndexes ?? [])
+        });
+    }
+    onButtonClick(e) {
+        if (e.code === EnumCoreButtonVNSCode.NONE_HEADER_SAVE) {
+            if (this.form.valid) {
+                this.$loading.set(true);
+                const apiObject = this.coreFormDesignService.editMode$.value === EnumCorePageEditMode.CREATE ?
+                    this.coreFormDesignService.createFormInstance(this.coreFormDesignService.$afInstance()) :
+                    this.coreFormDesignService.updateFormInstance(this.coreFormDesignService.$afInstance());
+                const apiObservable = apiObject.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(msg);
+                }));
+                apiObservable.subscribe(x => {
+                    this.$loading.set(false);
+                    if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                        //this.alertService.success('Success!', alertOptions)
+                    }
+                });
+            }
+            else {
+                this.checkError$.next(!this.checkError$.value);
+                setTimeout(() => this.cdr.markForCheck());
+            }
+        }
+    }
+    onClose() {
+        this.coreFormDesignService.$showFormMetadata.set(false);
+    }
+    onSave(e) {
+    }
+    onFormCreated(event) {
+        const form = event.formGroup;
+        /*form.valueChanges.subscribe(value => {
+          const current = this.coreFormDesignService.$afInstance();
+    
+          const safeKeys = Object.keys(value).filter(key => !key.endsWith('$'));
+          const safeUpdate = Object.fromEntries(
+            safeKeys.map(key => [key, value[key]])
+          );
+    
+          this.coreFormDesignService.$afInstance.set({
+            ...current,
+            ...safeUpdate
+          });
+        });*/
+        form.valueChanges.subscribe(value => {
+            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
+            id: _ignored, ...rest } = value;
+            const updatedCrud = {
+                ...current.crud,
+                ...(crudCreate !== undefined ? { c: crudCreate } : {}),
+                ...(crudRead !== undefined ? { r: crudRead } : {}),
+                ...(crudUpdate !== undefined ? { u: crudUpdate } : {}),
+                ...(crudDelete !== undefined ? { d: crudDelete } : {}),
+                ...(crudReadChildren !== undefined ? { rChildren: crudReadChildren } : {})
+            };
+            const next = {
+                ...current,
+                ...rest,
+                crud: updatedCrud
+            };
+            this.coreFormDesignService.$afInstance.set(next);
+        });
+        form.statusChanges.subscribe(status => {
+            // Optional: Save status if you want to show error summary, disable save button, etc.
+            this.formStatus = status; // string: 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED'
+        });
+        this.form = form;
+    }
+    ngAfterViewInit() {
+        // Defer to next tick to avoid ExpressionChangedAfterItHasBeenCheckedError
+        setTimeout(() => {
+            const allButtons = Object.values(EnumCoreButtonVNSCode);
+            const noneHeaderOptions = allButtons
+                .filter(value => value.startsWith('NONE_HEADER_') && value !== 'NONE_HEADER_IMPORT_OPTION')
+                .map(value => ({
+                value,
+                text: value,
+                checked: false
+            }));
+            this.customButtonChecklistOptions$.next(noneHeaderOptions);
+            const sections = this.coreFormDesignService.$placeholderSections();
+            // 🔥 DO NOT READ this.$afInstance()
+            this.coreFormDesignService.$afInstance.update(instance => ({
+                ...instance,
+                formDesignSections: sections
+            }));
+            // Inform Angular to re-check since values arrived late
+            this.cdr.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormMetadataComponent, deps: [{ token: DialogService }], 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    <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 \r\n                [inputSections]=\"$sections()\" \r\n                [width]=\"800\" [mode$]=\"mode$\" \r\n                [checkError$]=\"checkError$\" \r\n                [hideButtons]=\"true\"\r\n                (onFormCreated)=\"onFormCreated($event)\"></core-form>\r\n        </div>\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\r\n    <div class=\"h15\"></div>\r\n    <div class=\"d-flex d-flex-end w-100 pr1rem\">\r\n        <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\"\r\n            (buttonClick)=\"onButtonClick($event)\" [shownItems]=\"customButtons\"\r\n            class=\"buttonGroupCustom\"></core-button-group-vns>\r\n    </div>\r\n\r\n\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}\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"], 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,
+            args: [{ selector: 'form-metadata', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        TranslatePipe,
+                        CorePageHeaderComponent,
+                        CoreFormComponent,
+                        SaveLiveJsonComponent,
+                        CoreButtonGroupVnsComponent
+                    ], template: "<div class=\"form-metadata-container\">\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 \r\n                [inputSections]=\"$sections()\" \r\n                [width]=\"800\" [mode$]=\"mode$\" \r\n                [checkError$]=\"checkError$\" \r\n                [hideButtons]=\"true\"\r\n                (onFormCreated)=\"onFormCreated($event)\"></core-form>\r\n        </div>\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\r\n    <div class=\"h15\"></div>\r\n    <div class=\"d-flex d-flex-end w-100 pr1rem\">\r\n        <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\"\r\n            (buttonClick)=\"onButtonClick($event)\" [shownItems]=\"customButtons\"\r\n            class=\"buttonGroupCustom\"></core-button-group-vns>\r\n    </div>\r\n\r\n\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}\n"] }]
+        }], ctorParameters: () => [{ type: DialogService }], propDecorators: { onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }], onWindowClick: [{
+                type: HostListener,
+                args: ['window:click', ['$event']]
+            }] } });
+
+class AttachmentFieldHelperService {
+    static isAttachment(control) {
+        return control.controlType === 'ATTACHMENT';
+    }
+    static autoGenerateAttachmentNames(baseName) {
+        return {
+            field: baseName + 'Buffer',
+            assignTo: baseName
+        };
+    }
+    static buildHiddenAssignToField(baseFieldName) {
+        return {
+            field: baseFieldName,
+            controlType: EnumFormBaseContolType.TEXTBOX,
+            type: 'string',
+            label: '',
+            value: '',
+            hidden: true,
+            flexSize: 0
+        };
+    }
+    static injectAssignToFieldIntoRow(row, assignToField) {
+        row.cells.push({ flexSize: assignToField.flexSize ?? 12, control: assignToField });
+    }
+    /**
+     * Called when user edits the "field" of an ATTACHMENT control
+     */
+    static handleFieldNameChangeForAttachment(control, form, typedFieldName) {
+        const { field, assignTo } = this.autoGenerateAttachmentNames(typedFieldName);
+        control.field = field;
+        control.assignTo = assignTo;
+    }
+    /**
+     * Called in drop handler when user drops a new ATTACHMENT
+     */
+    static setupAttachmentOnDrop(newControl, form) {
+        if (this.isAttachment(newControl)) {
+            const baseName = newControl.field.replace(/Buffer$/, '');
+            const { field, assignTo } = this.autoGenerateAttachmentNames(baseName);
+            newControl.field = field;
+            newControl.assignTo = assignTo;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AttachmentFieldHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AttachmentFieldHelperService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AttachmentFieldHelperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class BasePropsComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.coreFormDesignService = inject(CoreFormDesignService);
+        this.$selectedCell = this.coreFormDesignService.$selectedCell;
+        this.$formContext = this.coreFormDesignService.$formContext;
+        this.form = this.coreFormDesignService.formDesign;
+        this.patchControl = this.coreFormDesignService.patchControl.bind(this.coreFormDesignService);
+        this.normalize = this.coreFormDesignService.normalize.bind(this.coreFormDesignService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.setControlProp = this.coreFormDesignService.setControlProp.bind(this.coreFormDesignService);
+        this.$control = computed(() => {
+            const cell = this.$selectedCell();
+            if (!cell?.control)
+                throw new Error('No control selected!');
+            return this.normalize(cell.control);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BasePropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: BasePropsComponent, isStandalone: true, selector: "base-props", usesInheritance: true, ngImport: i0, template: './base-props.component.html', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BasePropsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'base-props',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: './base-props.component.html'
+                }]
+        }] });
+
+class MandatoryPropsComponent extends BasePropsComponent {
+    constructor() {
+        super(...arguments);
+        this.$typedField = computed(() => {
+            const control = this.$control();
+            return AttachmentFieldHelperService.isAttachment(control)
+                ? control.assignTo || ''
+                : control.field;
+        });
+    }
+    setTypedField(val) {
+        const control = this.$control();
+        const context = this.$formContext();
+        const toCamelCase = (input) => {
+            return input
+                .replace(/[^a-zA-Z0-9 ]/g, ' ') // remove special characters
+                .replace(/([a-z])([A-Z])/g, '$1 $2') // split camelCase
+                .replace(/\s+/g, ' ') // collapse multiple spaces
+                .trim()
+                .split(' ')
+                .map((word, index) => index === 0
+                ? word.toLowerCase()
+                : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+                .join('');
+        };
+        const corrected = toCamelCase(val);
+        const current = AttachmentFieldHelperService.isAttachment(control)
+            ? control.assignTo || ''
+            : control.field;
+        if (current === corrected)
+            return;
+        if (AttachmentFieldHelperService.isAttachment(control)) {
+            AttachmentFieldHelperService.handleFieldNameChangeForAttachment(control, context, corrected);
+        }
+        else {
+            control.field = corrected;
+        }
+        this.patchControl(control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MandatoryPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MandatoryPropsComponent, isStandalone: true, selector: "mandatory-props", usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group mandatory-group\">\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Field</label>\r\n    <input class=\"form-control\" type=\"text\" [ngModel]=\"$typedField()\" (ngModelChange)=\"setControlProp('field', $event)\" />\r\n  </div>\r\n\r\n  <!-- Label -->\r\n  <div class=\"setting-row\">\r\n    <label>Label</label>\r\n    <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.label\" (ngModelChange)=\"setControlProp('label', $event)\" />\r\n  </div>\r\n\r\n  <!-- Default -->\r\n  <div class=\"setting-row\">\r\n    <label>Default</label>\r\n    <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.value\" (ngModelChange)=\"setControlProp('value', $event)\" />\r\n  </div>\r\n\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MandatoryPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mandatory-props', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "<div class=\"setting-group mandatory-group\">\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Field</label>\r\n    <input class=\"form-control\" type=\"text\" [ngModel]=\"$typedField()\" (ngModelChange)=\"setControlProp('field', $event)\" />\r\n  </div>\r\n\r\n  <!-- Label -->\r\n  <div class=\"setting-row\">\r\n    <label>Label</label>\r\n    <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.label\" (ngModelChange)=\"setControlProp('label', $event)\" />\r\n  </div>\r\n\r\n  <!-- Default -->\r\n  <div class=\"setting-row\">\r\n    <label>Default</label>\r\n    <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.value\" (ngModelChange)=\"setControlProp('value', $event)\" />\r\n  </div>\r\n\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"] }]
+        }] });
+
+class OptionalPropsComponent extends BasePropsComponent {
+    constructor() {
+        super(...arguments);
+        this.pipeOptions = Object.values(EnumCoreTablePipeType);
+        this.pipeOptions$ = new BehaviorSubject(Object.values(EnumCoreTablePipeType).map(x => ({ value: x, text: x })));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: OptionalPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: OptionalPropsComponent, isStandalone: true, selector: "optional-props", usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group optional-group\">\r\n\r\n    <!-- \uD83D\uDD18 Boolean flags -->\r\n    <div class=\"setting-row optional-bool\">\r\n        <label>Readonly</label>\r\n        <core-checkbox ngModel ngDefaultControl [ngModel]=\"$control().readonly\" (ngModelChange)=\"setControlProp('readonly', $event)\" />\r\n    </div>\r\n\r\n    <div class=\"setting-row optional-bool\">\r\n        <label>Hidden</label>\r\n        <core-checkbox [ngModel]=\"$control().hidden\" (ngModelChange)=\"setControlProp('hidden', $event)\" />\r\n    </div>\r\n\r\n    <div class=\"setting-row optional-bool\">\r\n        <label>Disabled</label>\r\n        <core-checkbox [ngModel]=\"$control().disabled\" (ngModelChange)=\"setControlProp('disabled', $event)\" /> \r\n    </div>\r\n\r\n    <!-- \uD83D\uDCA1 Hint -->\r\n    <div class=\"setting-row\">\r\n        <label>Hint</label>\r\n        <input class=\"form-control\" type=\"text\" [ngModel]=\"$control().hint\" (ngModelChange)=\"setControlProp('hint', $event)\" />\r\n    </div>\r\n\r\n    <div class=\"setting-row\">\r\n        <label>Pipe</label>\r\n        <div class=\"control-wrapper\">\r\n            <core-dropdown [ngModel]=\"$control().pipe\" (ngModelChange)=\"setControlProp('pipe', $event)\"\r\n                [paramMode]=\"true\"\r\n                [options$]=\"pipeOptions$\"\r\n            >\r\n            </core-dropdown>\r\n        </div>\r\n    </div>\r\n\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "clearDisable", "fitHeightWithItemCount", "itemHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: OptionalPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'optional-props', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        CoreCheckboxComponent,
+                        CoreDropdownComponent
+                    ], template: "<div class=\"setting-group optional-group\">\r\n\r\n    <!-- \uD83D\uDD18 Boolean flags -->\r\n    <div class=\"setting-row optional-bool\">\r\n        <label>Readonly</label>\r\n        <core-checkbox ngModel ngDefaultControl [ngModel]=\"$control().readonly\" (ngModelChange)=\"setControlProp('readonly', $event)\" />\r\n    </div>\r\n\r\n    <div class=\"setting-row optional-bool\">\r\n        <label>Hidden</label>\r\n        <core-checkbox [ngModel]=\"$control().hidden\" (ngModelChange)=\"setControlProp('hidden', $event)\" />\r\n    </div>\r\n\r\n    <div class=\"setting-row optional-bool\">\r\n        <label>Disabled</label>\r\n        <core-checkbox [ngModel]=\"$control().disabled\" (ngModelChange)=\"setControlProp('disabled', $event)\" /> \r\n    </div>\r\n\r\n    <!-- \uD83D\uDCA1 Hint -->\r\n    <div class=\"setting-row\">\r\n        <label>Hint</label>\r\n        <input class=\"form-control\" type=\"text\" [ngModel]=\"$control().hint\" (ngModelChange)=\"setControlProp('hint', $event)\" />\r\n    </div>\r\n\r\n    <div class=\"setting-row\">\r\n        <label>Pipe</label>\r\n        <div class=\"control-wrapper\">\r\n            <core-dropdown [ngModel]=\"$control().pipe\" (ngModelChange)=\"setControlProp('pipe', $event)\"\r\n                [paramMode]=\"true\"\r\n                [options$]=\"pipeOptions$\"\r\n            >\r\n            </core-dropdown>\r\n        </div>\r\n    </div>\r\n\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"] }]
+        }] });
+
+class PropsHostComponent {
+    constructor() {
+        this.vcRef = inject(ViewContainerRef);
+    }
+    set props(value) {
+        this._props = value;
+        this.assignInputs();
+    }
+    async ngOnInit() {
+        if (this.loadComponent) {
+            const componentType = await this.loadComponent();
+            this.componentRef = this.vcRef.createComponent(componentType);
+            this.assignInputs();
+        }
+    }
+    assignInputs() {
+        if (this.componentRef && this._props) {
+            Object.assign(this.componentRef.instance, this._props);
+            this.componentRef.changeDetectorRef.markForCheck();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PropsHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: PropsHostComponent, isStandalone: true, selector: "props-host", inputs: { loadComponent: "loadComponent", props: "props" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: PropsHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'props-host',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { loadComponent: [{
+                type: Input
+            }], props: [{
+                type: Input
+            }] } });
+
+class AttachmentPropsComponent extends BasePropsComponent {
+    constructor() {
+        super(...arguments);
+        this.$typedField = computed(() => {
+            const control = this.$control();
+            return AttachmentFieldHelperService.isAttachment(control)
+                ? control.assignTo || ''
+                : control.field;
+        });
+    }
+    setTypedField(val) {
+        const control = this.$control();
+        const context = this.$formContext();
+        if (AttachmentFieldHelperService.isAttachment(control)) {
+            AttachmentFieldHelperService.handleFieldNameChangeForAttachment(control, context, val);
+        }
+        else {
+            control.field = val;
+        }
+        this.patchControl(control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AttachmentPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AttachmentPropsComponent, isStandalone: true, selector: "attachment-props", usesInheritance: true, ngImport: i0, template: "<p>attachment-props works!</p>\r\n", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AttachmentPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'attachment-props', imports: [], template: "<p>attachment-props works!</p>\r\n", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"] }]
+        }] });
+
+class ChecklistPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ChecklistPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: ChecklistPropsComponent, isStandalone: true, selector: "checklist-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>checklist-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ChecklistPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'checklist-props', imports: [], template: "<p>checklist-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+class DatepickerPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DatepickerPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DatepickerPropsComponent, isStandalone: true, selector: "datepicker-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>datepicker-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DatepickerPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'datepicker-props', imports: [], template: "<p>datepicker-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+class DropdownPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DropdownPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: DropdownPropsComponent, isStandalone: true, selector: "dropdown-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>dropdown-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DropdownPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dropdown-props', imports: [], template: "<p>dropdown-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+class GridBufferPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GridBufferPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: GridBufferPropsComponent, isStandalone: true, selector: "grid-buffer-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>grid-buffer-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GridBufferPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'grid-buffer-props', imports: [], template: "<p>grid-buffer-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+class ListPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ListPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: ListPropsComponent, isStandalone: true, selector: "list-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>list-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ListPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'list-props', imports: [], template: "<p>list-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+class MccPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MccPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: MccPropsComponent, isStandalone: true, selector: "mcc-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>mcc-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MccPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mcc-props', imports: [], template: "<p>mcc-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+class NumberPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NumberPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: NumberPropsComponent, isStandalone: true, selector: "number-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>number-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NumberPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'number-props', imports: [], template: "<p>number-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+var numberProps_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    NumberPropsComponent: NumberPropsComponent
+});
+
+class RadioGroupPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RadioGroupPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: RadioGroupPropsComponent, isStandalone: true, selector: "radio-group-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>radio-group-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RadioGroupPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'radio-group-props', imports: [], template: "<p>radio-group-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+class SeekerPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SeekerPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: SeekerPropsComponent, isStandalone: true, selector: "seeker-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>seeker-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SeekerPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seeker-props', imports: [], template: "<p>seeker-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+class TextareaPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TextareaPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: TextareaPropsComponent, isStandalone: true, selector: "textarea-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>textarea-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TextareaPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'textarea-props', imports: [], template: "<p>textarea-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+class UploaderPropsComponent {
+    constructor() {
+        this.controlChange = new EventEmitter();
+    }
+    update() {
+        this.controlChange.emit(this.control);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: UploaderPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: UploaderPropsComponent, isStandalone: true, selector: "uploader-props", inputs: { control: "control" }, outputs: { controlChange: "controlChange" }, ngImport: i0, template: "<p>uploader-props works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: UploaderPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uploader-props', imports: [], template: "<p>uploader-props works!</p>\r\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlChange: [{
+                type: Output
+            }] } });
+
+class ValidatorEditorComponent extends BasePropsComponent {
+    constructor(mls) {
+        super(mls);
+        this.mls = mls;
+        // 🔹 Computed list based on controlType
+        this.$availableValidators = computed(() => this.coreFormDesignService.getSupportedValidators(this.$control()));
+        // 🔹 Signal for selected validators with their values
+        this.$selectedValidators = signal({});
+        effect(() => {
+            const c = this.$control(); // will re-run when selection changes
+            this.syncFromControl();
+        });
+    }
+    // ✅ Check if a validator is enabled
+    isChecked(v) {
+        return this.$selectedValidators()[v] !== undefined;
+    }
+    syncFromControl() {
+        const control = this.$control();
+        const validators = control.validators ?? [];
+        const validatorMap = {};
+        for (const v of validators) {
+            validatorMap[v.name] = v;
+        }
+        this.$selectedValidators.set(validatorMap);
+    }
+    toggleValidator(v) {
+        const current = { ...this.$selectedValidators() };
+        const requiresValue = ['minLength', 'maxLength', 'min', 'max', 'pattern'];
+        const isAlreadyChecked = !!current[v];
+        if (isAlreadyChecked) {
+            delete current[v]; // ❌ Remove validator
+        }
+        else {
+            const validator = {
+                name: v,
+                errorMessage: this.coreFormDesignService.getErrorMessageFor(v),
+                validator: this.coreFormDesignService.getValidatorFn(v, null), // stub until value is filled
+                value: requiresValue.includes(v) ? '' : true
+            };
+            current[v] = validator;
+        }
+        this.$selectedValidators.set(current);
+        // ✅ Skip update if validator requires value but it's still empty
+        const shouldSkip = !isAlreadyChecked &&
+            requiresValue.includes(v) &&
+            current[v]?.value === '';
+        if (shouldSkip)
+            return;
+        const validatorArray = this.coreFormDesignService.toIValidatorArray(current);
+        this.setControlProp('validators', validatorArray);
+    }
+    updateValidatorValue(v, raw) {
+        const value = raw?.toString().trim();
+        const updated = { ...this.$selectedValidators() };
+        if (value === '') {
+            // 👇 Remove the validator if it was cleared
+            delete updated[v];
+        }
+        else {
+            updated[v] = value;
+        }
+        this.$selectedValidators.set(updated);
+        // ✅ Only update the control if it's valid or fully removed
+        const validatorArray = this.coreFormDesignService.toIValidatorArray(updated);
+        this.setControlProp('validators', validatorArray);
+    }
+    isReadOnlyValidator(v) {
+        return this.$selectedValidators()[v]?.readOnly === true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ValidatorEditorComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ValidatorEditorComponent, isStandalone: true, selector: "validator-editor", usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group validator-group\">\r\n    @for (v of $availableValidators(); track v) {\r\n    <div class=\"setting-row\">\r\n\r\n        <label>\r\n            {{ v }}\r\n            @if (isReadOnlyValidator(v)) {\r\n                <i class=\"feather-lock tiny-lock\" title=\"Read-only system validator\"></i>\r\n            }\r\n        </label>\r\n\r\n        <div class=\"control-wrapper\">\r\n            <core-checkbox ngModel ngDefaultControl [ngModel]=\"isChecked(v)\" [disabled]=\"isReadOnlyValidator(v)\"\r\n                [appTooltip]=\"isReadOnlyValidator(v) ? 'System validator' : ''\" (ngModelChange)=\"toggleValidator(v)\" />\r\n\r\n            @if (isChecked(v) && ['minLength', 'maxLength', 'min', 'max'].includes(v)) {\r\n            <input class=\"form-control validator-value\" [type]=\"'number'\"\r\n                [value]=\"$selectedValidators()[v]?.value || ''\"\r\n                (input)=\"updateValidatorValue(v, $any($event.target).value)\"\r\n                [placeholder]=\"'Enter value' | translate: lang\" [disabled]=\"isReadOnlyValidator(v)\"\r\n                [appTooltip]=\"isReadOnlyValidator(v) ? 'Default validator \u2014 cannot be modified' : ''\" />\r\n            }\r\n\r\n            @else if (isChecked(v) && v === 'pattern') {\r\n            <input class=\"form-control validator-value\" type=\"text\" [value]=\"$selectedValidators()[v]?.value || ''\"\r\n                (input)=\"updateValidatorValue(v, $any($event.target).value)\" [placeholder]=\"'Enter regex'\"\r\n                [disabled]=\"isReadOnlyValidator(v)\"\r\n                [appTooltip]=\"isReadOnlyValidator(v) ? 'Default validator \u2014 cannot be modified' : ''\" />\r\n            }\r\n        </div>\r\n    </div>\r\n    }\r\n</div>\r\n", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ValidatorEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'validator-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        TranslatePipe,
+                        TooltipDirective,
+                        CoreCheckboxComponent
+                    ], template: "<div class=\"setting-group validator-group\">\r\n    @for (v of $availableValidators(); track v) {\r\n    <div class=\"setting-row\">\r\n\r\n        <label>\r\n            {{ v }}\r\n            @if (isReadOnlyValidator(v)) {\r\n                <i class=\"feather-lock tiny-lock\" title=\"Read-only system validator\"></i>\r\n            }\r\n        </label>\r\n\r\n        <div class=\"control-wrapper\">\r\n            <core-checkbox ngModel ngDefaultControl [ngModel]=\"isChecked(v)\" [disabled]=\"isReadOnlyValidator(v)\"\r\n                [appTooltip]=\"isReadOnlyValidator(v) ? 'System validator' : ''\" (ngModelChange)=\"toggleValidator(v)\" />\r\n\r\n            @if (isChecked(v) && ['minLength', 'maxLength', 'min', 'max'].includes(v)) {\r\n            <input class=\"form-control validator-value\" [type]=\"'number'\"\r\n                [value]=\"$selectedValidators()[v]?.value || ''\"\r\n                (input)=\"updateValidatorValue(v, $any($event.target).value)\"\r\n                [placeholder]=\"'Enter value' | translate: lang\" [disabled]=\"isReadOnlyValidator(v)\"\r\n                [appTooltip]=\"isReadOnlyValidator(v) ? 'Default validator \u2014 cannot be modified' : ''\" />\r\n            }\r\n\r\n            @else if (isChecked(v) && v === 'pattern') {\r\n            <input class=\"form-control validator-value\" type=\"text\" [value]=\"$selectedValidators()[v]?.value || ''\"\r\n                (input)=\"updateValidatorValue(v, $any($event.target).value)\" [placeholder]=\"'Enter regex'\"\r\n                [disabled]=\"isReadOnlyValidator(v)\"\r\n                [appTooltip]=\"isReadOnlyValidator(v) ? 'Default validator \u2014 cannot be modified' : ''\" />\r\n            }\r\n        </div>\r\n    </div>\r\n    }\r\n</div>\r\n", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"] }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }] });
+
+class FieldSettingComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.coreFormDesignService = inject(CoreFormDesignService);
+        this.enumControlType = EnumFormBaseContolType;
+        this.renderer = inject(Renderer2);
+        this.cdr = inject(ChangeDetectorRef);
+        // 🔹 Reactive normalized control (always derived from selected cell)
+        this.$control = computed(() => {
+            const cell = this.coreFormDesignService.$selectedCell();
+            if (!cell?.control)
+                throw new Error('No control selected!');
+            return this.coreFormDesignService.normalize(cell.control);
+        });
+        // 🔹 Context (flat control list)
+        this.$formContext = computed(() => this.coreFormDesignService.$formContext());
+        this.componentLoaderMap = {
+            'number-props': () => Promise.resolve().then(function () { return numberProps_component; }).then(m => m.NumberPropsComponent),
+            'email-props': () => import('./ngx-histaff-alpha-email-props.component-Cf35Pexq.mjs').then(m => m.EmailPropsComponent),
+            // etc...
+        };
+    }
+    // 🔹 Optional trigger for downstream side-effects (no longer emits)
+    onControlParamsChange() {
+        const updated = this.$control();
+        this.coreFormDesignService.patchControl(updated);
+    }
+    getFriendlyControlLabel(control) {
+        if (!control)
+            return 'Control';
+        // 🧠 Detailed mapping: "controlType:type" → Friendly Name
+        const fullTypeMap = {
+            'TEXTBOX:string': 'String Box',
+            'TEXTBOX:number': 'Number Box',
+            'TEXTBOX:email': 'Email Field',
+            'DROPDOWN': 'Dropdown',
+            'CHECKLIST': 'Checklist',
+            'SEEKER': 'Seeker',
+            'DATEPICKER': 'Date Picker',
+            'TEXTAREA': 'Text Area',
+            'CHECKBOX': 'Checkbox'
+            // Add more mappings as needed
+        };
+        const controlType = control.controlType?.toUpperCase() ?? '';
+        const inputType = control.type?.toLowerCase();
+        const fullKey = inputType ? `${controlType}:${inputType}` : controlType;
+        return fullTypeMap[fullKey] ?? this.camelToTitle(control.controlType ?? 'Control');
+    }
+    camelToTitle(input) {
+        return input
+            .replace(/([a-z])([A-Z])/g, '$1 $2')
+            .replace(/^./, str => str.toUpperCase());
+    }
+    ngAfterViewInit() {
+        this.listenerFn = this.renderer.listen('window', 'click', (e) => {
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(x => x?.unsubscribe());
+        if (this.listenerFn)
+            this.listenerFn();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FieldSettingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: FieldSettingComponent, isStandalone: true, selector: "field-setting", usesInheritance: true, ngImport: i0, template: "<div class=\"field-setting-container\">\r\n\r\n  @if (!!$control()) {\r\n\r\n    <div class=\"panel-caption\">\r\n      Editing: {{ $control()?.controlType }} - {{ $control()?.field || 'Unnamed' }}\r\n    </div>\r\n\r\n    <div class=\"group-title mandatory\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-lock\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Mandatory</div>\r\n    </div>\r\n    <mandatory-props></mandatory-props>\r\n\r\n    <div class=\"setting-divider\"></div>\r\n\r\n    <div class=\"group-title optional\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-sliders\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Optional</div>\r\n    </div>\r\n    <optional-props></optional-props>\r\n\r\n    <div class=\"setting-divider\"></div>\r\n\r\n    <div class=\"group-title validators\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-check-square\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Validators</div>\r\n    </div>\r\n    <validator-editor></validator-editor>\r\n\r\n    @if (!($control().controlType === 'TEXTBOX' && ['string', 'text', 'email'].includes(($control().type || '').toLowerCase()))) {\r\n\r\n      <div class=\"setting-divider\">\r\n        {{ getFriendlyControlLabel($control()) }} Settings\r\n      </div>\r\n    \r\n      <props-host [loadComponent]=\"componentLoaderMap[coreFormDesignService.$currentPropsComponent()]\"\r\n        [props]=\"{ control: $control(), controlChange: onControlParamsChange.bind(this) }\">\r\n      </props-host>\r\n    }\r\n\r\n  }\r\n\r\n</div>", styles: [".field-setting-container{padding:15px;max-height:100%;overflow:scroll}.field-setting-container .panel-caption{font-weight:700;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd}.field-setting-container .setting-divider{margin:1.5rem 0 .75rem;color:#555;border-top:1px dashed #ccc;padding-top:.5rem}.field-setting-container .group-title{display:flex;align-items:center;gap:8px;background-color:#87ceeb;padding:6px 12px;font-weight:600;color:#1f2937;font-size:13px;margin:12px 0 4px;box-shadow:0 1px 2px #0000000d}.field-setting-container .group-title .icon-wrapper{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#1f2937}.field-setting-container .group-title .icon-wrapper i{width:16px;height:16px;stroke-width:2}.field-setting-container .group-title.mandatory{background-color:#ffecb3}.field-setting-container .group-title.optional{background-color:#d0f0fd}.field-setting-container .group-title.validators{background-color:#e8f5e9}.field-setting-container .group-title .group-name{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: MandatoryPropsComponent, selector: "mandatory-props" }, { kind: "component", type: OptionalPropsComponent, selector: "optional-props" }, { kind: "component", type: ValidatorEditorComponent, selector: "validator-editor" }, { kind: "component", type: PropsHostComponent, selector: "props-host", inputs: ["loadComponent", "props"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FieldSettingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'field-setting', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        MandatoryPropsComponent,
+                        OptionalPropsComponent,
+                        ValidatorEditorComponent,
+                        PropsHostComponent,
+                        AttachmentPropsComponent,
+                        ChecklistPropsComponent,
+                        DatepickerPropsComponent,
+                        DropdownPropsComponent,
+                        GridBufferPropsComponent,
+                        ListPropsComponent,
+                        MccPropsComponent,
+                        NumberPropsComponent,
+                        RadioGroupPropsComponent,
+                        SeekerPropsComponent,
+                        TextareaPropsComponent,
+                        UploaderPropsComponent
+                    ], template: "<div class=\"field-setting-container\">\r\n\r\n  @if (!!$control()) {\r\n\r\n    <div class=\"panel-caption\">\r\n      Editing: {{ $control()?.controlType }} - {{ $control()?.field || 'Unnamed' }}\r\n    </div>\r\n\r\n    <div class=\"group-title mandatory\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-lock\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Mandatory</div>\r\n    </div>\r\n    <mandatory-props></mandatory-props>\r\n\r\n    <div class=\"setting-divider\"></div>\r\n\r\n    <div class=\"group-title optional\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-sliders\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Optional</div>\r\n    </div>\r\n    <optional-props></optional-props>\r\n\r\n    <div class=\"setting-divider\"></div>\r\n\r\n    <div class=\"group-title validators\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-check-square\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Validators</div>\r\n    </div>\r\n    <validator-editor></validator-editor>\r\n\r\n    @if (!($control().controlType === 'TEXTBOX' && ['string', 'text', 'email'].includes(($control().type || '').toLowerCase()))) {\r\n\r\n      <div class=\"setting-divider\">\r\n        {{ getFriendlyControlLabel($control()) }} Settings\r\n      </div>\r\n    \r\n      <props-host [loadComponent]=\"componentLoaderMap[coreFormDesignService.$currentPropsComponent()]\"\r\n        [props]=\"{ control: $control(), controlChange: onControlParamsChange.bind(this) }\">\r\n      </props-host>\r\n    }\r\n\r\n  }\r\n\r\n</div>", styles: [".field-setting-container{padding:15px;max-height:100%;overflow:scroll}.field-setting-container .panel-caption{font-weight:700;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd}.field-setting-container .setting-divider{margin:1.5rem 0 .75rem;color:#555;border-top:1px dashed #ccc;padding-top:.5rem}.field-setting-container .group-title{display:flex;align-items:center;gap:8px;background-color:#87ceeb;padding:6px 12px;font-weight:600;color:#1f2937;font-size:13px;margin:12px 0 4px;box-shadow:0 1px 2px #0000000d}.field-setting-container .group-title .icon-wrapper{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#1f2937}.field-setting-container .group-title .icon-wrapper i{width:16px;height:16px;stroke-width:2}.field-setting-container .group-title.mandatory{background-color:#ffecb3}.field-setting-container .group-title.optional{background-color:#d0f0fd}.field-setting-container .group-title.validators{background-color:#e8f5e9}.field-setting-container .group-title .group-name{flex:1}\n"] }]
+        }] });
+
+var EnumLeftPanelMode;
+(function (EnumLeftPanelMode) {
+    EnumLeftPanelMode["FieldCollection"] = "FieldCollection";
+    EnumLeftPanelMode["SelectedFieldJson"] = "SelectedFieldJson";
+})(EnumLeftPanelMode || (EnumLeftPanelMode = {}));
+
+class CoreFormDesignComponent extends BaseComponent {
+    constructor(mls) {
+        super(mls);
+        this.mls = mls;
+        this.enumType = EnumFormDesignMode;
+        this.enumLeftPanelMode = EnumLeftPanelMode;
+        this.$leftPanelMode = computed(() => {
+            if (this.coreFormDesignService.$fieldSettingPanelOpen()) {
+                return this.enumLeftPanelMode.SelectedFieldJson;
+            }
+            else {
+                return this.enumLeftPanelMode.FieldCollection;
+            }
+        });
+        this.previewMode$ = new BehaviorSubject(EnumCorePageEditMode.CREATE);
+        this.$loading = signal(false);
+        this.coreFormDesignService = inject(CoreFormDesignService);
+        this.renderer = inject(Renderer2);
+        this.cdr = inject(ChangeDetectorRef);
+        this.route = inject(ActivatedRoute);
+        this.alertService = inject(AlertService);
+        this.formDesign = this.coreFormDesignService.formDesign;
+        this.setControlProp = this.coreFormDesignService.setControlProp.bind(this.coreFormDesignService);
+        this.isDragOverMap = {};
+        this.form = new FormGroup({
+            stringBox: new FormControl(),
+            email: new FormControl(),
+            textarea: new FormControl(),
+            number: new FormControl(),
+            currency: new FormControl(),
+            dropdown: new FormControl(),
+            employeeSeeker: new FormControl(),
+            checklist: new FormControl(),
+            employeeSeekerMultiple: new FormControl(),
+            datePicker: new FormControl(),
+            monthSelector: new FormControl(),
+            attachment: new FormControl(),
+            attachmentBuffer: new FormControl(),
+            checkbox: new FormControl(),
+        });
+        // 🔹 Computed signal for live preview
+        /*$sections = computed(() => {
+          return this.coreFormDesignService.sanitizeSectionsForSaving(this.coreFormDesignService.$placeholderSections());
+        });*/
+        this.$sections = computed(() => {
+            const hydrated = this.coreFormDesignService.rehydrateSections(this.coreFormDesignService.$placeholderSections());
+            let sections = this.coreFormDesignService.toCoreFormSections(hydrated);
+            // ✅ Inject hidden "id" field into the first cell row of the first section
+            sections = this.coreFormDesignService.injectSystemControls(sections, this.coreFormDesignService.$afInstance().hasIdOfStringType ?? false);
+            return sections;
+        });
+        this.checkError$ = new BehaviorSubject(false);
+        this.controlCategories = [
+            {
+                name: 'Text',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.TEXTBOX,
+                        type: 'string',
+                        field: 'stringBox',
+                        label: '',
+                        value: '',
+                        placeholder: 'String box',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.TEXTBOX,
+                        type: 'email',
+                        field: 'email',
+                        label: '',
+                        value: '',
+                        placeholder: 'Email',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.TEXTAREA,
+                        type: 'string',
+                        field: 'textarea',
+                        label: '',
+                        value: '',
+                        textareaRows: 2,
+                        placeholder: 'Text area',
+                        headless: true,
+                    }
+                ]
+            },
+            {
+                name: 'Numerical',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.TEXTBOX,
+                        type: 'number',
+                        field: 'number',
+                        label: '',
+                        value: 100,
+                        placeholder: 'Number',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.CURRENCY,
+                        type: 'number',
+                        field: 'currency',
+                        label: '',
+                        value: '',
+                        placeholder: 'Currency',
+                        headless: true,
+                    },
+                ]
+            },
+            {
+                name: 'Single selection',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.DROPDOWN,
+                        type: 'any',
+                        field: 'dropdown',
+                        label: '',
+                        value: '',
+                        dropdownOptions$: new BehaviorSubject([]),
+                        shownFrom: 'name',
+                        getByIdObject$: new BehaviorSubject({}),
+                        placeholder: 'Dropdown',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.SEEKER,
+                        seekerSourceType: EnumCoreFormControlSeekerSourceType.EMPLOYEE_SEEK,
+                        type: 'any[]',
+                        field: 'employeeSeeker',
+                        label: '',
+                        value: ['Nguyễn A'],
+                        boundFrom: 'id',
+                        shownFrom: 'fullname',
+                        getByIdObject$: new BehaviorSubject({}),
+                        placeholder: 'Employee seeker',
+                        headless: true,
+                    }
+                ]
+            },
+            {
+                name: 'Multiple Selection',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.CHECKLIST,
+                        type: 'any[]',
+                        field: 'checklist',
+                        label: '',
+                        value: [],
+                        checklistOptions$: new BehaviorSubject([]),
+                        shownFrom: 'name',
+                        getByIdObject$: new BehaviorSubject({}),
+                        placeholder: 'Check list',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.SEEKER,
+                        seekerSourceType: EnumCoreFormControlSeekerSourceType.EMPLOYEE_SEEK,
+                        multiMode: true,
+                        type: 'any[]',
+                        field: 'employeeSeekerMultiple',
+                        label: '',
+                        value: [],
+                        objectList$: new BehaviorSubject([]),
+                        boundFrom: 'id',
+                        shownFrom: 'fullname',
+                        getByIdObject$: new BehaviorSubject({}),
+                        multiModeTableHeight: 100,
+                        placeholder: 'Employee seeker (multi mode)',
+                        headless: true,
+                    }
+                ]
+            },
+            {
+                name: 'Date',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.DATEPICKER,
+                        type: 'date',
+                        field: 'datePicker',
+                        label: '',
+                        value: '',
+                        placeholder: 'Date picker',
+                        showPlaceholder: true,
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.MONTHSELECTOR,
+                        type: 'string',
+                        field: 'monthSelector',
+                        label: '',
+                        value: '',
+                        placeholder: 'Month selector',
+                        headless: true,
+                    },
+                ]
+            },
+            {
+                name: 'Other',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.ATTACHMENT,
+                        type: 'string',
+                        field: 'attachment',
+                        label: '',
+                        value: '',
+                        assignTo: 'unknown',
+                        placeholder: 'Attachment',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.CHECKBOX,
+                        type: 'boolean',
+                        field: 'checkbox',
+                        label: '',
+                        value: '',
+                        placeholder: 'Checkbox',
+                        headless: true,
+                    },
+                ]
+            }
+        ];
+        this.generateFieldNameFor = this.coreFormDesignService.generateFieldNameFor.bind(this.coreFormDesignService);
+        this.generateLabelNameFor = this.coreFormDesignService.generateLabelNameFor.bind(this.coreFormDesignService);
+        this.getAllControlsFromSections = this.coreFormDesignService.getAllControlsFromSections.bind(this.coreFormDesignService);
+        this.getControl = this.coreFormDesignService.getControl.bind(this.coreFormDesignService);
+        this.coreFormDesignService.resetFormDesignState();
+        effect(() => {
+            const _ = this.coreFormDesignService.$placeholderSections();
+            this.syncFormDesignWithSections();
+        });
+    }
+    onDragStart(event, control) {
+        this.coreFormDesignService.beginDragTemplate(control);
+    }
+    onDragOver(event) {
+        event.preventDefault(); // necessary to allow drop
+    }
+    onDragEnter(placeholderId) {
+        //if (this.coreFormDesignService.$isDragging()) {
+        this.isDragOverMap[placeholderId] = true;
+        //}
+    }
+    onDragLeave(placeholderId) {
+        this.isDragOverMap[placeholderId] = false;
+    }
+    onDropIntoCell(event, sectionIndex, rowIndex, colIndex) {
+        event.preventDefault();
+        const template = this.coreFormDesignService.$currentControlTemplate();
+        if (!template)
+            return;
+        const normalized = this.coreFormDesignService.normalize({
+            ...template,
+            field: this.generateFieldNameFor(template),
+            label: this.generateLabelNameFor(template),
+            value: null
+        });
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            const section = sections[sectionIndex];
+            const row = section?.rows[rowIndex];
+            if (!row || row.cells.length <= colIndex)
+                return sections;
+            const usedFlex = row.cells.reduce((sum, cell) => sum + (cell?.control?.flexSize ?? 0), 0);
+            const remainingFlex = 12 - usedFlex;
+            const flexSize = Math.max(1, remainingFlex);
+            normalized.flexSize = flexSize;
+            const previous = row.cells[colIndex]?.control;
+            if (previous && previous.flexSize !== undefined) {
+                /*
+                AttachmentFieldHelperService.handleAttachmentOverwrite(
+                  previous as IFormBaseControl,
+                  this.coreFormDesignService.getAllControlsFromSections()
+                );
+                */
+            }
+            const previousField = row.cells[colIndex]?.control?.field ?? null;
+            this.coreFormDesignService.replaceControl(previousField, normalized);
+            // 🔹 INSERT FIRST
+            row.cells[colIndex] = { ...row.cells[colIndex], control: normalized };
+            this.coreFormDesignService.$selectedCell.set(row.cells[colIndex]);
+            // 🔹 THEN CALL setup
+            if (AttachmentFieldHelperService.isAttachment(normalized)) {
+                const assignToField = AttachmentFieldHelperService.buildHiddenAssignToField(normalized.field);
+                normalized.field = `${normalized.field}Buffer`;
+                normalized.assignTo = assignToField.field;
+                AttachmentFieldHelperService.injectAssignToFieldIntoRow(row, assignToField);
+            }
+            setTimeout(() => {
+                this.coreFormDesignService.setControlPropDirectly('validators', normalized.validators ?? [], normalized);
+            });
+            return sections;
+        });
+        this.triggerUpdateSections();
+        this.isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex] = false;
+        this.coreFormDesignService.endDrag();
+    }
+    // isAnyDragging(): boolean {
+    //   return this.coreFormDesignService.$isDragging();
+    // }
+    addSection() {
+        this.coreFormDesignService.$placeholderSections.update(sections => [
+            ...sections,
+            {
+                caption: `Section ${sections.length + 1}`,
+                rows: [{ cells: [{ flexSize: 12 }] }]
+            }
+        ]);
+    }
+    /*deleteRow(sectionIndex: number, rowIndex: number): void {
+      this.coreFormDesignService.$placeholderSections.update(sections => {
+        const section = sections[sectionIndex];
+        if (section) {
+          section.rows = section.rows.filter((x, index) => index !== rowIndex);
+        }
+        return sections;
+      });
+    }*/
+    deleteSection(sectionIndex) {
+        const sections = this.coreFormDesignService.$placeholderSections();
+        const section = sections[sectionIndex];
+        const hasControls = section?.rows?.some(row => row?.cells?.some(cell => !!cell?.control));
+        if (hasControls) {
+            const confirmed = confirm('This section contains controls. Are you sure you want to delete it?');
+            if (!confirmed)
+                return;
+        }
+        this.coreFormDesignService.$placeholderSections.update(prev => prev.filter((_, idx) => idx !== sectionIndex));
+    }
+    deleteRow(sectionIndex, rowIndex) {
+        const sections = this.coreFormDesignService.$placeholderSections();
+        const section = sections[sectionIndex];
+        const row = section?.rows?.[rowIndex];
+        if (!row)
+            return; // safety check
+        const hasControls = row.cells?.some(cell => !!cell?.control);
+        if (hasControls) {
+            const confirmed = confirm('This row contains controls. Are you sure you want to delete it?');
+            if (!confirmed)
+                return; // user canceled
+        }
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            return sections.map((section, sIdx) => {
+                if (sIdx !== sectionIndex)
+                    return section;
+                return {
+                    ...section,
+                    rows: (section.rows ?? []).filter((_, rIdx) => rIdx !== rowIndex)
+                };
+            });
+        });
+    }
+    addRow(sectionIndex) {
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            const section = sections[sectionIndex];
+            if (section) {
+                section.rows.push({ cells: [{ flexSize: 12 }] });
+            }
+            return sections;
+        });
+    }
+    addColumn(row) {
+        if (!row || row.cells.length >= 4)
+            return;
+        const usedFlex = row.cells.reduce((sum, c) => sum + (c.flexSize ?? 0), 0);
+        // ✅ Case 1: Normal case – still space available
+        if (usedFlex < 12) {
+            const remaining = 12 - usedFlex;
+            row.cells.push({ flexSize: Math.min(3, remaining) });
+            return;
+        }
+        // 💥 Case 2: Full row — try to rebalance
+        if (usedFlex === 12) {
+            const count = row.cells.length;
+            if (count === 1) {
+                // 12 → 6 + 6
+                row.cells[0].flexSize = 6;
+                row.cells.push({ flexSize: 6 });
+                return;
+            }
+            if (count === 2) {
+                // 6 + 6 → 4 + 4 + 4
+                row.cells.forEach(c => (c.flexSize = 4));
+                row.cells.push({ flexSize: 4 });
+                return;
+            }
+            if (count === 3) {
+                // 4 + 4 + 4 → 3 + 3 + 3 + 3
+                row.cells.forEach(c => (c.flexSize = 3));
+                row.cells.push({ flexSize: 3 });
+                return;
+            }
+            // ❌ Already 4 cells, each 3 — can’t split further
+            return;
+        }
+        // 🔧 Optional fallback logic for unknown edge cases
+        const maxIndex = row.cells.reduce((maxI, c, i, arr) => (c.flexSize ?? 0) > (arr[maxI]?.flexSize ?? 0) ? i : maxI, 0);
+        const maxCell = row.cells[maxIndex];
+        if ((maxCell?.flexSize ?? 0) <= 3)
+            return; // nothing to shrink
+        maxCell.flexSize -= 3;
+        row.cells.push({ flexSize: 3 });
+    }
+    onCorePageHeaderButtonClicked(e) {
+        if (e.code === EnumCoreButtonVNSCode.HEADER_SWITCH_VIEW) {
+            this.coreFormDesignService.$mode.set(this.coreFormDesignService.$mode() === EnumFormDesignMode.Preview ? EnumFormDesignMode.Default : EnumFormDesignMode.Preview);
+        }
+        else if (e.code === EnumCoreButtonVNSCode.HEADER_SAVE) {
+        }
+    }
+    closePreview() {
+        this.coreFormDesignService.$mode.set(EnumFormDesignMode.Default);
+    }
+    onPreviewSubmit(e) {
+        alert(JSON.stringify(e, null, 2));
+    }
+    onCellClicked(sectionIndex, rowIndex, colIndex) {
+        const row = this.coreFormDesignService.$placeholderSections()[sectionIndex].rows[rowIndex];
+        if (!!row) {
+            // Toggle selection
+            if (!!row.cells && row.cells.length > colIndex) {
+                row.cells[colIndex].selected = !row.cells[colIndex].selected;
+            }
+            // Only allow max 2 selections
+            const selected = row.cells.filter(c => c?.selected);
+            if (selected.length > 2) {
+                row.cells.forEach(c => c && (c.selected = false));
+                row[colIndex].selected = true;
+            }
+        }
+    }
+    canMergeCells(sectionIndex, rowIndex) {
+        const row = this.coreFormDesignService.$placeholderSections()[sectionIndex].rows[rowIndex];
+        const selected = row?.cells.map((c, i) => ({ c, i })).filter(x => x.c?.selected);
+        if (selected?.length !== 2)
+            return false;
+        const [a, b] = selected;
+        if (a.c.control || b.c.control)
+            return false;
+        return Math.abs(a.i - b.i) === 1; // Must be neighbors
+    }
+    mergeCells(sectionIndex, rowIndex) {
+        const row = this.coreFormDesignService.$placeholderSections()[sectionIndex].rows[rowIndex];
+        if (!row)
+            return;
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            const selected = row.cells
+                .map((c, i) => ({ c, i }))
+                .filter(x => x.c?.selected);
+            if (selected.length !== 2)
+                return sections;
+            const [a, b] = selected.sort((a, b) => a.i - b.i);
+            const mergedFlex = (typeof a.c.flexSize === 'number' ? a.c.flexSize : 3) +
+                (typeof b.c.flexSize === 'number' ? b.c.flexSize : 3);
+            const mergedCell = {
+                //control: { ...a.c.control, flexSize: mergedFlex }, // keep control data
+                flexSize: mergedFlex,
+                selected: false
+            };
+            row.cells.splice(a.i, 2, mergedCell); // replace both cells with one
+            return sections;
+        });
+    }
+    openSettingsForCell(cell) {
+        this.coreFormDesignService.$selectedCell.set({ ...cell });
+    }
+    deleteField(row, colIndex) {
+        if (!row || !row.cells[colIndex])
+            return;
+        const cellToDelete = row.cells[colIndex];
+        if (!cellToDelete.control)
+            return;
+        if (confirm('Are you sure to remove the field?')) {
+            // 🧠 Check if it's selected
+            const selectedCell = this.coreFormDesignService.$selectedCell();
+            const shouldClearSelection = selectedCell === cellToDelete;
+            let deletedControl = null;
+            // ✅ Update the reactive state
+            this.coreFormDesignService.$placeholderSections.update(sections => {
+                for (const section of sections) {
+                    for (const r of section.rows) {
+                        if (r === row) {
+                            const control = r.cells[colIndex].control;
+                            if (control && control.field && control.flexSize !== undefined) {
+                                deletedControl = control; // ✅ Save before removing
+                            }
+                            r.cells[colIndex].control = undefined; // ❌ Clear after
+                            break;
+                        }
+                    }
+                }
+                return sections;
+            });
+            if (deletedControl) {
+                this.coreFormDesignService.$placeholderSections.update(sections => {
+                    for (const section of sections) {
+                        for (const row of section.rows) {
+                            if (!!row) {
+                                row.cells = row.cells.filter(cell => cell.control?.field !== deletedControl?.assignTo);
+                            }
+                        }
+                    }
+                    return sections;
+                });
+            }
+            // ❌ Clear selection if needed
+            if (shouldClearSelection) {
+                this.coreFormDesignService.$selectedCell.set(null);
+            }
+            this.triggerUpdateSections();
+        }
+    }
+    onCaptionEditEnd(index, event) {
+        const newCaption = event.target.innerText.trim();
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            sections[index].caption = newCaption;
+            return sections;
+        });
+    }
+    onFieldCaptionEditEnd(cell, event) {
+        const element = event.target;
+        const newLabel = element.innerText.trim();
+        // Fallback if empty
+        cell.control.label = newLabel || 'Unnamed Field';
+        this.triggerUpdateSections();
+    }
+    insertSection() {
+    }
+    insertRow(sectionIndex, rowIndex) {
+        const sections = this.coreFormDesignService.$placeholderSections();
+        const section = sections[sectionIndex];
+        if (!section)
+            return;
+        const newRow = {
+            cells: [
+                { flexSize: 12 },
+            ]
+        };
+        section.rows.splice(rowIndex + 1, 0, newRow);
+        this.coreFormDesignService.$placeholderSections.set([...sections]);
+    }
+    ngAfterViewInit() {
+        this.listenerFn = this.renderer.listen('window', 'click', (e) => {
+            const target = e.target;
+            if (!this.settingPanel?.nativeElement.contains(target) &&
+                !target.closest('.feather-settings') && !target.closest('.json-preview')) {
+                this.coreFormDesignService.$fieldSettingPanelOpen.set(false);
+                this.coreFormDesignService.$selectedCell.set(null);
+                this.coreFormDesignService.$currentControlTemplate.set(null);
+                this.coreFormDesignService.$currentControl.set(null);
+            }
+            this.cdr.markForCheck();
+        });
+        setTimeout(() => {
+            this.subscriptions.push(this.route.params.subscribe(x => {
+                let id = '0';
+                try {
+                    id = atob(x['id']);
+                    this.coreFormDesignService.$afInstance.update(instance => ({
+                        ...instance,
+                        id
+                    }));
+                }
+                catch {
+                    return;
+                }
+                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(msg);
+                    }))
+                        .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);
+                        }
+                    }));
+                }
+                else {
+                }
+            }));
+        });
+    }
+    onControlParamsChange(updated) {
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            const cell = this.coreFormDesignService.$selectedCell();
+            if (!cell)
+                return sections;
+            // Patch the selected cell
+            Object.assign(cell.control, updated);
+            return sections;
+        });
+    }
+    get normalizedSelectedControl() {
+        const cell = this.coreFormDesignService.$selectedCell();
+        if (!cell?.control) {
+            throw new Error('No control is currently selected.');
+        }
+        return this.coreFormDesignService.normalize(cell.control);
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(x => x?.unsubscribe());
+        if (!!this.listenerFn)
+            this.listenerFn();
+    }
+    triggerUpdateSections() {
+        this.coreFormDesignService.$placeholderSections.set([...this.coreFormDesignService.$placeholderSections()]);
+    }
+    syncFormDesignWithSections() {
+        const existingControls = Object.keys(this.formDesign.controls);
+        const expectedControls = [];
+        for (const section of this.coreFormDesignService.$placeholderSections()) {
+            for (const row of section.rows) {
+                for (const cell of row?.cells || []) {
+                    const control = cell?.control;
+                    if (control?.field) {
+                        expectedControls.push(control.field);
+                        if (!this.formDesign.contains(control.field)) {
+                            this.formDesign.addControl(control.field, new FormControl(control.value ?? null));
+                        }
+                    }
+                }
+            }
+        }
+        // 🧹 Remove controls that no longer exist
+        for (const field of existingControls) {
+            if (!expectedControls.includes(field)) {
+                this.formDesign.removeControl(field);
+            }
+        }
+    }
+    isRequired(control) {
+        if (!control || !control.validators)
+            return false;
+        return control.validators.some((v) => v.name === 'required' || v.name === 'requiredTrue');
+    }
+    filteredCells(row) {
+        if (!row)
+            return [];
+        return row.cells.filter(cell => (cell?.flexSize ?? 0) > 0);
+    }
+    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", viewQueries: [{ propertyName: "settingPanel", first: true, predicate: ["settingPanel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-form-design-container fs-13\">\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)=\"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'\">\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 ?? 3) + ' 1 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)\" [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 column'\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Insert row'\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\"><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                <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n                    width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n                }\">\r\n                    <div class=\"live-form-header\">\r\n                        <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n                    </div>\r\n                    <core-form [submitText]=\"'Kickoff'\" [inputSections]=\"$sections()\" [showCaptionButton]=\"true\" (onSubmit)=\"onPreviewSubmit($event)\" [mode$]=\"previewMode$\"></core-form>\r\n                </div>\r\n            } @else {\r\n\r\n                <div class=\"modal-container\">\r\n                    <div class=\"modal-content-root no-padding\">\r\n\r\n                        <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n                            width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n                        }\">\r\n                            <div class=\"live-form-header\">\r\n                                <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n                                <div class=\"preview-close-icon\" (click)=\"closePreview()\">\r\n                                    <i class=\"feather-x\"></i>\r\n                                </div>\r\n                            </div>\r\n                            <core-form [submitText]=\"'Kickoff'\" [inputSections]=\"$sections()\" [showCaptionButton]=\"true\" (onSubmit)=\"onPreviewSubmit($event)\" [mode$]=\"previewMode$\"></core-form>\r\n                        </div>\r\n            \r\n                    </div>\r\n                </div>\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        <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\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{background-color:#000;color:#fff}.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}.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;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:7px;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:18px}.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}.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 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: FullscreenModalLoaderComponent, selector: "app-fullscreen-modal-loader", inputs: ["content"] }, { 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: TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$", "hideButtons"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "component", type: FieldSettingComponent, selector: "field-setting" }], animations: [slideFromTopFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-form-design', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgStyle,
+                        NgTemplateOutlet,
+                        FullscreenModalLoaderComponent,
+                        CorePageHeaderComponent,
+                        FormMetadataComponent,
+                        ReactiveFormsModule,
+                        TranslatePipe,
+                        TableCellPipe,
+                        TooltipDirective,
+                        CoreFormComponent,
+                        CoreControlComponent,
+                        CoreDropdownComponent,
+                        CoreChecklistComponent,
+                        CoreFormControlSeekerComponent,
+                        CoreCheckboxComponent,
+                        CoreAttachmentComponent,
+                        CoreDatePickerComponent,
+                        CoreRadioGroupComponent,
+                        CoreMonthSelectorComponent,
+                        TooltipDirective,
+                        CoreCurrencyInputComponent,
+                        FieldSettingComponent,
+                    ], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-design-container fs-13\">\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)=\"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'\">\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 ?? 3) + ' 1 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)\" [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 column'\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Insert row'\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\"><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                <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n                    width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n                }\">\r\n                    <div class=\"live-form-header\">\r\n                        <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n                    </div>\r\n                    <core-form [submitText]=\"'Kickoff'\" [inputSections]=\"$sections()\" [showCaptionButton]=\"true\" (onSubmit)=\"onPreviewSubmit($event)\" [mode$]=\"previewMode$\"></core-form>\r\n                </div>\r\n            } @else {\r\n\r\n                <div class=\"modal-container\">\r\n                    <div class=\"modal-content-root no-padding\">\r\n\r\n                        <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n                            width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n                        }\">\r\n                            <div class=\"live-form-header\">\r\n                                <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n                                <div class=\"preview-close-icon\" (click)=\"closePreview()\">\r\n                                    <i class=\"feather-x\"></i>\r\n                                </div>\r\n                            </div>\r\n                            <core-form [submitText]=\"'Kickoff'\" [inputSections]=\"$sections()\" [showCaptionButton]=\"true\" (onSubmit)=\"onPreviewSubmit($event)\" [mode$]=\"previewMode$\"></core-form>\r\n                        </div>\r\n            \r\n                    </div>\r\n                </div>\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        <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\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{background-color:#000;color:#fff}.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}.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;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:7px;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:18px}.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}.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 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 }], propDecorators: { settingPanel: [{
+                type: ViewChild,
+                args: ['settingPanel']
+            }] } });
+
+export { CoreFormDesignComponent };
+//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-BVDW_HiI.mjs.map