ngx-histaff-alpha 6.0.7 → 6.0.9

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

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, Component, signal, effect, HostListener, ChangeDetectionStrategy, Injectable, input, computed, viewChild, ViewContainerRef, Input, EventEmitter, Output, Renderer2, isDevMode } 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 { trigger, state, transition, style, animate } from '@angular/animations';
-import { s as CoreFormDesignService, h as CoreWorkflowService, c as BaseEditComponent, n as AlertService, Q as AppConfigService, R as EnumCorePageEditMode, U as EnumCoreButtonVNSCode, V as READONLY_WORKFLOW_FIELDS, W as noneAutoClosedAlertOptions, D as DialogService, M as MultiLanguageService, f as CorePageHeaderComponent, X as CoreFormComponent, Y as CoreButtonGroupVnsComponent, T as TranslatePipe, d as EnumFormBaseContolType, B as BaseComponent, E as EnumCoreTablePipeType, b as CoreCheckboxComponent, v as CoreDropdownComponent, k as TooltipDirective, K as GptService, q as alertOptions, J as CoreRadioGroupComponent, Z as HtmlTooltipDirective, i as EnumCoreFormControlSeekerSourceType, _ as CoreControlNoFormArrayComponent, $ as EnumFormDesignMode, u as DomService, P as JsonService, L as ApplicationHelpService, a0 as CoreControlComponent, a1 as JsonSafePipe, o as TableCellPipe, N as HotKeysDirective, w as CoreChecklistComponent, y as CoreFormControlSeekerComponent, a2 as CoreAttachmentComponent, x as CoreDatePickerComponent, a3 as CoreMonthSelectorComponent, z as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-BUPBaatN.mjs';
+import { s as CoreFormDesignService, h as CoreWorkflowService, c as BaseEditComponent, n as AlertService, Q as AppConfigService, R as EnumCorePageEditMode, U as EnumCoreButtonVNSCode, V as READONLY_WORKFLOW_FIELDS, W as noneAutoClosedAlertOptions, D as DialogService, M as MultiLanguageService, f as CorePageHeaderComponent, X as CoreFormComponent, Y as CoreButtonGroupVnsComponent, T as TranslatePipe, d as EnumFormBaseContolType, B as BaseComponent, E as EnumCoreTablePipeType, b as CoreCheckboxComponent, v as CoreDropdownComponent, k as TooltipDirective, K as GptService, q as alertOptions, J as CoreRadioGroupComponent, Z as HtmlTooltipDirective, i as EnumCoreFormControlSeekerSourceType, _ as CoreControlNoFormArrayComponent, $ as EnumFormDesignMode, u as DomService, P as JsonService, L as ApplicationHelpService, a0 as CoreControlComponent, a1 as JsonSafePipe, o as TableCellPipe, N as HotKeysDirective, w as CoreChecklistComponent, y as CoreFormControlSeekerComponent, a2 as CoreAttachmentComponent, x as CoreDatePickerComponent, a3 as CoreMonthSelectorComponent, z as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-CpSSGsow.mjs';
 import * as i1 from '@angular/forms';
-import { FormsModule, FormGroup, FormControl, FormArray, Validators, ReactiveFormsModule } 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 { CoreStickerCollectionComponent } from './ngx-histaff-alpha-core-sticker-collection.component-BorN_vHK.mjs';
-import { D as DbService, C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-B5CqiVG5.mjs';
+import { CoreStickerCollectionComponent } from './ngx-histaff-alpha-core-sticker-collection.component-Cq5LJooJ.mjs';
+import { D as DbService, C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-vICzKcDl.mjs';
 import { EnumTranslateKey } from 'alpha-global-constants';
-import { L as LiveFormComponent } from './ngx-histaff-alpha-live-form.component-Cy6Gg03T.mjs';
+import { L as LiveFormComponent } from './ngx-histaff-alpha-live-form.component-D-IjrwYr.mjs';
 
 const slideFromTopFadeIn = trigger('slideFromTopFadeIn', [
     state('in', style({ opacity: 1, transform: 'translateY(0)' })),
@@ -311,10 +311,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 class BasePropsComponent extends BaseComponent {
     constructor() {
         super(...arguments);
-        this.$isNested = input(false);
+        this.isNested = false;
         this.coreFormDesignService = inject(CoreFormDesignService);
         this.$selectedCell = computed(() => {
-            if (this.$isNested()) {
+            if (this.isNested) {
                 return this.coreFormDesignService.$nestedSelectedCell();
             }
             else {
@@ -322,57 +322,37 @@ class BasePropsComponent extends BaseComponent {
             }
         });
         this.$formContext = computed(() => {
-            if (this.$isNested()) {
+            if (this.isNested) {
                 return this.coreFormDesignService.$nestedFormContext();
             }
             else {
                 return this.coreFormDesignService.$formContext();
             }
         });
-        this.form = this.$isNested() ? this.coreFormDesignService.nestedFormDesign : this.coreFormDesignService.formDesign;
+        this.form = this.isNested ? this.coreFormDesignService.nestedFormDesign : this.coreFormDesignService.formDesign;
         this.patchControl = this.coreFormDesignService.patchControl.bind(this.coreFormDesignService);
         this.normalize = this.coreFormDesignService.normalize.bind(this.coreFormDesignService);
         this.cdr = inject(ChangeDetectorRef);
-        this.setControlProp = this.coreFormDesignService.setControlProp.bind(this.coreFormDesignService);
-        /*
-        $control = computed<IFormBaseControl>(() => {
-          console.log("🔴🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢 BasePropsComponent.$control")
-          let _cell: IFormDesignCell | null;
-          if (this.$isNested()) {
-            _cell = this.coreFormDesignService.$nestedSelectedCell();
-            if (!_cell?.control) throw new Error('No control selected!');
-            if (_cell?.runtimeId === this.nestedSelectedCellRuntimeId) {
-              return this.nestedControl;
-            } else {
-              this.nestedSelectedCellRuntimeId = _cell.runtimeId;
-              this.nestedControl = this.normalize(_cell.control);
-              return this.nestedControl;
-            }
-          } else {
-            _cell = this.coreFormDesignService.$selectedCell();
-            if (!_cell?.control) throw new Error('No control selected!');
-            if (_cell?.runtimeId === this.selectedCellRuntimeId) {
-              return this.control;
-            } else {
-              this.selectedCellRuntimeId = _cell.runtimeId;
-              this.control = this.normalize(_cell.control);
-              return this.control;
-            }
-          }
-        });
-        */
+        this.as = inject(AlertService);
         this.$control = computed(() => {
-            const isNested = this.$isNested();
+            const isNested = this.isNested;
             let control = isNested ? this.coreFormDesignService.$nestedControl() : this.coreFormDesignService.$control();
             if (!control) {
                 control = this.coreFormDesignService.normalize({});
             }
-            console.log("🔴 BasePropsComponent computed $control value", control);
+            //console.log("🔴 BasePropsComponent computed $control value", control);
             return control;
         });
     }
+    setControlProp(key, value) {
+        const nestedValue = this.isNested;
+        // if (isDevMode()) {
+        //   this.as.error(`[BasePropsComponent] forwarding ${key}, nested=${nestedValue} from ${this.constructor.name}`, noneAutoClosedAlertOptions)
+        // }
+        this.coreFormDesignService.setControlProp(key, value, nestedValue);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BasePropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.5", type: BasePropsComponent, isStandalone: true, selector: "base-props", inputs: { $isNested: { classPropertyName: "$isNested", publicName: "$isNested", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: './base-props.component.html', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: BasePropsComponent, isStandalone: true, selector: "base-props", inputs: { isNested: "isNested" }, usesInheritance: true, ngImport: i0, template: './base-props.component.html', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BasePropsComponent, decorators: [{
             type: Component,
@@ -381,7 +361,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: './base-props.component.html'
                 }]
-        }] });
+        }], propDecorators: { isNested: [{
+                type: Input
+            }] } });
 
 class MandatoryPropsComponent extends BasePropsComponent {
     constructor() {
@@ -389,7 +371,7 @@ class MandatoryPropsComponent extends BasePropsComponent {
         this.$fieldInputRef = viewChild('fieldInput');
         this.afs = inject(CoreFormDesignService);
         this.$isNormalField = computed(() => {
-            if (this.$isNested()) {
+            if (this.isNested) {
                 return this.afs.$nestedControl()?.type !== 'calculated';
             }
             else {
@@ -405,7 +387,7 @@ class MandatoryPropsComponent extends BasePropsComponent {
         });
     }
     onFieldChange(val) {
-        this.setControlProp('field', val, this.$isNested());
+        this.setControlProp('field', val);
         const expected = this.$typedField();
         const actual = this.$fieldInputRef()?.nativeElement.value;
         if (!!actual && actual !== expected) {
@@ -414,11 +396,11 @@ class MandatoryPropsComponent extends BasePropsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MandatoryPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: MandatoryPropsComponent, isStandalone: true, selector: "mandatory-props", viewQueries: [{ propertyName: "$fieldInputRef", first: true, predicate: ["fieldInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group mandatory-group\" [ngStyle]=\"{ padding: '15px', maxWidth: '352px' }\">\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Field</label>\r\n    <input #fieldInput class=\"form-control\" type=\"text\" \r\n      [ngModel]=\"$typedField()\" \r\n      (ngModelChange)=\"onFieldChange($event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Label</label>\r\n    <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.label\" (ngModelChange)=\"setControlProp('label', $event, $isNested())\" />\r\n  </div>\r\n\r\n  @if ($isNormalField()) {\r\n\r\n    <div class=\"setting-row\">\r\n      <label>Flex Size</label>\r\n      <input class=\"form-control\" type=\"number\" [ngModel]=\"$control()?.flexSize\" (ngModelChange)=\"setControlProp('flexSize', $event, $isNested())\" />\r\n    </div>\r\n\r\n    @if ($control()?.controlType !== 'FORM_ARRAY') {\r\n      <div class=\"setting-row\">\r\n        <label>Default</label>\r\n        <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.value\" (ngModelChange)=\"setControlProp('value', $event, $isNested())\" />\r\n      </div>\r\n    }\r\n  }\r\n\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"], dependencies: [{ kind: "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.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: MandatoryPropsComponent, isStandalone: true, selector: "mandatory-props", viewQueries: [{ propertyName: "$fieldInputRef", first: true, predicate: ["fieldInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group mandatory-group\" [ngStyle]=\"{ padding: '15px', maxWidth: '352px' }\">\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Field</label>\r\n    <input #fieldInput class=\"form-control\" type=\"text\" \r\n      [ngModel]=\"$typedField()\" \r\n      (ngModelChange)=\"onFieldChange($event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Label</label>\r\n    <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.label\" (ngModelChange)=\"setControlProp('label', $event)\" />\r\n  </div>\r\n\r\n  @if ($isNormalField()) {\r\n\r\n    <div class=\"setting-row\">\r\n      <label>Flex Size</label>\r\n      <input class=\"form-control\" type=\"number\" [ngModel]=\"$control()?.flexSize\" (ngModelChange)=\"setControlProp('flexSize', $event)\" />\r\n    </div>\r\n\r\n    @if ($control()?.controlType !== 'FORM_ARRAY') {\r\n      <div class=\"setting-row\">\r\n        <label>Default</label>\r\n        <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.value\" (ngModelChange)=\"setControlProp('value', $event)\" />\r\n      </div>\r\n    }\r\n  }\r\n\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"], dependencies: [{ kind: "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.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: MandatoryPropsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mandatory-props', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, FormsModule], template: "<div class=\"setting-group mandatory-group\" [ngStyle]=\"{ padding: '15px', maxWidth: '352px' }\">\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Field</label>\r\n    <input #fieldInput class=\"form-control\" type=\"text\" \r\n      [ngModel]=\"$typedField()\" \r\n      (ngModelChange)=\"onFieldChange($event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Label</label>\r\n    <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.label\" (ngModelChange)=\"setControlProp('label', $event, $isNested())\" />\r\n  </div>\r\n\r\n  @if ($isNormalField()) {\r\n\r\n    <div class=\"setting-row\">\r\n      <label>Flex Size</label>\r\n      <input class=\"form-control\" type=\"number\" [ngModel]=\"$control()?.flexSize\" (ngModelChange)=\"setControlProp('flexSize', $event, $isNested())\" />\r\n    </div>\r\n\r\n    @if ($control()?.controlType !== 'FORM_ARRAY') {\r\n      <div class=\"setting-row\">\r\n        <label>Default</label>\r\n        <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.value\" (ngModelChange)=\"setControlProp('value', $event, $isNested())\" />\r\n      </div>\r\n    }\r\n  }\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"] }]
+            args: [{ selector: 'mandatory-props', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, FormsModule], template: "<div class=\"setting-group mandatory-group\" [ngStyle]=\"{ padding: '15px', maxWidth: '352px' }\">\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Field</label>\r\n    <input #fieldInput class=\"form-control\" type=\"text\" \r\n      [ngModel]=\"$typedField()\" \r\n      (ngModelChange)=\"onFieldChange($event)\" />\r\n  </div>\r\n\r\n  <div class=\"setting-row\">\r\n    <label>Label</label>\r\n    <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.label\" (ngModelChange)=\"setControlProp('label', $event)\" />\r\n  </div>\r\n\r\n  @if ($isNormalField()) {\r\n\r\n    <div class=\"setting-row\">\r\n      <label>Flex Size</label>\r\n      <input class=\"form-control\" type=\"number\" [ngModel]=\"$control()?.flexSize\" (ngModelChange)=\"setControlProp('flexSize', $event)\" />\r\n    </div>\r\n\r\n    @if ($control()?.controlType !== 'FORM_ARRAY') {\r\n      <div class=\"setting-row\">\r\n        <label>Default</label>\r\n        <input class=\"form-control\" type=\"text\" [ngModel]=\"$control()?.value\" (ngModelChange)=\"setControlProp('value', $event)\" />\r\n      </div>\r\n    }\r\n  }\r\n\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"] }]
         }] });
 
 class OptionalPropsComponent extends BasePropsComponent {
@@ -428,7 +410,7 @@ class OptionalPropsComponent extends BasePropsComponent {
         this.pipeOptions$ = new BehaviorSubject(Object.values(EnumCoreTablePipeType).map(x => ({ value: x, text: x })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: OptionalPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: OptionalPropsComponent, isStandalone: true, selector: "optional-props", usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group optional-group\" [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, $isNested())\" />\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, $isNested())\" />\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, $isNested())\" /> \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, $isNested())\" />\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, $isNested())\"\r\n                [paramMode]=\"true\"\r\n                [options$]=\"pipeOptions$\"\r\n            >\r\n            </core-dropdown>\r\n        </div>\r\n    </div>\r\n\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"], dependencies: [{ kind: "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: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "clearDisable", "fitHeightWithItemCount", "itemHeight", "optionApiDriven", "optionApi", "optionHttpVerb", "optionHttpPayload", "optionValueFrom", "optionTextFrom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: OptionalPropsComponent, isStandalone: true, selector: "optional-props", usesInheritance: true, ngImport: i0, template: "<div class=\"setting-group optional-group\" [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"], 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: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "clearDisable", "fitHeightWithItemCount", "itemHeight", "optionApiDriven", "optionApi", "optionHttpVerb", "optionHttpPayload", "optionValueFrom", "optionTextFrom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: OptionalPropsComponent, decorators: [{
             type: Component,
@@ -437,23 +419,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         FormsModule,
                         CoreCheckboxComponent,
                         CoreDropdownComponent
-                    ], 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, $isNested())\" />\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, $isNested())\" />\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, $isNested())\" /> \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, $isNested())\" />\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, $isNested())\"\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"] }]
+                    ], 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 = input(false);
+        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() {
@@ -463,7 +468,7 @@ class PropsHostComponent {
         }
     }
     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: "17.1.0", version: "19.2.5", type: PropsHostComponent, isStandalone: true, selector: "props-host", inputs: { loadComponent: { classPropertyName: "loadComponent", publicName: "loadComponent", isSignal: false, isRequired: false, transformFunction: null }, $isNested: { classPropertyName: "$isNested", publicName: "$isNested", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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,
@@ -474,6 +479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }]
         }], propDecorators: { loadComponent: [{
                 type: Input
+            }], isNested: [{
+                type: Input
             }], props: [{
                 type: Input
             }] } });
