ngx-histaff-alpha 6.4.7 → 6.4.9

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

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, Component, signal, effect, HostListener, ChangeDetectionStrategy, Injectable, computed, Input, viewChild, ViewContainerRef, EventEmitter, Output, input, Renderer2, isDevMode } from '@angular/core';
+import { inject, ChangeDetectorRef, Component, signal, effect, HostListener, ChangeDetectionStrategy, Injectable, computed, Input, viewChild, EventEmitter, Output, ViewContainerRef, input, Renderer2, isDevMode } from '@angular/core';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import { x as CoreFormDesignService, m as CoreWorkflowService, h as BaseEditComponent, b as AlertService, a as AppConfigService, V as EnumCorePageEditMode, Z as EnumCoreButtonVNSCode, _ as READONLY_WORKFLOW_FIELDS, $ as noneAutoClosedAlertOptions, j as DialogService, M as MultiLanguageService, d as CorePageHeaderComponent, W as CoreFormComponent, a0 as CoreButtonGroupVnsComponent, e as TranslatePipe, i as EnumFormBaseContolType, B as BaseComponent, E as EnumCoreTablePipeType, g as CoreCheckboxComponent, G as CoreDropdownComponent, T as TooltipDirective, p as DbService, Q as GptService, v as alertOptions, a1 as CoreStickerCollectionComponent, P as CoreRadioGroupComponent, a2 as HtmlTooltipDirective, n as EnumCoreFormControlSeekerSourceType, a3 as CoreControlNoFormArrayComponent, a4 as EnumFormDesignMode, z as DomService, Y as JsonService, R as ApplicationHelpService, a5 as CoreControlComponent, a6 as JsonSafePipe, t as TableCellPipe, U as HotKeysDirective, H as CoreChecklistComponent, K as CoreFormControlSeekerComponent, a7 as CoreAttachmentComponent, J as CoreDatePickerComponent, a8 as CoreMonthSelectorComponent, L as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-ls0sZJcJ.mjs';
+import { x as CoreFormDesignService, m as CoreWorkflowService, h as BaseEditComponent, b as AlertService, a as AppConfigService, W as EnumCorePageEditMode, _ as EnumCoreButtonVNSCode, $ as READONLY_WORKFLOW_FIELDS, a0 as noneAutoClosedAlertOptions, j as DialogService, M as MultiLanguageService, d as CorePageHeaderComponent, X as CoreFormComponent, a1 as CoreButtonGroupVnsComponent, e as TranslatePipe, i as EnumFormBaseContolType, B as BaseComponent, E as EnumCoreTablePipeType, g as CoreCheckboxComponent, G as CoreDropdownComponent, n as EnumCoreFormControlSeekerSourceType, a2 as EnumFilterOperator, p as DbService, Q as GptService, v as alertOptions, R as CoreStickerCollectionComponent, P as CoreRadioGroupComponent, T as TooltipDirective, a3 as HtmlTooltipDirective, a4 as CoreControlNoFormArrayComponent, a5 as EnumFormDesignMode, z as DomService, Z as JsonService, U as ApplicationHelpService, a6 as CoreControlComponent, a7 as JsonSafePipe, t as TableCellPipe, V as HotKeysDirective, H as CoreChecklistComponent, K as CoreFormControlSeekerComponent, a8 as CoreAttachmentComponent, J as CoreDatePickerComponent, a9 as CoreMonthSelectorComponent, L as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-TWTSrQ0J.mjs';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, ReactiveFormsModule, FormArray, Validators } from '@angular/forms';
 import { NgStyle, JsonPipe, AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import { BehaviorSubject, catchError, of, filter, distinctUntilChanged, tap, switchMap } from 'rxjs';
 import { Router, ActivatedRoute } from '@angular/router';
 import { EnumTranslateKey } from 'alpha-global-constants';
-import { L as LiveFormComponent } from './ngx-histaff-alpha-live-form.component-BEq38Xps.mjs';
-import { C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-D7kdGgFZ.mjs';
+import { L as LiveFormComponent } from './ngx-histaff-alpha-live-form.component-LdFysTvc.mjs';
+import { C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-C3JfOCoY.mjs';
 
 const slideFromTopFadeIn = trigger('slideFromTopFadeIn', [
     state('in', style({ opacity: 1, transform: 'translateY(0)' })),
@@ -421,135 +421,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     ], template: "<div class=\"setting-group optional-group\" [ngStyle]=\"{ padding: '15px' }\">\r\n\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    <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.isNested = false;
-        this.vcRef = inject(ViewContainerRef);
-        this.as = inject(AlertService);
-    }
-    set props(value) {
-        this._props = value;
-        this.assignInputs();
-    }
-    // constructor() {
-    //   // 👇 register effect at construction
-    //   effect(() => {
-    //     const nested = this.isNested;
-    //     if (nested && isDevMode()) {
-    //       this.as.info("$isNested is set to true", noneAutoClosedAlertOptions);
-    //     }
-    //     if (this.componentRef && '$isNested' in this.componentRef.instance) {
-    //       (this.componentRef.instance as any).$isNested.set(nested);
-    //       // 👇 force child CD so template updates immediately
-    //       // Because your DropdownPropsComponent is declared with:
-    //       // changeDetection: ChangeDetectionStrategy.OnPush,
-    //       // Angular will only re-render when:
-    //       // An @Input reference changes,
-    //       // An event originates from the component, or
-    //       // You manually trigger CD (e.g. cdr.markForCheck()).
-    //       this.componentRef.changeDetectorRef.markForCheck();
-    //     }
-    //   });
-    // }
-    async ngOnInit() {
-        if (this.loadComponent) {
-            const componentType = await this.loadComponent();
-            this.componentRef = this.vcRef.createComponent(componentType);
-            this.assignInputs();
-            // forward @Input manually
-            this.componentRef.setInput('isNested', this.isNested);
-        }
-    }
-    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", isNested: "isNested", 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',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { loadComponent: [{
-                type: Input
-            }], isNested: [{
-                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, this.isNested);
-    }
-    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 {
+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: 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: [""] }); }
+    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: "<div class=\"number-props-container\" [ngStyle]=\"{ padding: '15px' }\">\r\n\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ChecklistPropsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: NumberPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'checklist-props', imports: [], template: "<p>checklist-props works!</p>\r\n" }]
+            args: [{ selector: 'number-props', imports: [NgStyle], template: "<div class=\"number-props-container\" [ngStyle]=\"{ padding: '15px' }\">\r\n\r\n</div>" }]
         }], 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: [""] }); }
+class EmailPropsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: EmailPropsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: EmailPropsComponent, isStandalone: true, selector: "email-props", ngImport: i0, template: "<p>email-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: DatepickerPropsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: EmailPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'datepicker-props', imports: [], template: "<p>datepicker-props works!</p>\r\n" }]
-        }], propDecorators: { control: [{
-                type: Input
-            }], controlChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'email-props', imports: [], template: "<p>email-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 DropdownPropsComponent extends BasePropsComponent {
     constructor() {
@@ -588,143 +486,349 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     ], template: "<div class=\"setting-group dropdown-group\" [ngStyle]=\"{ padding: '15px' }\">\r\n\r\n    <div class=\"setting-row optional-bool\">\r\n        <label>Use API</label>\r\n        <core-checkbox [ngModel]=\"$control().optionApiDriven\" (ngModelChange)=\"setControlProp('optionApiDriven', $event)\" />\r\n    </div>\r\n\r\n    @if (!!$control().optionApiDriven) {\r\n    <div class=\"setting-row\">\r\n        <label>API Endpoint</label>\r\n        <input class=\"form-control\" type=\"text\" [ngModel]=\"$control().optionApi\" (ngModelChange)=\"setControlProp('optionApi', $event)\" />\r\n    </div>\r\n\r\n    <div class=\"setting-row\">\r\n        <label>HTTP Verb</label>\r\n        <div class=\"control-wrapper\">\r\n            <core-dropdown [ngModel]=\"$control().optionHttpVerb\" (ngModelChange)=\"setControlProp('optionHttpVerb', $event)\" [paramMode]=\"true\"\r\n                [options$]=\"httpVerbOptions$\">\r\n            </core-dropdown>\r\n        </div>\r\n    </div>\r\n\r\n    @if ($control().optionHttpVerb === 'HttpPost') {\r\n    <div class=\"setting-row\">\r\n        <label>Payload (JSON)</label>\r\n        <div class=\"control-wrapper\">\r\n            <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"jsonPayload\" (ngModelChange)=\"onPayloadJsonBlur()\"></textarea>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"setting-row\">\r\n        <label>Value Field</label>\r\n        <input class=\"form-control\" type=\"text\" [ngModel]=\"$control().optionValueFrom\" (ngModelChange)=\"setControlProp('optionValueFrom', $event)\" />\r\n    </div>\r\n\r\n    <div class=\"setting-row\">\r\n        <label>Text Field</label>\r\n        <input class=\"form-control\" type=\"text\" [ngModel]=\"$control().optionTextFrom\" (ngModelChange)=\"setControlProp('optionTextFrom', $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"] }]
         }] });
 
-var dropdownProps_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    DropdownPropsComponent: DropdownPropsComponent
-});
+class FormArrayPropsComponent extends BasePropsComponent {
+    openDesigner() {
+        const control = this.coreFormDesignService.$control();
+        if (control?.controlType === EnumFormBaseContolType.FORM_ARRAY) {
+            this.coreFormDesignService.$fieldSettingPanelOpen.set(false);
+            this.coreFormDesignService.$showFormArrayDesign.set(true);
+            // Since $nestedDesignSections is of type WritableSignal<ICoreFormSection[] | null>
+            // if set (not null), we use @if in parent conponent (CoreFormDesignComponent template)
+            // to display a popup containing CoreFormArrayLayoutEditorComponent
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormArrayPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: FormArrayPropsComponent, isStandalone: true, selector: "form-array-props", usesInheritance: true, ngImport: i0, template: "    <div class=\"mt-3 d-flex d-flex-center\">\r\n      <button class=\"btn btn-outline-primary\" (click)=\"openDesigner()\">\r\n        Design Nested Layout\r\n      </button>\r\n    </div>", styles: ["button{width:200px;border-radius:0;font-size:13px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormArrayPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'form-array-props', imports: [], template: "    <div class=\"mt-3 d-flex d-flex-center\">\r\n      <button class=\"btn btn-outline-primary\" (click)=\"openDesigner()\">\r\n        Design Nested Layout\r\n      </button>\r\n    </div>", styles: ["button{width:200px;border-radius:0;font-size:13px}\n"] }]
+        }] });
 
-class GridBufferPropsComponent {
+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: 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: [""] }); }
+    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: GridBufferPropsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TextareaPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'grid-buffer-props', imports: [], template: "<p>grid-buffer-props works!</p>\r\n" }]
+            args: [{ selector: 'textarea-props', imports: [], template: "<p>textarea-props works!</p>\r\n" }]
         }], propDecorators: { control: [{
                 type: Input
             }], controlChange: [{
                 type: Output
             }] } });
 
-class ListPropsComponent {
+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: 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: [""] }); }
+    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: ListPropsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ChecklistPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'list-props', imports: [], template: "<p>list-props works!</p>\r\n" }]
+            args: [{ selector: 'checklist-props', imports: [], template: "<p>checklist-props works!</p>\r\n" }]
         }], propDecorators: { control: [{
                 type: Input
             }], controlChange: [{
                 type: Output
             }] } });
 
-class MccPropsComponent {
+class SeekerPropsService {
+    constructor() {
+        // ============================================================
+        // CONSTANT OPTIONS (đưa hết vào service)
+        // ============================================================
+        this.sourceTypeOptions$ = new BehaviorSubject([
+            { value: EnumCoreFormControlSeekerSourceType.JOB_SEEK, text: 'Job Seek' },
+            { value: EnumCoreFormControlSeekerSourceType.EMPLOYEE_SEEK, text: 'Employee Seek' },
+            { value: EnumCoreFormControlSeekerSourceType.CONTRACT_SEEK, text: 'Contract Seek' },
+            { value: EnumCoreFormControlSeekerSourceType.WORKING_SEEK, text: 'Working Seek' },
+            { value: EnumCoreFormControlSeekerSourceType.WAGE_SEEK, text: 'Wage Seek' },
+            { value: EnumCoreFormControlSeekerSourceType.POSITION_SEEK, text: 'Position Seek' },
+            { value: EnumCoreFormControlSeekerSourceType.POSITION_CONCURRENT_SEEK, text: 'Concurrent Position Seek' },
+            // { value: EnumCoreFormControlSeekerSourceType.ORGANIZATION_UNIT_SEEK, text: 'Org Unit Seek' }, // TO DO LATER
+            { value: EnumCoreFormControlSeekerSourceType.COM_UNIT_SEEK, text: 'Company Unit Seek' },
+            { value: EnumCoreFormControlSeekerSourceType.TOPICPICKER, text: 'Topic Picker' },
+            { value: EnumCoreFormControlSeekerSourceType.FORM_SEEK, text: 'Form Seek' },
+        ]);
+        this.filterOperatorOptions$ = new BehaviorSubject([
+            { value: EnumFilterOperator.EQUAL, text: '==' },
+            { value: EnumFilterOperator.NOT_EQUAL, text: '!=' },
+            { value: EnumFilterOperator.GREATER_THAN_OR_EQUAL, text: '>=' },
+            { value: EnumFilterOperator.LESS_THAN_OR_EQUAL, text: '<=' },
+            { value: EnumFilterOperator.GREATER_THAN, text: '>' },
+            { value: EnumFilterOperator.LESS_THAN, text: '<' },
+        ]);
+    }
+    // ============================================================
+    // HELPERS
+    // ============================================================
+    extractArray(input) {
+        if (!input)
+            return [];
+        if (input instanceof BehaviorSubject)
+            return input.getValue() ?? [];
+        return input;
+    }
+    extractObject(input) {
+        if (!input)
+            return {};
+        if (input instanceof BehaviorSubject)
+            return input.getValue();
+        return input;
+    }
+    wrapArray(arr) {
+        return new BehaviorSubject(arr);
+    }
+    wrapObject(obj) {
+        return new BehaviorSubject(obj);
+    }
+    addItem(source, newItem) {
+        return [...source, newItem];
+    }
+    updateItem(source, index, updated) {
+        const arr = [...source];
+        arr[index] = { ...arr[index], ...updated };
+        return arr;
+    }
+    removeItem(source, index) {
+        const arr = [...source];
+        arr.splice(index, 1);
+        return arr;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SeekerPropsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SeekerPropsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SeekerPropsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SeekerPropsComponent extends BasePropsComponent {
+    constructor() {
+        super(...arguments);
+        this.svc = inject(SeekerPropsService);
+        // -----------------------------------------------------------
+        // BASIC CSV
+        // -----------------------------------------------------------
+        this.$useTheseColumnsCsv = computed(() => (this.$control()?.useTheseColumns ?? []).join(', '));
+        this.$excludedColumnsCsv = computed(() => (this.$control()?.excludedColumns ?? []).join(', '));
+        // -----------------------------------------------------------
+        // ALSO BIND TO
+        // -----------------------------------------------------------
+        this.$alsoBind = computed(() => this.svc.extractArray(this.$control()?.alsoBindTo));
+        // -----------------------------------------------------------
+        // OUTER PARAM (JSON)
+        // -----------------------------------------------------------
+        this.$outerParam = computed(() => this.svc.extractObject(this.$control()?.___preDefinedOuterParam));
+        this.$outerParamJson = computed(() => JSON.stringify(this.$outerParam(), null, 2));
+        // -----------------------------------------------------------
+        // OUTER FILTER (RuleTree mini)
+        // -----------------------------------------------------------
+        this.$outerFilter = computed(() => this.svc.extractArray(this.$control()?.___preDefinedOuterFilter));
+        // -----------------------------------------------------------
+        // EXTENDED COLUMNS
+        // -----------------------------------------------------------
+        this.$extendedColumns = computed(() => this.svc.extractArray(this.$control()?.multiModeExtendedColumns));
+        // -----------------------------------------------------------
+        // EXTENDED SECTIONS
+        // -----------------------------------------------------------
+        this.$extendedSections = computed(() => this.svc.extractArray(this.$control()?.multiModeExtendedSections));
+    }
+    onUseColumnsChanged(raw) {
+        const arr = raw.split(',').map(x => x.trim()).filter(Boolean);
+        this.setControlProp('useTheseColumns', arr);
+    }
+    onExcludedColumnsChanged(raw) {
+        const arr = raw.split(',').map(x => x.trim()).filter(Boolean);
+        this.setControlProp('excludedColumns', arr);
+    }
+    addAlsoBindRow() {
+        const next = this.svc.addItem(this.$alsoBind(), { takeFrom: '', bindTo: '' });
+        this.setControlProp('alsoBindTo', next);
+    }
+    updateAlsoBindRow(i, key, v) {
+        const next = this.svc.updateItem(this.$alsoBind(), i, { [key]: v });
+        this.setControlProp('alsoBindTo', next);
+    }
+    removeAlsoBindRow(i) {
+        const next = this.svc.removeItem(this.$alsoBind(), i);
+        this.setControlProp('alsoBindTo', next);
+    }
+    onOuterParamJsonChange(raw) {
+        try {
+            const parsed = JSON.parse(raw);
+            this.setControlProp('preDefinedOuterParam$', this.svc.wrapObject(parsed));
+        }
+        catch { }
+    }
+    addOuterFilter() {
+        const next = this.svc.addItem(this.$outerFilter(), {
+            field: '',
+            operator: EnumFilterOperator.EQUAL,
+            dateTimeValue: null
+        });
+        // (1) metadata / design (LƯU JSON)
+        this.setControlProp('___preDefinedOuterFilter', next);
+        // (2) runtime (KHÔNG LƯU JSON)
+        this.$control().preDefinedOuterFilter$?.next(next);
+    }
+    updateOuterFilter(i, key, v) {
+        const next = this.svc.updateItem(this.$outerFilter(), i, { [key]: v });
+        this.setControlProp('___preDefinedOuterFilter', next);
+        this.$control().preDefinedOuterFilter$?.next(next);
+    }
+    removeOuterFilter(i) {
+        const next = this.svc.removeItem(this.$outerFilter(), i);
+        this.setControlProp('___preDefinedOuterFilter', next);
+        this.$control().preDefinedOuterFilter$?.next(next);
+    }
+    addExtendedColumn() {
+        const next = this.svc.addItem(this.$extendedColumns(), {
+            caption: '',
+            field: '',
+            type: 'string',
+            align: 'left',
+            width: 120,
+            hidden: false,
+            translate: false
+        });
+        this.setControlProp('multiModeExtendedColumns', next);
+    }
+    updateExtendedColumn(i, key, v) {
+        const next = this.svc.updateItem(this.$extendedColumns(), i, { [key]: v });
+        this.setControlProp('multiModeExtendedColumns', next);
+    }
+    removeExtendedColumn(i) {
+        const next = this.svc.removeItem(this.$extendedColumns(), i);
+        this.setControlProp('multiModeExtendedColumns', next);
+    }
+    addExtendedSection() {
+        const next = this.svc.addItem(this.$extendedSections(), {
+            caption: 'New Section',
+            rows: []
+        });
+        this.setControlProp('multiModeExtendedSections', next);
+    }
+    updateExtendedSection(i, caption) {
+        const next = this.svc.updateItem(this.$extendedSections(), i, { caption });
+        this.setControlProp('multiModeExtendedSections', next);
+    }
+    removeExtendedSection(i) {
+        const next = this.svc.removeItem(this.$extendedSections(), i);
+        this.setControlProp('multiModeExtendedSections', next);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: SeekerPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: SeekerPropsComponent, isStandalone: true, selector: "seeker-props", usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group seeker-group\" [style.padding.px]=\"15\">\r\n\r\n  <div class=\"setting-row\">\r\n    Basic Settings\r\n  </div>\r\n  \r\n\r\n  <div class=\"setting-row\">\r\n    <label>Source Type</label>\r\n    <core-dropdown\r\n      [options$]=\"svc.sourceTypeOptions$\"\r\n      [paramMode]=\"true\"\r\n      [ngModel]=\"$control().seekerSourceType\"\r\n      (ngModelChange)=\"setControlProp('seekerSourceType', $event)\">\r\n    </core-dropdown>\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Multi Mode</label>\r\n    <core-checkbox\r\n      [ngModel]=\"$control().multiMode\"\r\n      (ngModelChange)=\"setControlProp('multiMode', $event)\">\r\n    </core-checkbox>\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Hide Org Tree</label>\r\n    <core-checkbox\r\n      [ngModel]=\"$control().hideOrgTree\"\r\n      (ngModelChange)=\"setControlProp('hideOrgTree', $event)\">\r\n    </core-checkbox>\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Source Space Height</label>\r\n    <input class=\"form-control\"\r\n           type=\"number\"\r\n           [ngModel]=\"$control().sourceSpaceHeight\"\r\n           (ngModelChange)=\"setControlProp('sourceSpaceHeight', $event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Bound From</label>\r\n    <input class=\"form-control\"\r\n           [ngModel]=\"$control().boundFrom\"\r\n           (ngModelChange)=\"setControlProp('boundFrom', $event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Shown From</label>\r\n    <input class=\"form-control\"\r\n           [ngModel]=\"$control().shownFrom\"\r\n           (ngModelChange)=\"setControlProp('shownFrom', $event)\" />\r\n  </div>\r\n\r\n  <!-- <div class=\"setting-row\">\r\n    <label>Use These Columns (CSV)</label>\r\n    <input class=\"form-control\"\r\n           [ngModel]=\"$useTheseColumnsCsv()\"\r\n           (ngModelChange)=\"onUseColumnsChanged($event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Excluded Columns (CSV)</label>\r\n    <input class=\"form-control\"\r\n           [ngModel]=\"$excludedColumnsCsv()\"\r\n           (ngModelChange)=\"onExcludedColumnsChanged($event)\" />\r\n  </div> -->\r\n\r\n\r\n  <!-- ================================================ -->\r\n  <!-- ALSO BIND TO -->\r\n  <!-- ================================================ -->\r\n  <div class=\"setting-row\">\r\n    Also Bind To\r\n  </div>\r\n  \r\n  <button class=\"btn-add\" (click)=\"addAlsoBindRow()\">+ Add Mapping</button>\r\n\r\n  <table class=\"mini-table\">\r\n    <tr>\r\n      <th>takeFrom</th>\r\n      <th>bindTo</th>\r\n      <th></th>\r\n    </tr>\r\n\r\n    @for (item of $alsoBind(); track $index) {\r\n      <tr>\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"item.takeFrom\"\r\n                 (ngModelChange)=\"updateAlsoBindRow($index, 'takeFrom', $event)\" />\r\n        </td>\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"item.bindTo\"\r\n                 (ngModelChange)=\"updateAlsoBindRow($index, 'bindTo', $event)\" />\r\n        </td>\r\n        <td>\r\n          <button class=\"btn-remove\" (click)=\"removeAlsoBindRow($index)\">x</button>\r\n        </td>\r\n      </tr>\r\n    }\r\n  </table>\r\n\r\n\r\n  <!-- ================================================ -->\r\n  <!-- OUTER PARAM -->\r\n  <!-- ================================================ -->\r\n  <div class=\"setting-row\">\r\n    Outer Param JSON\r\n  </div>\r\n\r\n  <textarea class=\"form-control\"\r\n            [style.height.px]=\"140\"\r\n            [ngModel]=\"$outerParamJson()\"\r\n            (ngModelChange)=\"onOuterParamJsonChange($event)\">\r\n  </textarea>\r\n\r\n\r\n  <!-- ================================================ -->\r\n  <!-- OUTER FILTER -->\r\n  <!-- ================================================ -->\r\n  <div class=\"setting-row\">\r\n    Outer Filter (RuleTree Mini)\r\n  </div>\r\n\r\n  <button class=\"btn-add\" (click)=\"addOuterFilter()\">+ Add Filter</button>\r\n\r\n  <table class=\"mini-table\">\r\n    <tr>\r\n      <th>Field</th>\r\n      <th>Operator</th>\r\n      <th>Value</th>\r\n      <th></th>\r\n    </tr>\r\n\r\n    @for (f of $outerFilter(); track $index) {\r\n      <tr>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"f.field\"\r\n                 (ngModelChange)=\"updateOuterFilter($index, 'field', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <core-dropdown\r\n            [options$]=\"svc.filterOperatorOptions$\"\r\n            [ngModel]=\"f.operator\"\r\n            [paramMode]=\"true\"\r\n            (ngModelChange)=\"updateOuterFilter($index, 'operator', $event)\">\r\n          </core-dropdown>\r\n        </td>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 type=\"text\"\r\n                 [ngModel]=\"f.dateTimeValue\"\r\n                 (ngModelChange)=\"updateOuterFilter($index, 'dateTimeValue', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <button class=\"btn-remove\" (click)=\"removeOuterFilter($index)\">x</button>\r\n        </td>\r\n\r\n      </tr>\r\n    }\r\n  </table>\r\n\r\n\r\n  <!-- ================================================ -->\r\n  <!-- EXTENDED COLUMNS -->\r\n  <!-- ================================================ -->\r\n  <!-- <div class=\"setting-row\">\r\n    Extended Columns\r\n  </div>\r\n\r\n  <button class=\"btn-add\" (click)=\"addExtendedColumn()\">+ Add Column</button>\r\n\r\n  <table class=\"mini-table\">\r\n    <tr>\r\n      <th>Caption</th>\r\n      <th>Field</th>\r\n      <th>Type</th>\r\n      <th>Align</th>\r\n      <th>Width</th>\r\n      <th>Hidden</th>\r\n      <th>Translate</th>\r\n      <th></th>\r\n    </tr>\r\n\r\n    @for (c of $extendedColumns(); track $index) {\r\n      <tr>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"c.caption\"\r\n                 (ngModelChange)=\"updateExtendedColumn($index, 'caption', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"c.field\"\r\n                 (ngModelChange)=\"updateExtendedColumn($index, 'field', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"c.type\"\r\n                 (ngModelChange)=\"updateExtendedColumn($index, 'type', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"c.align\"\r\n                 (ngModelChange)=\"updateExtendedColumn($index, 'align', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <input type=\"number\"\r\n                 class=\"form-control\"\r\n                 [ngModel]=\"c.width\"\r\n                 (ngModelChange)=\"updateExtendedColumn($index, 'width', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <core-checkbox\r\n            [ngModel]=\"c.hidden\"\r\n            (ngModelChange)=\"updateExtendedColumn($index, 'hidden', $event)\">\r\n          </core-checkbox>\r\n        </td>\r\n\r\n        <td>\r\n          <core-checkbox\r\n            [ngModel]=\"c.translate\"\r\n            (ngModelChange)=\"updateExtendedColumn($index, 'translate', $event)\">\r\n          </core-checkbox>\r\n        </td>\r\n\r\n        <td>\r\n          <button class=\"btn-remove\" (click)=\"removeExtendedColumn($index)\">x</button>\r\n        </td>\r\n\r\n      </tr>\r\n    }\r\n  </table> -->\r\n\r\n\r\n  <!-- ================================================ -->\r\n  <!-- EXTENDED SECTIONS -->\r\n  <!-- ================================================ -->\r\n  <!-- <div class=\"setting-row\">\r\n    Extended Sections\r\n  </div>\r\n\r\n  <button class=\"btn-add\" (click)=\"addExtendedSection()\">+ Add Section</button>\r\n\r\n  @for (s of $extendedSections(); track $index) {\r\n    <div class=\"section-box\">\r\n\r\n      <div class=\"setting-row\">\r\n        <label>Caption</label>\r\n        <input class=\"form-control\"\r\n               [ngModel]=\"s.caption\"\r\n               (ngModelChange)=\"updateExtendedSection($index, $event)\" />\r\n      </div>\r\n\r\n      <button class=\"btn-remove\"\r\n              (click)=\"removeExtendedSection($index)\">\r\n        Remove\r\n      </button>\r\n\r\n    </div>\r\n  } -->\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "clearDisable", "fitHeightWithItemCount", "itemHeight", "optionApiDriven", "optionApi", "optionHttpVerb", "optionHttpPayload", "optionValueFrom", "optionTextFrom"] }, { 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: SeekerPropsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seeker-props', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        CoreDropdownComponent,
+                        CoreCheckboxComponent,
+                    ], template: "<div class=\"setting-group seeker-group\" [style.padding.px]=\"15\">\r\n\r\n  <div class=\"setting-row\">\r\n    Basic Settings\r\n  </div>\r\n  \r\n\r\n  <div class=\"setting-row\">\r\n    <label>Source Type</label>\r\n    <core-dropdown\r\n      [options$]=\"svc.sourceTypeOptions$\"\r\n      [paramMode]=\"true\"\r\n      [ngModel]=\"$control().seekerSourceType\"\r\n      (ngModelChange)=\"setControlProp('seekerSourceType', $event)\">\r\n    </core-dropdown>\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Multi Mode</label>\r\n    <core-checkbox\r\n      [ngModel]=\"$control().multiMode\"\r\n      (ngModelChange)=\"setControlProp('multiMode', $event)\">\r\n    </core-checkbox>\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Hide Org Tree</label>\r\n    <core-checkbox\r\n      [ngModel]=\"$control().hideOrgTree\"\r\n      (ngModelChange)=\"setControlProp('hideOrgTree', $event)\">\r\n    </core-checkbox>\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Source Space Height</label>\r\n    <input class=\"form-control\"\r\n           type=\"number\"\r\n           [ngModel]=\"$control().sourceSpaceHeight\"\r\n           (ngModelChange)=\"setControlProp('sourceSpaceHeight', $event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Bound From</label>\r\n    <input class=\"form-control\"\r\n           [ngModel]=\"$control().boundFrom\"\r\n           (ngModelChange)=\"setControlProp('boundFrom', $event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Shown From</label>\r\n    <input class=\"form-control\"\r\n           [ngModel]=\"$control().shownFrom\"\r\n           (ngModelChange)=\"setControlProp('shownFrom', $event)\" />\r\n  </div>\r\n\r\n  <!-- <div class=\"setting-row\">\r\n    <label>Use These Columns (CSV)</label>\r\n    <input class=\"form-control\"\r\n           [ngModel]=\"$useTheseColumnsCsv()\"\r\n           (ngModelChange)=\"onUseColumnsChanged($event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Excluded Columns (CSV)</label>\r\n    <input class=\"form-control\"\r\n           [ngModel]=\"$excludedColumnsCsv()\"\r\n           (ngModelChange)=\"onExcludedColumnsChanged($event)\" />\r\n  </div> -->\r\n\r\n\r\n  <!-- ================================================ -->\r\n  <!-- ALSO BIND TO -->\r\n  <!-- ================================================ -->\r\n  <div class=\"setting-row\">\r\n    Also Bind To\r\n  </div>\r\n  \r\n  <button class=\"btn-add\" (click)=\"addAlsoBindRow()\">+ Add Mapping</button>\r\n\r\n  <table class=\"mini-table\">\r\n    <tr>\r\n      <th>takeFrom</th>\r\n      <th>bindTo</th>\r\n      <th></th>\r\n    </tr>\r\n\r\n    @for (item of $alsoBind(); track $index) {\r\n      <tr>\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"item.takeFrom\"\r\n                 (ngModelChange)=\"updateAlsoBindRow($index, 'takeFrom', $event)\" />\r\n        </td>\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"item.bindTo\"\r\n                 (ngModelChange)=\"updateAlsoBindRow($index, 'bindTo', $event)\" />\r\n        </td>\r\n        <td>\r\n          <button class=\"btn-remove\" (click)=\"removeAlsoBindRow($index)\">x</button>\r\n        </td>\r\n      </tr>\r\n    }\r\n  </table>\r\n\r\n\r\n  <!-- ================================================ -->\r\n  <!-- OUTER PARAM -->\r\n  <!-- ================================================ -->\r\n  <div class=\"setting-row\">\r\n    Outer Param JSON\r\n  </div>\r\n\r\n  <textarea class=\"form-control\"\r\n            [style.height.px]=\"140\"\r\n            [ngModel]=\"$outerParamJson()\"\r\n            (ngModelChange)=\"onOuterParamJsonChange($event)\">\r\n  </textarea>\r\n\r\n\r\n  <!-- ================================================ -->\r\n  <!-- OUTER FILTER -->\r\n  <!-- ================================================ -->\r\n  <div class=\"setting-row\">\r\n    Outer Filter (RuleTree Mini)\r\n  </div>\r\n\r\n  <button class=\"btn-add\" (click)=\"addOuterFilter()\">+ Add Filter</button>\r\n\r\n  <table class=\"mini-table\">\r\n    <tr>\r\n      <th>Field</th>\r\n      <th>Operator</th>\r\n      <th>Value</th>\r\n      <th></th>\r\n    </tr>\r\n\r\n    @for (f of $outerFilter(); track $index) {\r\n      <tr>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"f.field\"\r\n                 (ngModelChange)=\"updateOuterFilter($index, 'field', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <core-dropdown\r\n            [options$]=\"svc.filterOperatorOptions$\"\r\n            [ngModel]=\"f.operator\"\r\n            [paramMode]=\"true\"\r\n            (ngModelChange)=\"updateOuterFilter($index, 'operator', $event)\">\r\n          </core-dropdown>\r\n        </td>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 type=\"text\"\r\n                 [ngModel]=\"f.dateTimeValue\"\r\n                 (ngModelChange)=\"updateOuterFilter($index, 'dateTimeValue', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <button class=\"btn-remove\" (click)=\"removeOuterFilter($index)\">x</button>\r\n        </td>\r\n\r\n      </tr>\r\n    }\r\n  </table>\r\n\r\n\r\n  <!-- ================================================ -->\r\n  <!-- EXTENDED COLUMNS -->\r\n  <!-- ================================================ -->\r\n  <!-- <div class=\"setting-row\">\r\n    Extended Columns\r\n  </div>\r\n\r\n  <button class=\"btn-add\" (click)=\"addExtendedColumn()\">+ Add Column</button>\r\n\r\n  <table class=\"mini-table\">\r\n    <tr>\r\n      <th>Caption</th>\r\n      <th>Field</th>\r\n      <th>Type</th>\r\n      <th>Align</th>\r\n      <th>Width</th>\r\n      <th>Hidden</th>\r\n      <th>Translate</th>\r\n      <th></th>\r\n    </tr>\r\n\r\n    @for (c of $extendedColumns(); track $index) {\r\n      <tr>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"c.caption\"\r\n                 (ngModelChange)=\"updateExtendedColumn($index, 'caption', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"c.field\"\r\n                 (ngModelChange)=\"updateExtendedColumn($index, 'field', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"c.type\"\r\n                 (ngModelChange)=\"updateExtendedColumn($index, 'type', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <input class=\"form-control\"\r\n                 [ngModel]=\"c.align\"\r\n                 (ngModelChange)=\"updateExtendedColumn($index, 'align', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <input type=\"number\"\r\n                 class=\"form-control\"\r\n                 [ngModel]=\"c.width\"\r\n                 (ngModelChange)=\"updateExtendedColumn($index, 'width', $event)\" />\r\n        </td>\r\n\r\n        <td>\r\n          <core-checkbox\r\n            [ngModel]=\"c.hidden\"\r\n            (ngModelChange)=\"updateExtendedColumn($index, 'hidden', $event)\">\r\n          </core-checkbox>\r\n        </td>\r\n\r\n        <td>\r\n          <core-checkbox\r\n            [ngModel]=\"c.translate\"\r\n            (ngModelChange)=\"updateExtendedColumn($index, 'translate', $event)\">\r\n          </core-checkbox>\r\n        </td>\r\n\r\n        <td>\r\n          <button class=\"btn-remove\" (click)=\"removeExtendedColumn($index)\">x</button>\r\n        </td>\r\n\r\n      </tr>\r\n    }\r\n  </table> -->\r\n\r\n\r\n  <!-- ================================================ -->\r\n  <!-- EXTENDED SECTIONS -->\r\n  <!-- ================================================ -->\r\n  <!-- <div class=\"setting-row\">\r\n    Extended Sections\r\n  </div>\r\n\r\n  <button class=\"btn-add\" (click)=\"addExtendedSection()\">+ Add Section</button>\r\n\r\n  @for (s of $extendedSections(); track $index) {\r\n    <div class=\"section-box\">\r\n\r\n      <div class=\"setting-row\">\r\n        <label>Caption</label>\r\n        <input class=\"form-control\"\r\n               [ngModel]=\"s.caption\"\r\n               (ngModelChange)=\"updateExtendedSection($index, $event)\" />\r\n      </div>\r\n\r\n      <button class=\"btn-remove\"\r\n              (click)=\"removeExtendedSection($index)\">\r\n        Remove\r\n      </button>\r\n\r\n    </div>\r\n  } -->\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"] }]
+        }] });
+
+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: 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: [""] }); }
+    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: MccPropsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DatepickerPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mcc-props', imports: [], template: "<p>mcc-props works!</p>\r\n" }]
+            args: [{ selector: 'datepicker-props', imports: [], template: "<p>datepicker-props works!</p>\r\n" }]
         }], propDecorators: { control: [{
                 type: Input
             }], controlChange: [{
                 type: Output
             }] } });
 