@@ -497,7 +504,7 @@ class AttachmentPropsComponent extends BasePropsComponent {
         else {
             control.field = val;
         }
-        this.patchControl(control, this.$isNested());
+        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"] }); }
@@ -563,14 +570,14 @@ class DropdownPropsComponent extends BasePropsComponent {
     onPayloadJsonBlur() {
         try {
             const optionHttpPayload = JSON.parse(this.jsonPayload);
-            this.setControlProp('optionHttpPayload', optionHttpPayload, this.$isNested());
+            this.setControlProp('optionHttpPayload', optionHttpPayload);
         }
         catch (e) {
             console.warn('⚠️ Invalid JSON payload');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DropdownPropsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: DropdownPropsComponent, isStandalone: true, selector: "dropdown-props", usesInheritance: true, ngImport: i0, 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, $isNested())\" />\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, $isNested())\" />\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, $isNested())\" [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, $isNested())\" />\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, $isNested())\" />\r\n    </div>\r\n    }\r\n</div>", styles: [".setting-group{display:flex;flex-direction:column}.setting-row{display:flex;justify-content:flex-start;align-items:center;height:50px}.setting-row label{width:30%}.setting-row .control-wrapper,.setting-row input,.setting-row .readonly-field{width:65%}.setting-row .readonly-field{font-style:italic;color:#666}.setting-row input.validator-value{text-align:right}.setting-row input.validator-value.pattern{text-align:left}.setting-row .control-wrapper{display:flex;align-items:center;justify-content:flex-start}.validator-group .setting-row{justify-content:flex-start}.validator-group .setting-row input{margin-left:15px;width:100%}.tiny-lock{margin-left:6px;font-size:12px;color:#888}\n"], dependencies: [{ kind: "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: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "clearDisable", "fitHeightWithItemCount", "itemHeight", "optionApiDriven", "optionApi", "optionHttpVerb", "optionHttpPayload", "optionValueFrom", "optionTextFrom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: DropdownPropsComponent, isStandalone: true, selector: "dropdown-props", usesInheritance: true, ngImport: i0, 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"], 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: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "clearDisable", "fitHeightWithItemCount", "itemHeight", "optionApiDriven", "optionApi", "optionHttpVerb", "optionHttpPayload", "optionValueFrom", "optionTextFrom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DropdownPropsComponent, decorators: [{
             type: Component,
@@ -579,7 +586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         FormsModule,
                         CoreCheckboxComponent,
                         CoreDropdownComponent,
-                    ], 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, $isNested())\" />\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, $isNested())\" />\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, $isNested())\" [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, $isNested())\" />\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, $isNested())\" />\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"] }]
+                    ], 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({
@@ -794,7 +801,7 @@ class ValidatorEditorComponent extends BasePropsComponent {
         if (shouldSkip)
             return;
         const validatorArray = this.coreFormDesignService.toIValidatorArray(current);
-        this.setControlProp('validators', validatorArray, this.$isNested());
+        this.setControlProp('validators', validatorArray);
     }
     updateValidatorValue(v, raw) {
         const value = raw?.toString().trim();
@@ -811,7 +818,7 @@ class ValidatorEditorComponent extends BasePropsComponent {
         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, this.$isNested());
+        this.setControlProp('validators', validatorArray);
     }
     isReadOnlyValidator(v) {
         return this.$selectedValidators()[v]?.readOnly === true;
@@ -972,7 +979,7 @@ class CalculatedPropsComponent extends BasePropsComponent {
         const generated = this.$generatedScript();
         if (!generated)
             return;
-        this.setControlProp('script', generated, false);
+        this.setControlProp('script', generated);
         this.alertService.success('Script applied from AI.');
         this.$aiGeneratorOn.set(false);
     }
@@ -1104,13 +1111,13 @@ class CalculatedPropsComponent extends BasePropsComponent {
     onScriptChange(script) {
         if (this.$control().evaluationMode === 'sql-query') {
             const error = this.validateSqlScript(script);
-            this.setControlProp('isUnsafe', !!error, false);
+            this.setControlProp('isUnsafe', !!error);
             this.$sqlScriptError.set(error);
-            this.setControlProp('script', script, false);
+            this.setControlProp('script', script);
         }
         else {
-            this.setControlProp('script', script, false);
-            this.setControlProp('isUnsafe', false, false);
+            this.setControlProp('script', script);
+            this.setControlProp('isUnsafe', false);
         }
     }
     ngAfterViewInit() {
@@ -1119,7 +1126,7 @@ class CalculatedPropsComponent extends BasePropsComponent {
     openHintEditor(table, e) {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CalculatedPropsComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CalculatedPropsComponent, isStandalone: true, selector: "calculated-props", viewQueries: [{ propertyName: "$shortHtmlHintForCSharpSyntax", first: true, predicate: ["shortHtmlHintForCSharpSyntax"], descendants: true, isSignal: true }, { propertyName: "$shortHtmlHintForSqlSyntax", first: true, predicate: ["shortHtmlHintForSqlSyntax"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, 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, false)\">\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, false)\" />\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, false)\">\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"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: CoreStickerCollectionComponent, selector: "core-sticker-collection", inputs: ["$items", "$shownFrom", "$tooltipFrom", "$initialChecked", "$showMore", "$showMoreTooltip", "$hideShowMoreIfNotSelected", "$enableFilter"], outputs: ["$checkedChange", "$onShowMore"] }, { kind: "component", type: CoreRadioGroupComponent, selector: "core-radio-group", inputs: ["options$", "vertical", "columnCount", "gapY", "defaultValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CalculatedPropsComponent, isStandalone: true, selector: "calculated-props", viewQueries: [{ propertyName: "$shortHtmlHintForCSharpSyntax", first: true, predicate: ["shortHtmlHintForCSharpSyntax"], descendants: true, isSignal: true }, { propertyName: "$shortHtmlHintForSqlSyntax", first: true, predicate: ["shortHtmlHintForSqlSyntax"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: CoreStickerCollectionComponent, selector: "core-sticker-collection", inputs: ["$items", "$shownFrom", "$tooltipFrom", "$initialChecked", "$showMore", "$showMoreTooltip", "$hideShowMoreIfNotSelected", "$enableFilter"], outputs: ["$checkedChange", "$onShowMore"] }, { kind: "component", type: CoreRadioGroupComponent, selector: "core-radio-group", inputs: ["options$", "vertical", "columnCount", "gapY", "defaultValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CalculatedPropsComponent, decorators: [{
             type: Component,
@@ -1128,7 +1135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         FormsModule,
                         CoreStickerCollectionComponent,
                         CoreRadioGroupComponent,
-                    ], 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, false)\">\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, false)\" />\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, false)\">\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"] }]
+                    ], 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 }] });
 
 class FieldSettingComponent extends BaseComponent {
@@ -1152,7 +1159,7 @@ class FieldSettingComponent extends BaseComponent {
             '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-BrBj6oUC.mjs').then(m => m.FormArrayPropsComponent),
+            'form-array-props': () => import('./ngx-histaff-alpha-form-array-props.component-qgr2R-IR.mjs').then(m => m.FormArrayPropsComponent),
             // etc...
         };
     }
@@ -1203,7 +1210,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    @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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FieldSettingComponent, decorators: [{
             type: Component,
@@ -1228,7 +1235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         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"] }]
+                    ], 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"] }]
         }] });
 
 var EnumLeftPanelMode;