-class NumberPropsComponent {
+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: 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: "<div class=\"number-props-container\" [ngStyle]=\"{ padding: '15px' }\">\r\n\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    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: NumberPropsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: GridBufferPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'number-props', imports: [NgStyle], template: "<div class=\"number-props-container\" [ngStyle]=\"{ padding: '15px' }\">\r\n\r\n</div>" }]
+            args: [{ selector: 'grid-buffer-props', imports: [], template: "<p>grid-buffer-props works!</p>\r\n" }]
         }], propDecorators: { control: [{
                 type: Input
             }], controlChange: [{
                 type: Output
             }] } });
 
-var numberProps_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    NumberPropsComponent: NumberPropsComponent
-});
-
-class RadioGroupPropsComponent {
+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: 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: [""] }); }
+    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: RadioGroupPropsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ListPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'radio-group-props', imports: [], template: "<p>radio-group-props works!</p>\r\n" }]
+            args: [{ selector: 'list-props', imports: [], template: "<p>list-props works!</p>\r\n" }]
         }], propDecorators: { control: [{
                 type: Input
             }], controlChange: [{
                 type: Output
             }] } });
 
-class SeekerPropsComponent {
+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: 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: [""] }); }
+    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: SeekerPropsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MccPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'seeker-props', imports: [], template: "<p>seeker-props works!</p>\r\n" }]
+            args: [{ selector: 'mcc-props', imports: [], template: "<p>mcc-props works!</p>\r\n" }]
         }], propDecorators: { control: [{
                 type: Input
             }], controlChange: [{
                 type: Output
             }] } });
 
-class TextareaPropsComponent {
+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: 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: [""] }); }
+    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: TextareaPropsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RadioGroupPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'textarea-props', imports: [], template: "<p>textarea-props works!</p>\r\n" }]
+            args: [{ selector: 'radio-group-props', imports: [], template: "<p>radio-group-props works!</p>\r\n" }]
         }], propDecorators: { control: [{
                 type: Input
             }], controlChange: [{
@@ -750,91 +854,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 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();
+class AttachmentPropsComponent extends BasePropsComponent {
+    constructor() {
+        super(...arguments);
+        this.$typedField = computed(() => {
+            const control = this.$control();
+            return AttachmentFieldHelperService.isAttachment(control)
+                ? control.assignTo || ''
+                : control.field;
         });
     }
-    // ✅ Check if a validator is enabled
-    isChecked(v) {
-        return this.$selectedValidators()[v] !== undefined;
-    }
-    syncFromControl() {
+    setTypedField(val) {
         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];
+        const context = this.$formContext();
+        if (AttachmentFieldHelperService.isAttachment(control)) {
+            AttachmentFieldHelperService.handleFieldNameChangeForAttachment(control, context, val);
         }
         else {
-            if (updated[v]) {
-                updated[v].value = value;
-            }
+            control.field = val;
         }
-        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;
+        this.patchControl(control, this.isNested);
     }
-    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\" [ngStyle]=\"{ padding: '15px' }\">\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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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: ValidatorEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AttachmentPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'validator-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgStyle,
-                        FormsModule,
-                        TranslatePipe,
-                        TooltipDirective,
-                        CoreCheckboxComponent
-                    ], template: "<div class=\"setting-group validator-group\" [ngStyle]=\"{ padding: '15px' }\">\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 }] });
+            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 CalculatedPropsComponent extends BasePropsComponent {
     constructor(mls) {
@@ -1137,6 +1184,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     ], template: "<div class=\"setting-group calculated-group\" [ngStyle]=\"{ padding: '15px' }\">\r\n\r\n  <div class=\"setting-row evaluation-mode-row\">\r\n    <label class=\"setting-label\">Evaluation Mode</label>\r\n    <core-radio-group [options$]=\"radioOptions$\" [vertical]=\"true\" [gapY]=\"8\"\r\n      [ngModel]=\"fds.$control()?.evaluationMode\" (ngModelChange)=\"setControlProp('evaluationMode', $event)\">\r\n    </core-radio-group>\r\n  </div>\r\n\r\n  <div class=\"setting-row depends-on-row\">\r\n    <label class=\"setting-label\">Depends On</label>\r\n    <core-sticker-collection [$items]=\"$fields()\" [$shownFrom]=\"'field'\"\r\n      [$initialChecked]=\"fds.$control()?.dependsOn || []\" ($checkedChange)=\"setControlProp('dependsOn', $event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row return-type-row\">\r\n    <label class=\"setting-label\">Return Type</label>\r\n    <select class=\"form-control setting-input\" [ngModel]=\"fds.$control()?.returnType || 'number'\"\r\n      (ngModelChange)=\"setControlProp('returnType', $event)\">\r\n      <option value=\"boolean\">Boolean</option>\r\n      <option value=\"number\">Number</option>\r\n      <option value=\"string\">String</option>\r\n      <option value=\"number[]\">Number[]</option>\r\n      <option value=\"string[]\">String[]</option>\r\n      <!-- Omitting 'Date' and 'object' -->\r\n    </select>\r\n  </div>\r\n\r\n  @if (!!fds.$control()?.dependsOn && !!fds.$control()?.dependsOn!.length) {\r\n\r\n\r\n  <div class=\"setting-row script-row\">\r\n    <label class=\"setting-label\">Script {{ $beingValidated() ? 'is being validated...' : '' }}</label>\r\n    <textarea [ngStyle]=\"{ minHeight: '150px', borderRadius: '8px' }\" [readonly]=\"!fds.$control()?.evaluationMode\"\r\n      [disabled]=\"!fds.$control()?.evaluationMode\" class=\"form-control\"\r\n      [class.form-control-disabled]=\"!fds.$control()?.evaluationMode\" rows=\"20\" [ngModel]=\"fds.$control()?.script\"\r\n      (ngModelChange)=\"onScriptChange($event)\" [placeholder]=\"$placeholderForScriptInput()\">\r\n      </textarea>\r\n    @if (!!$sqlScriptError()) {\r\n    <small class=\"text-danger\">{{ $sqlScriptError() }}</small>\r\n    }\r\n\r\n\r\n    @if (!!fds.$control()?.evaluationMode) {\r\n    <div class=\"button-group\">\r\n      <button class=\"btn btn-secondary validate-btn\" (click)=\"validateScript($event)\">Validate with AI</button>\r\n      <button class=\"btn btn-primary validate-btn\" (click)=\"generateScript()\">\r\n        {{ $aiGeneratorOn() ? 'Hide AI Prompt Editor' : 'Show AI Prompt Editor' }}\r\n      </button>\r\n    </div>\r\n    }\r\n\r\n    @if ($aiGeneratorOn()) {\r\n    <div class=\"sql-generator-panel\">\r\n      <div class=\"alert alert-info\" style=\"margin-top: 1rem;\">\r\n        <strong>SQL Generator:</strong> Describe what you want the script to do, and AI will generate SQL for you.\r\n      </div>\r\n\r\n      @if (fds.$control()?.evaluationMode==='sql-query') {\r\n      <div class=\"sql-generator-panel mt-4\">\r\n        <label class=\"fw-bold mb-2\">Select Related Tables</label>\r\n\r\n        <core-sticker-collection [$enableFilter]=\"true\" [$items]=\"wfs.$workflowDbSchema()\" [$shownFrom]=\"'table'\"\r\n          [$tooltipFrom]=\"'hintForAi'\" [$initialChecked]=\"[]\" ($checkedChange)=\"tableCheckedChange($event)\">\r\n        </core-sticker-collection>\r\n\r\n      </div>\r\n      }\r\n\r\n      @if (!!fds.$control()?.evaluationMode) {\r\n      <textarea class=\"form-control\" style=\"min-height: 100px; margin-top: 0.5rem; border-radius: 8px;\"\r\n        [(ngModel)]=\"$sqlPrompt\" placeholder=\"e.g., Calculate leave days between FROM_DATE and TO_DATE\">\r\n          </textarea>\r\n\r\n      <div class=\"mt-2 d-flex gap-2 justify-content-end\">\r\n        <button class=\"btn btn-success\" (click)=\"submitScriptPrompt()\">\r\n          Generate Script\r\n        </button>\r\n      </div>\r\n      }\r\n\r\n      @if ($generatedScript()) {\r\n      <div class=\"generated-sql-box mt-3\">\r\n        <label class=\"fw-bold\">Generated by AI:</label>\r\n        <pre class=\"bg-light p-3 rounded\" style=\"white-space: pre-wrap;\">{{$generatedScript()}}</pre>\r\n        <button class=\"btn btn-sm btn-primary mt-2\" (click)=\"applyGeneratedSql()\">Apply to Script</button>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n\r\n\r\n\r\n  }\r\n\r\n<ng-template #shortHtmlHintForCSharpSyntax>\r\n  <div class=\"syntax-hint\">\r\n    <strong>Example (C# Expression):</strong>\r\n    <pre><code>FullName.ToUpper() + \" #\" + EmployeeCode</code></pre>\r\n    <div class=\"note\">\r\n      This expression will be evaluated dynamically using <code>DynamicExpresso</code>.<br>\r\n      You can return any value from context.\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #shortHtmlHintForSqlSyntax>\r\n  <div class=\"syntax-hint\">\r\n    <strong>Example (SQL Query):</strong>\r\n    <pre><code>SELECT EMPLOYEE_CODE FROM HU_EMPLOYEE WHERE ORG_ID = 123</code></pre>\r\n    <div class=\"note\">\r\n      Your SQL can return either a single value <em>or</em> a list.<br>\r\n      The system will extract data from the <strong>first column of all rows</strong>.<br>\r\n      Use standard SQL compatible with your database.\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n</div>", styles: [".setting-row{margin:30px 0}.button-group{margin-top:15px}.button-group button{height:35px;font-size:13px;border-radius:17.5px;margin-right:8px}.setting-divider{margin:1.5rem 0 .75rem;color:#555;border-top:1px dashed #ccc;padding-top:.5rem}.evaluation-mode-row{background-color:#ffecb3;border-radius:8px;width:180px;height:110px;padding:15px}.evaluation-mode-row label{margin-bottom:8px}.script-row{margin:30px 0}.syntax-hint{color:#666;background:#fff;border:1px solid #ccc;border-radius:6px;padding:12px;font-size:13px;max-width:320px;box-shadow:0 2px 6px #0000000d}.syntax-hint pre{margin:8px 0;background-color:#f8f8f8;padding:8px;border-radius:4px;font-family:monospace;white-space:pre-wrap;word-break:break-word}.syntax-hint .note{margin-top:6px;font-size:12px}\n"] }]
         }], ctorParameters: () => [{ type: MultiLanguageService }] });
 