@@ -1439,14 +1446,15 @@ class CoreFormArrayControlPaletteComponent {
         this.coreFormDesignService.beginDragTemplate(control, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormArrayControlPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormArrayControlPaletteComponent, isStandalone: true, selector: "core-form-array-control-palette", ngImport: i0, template: "<ul>\r\n  <!-- <div class=\"palette-debug\">\r\n    <div>controlOptions length: {{ controlOptions.length }}</div>\r\n    <pre>{{ controlOptions | json }}</pre>\r\n  </div> -->\r\n  @for (control of controlOptions; track $index) {\r\n  <li class=\"palette-item\" draggable=\"true\" (dragstart)=\"onDragStart($event, control)\">\r\n    <core-control-no-form-array [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\" />\r\n  </li>\r\n  }\r\n</ul>", styles: [".palette-debug{font-size:12px;background:#f9f9f9;border:1px solid #ddd;padding:8px;border-radius:4px;color:#333;margin-bottom:8px;white-space:pre-wrap}ul{padding:0}ul li{margin-top:8px;margin-bottom:8px;margin-right:15px}\n"], dependencies: [{ kind: "component", type: CoreControlNoFormArrayComponent, selector: "core-control-no-form-array", inputs: ["control", "form", "checkError$", "rangeLimit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormArrayControlPaletteComponent, isStandalone: true, selector: "core-form-array-control-palette", ngImport: i0, template: "<ul [formGroup]=\"form\">\r\n  <!-- <div class=\"palette-debug\">\r\n    <div>controlOptions length: {{ controlOptions.length }}</div>\r\n    <pre>{{ controlOptions | json }}</pre>\r\n  </div> -->\r\n  @for (control of controlOptions; track $index) {\r\n  <li class=\"palette-item\" draggable=\"true\" (dragstart)=\"onDragStart($event, control)\">\r\n    <core-control-no-form-array [control]=\"control\" [checkError$]=\"checkError$\" />\r\n  </li>\r\n  }\r\n</ul>", styles: [".palette-debug{font-size:12px;background:#f9f9f9;border:1px solid #ddd;padding:8px;border-radius:4px;color:#333;margin-bottom:8px;white-space:pre-wrap}ul{padding:0}ul li{margin-top:8px;margin-bottom:8px;margin-right:15px}\n"], dependencies: [{ kind: "component", type: CoreControlNoFormArrayComponent, selector: "core-control-no-form-array", inputs: ["control", "checkError$", "rangeLimit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormArrayControlPaletteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'core-form-array-control-palette', imports: [
                         JsonPipe,
-                        CoreControlNoFormArrayComponent
-                    ], template: "<ul>\r\n  <!-- <div class=\"palette-debug\">\r\n    <div>controlOptions length: {{ controlOptions.length }}</div>\r\n    <pre>{{ controlOptions | json }}</pre>\r\n  </div> -->\r\n  @for (control of controlOptions; track $index) {\r\n  <li class=\"palette-item\" draggable=\"true\" (dragstart)=\"onDragStart($event, control)\">\r\n    <core-control-no-form-array [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\" />\r\n  </li>\r\n  }\r\n</ul>", styles: [".palette-debug{font-size:12px;background:#f9f9f9;border:1px solid #ddd;padding:8px;border-radius:4px;color:#333;margin-bottom:8px;white-space:pre-wrap}ul{padding:0}ul li{margin-top:8px;margin-bottom:8px;margin-right:15px}\n"] }]
+                        CoreControlNoFormArrayComponent,
+                        ReactiveFormsModule
+                    ], template: "<ul [formGroup]=\"form\">\r\n  <!-- <div class=\"palette-debug\">\r\n    <div>controlOptions length: {{ controlOptions.length }}</div>\r\n    <pre>{{ controlOptions | json }}</pre>\r\n  </div> -->\r\n  @for (control of controlOptions; track $index) {\r\n  <li class=\"palette-item\" draggable=\"true\" (dragstart)=\"onDragStart($event, control)\">\r\n    <core-control-no-form-array [control]=\"control\" [checkError$]=\"checkError$\" />\r\n  </li>\r\n  }\r\n</ul>", styles: [".palette-debug{font-size:12px;background:#f9f9f9;border:1px solid #ddd;padding:8px;border-radius:4px;color:#333;margin-bottom:8px;white-space:pre-wrap}ul{padding:0}ul li{margin-top:8px;margin-bottom:8px;margin-right:15px}\n"] }]
         }] });
 
 class CoreFormGroupEditorComponent extends BaseComponent {
@@ -3262,4 +3270,4 @@ var coreFormDesign_component = /*#__PURE__*/Object.freeze({
 });
 
 export { BasePropsComponent as B, CoreFormDesignComponent as C, coreFormDesign_component as c };
-//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-BT7r_1R-.mjs.map
+//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-DtxekQS_.mjs.map