+const FIELD_SETTING_PROPS_REGISTRY = {
+    'NUMBER': NumberPropsComponent,
+    'EMAIL': EmailPropsComponent,
+    'DROPDOWN': DropdownPropsComponent,
+    'FORM_ARRAY': FormArrayPropsComponent,
+    'TEXTAREA': TextareaPropsComponent,
+    'CHECKLIST': ChecklistPropsComponent,
+    'SEEKER': SeekerPropsComponent,
+    'DATEPICKER': DatepickerPropsComponent,
+    'GRID_BUFFER': GridBufferPropsComponent,
+    'LIST': ListPropsComponent,
+    'MCC': MccPropsComponent,
+    'RADIO_GROUP': RadioGroupPropsComponent,
+    'UPLOADER': UploaderPropsComponent,
+    'ATTACHMENT': AttachmentPropsComponent,
+    'CALCULATED': CalculatedPropsComponent,
+};
+
+class PropsHostComponent {
+    constructor() {
+        this.isNested = false;
+        this.props = {};
+        this.vcRef = inject(ViewContainerRef);
+        this.alert = inject(AlertService);
+    }
+    ngOnInit() {
+        const componentType = FIELD_SETTING_PROPS_REGISTRY[this.type];
+        if (!componentType) {
+            this.alert.error(`[PropsHost] Component type '${this.type}' not found in registry.`, noneAutoClosedAlertOptions);
+            return;
+        }
+        this.componentRef = this.vcRef.createComponent(componentType);
+        // truyền props trực tiếp
+        if (this.props) {
+            Object.assign(this.componentRef.instance, this.props);
+        }
+        // truyền isNested nếu có @Input bên con
+        this.componentRef.setInput?.('isNested', this.isNested);
+        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: { isNested: "isNested", type: "type", 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',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { isNested: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], props: [{
+                type: Input
+            }] } });
+
+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 {
+            if (updated[v]) {
+                updated[v].value = 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\" [ngStyle]=\"{ padding: '15px' }\">\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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: ["appTooltip", "showAnyway", "color", "backgroundColor", "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: [
+                        NgStyle,
+                        FormsModule,
+                        TranslatePipe,
+                        TooltipDirective,
+                        CoreCheckboxComponent
+                    ], template: "<div class=\"setting-group validator-group\" [ngStyle]=\"{ padding: '15px' }\">\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);
@@ -1154,13 +1345,30 @@ class FieldSettingComponent extends BaseComponent {
         });
         // 🔹 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),
-            'dropdown-props': () => Promise.resolve().then(function () { return dropdownProps_component; }).then(m => m.DropdownPropsComponent),
-            'form-array-props': () => import('./ngx-histaff-alpha-form-array-props.component-jsc0BYaH.mjs').then(m => m.FormArrayPropsComponent),
-            // etc...
-        };
+        this.onParamsChanged = (updated) => this.coreFormDesignService.patchControl(updated, this.$isNested());
+        this.$resolvedType = computed(() => {
+            const ctrl = this.$control();
+            if (!ctrl)
+                return 'UNKNOWN';
+            return this.resolvePropsType(ctrl) ?? 'UNKNOWN';
+        });
+        this.$props = computed(() => {
+            const ctrl = this.$control();
+            if (!ctrl)
+                return null;
+            return {
+                control: ctrl,
+                onChange: this.onParamsChanged
+            };
+        });
+    }
+    resolvePropsType(control) {
+        console.log("resolvePropsType", control);
+        if (!control)
+            return null;
+        const type = control.controlType?.toUpperCase();
+        console.log("resolvePropsType", type);
+        return FIELD_SETTING_PROPS_REGISTRY[type] ? type : null;
     }
     // 🔹 Optional trigger for downstream side-effects (no longer emits)
     onControlParamsChange() {
@@ -1209,7 +1417,7 @@ class FieldSettingComponent extends BaseComponent {
             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", inputs: { $isNested: { classPropertyName: "$isNested", publicName: "$isNested", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"field-setting-container\">\r\n\r\n  @if (!!$control()) {\r\n  <div class=\"panel-caption-header\">\r\n    <div class=\"panel-caption\">\r\n      Editing: {{ (!!$control() && $control()!.type !== 'calculated') ? $control()?.controlType + ' - ' : '' }}{{ $control()?.field ||\r\n      'Unnamed' }}\r\n    </div>\r\n    @if (!$isNested()) {\r\n      <div class=\"close-wrapper pointer\" (click)=\"closeFieldSettingPanel()\">\r\n        <i class=\"feather-x\"></i>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n  <div class=\"field-setting-content\">\r\n\r\n\r\n    @if (!!$control() && $control()!.type === 'calculated') {\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 [isNested]=\"$isNested()\"></mandatory-props>\r\n\r\n    <div class=\"group-title calculated\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-lock\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Calculated Rule<i class=\"feather-help-circle\" [htmlTooltip]=\"aboutCalculatedField\"\r\n          [maxWidthUnset]=\"true\"></i></div>\r\n    </div>\r\n    <calculated-props [isNested]=\"$isNested()\"></calculated-props>\r\n\r\n\r\n    } @else {\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 [isNested]=\"$isNested()\"></mandatory-props>\r\n\r\n    <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n    @if (!!$control() && $control()!.controlType !== 'FORM_ARRAY') {\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 [isNested]=\"$isNested()\"></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 [isNested]=\"$isNested()\"></validator-editor>\r\n    }\r\n\r\n    @if (!!$control() && !($control()!.controlType === 'TEXTBOX' && ['string', 'text', 'email'].includes(($control()!.type ||\r\n    '').toLowerCase()))) {\r\n\r\n    <div class=\"group-title\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-check-square\"></i>\r\n      </div>\r\n      <div class=\"group-name\">{{ getFriendlyControlLabel($control()) }} Settings</div>\r\n    </div>\r\n\r\n    @if ($isNested()) {\r\n    <props-host [loadComponent]=\"componentLoaderMap[coreFormDesignService.$nestedCurrentPropsComponent()]\"\r\n      [isNested]=\"true\"\r\n      [props]=\"{ control: $control(), controlChange: onControlParamsChange.bind(this) }\">\r\n    </props-host>\r\n    } @else {\r\n    <props-host [loadComponent]=\"componentLoaderMap[coreFormDesignService.$currentPropsComponent()]\"\r\n      [isNested]=\"false\"\r\n      [props]=\"{ control: $control(), controlChange: onControlParamsChange.bind(this) }\">\r\n    </props-host>\r\n    }\r\n\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n\r\n\r\n</div>\r\n\r\n<ng-template #aboutCalculatedField>\r\n\r\n  <div class=\"calculated-field-rule\" style=\"padding: 1rem; border-radius: 8px; background: #000; width: 800px;\">\r\n    <h4 style=\"margin-top: 0; color: #fff;\">Calculated Field Rule</h4>\r\n    <p><strong>Calculated fields</strong> are invisible boolean fields evaluated based on form inputs and logic. They\r\n      help drive dynamic workflow behavior, such as conditional routing or validation triggers.</p>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Key Properties</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li><strong>script:</strong> Expression to evaluate (e.g.,\r\n        <code>leaveDays &gt; 3 &amp;&amp; status == 'Approved'</code>)</li>\r\n      <li><strong>evaluationMode:</strong> <code>\"in-memory\"</code> or <code>\"sql-query\"</code></li>\r\n      <li><strong>dependsOn[]:</strong> List of field names the script depends on</li>\r\n      <li><strong>filterMode:</strong> <code>\"HardBlock\"</code> or <code>\"SoftWarn\"</code></li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Evaluation Modes</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li>\r\n        <strong>in-memory:</strong> Uses <code>DynamicExpresso</code> to evaluate C#-like logic at runtime<br />\r\n        <small>Example: <code>leaveType == \"ANNUAL\" &amp;&amp; leaveDays &lt; 5</code></small>\r\n      </li>\r\n      <li>\r\n        <strong>sql-query:</strong> Runs backend SQL to evaluate conditions via\r\n        <code>SELECT CASE WHEN ... THEN 1 ELSE 0 END</code><br />\r\n        <small>Example:\r\n          <code>SELECT CASE WHEN QUOTA &gt; 0 THEN 1 ELSE 0 END FROM LEAVE_QUOTA WHERE EMPLOYEE_ID = {{ '@' }}employeeId</code></small>\r\n      </li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Use Cases</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li>Validate complex logic without showing the field</li>\r\n      <li>Route to a different workflow branch based on hidden logic</li>\r\n      <li>Trigger warning or block submission based on business rules</li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Example</h5>\r\n    <pre style=\"color: #eee; padding: 0.5rem 1rem; border-radius: 4px; overflow-x: auto;\">\r\n    {{ '{' }}\r\n      \"script\": \"leaveDays > 3 && status == 'APPROVED'\",\r\n      \"evaluationMode\": \"in-memory\",\r\n      \"dependsOn\": [\"leaveDays\", \"status\"],\r\n      \"filterMode\": \"HardBlock\"\r\n    {{ '}' }}\r\n  </pre>\r\n  </div>\r\n\r\n\r\n</ng-template>", styles: [".field-setting-container{max-height:100%;overflow-x:hidden;overflow-y:auto}.field-setting-container .field-setting-content{padding:15px}.field-setting-container .panel-caption-header{display:flex;align-items:center;justify-content:space-between;padding:15px;height:60px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;color:#1f2937}.field-setting-container .panel-caption-header .panel-caption{flex-grow:1}.field-setting-container .panel-caption-header .close-wrapper{display:flex;align-items:center;justify-content:center;background-color:#f1f5f9;width:32px;height:32px;border-radius:50%;cursor:pointer;transition:background-color .2s}.field-setting-container .panel-caption-header .close-wrapper:hover{background-color:#e2e8f0}.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;height:35px;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}.field-setting-container .group-title .group-name .feather-help-circle{display:inline-block;margin-left:8px}.field-setting-container .calculated-field-rule{font-family:system-ui,sans-serif;border:1px solid #ccc;padding:1rem;border-radius:8px}.field-setting-container .calculated-field-rule h2{margin-top:0;color:#2b3e50}.field-setting-container .calculated-field-rule pre{background:#eee;padding:.5rem 1rem;border-radius:4px;overflow-x:auto}\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", "isNested", "props"] }, { kind: "component", type: CalculatedPropsComponent, selector: "calculated-props" }, { kind: "directive", type: HtmlTooltipDirective, selector: "[htmlTooltip]", inputs: ["htmlTooltip", "tooltipContext", "maxWidthUnset", "backgroundColor", "hold$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: FieldSettingComponent, isStandalone: true, selector: "field-setting", inputs: { $isNested: { classPropertyName: "$isNested", publicName: "$isNested", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"field-setting-container\">\r\n\r\n  @if (!!$control()) {\r\n  <div class=\"panel-caption-header\">\r\n    <div class=\"panel-caption\">\r\n      Editing: {{ (!!$control() && $control()!.type !== 'calculated') ? $control()?.controlType + ' - ' : '' }}{{ $control()?.field ||\r\n      'Unnamed' }}\r\n    </div>\r\n    @if (!$isNested()) {\r\n      <div class=\"close-wrapper pointer\" (click)=\"closeFieldSettingPanel()\">\r\n        <i class=\"feather-x\"></i>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n  <div class=\"field-setting-content\">\r\n\r\n\r\n    @if (!!$control() && $control()!.type === 'calculated') {\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 [isNested]=\"$isNested()\"></mandatory-props>\r\n\r\n    <div class=\"group-title calculated\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-lock\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Calculated Rule<i class=\"feather-help-circle\" [htmlTooltip]=\"aboutCalculatedField\"\r\n          [maxWidthUnset]=\"true\"></i></div>\r\n    </div>\r\n    <calculated-props [isNested]=\"$isNested()\"></calculated-props>\r\n\r\n\r\n    } @else {\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 [isNested]=\"$isNested()\"></mandatory-props>\r\n\r\n    <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n    @if (!!$control() && $control()!.controlType !== 'FORM_ARRAY') {\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 [isNested]=\"$isNested()\"></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 [isNested]=\"$isNested()\"></validator-editor>\r\n    }\r\n\r\n    @if (!!$control() && !($control()!.controlType === 'TEXTBOX' && ['string', 'text', 'email'].includes(($control()!.type ||\r\n    '').toLowerCase()))) {\r\n\r\n    <div class=\"group-title\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-check-square\"></i>\r\n      </div>\r\n      <div class=\"group-name\">{{ getFriendlyControlLabel($control()) }} Settings</div>\r\n    </div>\r\n\r\n    <props-host \r\n      [type]=\"$resolvedType()\"\r\n      [props]=\"$props()\"\r\n      [isNested]=\"$isNested()\"\r\n    ></props-host>\r\n\r\n\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n\r\n\r\n</div>\r\n\r\n<ng-template #aboutCalculatedField>\r\n\r\n  <div class=\"calculated-field-rule\" style=\"padding: 1rem; border-radius: 8px; background: #000; width: 800px;\">\r\n    <h4 style=\"margin-top: 0; color: #fff;\">Calculated Field Rule</h4>\r\n    <p><strong>Calculated fields</strong> are invisible boolean fields evaluated based on form inputs and logic. They\r\n      help drive dynamic workflow behavior, such as conditional routing or validation triggers.</p>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Key Properties</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li><strong>script:</strong> Expression to evaluate (e.g.,\r\n        <code>leaveDays &gt; 3 &amp;&amp; status == 'Approved'</code>)</li>\r\n      <li><strong>evaluationMode:</strong> <code>\"in-memory\"</code> or <code>\"sql-query\"</code></li>\r\n      <li><strong>dependsOn[]:</strong> List of field names the script depends on</li>\r\n      <li><strong>filterMode:</strong> <code>\"HardBlock\"</code> or <code>\"SoftWarn\"</code></li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Evaluation Modes</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li>\r\n        <strong>in-memory:</strong> Uses <code>DynamicExpresso</code> to evaluate C#-like logic at runtime<br />\r\n        <small>Example: <code>leaveType == \"ANNUAL\" &amp;&amp; leaveDays &lt; 5</code></small>\r\n      </li>\r\n      <li>\r\n        <strong>sql-query:</strong> Runs backend SQL to evaluate conditions via\r\n        <code>SELECT CASE WHEN ... THEN 1 ELSE 0 END</code><br />\r\n        <small>Example:\r\n          <code>SELECT CASE WHEN QUOTA &gt; 0 THEN 1 ELSE 0 END FROM LEAVE_QUOTA WHERE EMPLOYEE_ID = {{ '@' }}employeeId</code></small>\r\n      </li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Use Cases</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li>Validate complex logic without showing the field</li>\r\n      <li>Route to a different workflow branch based on hidden logic</li>\r\n      <li>Trigger warning or block submission based on business rules</li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Example</h5>\r\n    <pre style=\"color: #eee; padding: 0.5rem 1rem; border-radius: 4px; overflow-x: auto;\">\r\n    {{ '{' }}\r\n      \"script\": \"leaveDays > 3 && status == 'APPROVED'\",\r\n      \"evaluationMode\": \"in-memory\",\r\n      \"dependsOn\": [\"leaveDays\", \"status\"],\r\n      \"filterMode\": \"HardBlock\"\r\n    {{ '}' }}\r\n  </pre>\r\n  </div>\r\n\r\n\r\n</ng-template>", styles: [".field-setting-container{max-height:100%;overflow-x:hidden;overflow-y:auto}.field-setting-container .field-setting-content{padding:15px}.field-setting-container .panel-caption-header{display:flex;align-items:center;justify-content:space-between;padding:15px;height:60px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;color:#1f2937}.field-setting-container .panel-caption-header .panel-caption{flex-grow:1}.field-setting-container .panel-caption-header .close-wrapper{display:flex;align-items:center;justify-content:center;background-color:#f1f5f9;width:32px;height:32px;border-radius:50%;cursor:pointer;transition:background-color .2s}.field-setting-container .panel-caption-header .close-wrapper:hover{background-color:#e2e8f0}.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;height:35px;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}.field-setting-container .group-title .group-name .feather-help-circle{display:inline-block;margin-left:8px}.field-setting-container .calculated-field-rule{font-family:system-ui,sans-serif;border:1px solid #ccc;padding:1rem;border-radius:8px}.field-setting-container .calculated-field-rule h2{margin-top:0;color:#2b3e50}.field-setting-container .calculated-field-rule pre{background:#eee;padding:.5rem 1rem;border-radius:4px;overflow-x:auto}\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: ["isNested", "type", "props"] }, { kind: "component", type: CalculatedPropsComponent, selector: "calculated-props" }, { kind: "directive", type: HtmlTooltipDirective, selector: "[htmlTooltip]", inputs: ["htmlTooltip", "tooltipContext", "maxWidthUnset", "backgroundColor", "hold$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FieldSettingComponent, decorators: [{
             type: Component,
@@ -1233,8 +1441,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         TextareaPropsComponent,
                         UploaderPropsComponent,
                         CalculatedPropsComponent,
-                        HtmlTooltipDirective
-                    ], template: "<div class=\"field-setting-container\">\r\n\r\n  @if (!!$control()) {\r\n  <div class=\"panel-caption-header\">\r\n    <div class=\"panel-caption\">\r\n      Editing: {{ (!!$control() && $control()!.type !== 'calculated') ? $control()?.controlType + ' - ' : '' }}{{ $control()?.field ||\r\n      'Unnamed' }}\r\n    </div>\r\n    @if (!$isNested()) {\r\n      <div class=\"close-wrapper pointer\" (click)=\"closeFieldSettingPanel()\">\r\n        <i class=\"feather-x\"></i>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n  <div class=\"field-setting-content\">\r\n\r\n\r\n    @if (!!$control() && $control()!.type === 'calculated') {\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 [isNested]=\"$isNested()\"></mandatory-props>\r\n\r\n    <div class=\"group-title calculated\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-lock\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Calculated Rule<i class=\"feather-help-circle\" [htmlTooltip]=\"aboutCalculatedField\"\r\n          [maxWidthUnset]=\"true\"></i></div>\r\n    </div>\r\n    <calculated-props [isNested]=\"$isNested()\"></calculated-props>\r\n\r\n\r\n    } @else {\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 [isNested]=\"$isNested()\"></mandatory-props>\r\n\r\n    <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n    @if (!!$control() && $control()!.controlType !== 'FORM_ARRAY') {\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 [isNested]=\"$isNested()\"></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 [isNested]=\"$isNested()\"></validator-editor>\r\n    }\r\n\r\n    @if (!!$control() && !($control()!.controlType === 'TEXTBOX' && ['string', 'text', 'email'].includes(($control()!.type ||\r\n    '').toLowerCase()))) {\r\n\r\n    <div class=\"group-title\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-check-square\"></i>\r\n      </div>\r\n      <div class=\"group-name\">{{ getFriendlyControlLabel($control()) }} Settings</div>\r\n    </div>\r\n\r\n    @if ($isNested()) {\r\n    <props-host [loadComponent]=\"componentLoaderMap[coreFormDesignService.$nestedCurrentPropsComponent()]\"\r\n      [isNested]=\"true\"\r\n      [props]=\"{ control: $control(), controlChange: onControlParamsChange.bind(this) }\">\r\n    </props-host>\r\n    } @else {\r\n    <props-host [loadComponent]=\"componentLoaderMap[coreFormDesignService.$currentPropsComponent()]\"\r\n      [isNested]=\"false\"\r\n      [props]=\"{ control: $control(), controlChange: onControlParamsChange.bind(this) }\">\r\n    </props-host>\r\n    }\r\n\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n\r\n\r\n</div>\r\n\r\n<ng-template #aboutCalculatedField>\r\n\r\n  <div class=\"calculated-field-rule\" style=\"padding: 1rem; border-radius: 8px; background: #000; width: 800px;\">\r\n    <h4 style=\"margin-top: 0; color: #fff;\">Calculated Field Rule</h4>\r\n    <p><strong>Calculated fields</strong> are invisible boolean fields evaluated based on form inputs and logic. They\r\n      help drive dynamic workflow behavior, such as conditional routing or validation triggers.</p>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Key Properties</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li><strong>script:</strong> Expression to evaluate (e.g.,\r\n        <code>leaveDays &gt; 3 &amp;&amp; status == 'Approved'</code>)</li>\r\n      <li><strong>evaluationMode:</strong> <code>\"in-memory\"</code> or <code>\"sql-query\"</code></li>\r\n      <li><strong>dependsOn[]:</strong> List of field names the script depends on</li>\r\n      <li><strong>filterMode:</strong> <code>\"HardBlock\"</code> or <code>\"SoftWarn\"</code></li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Evaluation Modes</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li>\r\n        <strong>in-memory:</strong> Uses <code>DynamicExpresso</code> to evaluate C#-like logic at runtime<br />\r\n        <small>Example: <code>leaveType == \"ANNUAL\" &amp;&amp; leaveDays &lt; 5</code></small>\r\n      </li>\r\n      <li>\r\n        <strong>sql-query:</strong> Runs backend SQL to evaluate conditions via\r\n        <code>SELECT CASE WHEN ... THEN 1 ELSE 0 END</code><br />\r\n        <small>Example:\r\n          <code>SELECT CASE WHEN QUOTA &gt; 0 THEN 1 ELSE 0 END FROM LEAVE_QUOTA WHERE EMPLOYEE_ID = {{ '@' }}employeeId</code></small>\r\n      </li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Use Cases</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li>Validate complex logic without showing the field</li>\r\n      <li>Route to a different workflow branch based on hidden logic</li>\r\n      <li>Trigger warning or block submission based on business rules</li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Example</h5>\r\n    <pre style=\"color: #eee; padding: 0.5rem 1rem; border-radius: 4px; overflow-x: auto;\">\r\n    {{ '{' }}\r\n      \"script\": \"leaveDays > 3 && status == 'APPROVED'\",\r\n      \"evaluationMode\": \"in-memory\",\r\n      \"dependsOn\": [\"leaveDays\", \"status\"],\r\n      \"filterMode\": \"HardBlock\"\r\n    {{ '}' }}\r\n  </pre>\r\n  </div>\r\n\r\n\r\n</ng-template>", styles: [".field-setting-container{max-height:100%;overflow-x:hidden;overflow-y:auto}.field-setting-container .field-setting-content{padding:15px}.field-setting-container .panel-caption-header{display:flex;align-items:center;justify-content:space-between;padding:15px;height:60px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;color:#1f2937}.field-setting-container .panel-caption-header .panel-caption{flex-grow:1}.field-setting-container .panel-caption-header .close-wrapper{display:flex;align-items:center;justify-content:center;background-color:#f1f5f9;width:32px;height:32px;border-radius:50%;cursor:pointer;transition:background-color .2s}.field-setting-container .panel-caption-header .close-wrapper:hover{background-color:#e2e8f0}.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;height:35px;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}.field-setting-container .group-title .group-name .feather-help-circle{display:inline-block;margin-left:8px}.field-setting-container .calculated-field-rule{font-family:system-ui,sans-serif;border:1px solid #ccc;padding:1rem;border-radius:8px}.field-setting-container .calculated-field-rule h2{margin-top:0;color:#2b3e50}.field-setting-container .calculated-field-rule pre{background:#eee;padding:.5rem 1rem;border-radius:4px;overflow-x:auto}\n"] }]
+                        HtmlTooltipDirective,
+                        SeekerPropsComponent
+                    ], template: "<div class=\"field-setting-container\">\r\n\r\n  @if (!!$control()) {\r\n  <div class=\"panel-caption-header\">\r\n    <div class=\"panel-caption\">\r\n      Editing: {{ (!!$control() && $control()!.type !== 'calculated') ? $control()?.controlType + ' - ' : '' }}{{ $control()?.field ||\r\n      'Unnamed' }}\r\n    </div>\r\n    @if (!$isNested()) {\r\n      <div class=\"close-wrapper pointer\" (click)=\"closeFieldSettingPanel()\">\r\n        <i class=\"feather-x\"></i>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n\r\n  <div class=\"field-setting-content\">\r\n\r\n\r\n    @if (!!$control() && $control()!.type === 'calculated') {\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 [isNested]=\"$isNested()\"></mandatory-props>\r\n\r\n    <div class=\"group-title calculated\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-lock\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Calculated Rule<i class=\"feather-help-circle\" [htmlTooltip]=\"aboutCalculatedField\"\r\n          [maxWidthUnset]=\"true\"></i></div>\r\n    </div>\r\n    <calculated-props [isNested]=\"$isNested()\"></calculated-props>\r\n\r\n\r\n    } @else {\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 [isNested]=\"$isNested()\"></mandatory-props>\r\n\r\n    <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n    @if (!!$control() && $control()!.controlType !== 'FORM_ARRAY') {\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 [isNested]=\"$isNested()\"></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 [isNested]=\"$isNested()\"></validator-editor>\r\n    }\r\n\r\n    @if (!!$control() && !($control()!.controlType === 'TEXTBOX' && ['string', 'text', 'email'].includes(($control()!.type ||\r\n    '').toLowerCase()))) {\r\n\r\n    <div class=\"group-title\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-check-square\"></i>\r\n      </div>\r\n      <div class=\"group-name\">{{ getFriendlyControlLabel($control()) }} Settings</div>\r\n    </div>\r\n\r\n    <props-host \r\n      [type]=\"$resolvedType()\"\r\n      [props]=\"$props()\"\r\n      [isNested]=\"$isNested()\"\r\n    ></props-host>\r\n\r\n\r\n    }\r\n    }\r\n  </div>\r\n  }\r\n\r\n\r\n\r\n</div>\r\n\r\n<ng-template #aboutCalculatedField>\r\n\r\n  <div class=\"calculated-field-rule\" style=\"padding: 1rem; border-radius: 8px; background: #000; width: 800px;\">\r\n    <h4 style=\"margin-top: 0; color: #fff;\">Calculated Field Rule</h4>\r\n    <p><strong>Calculated fields</strong> are invisible boolean fields evaluated based on form inputs and logic. They\r\n      help drive dynamic workflow behavior, such as conditional routing or validation triggers.</p>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Key Properties</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li><strong>script:</strong> Expression to evaluate (e.g.,\r\n        <code>leaveDays &gt; 3 &amp;&amp; status == 'Approved'</code>)</li>\r\n      <li><strong>evaluationMode:</strong> <code>\"in-memory\"</code> or <code>\"sql-query\"</code></li>\r\n      <li><strong>dependsOn[]:</strong> List of field names the script depends on</li>\r\n      <li><strong>filterMode:</strong> <code>\"HardBlock\"</code> or <code>\"SoftWarn\"</code></li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Evaluation Modes</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li>\r\n        <strong>in-memory:</strong> Uses <code>DynamicExpresso</code> to evaluate C#-like logic at runtime<br />\r\n        <small>Example: <code>leaveType == \"ANNUAL\" &amp;&amp; leaveDays &lt; 5</code></small>\r\n      </li>\r\n      <li>\r\n        <strong>sql-query:</strong> Runs backend SQL to evaluate conditions via\r\n        <code>SELECT CASE WHEN ... THEN 1 ELSE 0 END</code><br />\r\n        <small>Example:\r\n          <code>SELECT CASE WHEN QUOTA &gt; 0 THEN 1 ELSE 0 END FROM LEAVE_QUOTA WHERE EMPLOYEE_ID = {{ '@' }}employeeId</code></small>\r\n      </li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Use Cases</h5>\r\n    <ul style=\"margin-top: 0;\">\r\n      <li>Validate complex logic without showing the field</li>\r\n      <li>Route to a different workflow branch based on hidden logic</li>\r\n      <li>Trigger warning or block submission based on business rules</li>\r\n    </ul>\r\n\r\n    <h5 style=\"margin-bottom: 0.5rem; color: #fff;\">Example</h5>\r\n    <pre style=\"color: #eee; padding: 0.5rem 1rem; border-radius: 4px; overflow-x: auto;\">\r\n    {{ '{' }}\r\n      \"script\": \"leaveDays > 3 && status == 'APPROVED'\",\r\n      \"evaluationMode\": \"in-memory\",\r\n      \"dependsOn\": [\"leaveDays\", \"status\"],\r\n      \"filterMode\": \"HardBlock\"\r\n    {{ '}' }}\r\n  </pre>\r\n  </div>\r\n\r\n\r\n</ng-template>", styles: [".field-setting-container{max-height:100%;overflow-x:hidden;overflow-y:auto}.field-setting-container .field-setting-content{padding:15px}.field-setting-container .panel-caption-header{display:flex;align-items:center;justify-content:space-between;padding:15px;height:60px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;color:#1f2937}.field-setting-container .panel-caption-header .panel-caption{flex-grow:1}.field-setting-container .panel-caption-header .close-wrapper{display:flex;align-items:center;justify-content:center;background-color:#f1f5f9;width:32px;height:32px;border-radius:50%;cursor:pointer;transition:background-color .2s}.field-setting-container .panel-caption-header .close-wrapper:hover{background-color:#e2e8f0}.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;height:35px;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}.field-setting-container .group-title .group-name .feather-help-circle{display:inline-block;margin-left:8px}.field-setting-container .calculated-field-rule{font-family:system-ui,sans-serif;border:1px solid #ccc;padding:1rem;border-radius:8px}.field-setting-container .calculated-field-rule h2{margin-top:0;color:#2b3e50}.field-setting-container .calculated-field-rule pre{background:#eee;padding:.5rem 1rem;border-radius:4px;overflow-x:auto}\n"] }]
         }] });
 
 var EnumLeftPanelMode;
@@ -3263,10 +3472,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     ], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n        \r\n    <ng-template #formMetadata>\r\n        <form-metadata></form-metadata>\r\n    </ng-template>\r\n\r\n    <!-- @if (coreFormDesignService.$showFormArrayDesign()) { -->\r\n    <div class=\"form-array-layout-editor-wrapper\" [class.open]=\"coreFormDesignService.$showFormArrayDesign()\">\r\n        <core-form-array-layout-editor />\r\n    </div>\r\n    <!-- } -->\r\n\r\n    @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n        <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n            [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n        >\r\n            <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n        </aside>\r\n    }\r\n\r\n    <div \r\n        class=\"field-setting-panel\" \r\n        [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" \r\n        [class.calculated-type]=\"coreFormDesignService.$selectedCell()?.control?.type==='calculated'\"\r\n        [ngStyle]=\"{ zIndex: $zIndex() }\"\r\n        #settingPanel\r\n    >\r\n        @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n            <field-setting [$isNested]=\"false\"></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, false)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT' || control.controlType === 'GRIDBUFFER'\">\r\n                            @if (control.controlType === 'GRIDBUFFER') {\r\n                                <div class=\"grid-buffer-wrapper\">\r\n                                    <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                                </div>\r\n                            } @else {\r\n                                <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                            }\r\n                        </li>\r\n                        <div class=\"space\"></div>\r\n                        }\r\n                    </ul>\r\n                    }\r\n            }\r\n            @case (enumLeftPanelMode.Json) {\r\n                <button type=\"button\" class=\"btn btn-secondary\" (click)=\"switchJson()\">{{ $jsonMode() }}</button>\r\n                @if ($jsonMode()==='selectedField') {\r\n                    <pre class=\"json-preview\">{{ coreFormDesignService.$controlJson() }}</pre>\r\n                } @else {\r\n                    <pre class=\"json-preview\">{{ coreFormDesignService.$saveLiveJson() }}</pre>\r\n                }\r\n                \r\n            }\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"form-design-right\">\r\n        <core-form-design-monitor [$mode]=\"'main'\"></core-form-design-monitor>\r\n        <div class=\"h10\"></div>\r\n        <core-form-group-editor [$idAsInput]=\"true\" />\r\n    </div>\r\n    @if ($loading()) {\r\n        <core-toast-loading></core-toast-loading>\r\n    }\r\n\r\n    <ng-template #calculatedFieldsTooltip>\r\n        <div style=\"max-width: 280px;\">\r\n            <strong>Calculated Fields</strong><br />\r\n            <p></p>\r\n            These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n            - They are computed automatically during workflow execution.<br />\r\n            - Each field depends on one or more standard input fields.<br />\r\n            - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n            In both cases, the result is a <code>0</code> or <code>1</code>, representing <strong>false</strong> or <strong>true</strong>.<br /><br />\r\n            These results can be used to influence workflow logic, rule trees, or approval paths.\r\n        </div>\r\n    </ng-template>\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 .form-array-layout-editor-wrapper{position:fixed;top:10vh;right:-1420px;width:1420px;height:80vh;z-index:99;transition:right .25s ease-out;background-color:#ffebcd;overflow:auto;padding:15px;box-shadow:.4rem 0 2rem #0000002e}.core-form-design-container .form-array-layout-editor-wrapper.open{right:calc((100% - 1420px)/2)}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-design-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-design-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.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.calculated-type{width:500px;right:-500px}.core-form-design-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.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;overflow-y:hidden}.core-form-design-container .form-design-left .category-name{color:#fff}.core-form-design-container .form-design-left .grid-buffer-wrapper{background-color:#fff;padding:15px}.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;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 - 205px)}.core-form-design-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .h10{height:10px}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder.calculated{color:#ff4500}.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.accordion{margin-bottom:0;cursor:pointer}.core-form-container>form .section.accordion .section-header-label{border:1px solid var(--acc-border-color);background-color:var(--acc-back-ground-color);color:var(--acc-font-color);height:50px;display:flex;align-items:center;justify-content:flex-start;position:relative}.core-form-container>form .section.accordion .section-header-label .section-caption{padding-left:0}.core-form-container>form .section.accordion .section-header-label .rotate-icon{transition:transform .3s ease;width:50px;height:50px;display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:0}.core-form-container>form .section.accordion .section-header-label .rotate-icon.rotated90{transform:rotate(90deg)}.core-form-container>form .section.accordion .section-header-label .rotate-icon i{font-size:24px}.core-form-container>form .section.accordion .section-body{transition:all .3s ease;opacity:1}.core-form-container>form .section.accordion:not(.open) .section-body{overflow:hidden;opacity:0}.core-form-container>form .section.accordion .section-img-wrapper{height:50px;width:50px;display:flex;align-items:center;justify-content:center}.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;width:calc(100% - 24px)}.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-img-wrapper .section-img-fixed{position:absolute;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:#848484;float:left}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container>form .section .section-header-label .section-caption.has-icon-svg{font-weight:400;color:currentcolor}.core-form-container>form .section .section-header-label .with-icon-svg{padding-left:28px!important}.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;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}.core-form-container .section-body-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:min-content;gap:1rem}.core-form-container .section-body-grid .field-col{min-width:0}.core-form-container .core-form-body{padding-bottom:var(--footer-height, 95px)}.core-form-container .core-form-body .section:last-child{margin-bottom:var(--footer-height, 95px)}.core-form-container .core-form-footer{--footer-height: 95px;height:var(--footer-height);position:sticky;bottom:0;background:#fff;border-top:1px solid #ddd;padding:12px 18px;display:flex;justify-content:flex-end;z-index:10}.core-form-container .core-form-footer .buttonGroupCustom{gap:8px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"] }]
         }], ctorParameters: () => [{ type: MultiLanguageService }] });
 
-var coreFormDesign_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    CoreFormDesignComponent: CoreFormDesignComponent
-});
-
-export { BasePropsComponent as B, CoreFormDesignComponent as C, coreFormDesign_component as c };
-//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-CyFCxOF0.mjs.map
+export { CoreFormDesignComponent };
+//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-BZvtwXkM.mjs.map