ngx-histaff-alpha 5.9.1 → 5.9.2

package/fesm2022/{ngx-histaff-alpha-core-form-design.component-KQsI4L2g.mjs → ngx-histaff-alpha-core-form-design.component-CGf-jOqR.mjs}

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, Component, signal, effect, HostListener, ChangeDetectionStrategy, Injectable, computed, viewChild, ViewContainerRef, Input, EventEmitter, Output, Renderer2, input, isDevMode } from '@angular/core';
+import { inject, ChangeDetectorRef, Component, signal, effect, HostListener, ChangeDetectionStrategy, Injectable, computed, viewChild, ViewContainerRef, Input, EventEmitter, Output, input, Renderer2, isDevMode } from '@angular/core';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import { n as CoreFormDesignService, b as CoreWorkflowService, B as BaseEditComponent, i as AlertService, L as AppConfigService, O as EnumCorePageEditMode, P as EnumCoreButtonVNSCode, R as READONLY_WORKFLOW_FIELDS, Q as noneAutoClosedAlertOptions, p as DialogService, M as MultiLanguageService, C as CorePageHeaderComponent, U as CoreFormComponent, V as CoreButtonGroupVnsComponent, T as TranslatePipe, E as EnumFormBaseContolType, e as BaseComponent, W as EnumCoreTablePipeType, J as CoreCheckboxComponent, r as CoreDropdownComponent, g as TooltipDirective, G as GptService, l as alertOptions, y as CoreRadioGroupComponent, X as HtmlTooltipDirective, c as EnumCoreFormControlSeekerSourceType, Y as CoreControlNoFormArrayComponent, Z as EnumFormDesignMode, q as DomService, K as JsonService, z as ApplicationHelpService, H as HotKeysDirective, _ as CoreControlComponent, j as TableCellPipe, s as CoreChecklistComponent, u as CoreFormControlSeekerComponent, $ as CoreAttachmentComponent, t as CoreDatePickerComponent, a0 as CoreMonthSelectorComponent, v as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-CkvGEG39.mjs';
+import { n as CoreFormDesignService, b as CoreWorkflowService, B as BaseEditComponent, i as AlertService, L as AppConfigService, O as EnumCorePageEditMode, P as EnumCoreButtonVNSCode, R as READONLY_WORKFLOW_FIELDS, Q as noneAutoClosedAlertOptions, p as DialogService, M as MultiLanguageService, C as CorePageHeaderComponent, U as CoreFormComponent, V as CoreButtonGroupVnsComponent, T as TranslatePipe, E as EnumFormBaseContolType, e as BaseComponent, W as EnumCoreTablePipeType, J as CoreCheckboxComponent, r as CoreDropdownComponent, g as TooltipDirective, G as GptService, l as alertOptions, y as CoreRadioGroupComponent, X as HtmlTooltipDirective, c as EnumCoreFormControlSeekerSourceType, Y as CoreControlNoFormArrayComponent, Z as EnumFormDesignMode, q as DomService, K as JsonService, z as ApplicationHelpService, _ as CoreControlComponent, j as TableCellPipe, H as HotKeysDirective, s as CoreChecklistComponent, u as CoreFormControlSeekerComponent, $ as CoreAttachmentComponent, t as CoreDatePickerComponent, a0 as CoreMonthSelectorComponent, v as CoreCurrencyInputComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-CYQ3j6IP.mjs';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, FormArray, Validators, ReactiveFormsModule } from '@angular/forms';
-import { NgStyle, JsonPipe, UpperCasePipe, AsyncPipe, NgTemplateOutlet } from '@angular/common';
+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-ZJ29hnW7.mjs';
-import { D as DbService, C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-D4lPsJ_K.mjs';
+import { CoreStickerCollectionComponent } from './ngx-histaff-alpha-core-sticker-collection.component-zkrmzfmx.mjs';
+import { D as DbService, C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-BLGPX2ov.mjs';
 import { EnumTranslateKey } from 'alpha-global-constants';
-import { L as LiveFormComponent } from './ngx-histaff-alpha-live-form.component-BMCAth2_.mjs';
+import { L as LiveFormComponent } from './ngx-histaff-alpha-live-form.component-Df56ufkx.mjs';
 
 const slideFromTopFadeIn = trigger('slideFromTopFadeIn', [
     state('in', style({ opacity: 1, transform: 'translateY(0)' })),
@@ -1081,6 +1081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 class FieldSettingComponent extends BaseComponent {
     constructor() {
         super(...arguments);
+        this.$isNested = input(false);
         this.coreFormDesignService = inject(CoreFormDesignService);
         this.enumControlType = EnumFormBaseContolType;
         this.renderer = inject(Renderer2);
@@ -1098,7 +1099,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-DkAM9Uk9.mjs').then(m => m.FormArrayPropsComponent),
+            'form-array-props': () => import('./ngx-histaff-alpha-form-array-props.component-CCccglL5.mjs').then(m => m.FormArrayPropsComponent),
             // etc...
         };
     }
@@ -1147,7 +1148,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", 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().type !== 'calculated' ? $control()?.controlType + ' - ' : '' }}{{ $control()?.field ||\r\n      'Unnamed' }}\r\n    </div>\r\n    <div class=\"close-wrapper pointer\" (click)=\"closeFieldSettingPanel()\">\r\n      <i class=\"feather-x\"></i>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"field-setting-content\">\r\n\r\n\r\n    @if ($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></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></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></mandatory-props>\r\n\r\n    <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n    @if ($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></optional-props>\r\n\r\n    <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n    <div class=\"group-title validators\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-check-square\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Validators</div>\r\n    </div>\r\n    <validator-editor></validator-editor>\r\n    }\r\n\r\n    @if (!($control().controlType === 'TEXTBOX' && ['string', 'text', 'email'].includes(($control().type ||\r\n    '').toLowerCase()))) {\r\n\r\n    <div class=\"group-title\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-check-square\"></i>\r\n      </div>\r\n      <div class=\"group-name\">{{ getFriendlyControlLabel($control()) }} Settings</div>\r\n    </div>\r\n\r\n    <props-host [loadComponent]=\"componentLoaderMap[coreFormDesignService.$currentPropsComponent()]\"\r\n      [props]=\"{ control: $control(), controlChange: onControlParamsChange.bind(this) }\">\r\n    </props-host>\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", "props"] }, { kind: "component", type: CalculatedPropsComponent, selector: "calculated-props" }, { kind: "directive", type: HtmlTooltipDirective, selector: "[htmlTooltip]", inputs: ["htmlTooltip", "tooltipContext", "maxWidthUnset", "backgroundColor"] }], 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().type !== 'calculated' ? $control()?.controlType + ' - ' : '' }}{{ $control()?.field ||\r\n      'Unnamed' }}\r\n    </div>\r\n    <div class=\"close-wrapper pointer\" (click)=\"closeFieldSettingPanel()\">\r\n      <i class=\"feather-x\"></i>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"field-setting-content\">\r\n\r\n\r\n    @if ($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></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></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></mandatory-props>\r\n\r\n    <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n    @if ($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></optional-props>\r\n\r\n    <!-- <div class=\"setting-divider\"></div> -->\r\n\r\n    <div class=\"group-title validators\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-check-square\"></i>\r\n      </div>\r\n      <div class=\"group-name\">Validators</div>\r\n    </div>\r\n    <validator-editor></validator-editor>\r\n    }\r\n\r\n    @if (!($control().controlType === 'TEXTBOX' && ['string', 'text', 'email'].includes(($control().type ||\r\n    '').toLowerCase()))) {\r\n\r\n    <div class=\"group-title\">\r\n      <div class=\"icon-wrapper\">\r\n        <i class=\"feather-check-square\"></i>\r\n      </div>\r\n      <div class=\"group-name\">{{ getFriendlyControlLabel($control()) }} Settings</div>\r\n    </div>\r\n\r\n    <props-host [loadComponent]=\"componentLoaderMap[coreFormDesignService.$currentPropsComponent()]\"\r\n      [props]=\"{ control: $control(), controlChange: onControlParamsChange.bind(this) }\">\r\n    </props-host>\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", "props"] }, { kind: "component", type: CalculatedPropsComponent, selector: "calculated-props" }, { kind: "directive", type: HtmlTooltipDirective, selector: "[htmlTooltip]", inputs: ["htmlTooltip", "tooltipContext", "maxWidthUnset", "backgroundColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FieldSettingComponent, decorators: [{
             type: Component,
@@ -1192,7 +1193,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'stringBox',
                 label: '',
                 value: '',
-                readonly: true,
+                //readonly: true,
                 placeholder: 'String box',
                 headless: true,
             },
@@ -1203,7 +1204,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'email',
                 label: '',
                 value: '',
-                readonly: true,
+                //readonly: true,
                 placeholder: 'Email',
                 headless: true,
             },
@@ -1214,7 +1215,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'textarea',
                 label: '',
                 value: '',
-                readonly: true,
+                //readonly: true,
                 textareaRows: 2,
                 placeholder: 'Text area',
                 headless: true,
@@ -1226,7 +1227,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'number',
                 label: '',
                 value: 100,
-                readonly: true,
+                //readonly: true,
                 placeholder: 'Number',
                 headless: true,
             },
@@ -1237,7 +1238,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'currency',
                 label: '',
                 value: '',
-                readonly: true,
+                //readonly: true,
                 placeholder: 'Currency',
                 headless: true,
             },
@@ -1248,7 +1249,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'dropdown',
                 label: '',
                 value: '',
-                readonly: true,
+                //readonly: true,
                 dropdownOptions$: new BehaviorSubject([]),
                 shownFrom: 'name',
                 getByIdObject$: new BehaviorSubject({}),
@@ -1263,7 +1264,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'employeeSeeker',
                 label: '',
                 value: ['Nguyễn A'],
-                readonly: true,
+                //readonly: true,
                 boundFrom: 'id',
                 shownFrom: 'fullname',
                 getByIdObject$: new BehaviorSubject({}),
@@ -1277,7 +1278,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'checklist',
                 label: '',
                 value: [],
-                readonly: true,
+                //readonly: true,
                 checklistOptions$: new BehaviorSubject([]),
                 shownFrom: 'name',
                 getByIdObject$: new BehaviorSubject({}),
@@ -1293,7 +1294,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'employeeSeekerMultiple',
                 label: '',
                 value: [],
-                readonly: true,
+                //readonly: true,
                 objectList$: new BehaviorSubject([]),
                 boundFrom: 'id',
                 shownFrom: 'fullname',
@@ -1309,7 +1310,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'datePicker',
                 label: '',
                 value: '',
-                readonly: true,
+                //readonly: true,
                 placeholder: 'Date picker',
                 showPlaceholder: true,
                 headless: true,
@@ -1321,7 +1322,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'timeBox',
                 label: '',
                 value: null,
-                readonly: true,
+                //readonly: true,
                 placeholder: 'Time box',
                 headless: true,
             },
@@ -1332,7 +1333,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'monthSelector',
                 label: '',
                 value: '',
-                readonly: true,
+                //readonly: true,
                 placeholder: 'Month selector',
                 headless: true,
             },
@@ -1343,7 +1344,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'attachment',
                 label: '',
                 value: '',
-                readonly: true,
+                //readonly: true,
                 assignTo: 'unknown',
                 placeholder: 'Attachment',
                 headless: true,
@@ -1355,7 +1356,7 @@ class CoreFormArrayControlPaletteComponent {
                 field: 'checkbox',
                 label: '',
                 value: '',
-                readonly: true,
+                //readonly: true,
                 placeholder: 'Checkbox',
                 headless: true,
             }
@@ -1380,90 +1381,24 @@ class CoreFormArrayControlPaletteComponent {
         this.checkError$ = new BehaviorSubject(false);
     }
     onDragStart(event, control) {
-        event.dataTransfer?.setData('application/json', JSON.stringify(control));
+        this.coreFormDesignService.beginDragTemplate(control);
     }
     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:8px}\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>\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"] }] }); }
 }
 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:8px}\n"] }]
-        }] });
-
-const PLACEHOLDER_CONTROL = {
-    controlType: EnumFormBaseContolType.PLACEHOLDER,
-    field: '',
-    label: '',
-    flexSize: 12,
-    value: ''
-};
-class CoreFormArrayLayoutEditorComponent {
-    constructor() {
-        this.checkError$ = new BehaviorSubject(false);
-        this.coreFormDesignService = inject(CoreFormDesignService);
-        this.$sections = this.coreFormDesignService.$nestedDesignSections;
-        this.form = this.coreFormDesignService.formDesign;
-        this.showDebug = false;
-        this.dropIndex = 0;
-    }
-    onClose() {
-        this.coreFormDesignService.$showFormArrayDesign.set(false);
-    }
-    onMiniDrop(event, sectionIndex, rowIndex, colIndex) {
-        const rawData = event?.dataTransfer?.getData('application/json');
-        if (!rawData)
-            return;
-        const control = JSON.parse(rawData);
-        const newControl = structuredClone(control);
-        newControl.field = `control_${++this.dropIndex}`;
-        const current = this.$sections();
-        if (!current)
-            return;
-        current[sectionIndex].rows[rowIndex][colIndex] = newControl;
-        this.$sections.set([...current]);
-    }
-    addSection() {
-        const current = this.$sections() || [];
-        current.push({ caption: '', rows: [[PLACEHOLDER_CONTROL]] });
-        this.$sections.set([...current]);
-    }
-    addRow(sectionIndex) {
-        const current = this.$sections();
-        if (!current?.[sectionIndex])
-            return;
-        current[sectionIndex].rows.push([PLACEHOLDER_CONTROL]);
-        this.$sections.set([...current]);
-    }
-    removeControl(sectionIndex, rowIndex, colIndex) {
-        const current = this.$sections();
-        // Guard: Make sure the section and row exist
-        if (!current?.[sectionIndex]?.rows[rowIndex])
-            return;
-        // Replace the control at given slot with a type-safe placeholder
-        current[sectionIndex].rows[rowIndex][colIndex] = PLACEHOLDER_CONTROL;
-        // Update the signal to trigger re-render
-        this.$sections.set([...current]);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormArrayLayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormArrayLayoutEditorComponent, isStandalone: true, selector: "core-form-array-layout-editor", ngImport: i0, template: "<div class=\"core-form-array-layout-editor-container\">\r\n  <div class=\"modal-container\">\r\n    <div class=\"modal-content-root\">\r\n\r\n      <div class=\"layout-header\">\r\n        {{ 'Design Form Array Layout' | uppercase }}\r\n        <button class=\"close-button\" (click)=\"onClose()\">\u00D7</button>\r\n      </div>\r\n\r\n      <div class=\"layout-main-content\">\r\n        <!-- Left: Palette -->\r\n        <div class=\"layout-left\">\r\n          <core-form-array-control-palette />\r\n        </div>\r\n\r\n        <!-- Right: Grid Layout -->\r\n        <div class=\"layout-right\">\r\n          <div class=\"layout-toolbar\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"addSection()\">+ Section</button>\r\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"addRow(0)\">+ Row to First Section</button>\r\n            <button class=\"btn btn-sm btn-outline-dark\" (click)=\"showDebug = !showDebug\">\r\n              {{ showDebug ? 'Hide' : 'Show' }} Debug\r\n            </button>\r\n          </div>\r\n\r\n          @if (showDebug) {\r\n            <pre>{{ $sections() | json }}</pre>\r\n          }\r\n\r\n          <div class=\"layout-body\">\r\n            @for (section of $sections(); track $index; let sectionIndex = $index) {\r\n            <div class=\"section-card\">\r\n              <div class=\"section-caption\">\r\n                {{ section.caption || 'Untitled Section' }}\r\n              </div>\r\n\r\n              @for (row of section.rows; track $index; let rowIndex = $index) {\r\n              <div class=\"row\">\r\n                @for (control of row; track $index; let colIndex = $index) {\r\n                <div class=\"form-cell mini-drop-target\" miniDropTarget\r\n                  (miniDropped)=\"onMiniDrop($event, sectionIndex, rowIndex, colIndex)\">\r\n                  @if (control) {\r\n                  <div class=\"form-cell-inner\">\r\n                    <core-control-no-form-array [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\" />\r\n                    <button class=\"btn btn-sm btn-link text-danger remove-btn\"\r\n                      (click)=\"removeControl(sectionIndex, rowIndex, colIndex)\">\r\n                      \u00D7\r\n                    </button>\r\n                  </div>\r\n                  } @else {\r\n                  <div class=\"placeholder-slot\">Drop Here</div>\r\n                  }\r\n                </div>\r\n                }\r\n              </div>\r\n              }\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".layout-header{position:relative;padding:15px;font-size:20px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;transform:translate(-15px,-15px);width:calc(100% + 30px)}.close-button{position:absolute;top:12px;right:12px;background:none;border:none;font-size:22px;cursor:pointer;color:#666;line-height:1;padding:0;z-index:1}.close-button:hover{color:#000}.layout-main-content{display:flex;gap:24px}.layout-left{width:200px;flex:0 0 240px;border-right:1px solid #eee;padding-right:16px;overflow:auto}.layout-right{flex:1;padding-left:16px;overflow-x:auto}.layout-toolbar{display:flex;gap:12px;margin-bottom:12px}.layout-body{display:flex;flex-direction:column;gap:24px}.section-card{background-color:#fdfdfd;border:1px solid #ddd;border-radius:8px;padding:12px}.section-caption{font-weight:600;margin-bottom:12px}.row{display:flex;gap:12px;margin-bottom:12px}.form-cell{flex:1;min-width:120px;padding:6px;border:1px dashed #ccc;border-radius:4px;background-color:#fff;position:relative}.form-cell-inner{position:relative}.remove-btn{position:absolute;top:0;right:0;font-size:14px;padding:0 4px;border:none}.placeholder-slot{text-align:center;color:#aaa;padding:16px;background:#fafafa;border:1px dashed #bbb;border-radius:4px}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "component", type: CoreControlNoFormArrayComponent, selector: "core-control-no-form-array", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "component", type: CoreFormArrayControlPaletteComponent, selector: "core-form-array-control-palette" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormArrayLayoutEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-form-array-layout-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        JsonPipe,
-                        UpperCasePipe,
-                        CoreControlNoFormArrayComponent,
-                        CoreFormArrayControlPaletteComponent
-                    ], template: "<div class=\"core-form-array-layout-editor-container\">\r\n  <div class=\"modal-container\">\r\n    <div class=\"modal-content-root\">\r\n\r\n      <div class=\"layout-header\">\r\n        {{ 'Design Form Array Layout' | uppercase }}\r\n        <button class=\"close-button\" (click)=\"onClose()\">\u00D7</button>\r\n      </div>\r\n\r\n      <div class=\"layout-main-content\">\r\n        <!-- Left: Palette -->\r\n        <div class=\"layout-left\">\r\n          <core-form-array-control-palette />\r\n        </div>\r\n\r\n        <!-- Right: Grid Layout -->\r\n        <div class=\"layout-right\">\r\n          <div class=\"layout-toolbar\">\r\n            <button class=\"btn btn-sm btn-primary\" (click)=\"addSection()\">+ Section</button>\r\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"addRow(0)\">+ Row to First Section</button>\r\n            <button class=\"btn btn-sm btn-outline-dark\" (click)=\"showDebug = !showDebug\">\r\n              {{ showDebug ? 'Hide' : 'Show' }} Debug\r\n            </button>\r\n          </div>\r\n\r\n          @if (showDebug) {\r\n            <pre>{{ $sections() | json }}</pre>\r\n          }\r\n\r\n          <div class=\"layout-body\">\r\n            @for (section of $sections(); track $index; let sectionIndex = $index) {\r\n            <div class=\"section-card\">\r\n              <div class=\"section-caption\">\r\n                {{ section.caption || 'Untitled Section' }}\r\n              </div>\r\n\r\n              @for (row of section.rows; track $index; let rowIndex = $index) {\r\n              <div class=\"row\">\r\n                @for (control of row; track $index; let colIndex = $index) {\r\n                <div class=\"form-cell mini-drop-target\" miniDropTarget\r\n                  (miniDropped)=\"onMiniDrop($event, sectionIndex, rowIndex, colIndex)\">\r\n                  @if (control) {\r\n                  <div class=\"form-cell-inner\">\r\n                    <core-control-no-form-array [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\" />\r\n                    <button class=\"btn btn-sm btn-link text-danger remove-btn\"\r\n                      (click)=\"removeControl(sectionIndex, rowIndex, colIndex)\">\r\n                      \u00D7\r\n                    </button>\r\n                  </div>\r\n                  } @else {\r\n                  <div class=\"placeholder-slot\">Drop Here</div>\r\n                  }\r\n                </div>\r\n                }\r\n              </div>\r\n              }\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".layout-header{position:relative;padding:15px;font-size:20px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;transform:translate(-15px,-15px);width:calc(100% + 30px)}.close-button{position:absolute;top:12px;right:12px;background:none;border:none;font-size:22px;cursor:pointer;color:#666;line-height:1;padding:0;z-index:1}.close-button:hover{color:#000}.layout-main-content{display:flex;gap:24px}.layout-left{width:200px;flex:0 0 240px;border-right:1px solid #eee;padding-right:16px;overflow:auto}.layout-right{flex:1;padding-left:16px;overflow-x:auto}.layout-toolbar{display:flex;gap:12px;margin-bottom:12px}.layout-body{display:flex;flex-direction:column;gap:24px}.section-card{background-color:#fdfdfd;border:1px solid #ddd;border-radius:8px;padding:12px}.section-caption{font-weight:600;margin-bottom:12px}.row{display:flex;gap:12px;margin-bottom:12px}.form-cell{flex:1;min-width:120px;padding:6px;border:1px dashed #ccc;border-radius:4px;background-color:#fff;position:relative}.form-cell-inner{position:relative}.remove-btn{position:absolute;top:0;right:0;font-size:14px;padding:0 4px;border:none}.placeholder-slot{text-align:center;color:#aaa;padding:16px;background:#fafafa;border:1px dashed #bbb;border-radius:4px}\n"] }]
+                    ], 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"] }]
         }] });
 
-class CoreFormDesignComponent extends BaseComponent {
+class CoreFormGroupEditorComponent extends BaseComponent {
     constructor(mls) {
         super(mls);
         this.mls = mls;
+        this.$isNested = input(false);
         this.$idAsInput = input();
         this.$id = input();
         this.$settingPanel = viewChild('settingPanel');
@@ -1851,6 +1786,7 @@ class CoreFormDesignComponent extends BaseComponent {
         this.generateLabelNameFor = this.coreFormDesignService.generateLabelNameFor.bind(this.coreFormDesignService);
         this.getAllControlsFromSections = this.coreFormDesignService.getAllControlsFromSections.bind(this.coreFormDesignService);
         this.getControl = this.coreFormDesignService.getControl.bind(this.coreFormDesignService);
+        this.filteredCells = this.coreFormDesignService.filteredCells;
         this.coreFormDesignService.resetFormDesignState();
         effect(() => {
             const _ = this.coreFormDesignService.$placeholderSections();
@@ -2192,60 +2128,6 @@ class CoreFormDesignComponent extends BaseComponent {
         this.coreFormDesignService.$selectedCell.set({ ...cell });
         this.coreFormDesignService.$fieldSettingPanelOpen.set(true);
     }
-    /*
-    deleteField(row: IFormDesignRow | undefined, colIndex: number): void {
-      if (!row || !row.cells[colIndex]) return;
-      const cellToDelete = row.cells[colIndex];
-      if (!cellToDelete.control) return;
-  
-      if (confirm('Are you sure to remove the field?')) {
-  
-        // 🧠 Check if it's selected
-        const selectedCell = this.coreFormDesignService.$selectedCell();
-        const shouldClearSelection = selectedCell === cellToDelete;
-        let deletedControl: IFormBaseControl | null = null;
-  
-        // ✅ Update the reactive state
-        this.coreFormDesignService.$placeholderSections.update(sections => {
-          for (const section of sections) {
-            for (const r of section.rows) {
-              if (r === row) {
-                const control = r.cells[colIndex].control;
-                if (control && control.field && control.flexSize !== undefined) {
-                  deletedControl = control as IFormBaseControl; // ✅ Save before removing
-                }
-                r.cells[colIndex].control = { flexSize: r.cells[colIndex].control?.flexSize }; // ❌ Clear after
-                break;
-              }
-            }
-          }
-          return sections;
-        });
-  
-        if (deletedControl) {
-          this.coreFormDesignService.$placeholderSections.update(sections => {
-            for (const section of sections) {
-              for (const row of section.rows) {
-                if (!!row) {
-                  row.cells = row.cells.filter(cell => cell.control?.field !== deletedControl?.assignTo);
-                }
-              }
-            }
-            return sections;
-          });
-        }
-  
-        // ❌ Clear selection if needed
-        if (shouldClearSelection) {
-          this.coreFormDesignService.$selectedCell.set(null);
-        }
-  
-        console.log("this.coreFormDesignService.$placeholderSections before triggerUpdateSections", this.coreFormDesignService.$placeholderSections())
-        this.triggerUpdateSections();
-      }
-    }
-    */
-    // Anti AI version
     deleteField(row, sectionIndex, rowIndex, colIndex) {
         if (!row)
             return;
@@ -2378,10 +2260,969 @@ class CoreFormDesignComponent extends BaseComponent {
             return false;
         return control.validators.some((v) => v.name === 'required' || v.name === 'requiredTrue');
     }
-    filteredCells(row) {
-        if (!row)
-            return [];
-        return row.cells.filter(cell => (cell?.flexSize ?? 0) > 0);
+    onFormDesignCreated(e) {
+        console.log("onFormDesignCreated", e);
+    }
+    onLiveFormCreated(e) {
+        console.log("onLiveFormCreated", e);
+    }
+    showMetadata() {
+        this.coreFormDesignService.$showFormMetadata.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormGroupEditorComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormGroupEditorComponent, isStandalone: true, selector: "core-form-group-editor", inputs: { $isNested: { classPropertyName: "$isNested", publicName: "$isNested", isSignal: true, isRequired: false, transformFunction: null }, $idAsInput: { classPropertyName: "$idAsInput", publicName: "$idAsInput", isSignal: true, isRequired: false, transformFunction: null }, $id: { classPropertyName: "$id", publicName: "$id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "$settingPanel", first: true, predicate: ["settingPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-form-group-editor-container\">\r\n\r\n    <div class=\"form-design-right\">\r\n\r\n        @if (coreFormDesignService.$mode() === enumType.Default) {\r\n            <div class=\"form-wrapper\">\r\n\r\n                @if (!$isNested() && !!coreFormDesignService.$isInWorkflowDesign()) {\r\n                    <form-metadata></form-metadata>\r\n                }\r\n\r\n                <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n                <div class=\"form-cells\">    \r\n\r\n                    <div class=\"form-tool-bar\">\r\n                        @if (!$isNested() && !$hasCalculatedSection()) {\r\n                            <button class=\"core-button-vns-container\" (click)=\"addCalculatedSection()\">+ Calculated fields</button>\r\n                        }\r\n                        <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n                    </div>\r\n    \r\n                    @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n                        <div class=\"form-section-placeholder\">\r\n\r\n                          <div class=\"section-header\">\r\n\r\n                            <div class=\"section-img-wrapper\">\r\n                                <div class=\"section-img\" [class.calculated]=\"section.forCalculatedFields\"></div>\r\n                            </div>\r\n\r\n                            <label [attr.contenteditable]=\"!section.forCalculatedFields\"\r\n                                [htmlTooltip]=\"!!section.forCalculatedFields ? calculatedFieldsTooltip : null\"\r\n                                (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n                                (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n                            >{{ section.caption }}</label>\r\n\r\n                            <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n                                <i class=\"feather-x\"></i>\r\n                            </div>\r\n                            \r\n                          </div>\r\n                      \r\n                          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n                            <div class=\"form-row-wrapper\">\r\n                                <div class=\"form-row\">\r\n                                    @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n                                      <div class=\"form-cell drop-target\" \r\n                                           [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n                                           [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n                                           (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n                                           (dragover)=\"onDragOver($event, section, cell.control!)\"\r\n                                           (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           [class.selected]=\"cell?.selected\"\r\n                                           [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n                                           [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n                                           (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n                                      >\r\n\r\n\r\n                                        @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n                                            @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n                                                <label contenteditable=\"true\"\r\n                                                    (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n                                                    (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n                                                    [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n                                                    [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n                                                >{{ cell.control.label || 'label' }}</label>\r\n\r\n                                                @if (cell.control.controlType==='CALCULATED') {\r\n                                                <div class=\"control-wrapper\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\">\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                </div>\r\n                                                } @else {\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                }\r\n    \r\n                                                <div class=\"field-toolbar\">\r\n                                                    <ul>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n                                                                <i class=\"feather-settings\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"deleteField(row, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n                                                                <i class=\"feather-x\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                    </ul>\r\n                                                </div>\r\n        \r\n                                                } @else {\r\n                                                    <div class=\"calculated-placeholder\" [class.calculated]=\"!!section.forCalculatedFields\">\r\n                                                        {{ !!section.forCalculatedFields ? 'Drop calculated field here' : 'Drop here'}}\r\n                                                    </div>\r\n                                                }\r\n\r\n                                              @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n                                                <div class=\"merge-toolbar\">\r\n                                                    <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n                                                </div>\r\n                                              }\r\n    \r\n                                        }\r\n\r\n                                      </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row-tool-bar\">\r\n                                    <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n                                </div>\r\n                            </div>\r\n\r\n                          }\r\n                        </div>\r\n                    }\r\n                      \r\n              \r\n                </div>\r\n                </form>\r\n            </div>\r\n        } @else if (!!$sections()) {\r\n\r\n            @if(!!(injectedFields$ | async) && !!(injectedFields$ | async)!.length) {\r\n\r\n                @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" />\r\n                } @else {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" ($onClose)=\"closePreview()\" />\r\n                }\r\n\r\n            } @else {\r\n                <h2>COULD NOT UPDATE injectedFields$</h2>\r\n            }\r\n\r\n        } @else {\r\n            <h2>$sections() empty / null / undefined</h2>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<ng-template #calculatedFieldsTooltip>\r\n    <div style=\"max-width: 280px;\">\r\n        <strong>Calculated Fields</strong><br />\r\n        <p></p>\r\n        These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n        - They are computed automatically during workflow execution.<br />\r\n        - Each field depends on one or more standard input fields.<br />\r\n        - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n        These results can be used to influence workflow logic, rule trees, or approval paths.\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n ", styles: ["@charset \"UTF-8\";.core-form-group-editor-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-group-editor-container .core-button-vns-container{margin-right:8px!important}.core-form-group-editor-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-group-editor-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-group-editor-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-group-editor-container *{border-radius:0}.core-form-group-editor-container ul,.core-form-group-editor-container li{padding:0}.core-form-group-editor-container li{max-width:200px}.core-form-group-editor-container ul div.space{display:block;height:15px}.core-form-group-editor-container li.full-width{max-width:100%}.core-form-group-editor-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-group-editor-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-group-editor-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.core-form-group-editor-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-group-editor-container .field-setting-panel.calculated-type{width:500px;right:-500px}.core-form-group-editor-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.core-form-group-editor-container .field-setting-panel.open{right:0}.core-form-group-editor-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;overflow-y:hidden}.core-form-group-editor-container .form-design-left .category-name{color:#fff}.core-form-group-editor-container .form-design-left .grid-buffer-wrapper{background-color:#fff;padding:15px}.core-form-group-editor-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-group-editor-container .form-design-left .category-name{margin-bottom:15px}.core-form-group-editor-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 205px)}.core-form-group-editor-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-group-editor-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-group-editor-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));overflow-y:auto}.core-form-group-editor-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-group-editor-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-group-editor-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-group-editor-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-group-editor-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .calculated-placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .calculated-placeholder.calculated{color:#ff4500}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-group-editor-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-group-editor-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-group-editor-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-group-editor-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-group-editor-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-group-editor-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-group-editor-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-group-editor-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-group-editor-container .no-padding{padding:0!important}.core-form-group-editor-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: FormMetadataComponent, selector: "form-metadata" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "component", type: LiveFormComponent, selector: "live-form", inputs: ["$designMode", "$forKickOff", "$workflowReactContext"], outputs: ["$onClose"] }, { kind: "directive", type: HtmlTooltipDirective, selector: "[htmlTooltip]", inputs: ["htmlTooltip", "tooltipContext", "maxWidthUnset", "backgroundColor"] }], animations: [slideFromTopFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormGroupEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-form-group-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgStyle,
+                        AsyncPipe,
+                        NgTemplateOutlet,
+                        CoreFormArrayLayoutEditorComponent,
+                        CoreToastLoadingComponent,
+                        CorePageHeaderComponent,
+                        FormMetadataComponent,
+                        ReactiveFormsModule,
+                        TranslatePipe,
+                        TableCellPipe,
+                        TooltipDirective,
+                        HotKeysDirective,
+                        CoreFormComponent,
+                        CoreControlComponent,
+                        CoreDropdownComponent,
+                        CoreChecklistComponent,
+                        CoreFormControlSeekerComponent,
+                        CoreCheckboxComponent,
+                        CoreAttachmentComponent,
+                        CoreDatePickerComponent,
+                        CoreRadioGroupComponent,
+                        CoreMonthSelectorComponent,
+                        TooltipDirective,
+                        CoreCurrencyInputComponent,
+                        FieldSettingComponent,
+                        LiveFormComponent,
+                        HtmlTooltipDirective,
+                    ], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-group-editor-container\">\r\n\r\n    <div class=\"form-design-right\">\r\n\r\n        @if (coreFormDesignService.$mode() === enumType.Default) {\r\n            <div class=\"form-wrapper\">\r\n\r\n                @if (!$isNested() && !!coreFormDesignService.$isInWorkflowDesign()) {\r\n                    <form-metadata></form-metadata>\r\n                }\r\n\r\n                <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n                <div class=\"form-cells\">    \r\n\r\n                    <div class=\"form-tool-bar\">\r\n                        @if (!$isNested() && !$hasCalculatedSection()) {\r\n                            <button class=\"core-button-vns-container\" (click)=\"addCalculatedSection()\">+ Calculated fields</button>\r\n                        }\r\n                        <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n                    </div>\r\n    \r\n                    @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n                        <div class=\"form-section-placeholder\">\r\n\r\n                          <div class=\"section-header\">\r\n\r\n                            <div class=\"section-img-wrapper\">\r\n                                <div class=\"section-img\" [class.calculated]=\"section.forCalculatedFields\"></div>\r\n                            </div>\r\n\r\n                            <label [attr.contenteditable]=\"!section.forCalculatedFields\"\r\n                                [htmlTooltip]=\"!!section.forCalculatedFields ? calculatedFieldsTooltip : null\"\r\n                                (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n                                (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n                            >{{ section.caption }}</label>\r\n\r\n                            <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n                                <i class=\"feather-x\"></i>\r\n                            </div>\r\n                            \r\n                          </div>\r\n                      \r\n                          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n                            <div class=\"form-row-wrapper\">\r\n                                <div class=\"form-row\">\r\n                                    @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n                                      <div class=\"form-cell drop-target\" \r\n                                           [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n                                           [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n                                           (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n                                           (dragover)=\"onDragOver($event, section, cell.control!)\"\r\n                                           (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           [class.selected]=\"cell?.selected\"\r\n                                           [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n                                           [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n                                           (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n                                      >\r\n\r\n\r\n                                        @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n                                            @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n                                                <label contenteditable=\"true\"\r\n                                                    (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n                                                    (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n                                                    [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n                                                    [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n                                                >{{ cell.control.label || 'label' }}</label>\r\n\r\n                                                @if (cell.control.controlType==='CALCULATED') {\r\n                                                <div class=\"control-wrapper\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\">\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                </div>\r\n                                                } @else {\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                }\r\n    \r\n                                                <div class=\"field-toolbar\">\r\n                                                    <ul>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n                                                                <i class=\"feather-settings\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"deleteField(row, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n                                                                <i class=\"feather-x\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                    </ul>\r\n                                                </div>\r\n        \r\n                                                } @else {\r\n                                                    <div class=\"calculated-placeholder\" [class.calculated]=\"!!section.forCalculatedFields\">\r\n                                                        {{ !!section.forCalculatedFields ? 'Drop calculated field here' : 'Drop here'}}\r\n                                                    </div>\r\n                                                }\r\n\r\n                                              @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n                                                <div class=\"merge-toolbar\">\r\n                                                    <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n                                                </div>\r\n                                              }\r\n    \r\n                                        }\r\n\r\n                                      </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row-tool-bar\">\r\n                                    <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n                                </div>\r\n                            </div>\r\n\r\n                          }\r\n                        </div>\r\n                    }\r\n                      \r\n              \r\n                </div>\r\n                </form>\r\n            </div>\r\n        } @else if (!!$sections()) {\r\n\r\n            @if(!!(injectedFields$ | async) && !!(injectedFields$ | async)!.length) {\r\n\r\n                @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" />\r\n                } @else {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" ($onClose)=\"closePreview()\" />\r\n                }\r\n\r\n            } @else {\r\n                <h2>COULD NOT UPDATE injectedFields$</h2>\r\n            }\r\n\r\n        } @else {\r\n            <h2>$sections() empty / null / undefined</h2>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<ng-template #calculatedFieldsTooltip>\r\n    <div style=\"max-width: 280px;\">\r\n        <strong>Calculated Fields</strong><br />\r\n        <p></p>\r\n        These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n        - They are computed automatically during workflow execution.<br />\r\n        - Each field depends on one or more standard input fields.<br />\r\n        - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n        These results can be used to influence workflow logic, rule trees, or approval paths.\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n ", styles: ["@charset \"UTF-8\";.core-form-group-editor-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-group-editor-container .core-button-vns-container{margin-right:8px!important}.core-form-group-editor-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-group-editor-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-group-editor-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-group-editor-container *{border-radius:0}.core-form-group-editor-container ul,.core-form-group-editor-container li{padding:0}.core-form-group-editor-container li{max-width:200px}.core-form-group-editor-container ul div.space{display:block;height:15px}.core-form-group-editor-container li.full-width{max-width:100%}.core-form-group-editor-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-group-editor-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-group-editor-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.core-form-group-editor-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-group-editor-container .field-setting-panel.calculated-type{width:500px;right:-500px}.core-form-group-editor-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.core-form-group-editor-container .field-setting-panel.open{right:0}.core-form-group-editor-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;overflow-y:hidden}.core-form-group-editor-container .form-design-left .category-name{color:#fff}.core-form-group-editor-container .form-design-left .grid-buffer-wrapper{background-color:#fff;padding:15px}.core-form-group-editor-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-group-editor-container .form-design-left .category-name{margin-bottom:15px}.core-form-group-editor-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 205px)}.core-form-group-editor-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-group-editor-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-group-editor-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));overflow-y:auto}.core-form-group-editor-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-group-editor-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-group-editor-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-group-editor-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-group-editor-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .calculated-placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .calculated-placeholder.calculated{color:#ff4500}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-group-editor-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-group-editor-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-group-editor-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-group-editor-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-group-editor-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-group-editor-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-group-editor-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-group-editor-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-group-editor-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-group-editor-container .no-padding{padding:0!important}.core-form-group-editor-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"] }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }] });
+
+class CoreFormArrayLayoutEditorComponent {
+    constructor() {
+        this.checkError$ = new BehaviorSubject(false);
+        this.coreFormDesignService = inject(CoreFormDesignService);
+        this.$sections = this.coreFormDesignService.$nestedDesignSections;
+        this.form = this.coreFormDesignService.formDesign;
+    }
+    onClose() {
+        this.coreFormDesignService.$showFormArrayDesign.set(false);
+    }
+    onMiniDrop(event, sectionIndex, rowIndex, colIndex) {
+        const rawData = event?.dataTransfer?.getData('application/json');
+        if (rawData) {
+            const control = JSON.parse(rawData);
+            // clone control để tránh mutate template gốc
+            const newControl = structuredClone(control);
+            // insert vào đúng chỗ
+            const current = this.$sections();
+            if (!current)
+                return;
+            current[sectionIndex].rows[rowIndex][colIndex] = newControl;
+            // trigger signal cập nhật
+            this.$sections.set([...current]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormArrayLayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: CoreFormArrayLayoutEditorComponent, isStandalone: true, selector: "core-form-array-layout-editor", ngImport: i0, template: "<div class=\"core-form-array-layout-editor-container\">\r\n\r\n\r\n  <div class=\"modal-container\">\r\n    <div class=\"modal-content-root\">\r\n\r\n      <div class=\"layout-header\">\r\n        DESIGN FORM ARRAY LAYOUT\r\n        <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"onClose()\">\u2716</button>\r\n      </div>\r\n\r\n      <div class=\"layout-body\">\r\n        <div class=\"json-holder\">\r\n          <pre>{{ coreFormDesignService.$currentControlJson() }}</pre>\r\n        </div>\r\n        <div class=\"palete\">\r\n          <core-form-array-control-palette />\r\n        </div>\r\n        <div class=\"sections-holder\">\r\n          <core-form-group-editor [$idAsInput]=\"true\" [$isNested]=\"true\"/>\r\n        </div>\r\n        <div class=\"field-setting-holder\">\r\n          <field-setting [$isNested]=\"true\"></field-setting>\r\n        </div>\r\n       \r\n        <!-- @for (section of $sections(); track $index; let sectionIndex = $index) {\r\n        <div class=\"section-card\">\r\n          <div class=\"section-caption\">{{ section.caption || 'Untitled Section' }}</div>\r\n\r\n          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n          <div class=\"row\">\r\n            @for (control of row; track $index; let colIndex = $index) {\r\n              <div\r\n                class=\"form-cell mini-drop-target\"\r\n                [attr.data-index]=\"$index\"\r\n                miniDropTarget\r\n                (miniDropped)=\"onMiniDrop($event, sectionIndex, rowIndex, colIndex)\"\r\n              >\r\n                <core-control-no-form-array\r\n                  [control]=\"control\"\r\n                  [form]=\"form\"\r\n                  [checkError$]=\"checkError$\"\r\n                />\r\n              </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n        } -->\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n</div>", styles: [".core-form-array-layout-editor-container{height:100%;width:100vw;display:flex;flex-direction:column}.layout-header{display:flex;justify-content:space-between;align-items:center;padding:15px;height:50px;background:#f7f7f7;border-bottom:1px solid #ddd;transform:translate(-15px,-15px);width:calc(100% + 30px);font-size:20px}.layout-body{display:flex;vertical-align:top}.layout-body .json-holder,.layout-body .palete{width:240px;display:inline-block}.layout-body .sections-holder{width:480px;display:inline-block}.layout-body .field-setting-holder{width:360px;display:inline-block}.layout-footer{padding:1rem;border-top:1px solid #ddd;text-align:right}\n"], dependencies: [{ kind: "component", type: CoreFormArrayControlPaletteComponent, selector: "core-form-array-control-palette" }, { kind: "component", type: CoreFormGroupEditorComponent, selector: "core-form-group-editor", inputs: ["$isNested", "$idAsInput", "$id"] }, { kind: "component", type: FieldSettingComponent, selector: "field-setting", inputs: ["$isNested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormArrayLayoutEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-form-array-layout-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CoreControlNoFormArrayComponent,
+                        CoreFormArrayControlPaletteComponent,
+                        CoreFormGroupEditorComponent,
+                        FieldSettingComponent
+                    ], template: "<div class=\"core-form-array-layout-editor-container\">\r\n\r\n\r\n  <div class=\"modal-container\">\r\n    <div class=\"modal-content-root\">\r\n\r\n      <div class=\"layout-header\">\r\n        DESIGN FORM ARRAY LAYOUT\r\n        <button class=\"btn btn-sm btn-outline-secondary\" (click)=\"onClose()\">\u2716</button>\r\n      </div>\r\n\r\n      <div class=\"layout-body\">\r\n        <div class=\"json-holder\">\r\n          <pre>{{ coreFormDesignService.$currentControlJson() }}</pre>\r\n        </div>\r\n        <div class=\"palete\">\r\n          <core-form-array-control-palette />\r\n        </div>\r\n        <div class=\"sections-holder\">\r\n          <core-form-group-editor [$idAsInput]=\"true\" [$isNested]=\"true\"/>\r\n        </div>\r\n        <div class=\"field-setting-holder\">\r\n          <field-setting [$isNested]=\"true\"></field-setting>\r\n        </div>\r\n       \r\n        <!-- @for (section of $sections(); track $index; let sectionIndex = $index) {\r\n        <div class=\"section-card\">\r\n          <div class=\"section-caption\">{{ section.caption || 'Untitled Section' }}</div>\r\n\r\n          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n          <div class=\"row\">\r\n            @for (control of row; track $index; let colIndex = $index) {\r\n              <div\r\n                class=\"form-cell mini-drop-target\"\r\n                [attr.data-index]=\"$index\"\r\n                miniDropTarget\r\n                (miniDropped)=\"onMiniDrop($event, sectionIndex, rowIndex, colIndex)\"\r\n              >\r\n                <core-control-no-form-array\r\n                  [control]=\"control\"\r\n                  [form]=\"form\"\r\n                  [checkError$]=\"checkError$\"\r\n                />\r\n              </div>\r\n            }\r\n          </div>\r\n          }\r\n        </div>\r\n        } -->\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n</div>", styles: [".core-form-array-layout-editor-container{height:100%;width:100vw;display:flex;flex-direction:column}.layout-header{display:flex;justify-content:space-between;align-items:center;padding:15px;height:50px;background:#f7f7f7;border-bottom:1px solid #ddd;transform:translate(-15px,-15px);width:calc(100% + 30px);font-size:20px}.layout-body{display:flex;vertical-align:top}.layout-body .json-holder,.layout-body .palete{width:240px;display:inline-block}.layout-body .sections-holder{width:480px;display:inline-block}.layout-body .field-setting-holder{width:360px;display:inline-block}.layout-footer{padding:1rem;border-top:1px solid #ddd;text-align:right}\n"] }]
+        }] });
+
+class CoreFormDesignComponent extends BaseComponent {
+    constructor(mls) {
+        super(mls);
+        this.mls = mls;
+        this.$idAsInput = input();
+        this.$id = input();
+        this.$settingPanel = viewChild('settingPanel');
+        this.$jsonMode = signal('selectedField');
+        this.injectedFields$ = new BehaviorSubject([]);
+        this.enumType = EnumFormDesignMode;
+        this.enumLeftPanelMode = EnumLeftPanelMode;
+        this.$leftPanelMode = computed(() => {
+            if (this.coreFormDesignService.$fieldSettingPanelOpen()) {
+                return this.enumLeftPanelMode.Json;
+            }
+            else {
+                return this.enumLeftPanelMode.FieldCollection;
+            }
+        });
+        this.ds = inject(DomService);
+        this.js = inject(JsonService);
+        this.$zIndex = computed(() => {
+            if (this.coreFormDesignService.$fieldSettingPanelOpen()) {
+                return this.ds.getMaxZIndex() + 1;
+            }
+            else {
+                return 0;
+            }
+        });
+        this.previewMode$ = new BehaviorSubject(EnumCorePageEditMode.CREATE);
+        this.$loading = signal(false);
+        this.coreFormDesignService = inject(CoreFormDesignService);
+        this.renderer = inject(Renderer2);
+        this.cdr = inject(ChangeDetectorRef);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.alertService = inject(AlertService);
+        this.applicationHelpService = inject(ApplicationHelpService);
+        this.wfs = inject(CoreWorkflowService);
+        this.dbs = inject(DbService);
+        this.appConfigService = inject(AppConfigService);
+        this.$hasCalculatedSection = computed(() => {
+            return this.coreFormDesignService.$placeholderSections().some(s => !!s.forCalculatedFields);
+        });
+        this.formDesign = this.coreFormDesignService.formDesign;
+        this.setControlProp = this.coreFormDesignService.setControlProp.bind(this.coreFormDesignService);
+        this.isDragOverMap = {};
+        this.idStream$ = new BehaviorSubject(undefined);
+        this.getByIdStream$ = this.idStream$.pipe(filter(id => !!id && id !== '0'), distinctUntilChanged(), tap(() => {
+            this.$loading.set(true);
+            this.coreFormDesignService.editMode$.next(EnumCorePageEditMode.UPDATE);
+            this.coreFormDesignService.$submitText.set(EnumTranslateKey.UI_EDIT_FORM_BUTTON_SAVE);
+        }), switchMap(id => {
+            return this.coreFormDesignService.getById(id)
+                .pipe(catchError(err => {
+                this.$loading.set(false);
+                return of(err);
+            }));
+        }));
+        this.form = new FormGroup({
+            stringBox: new FormControl(),
+            timeBox: new FormControl(),
+            email: new FormControl(),
+            textarea: new FormControl(),
+            number: new FormControl(),
+            currency: new FormControl(),
+            dropdown: new FormControl(),
+            employeeSeeker: new FormControl(),
+            checklist: new FormControl(),
+            employeeSeekerMultiple: new FormControl(),
+            datePicker: new FormControl(),
+            monthSelector: new FormControl(),
+            attachment: new FormControl(),
+            attachmentBuffer: new FormControl(),
+            checkbox: new FormControl(),
+            calculated: new FormControl(),
+            formArray: new FormArray([
+                new FormControl('')
+            ])
+        });
+        this.$sections = computed(() => {
+            const hydrated = this.coreFormDesignService.rehydrateSections(this.coreFormDesignService.$placeholderSections());
+            let sections = this.coreFormDesignService.toCoreFormSections(hydrated);
+            // ✅ Inject hidden "id" field into the first cell row of the first section
+            sections = this.coreFormDesignService.injectSystemControls(sections, this.coreFormDesignService.$afInstance().hasIdOfStringType ?? false);
+            return sections;
+        });
+        this.checkError$ = new BehaviorSubject(false);
+        this.controlCategories = [
+            {
+                name: 'Calculated fields',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.CALCULATED,
+                        type: 'calculated',
+                        field: 'calculated',
+                        label: '',
+                        value: '',
+                        placeholder: 'Calculated',
+                        headless: true,
+                    }
+                ]
+            },
+            {
+                name: 'Text',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.TEXTBOX,
+                        type: 'string',
+                        field: 'stringBox',
+                        label: '',
+                        value: '',
+                        placeholder: 'String box',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.TEXTBOX,
+                        type: 'email',
+                        field: 'email',
+                        label: '',
+                        value: '',
+                        placeholder: 'Email',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.TEXTAREA,
+                        type: 'string',
+                        field: 'textarea',
+                        label: '',
+                        value: '',
+                        textareaRows: 2,
+                        placeholder: 'Text area',
+                        headless: true,
+                    }
+                ]
+            },
+            {
+                name: 'Numerical',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.TEXTBOX,
+                        type: 'number',
+                        field: 'number',
+                        label: '',
+                        value: 100,
+                        placeholder: 'Number',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.CURRENCY,
+                        type: 'number',
+                        field: 'currency',
+                        label: '',
+                        value: '',
+                        placeholder: 'Currency',
+                        headless: true,
+                    },
+                ]
+            },
+            {
+                name: 'Single selection',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.DROPDOWN,
+                        type: 'any',
+                        field: 'dropdown',
+                        label: '',
+                        value: '',
+                        dropdownOptions$: new BehaviorSubject([]),
+                        shownFrom: 'name',
+                        getByIdObject$: new BehaviorSubject({}),
+                        placeholder: 'Dropdown',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.SEEKER,
+                        seekerSourceType: EnumCoreFormControlSeekerSourceType.EMPLOYEE_SEEK,
+                        type: 'any[]',
+                        field: 'employeeSeeker',
+                        label: '',
+                        value: ['Nguyễn A'],
+                        boundFrom: 'id',
+                        shownFrom: 'fullname',
+                        getByIdObject$: new BehaviorSubject({}),
+                        placeholder: 'Employee seeker',
+                        headless: true,
+                    }
+                ]
+            },
+            {
+                name: 'Multiple Selection',
+                controls: [
+                    // {
+                    //   flexSize: 12,
+                    //   controlType: EnumFormBaseContolType.GRIDBUFFER,
+                    //   type: 'children',
+                    //   field: 'gridbuffer',
+                    //   label: '',
+                    //   value: [],
+                    //   placeholder: 'Grid buffer',
+                    //   gridBufferFormSections: [
+                    //     {
+                    //       rows: [
+                    //         [
+                    //           {
+                    //             flexSize: 6,
+                    //             field: 'field1',
+                    //             type: 'date',
+                    //             value: '',
+                    //             controlType: EnumFormBaseContolType.DATEPICKER,
+                    //             label: 'field 1'
+                    //           },
+                    //           {
+                    //             flexSize: 6,
+                    //             field: 'field2',
+                    //             type: 'number',
+                    //             value: null,
+                    //             controlType: EnumFormBaseContolType.TEXTBOX,
+                    //             label: 'field 2'
+                    //           },
+                    //         ]
+                    //       ]
+                    //     }
+                    //   ],
+                    //   gridBufferTableColumns: [
+                    //     {
+                    //       caption: 'id',
+                    //       field: 'id',
+                    //       hidden: true,
+                    //       type: 'string',
+                    //       align: 'left',
+                    //       width: 0,
+                    //     },
+                    //     {
+                    //       field: 'field1',
+                    //       width: 200,
+                    //       caption: 'field 1',
+                    //       type: 'date',
+                    //       pipe: EnumCoreTablePipeType.DATE,
+                    //       align: 'center'
+                    //     },
+                    //     {
+                    //       field: 'field2',
+                    //       width: 100,
+                    //       caption: 'field 2',
+                    //       type: 'number',
+                    //       align: 'right'
+                    //     },
+                    //   ],
+                    //   headless: true,
+                    //   tableHeight: 100,
+                    //   liteMode: true,
+                    // },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.CHECKLIST,
+                        type: 'any[]',
+                        field: 'checklist',
+                        label: '',
+                        value: [],
+                        checklistOptions$: new BehaviorSubject([]),
+                        shownFrom: 'name',
+                        getByIdObject$: new BehaviorSubject({}),
+                        placeholder: 'Check list',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.SEEKER,
+                        seekerSourceType: EnumCoreFormControlSeekerSourceType.EMPLOYEE_SEEK,
+                        multiMode: true,
+                        type: 'any[]',
+                        field: 'employeeSeekerMultiple',
+                        label: '',
+                        value: [],
+                        objectList$: new BehaviorSubject([]),
+                        boundFrom: 'id',
+                        shownFrom: 'fullname',
+                        getByIdObject$: new BehaviorSubject({}),
+                        multiModeTableHeight: 100,
+                        placeholder: 'Employee seeker (multi mode)',
+                        headless: true,
+                    }
+                ]
+            },
+            {
+                name: 'Date',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.DATEPICKER,
+                        type: 'date',
+                        field: 'datePicker',
+                        label: '',
+                        value: '',
+                        placeholder: 'Date picker',
+                        showPlaceholder: true,
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.TEXTBOX,
+                        type: 'time',
+                        field: 'timeBox',
+                        label: '',
+                        value: null,
+                        placeholder: 'Time box',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.MONTHSELECTOR,
+                        type: 'string',
+                        field: 'monthSelector',
+                        label: '',
+                        value: '',
+                        placeholder: 'Month selector',
+                        headless: true,
+                    },
+                ]
+            },
+            {
+                name: 'Other',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.ATTACHMENT,
+                        type: 'string',
+                        field: 'attachment',
+                        label: '',
+                        value: '',
+                        assignTo: 'unknown',
+                        placeholder: 'Attachment',
+                        headless: true,
+                    },
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.CHECKBOX,
+                        type: 'boolean',
+                        field: 'checkbox',
+                        label: '',
+                        value: '',
+                        placeholder: 'Checkbox',
+                        headless: true,
+                    },
+                ]
+            },
+            {
+                name: 'Form Array',
+                controls: [
+                    {
+                        flexSize: 12,
+                        controlType: EnumFormBaseContolType.FORM_ARRAY,
+                        type: 'children',
+                        field: 'formArray',
+                        label: '',
+                        value: '',
+                        placeholder: 'FormArray',
+                        headless: true,
+                        childrenSections: [
+                            {
+                                rows: [
+                                    [
+                                        {
+                                            field: 'textBox',
+                                            flexSize: 12,
+                                            controlType: EnumFormBaseContolType.TEXTBOX,
+                                            type: 'text',
+                                            value: '',
+                                            label: ''
+                                        }
+                                    ]
+                                ]
+                            }
+                        ]
+                    },
+                ]
+            },
+        ];
+        /*
+        onDropIntoCell(event: DragEvent, sectionIndex: number, rowIndex: number, colIndex: number): void {
+          event.preventDefault();
+          const template = this.coreFormDesignService.$currentControlTemplate();
+          if (!template) return;
+      
+          const section = this.coreFormDesignService.$placeholderSections()[sectionIndex];
+          if (!section.forCalculatedFields && template.type === 'calculated') return;
+          if (!!section.forCalculatedFields && template.type !== 'calculated') return;
+      
+          const normalized = this.coreFormDesignService.normalize({
+            ...template,
+            field: this.generateFieldNameFor(template),
+            label: this.generateLabelNameFor(template),
+            value: null
+          });
+      
+          if (normalized.controlType === EnumFormBaseContolType.CALCULATED) {
+            normalized.returnType = 'number'
+          }
+      
+          this.coreFormDesignService.$placeholderSections.update(sections => {
+            const section = sections[sectionIndex];
+            const row = section?.rows[rowIndex];
+            if (!row || row.cells.length <= colIndex) return sections;
+      
+            const usedFlex = row.cells.reduce((sum, cell) => sum + (cell?.control?.flexSize ?? 0), 0);
+            const remainingFlex = 12 - usedFlex;
+            const flexSize = Math.max(1, remainingFlex);
+            normalized.flexSize = flexSize;
+      
+            const previous = row.cells[colIndex]?.control;
+      
+            if (previous && previous.flexSize !== undefined) {
+              
+              // AttachmentFieldHelperService.handleAttachmentOverwrite(
+              //   previous as IFormBaseControl,
+              //   this.coreFormDesignService.getAllControlsFromSections()
+              // );
+      
+            }
+      
+            const previousField = row.cells[colIndex]?.control?.field ?? null;
+            this.coreFormDesignService.replaceControl(previousField, normalized);
+      
+            // 🔹 INSERT FIRST
+            row.cells[colIndex] = { ...row.cells[colIndex], control: normalized };
+            this.coreFormDesignService.$selectedCell.set(row.cells[colIndex]);
+      
+            // 🔹 THEN CALL setup
+            if (AttachmentFieldHelperService.isAttachment(normalized)) {
+              const assignToField = AttachmentFieldHelperService.buildHiddenAssignToField(normalized.field);
+              normalized.field = `${normalized.field}Buffer`
+              normalized.assignTo = assignToField.field;
+              AttachmentFieldHelperService.injectAssignToFieldIntoRow(row, assignToField);
+            }
+      
+      
+            setTimeout(() => {
+              this.coreFormDesignService.setControlPropDirectly(
+                'validators',
+                normalized.validators ?? [],
+                normalized
+              );
+            });
+      
+            return sections;
+          });
+      
+          this.triggerUpdateSections();
+          this.isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex] = false;
+          this.coreFormDesignService.endDrag();
+          this.openSettingsForCell(this.coreFormDesignService.$selectedCell()!, sectionIndex, rowIndex, colIndex)
+        }
+          */
+        this.generateFieldNameFor = this.coreFormDesignService.generateFieldNameFor.bind(this.coreFormDesignService);
+        this.generateLabelNameFor = this.coreFormDesignService.generateLabelNameFor.bind(this.coreFormDesignService);
+        this.getAllControlsFromSections = this.coreFormDesignService.getAllControlsFromSections.bind(this.coreFormDesignService);
+        this.getControl = this.coreFormDesignService.getControl.bind(this.coreFormDesignService);
+        this.filteredCells = this.coreFormDesignService.filteredCells;
+        this.coreFormDesignService.resetFormDesignState();
+        effect(() => {
+            const _ = this.coreFormDesignService.$placeholderSections();
+            this.syncFormDesignWithSections();
+        });
+        effect(() => {
+            this.idStream$.next(this.$id());
+        });
+        this.applicationHelpService.activeKey$.pipe(distinctUntilChanged()).subscribe(x => {
+            switch (x) {
+                case 'F3':
+                    this.coreFormDesignService.$fieldSettingPanelOpen.set(true);
+                    break;
+                case 'F6':
+                    this.coreFormDesignService.$mode.set(EnumFormDesignMode.Preview);
+                    break;
+                case 'Escape':
+                    this.coreFormDesignService.$fieldSettingPanelOpen.set(false);
+                    this.coreFormDesignService.$mode.set(EnumFormDesignMode.Default);
+                    break;
+            }
+        });
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
+        if (this.appConfigService.WORKFLOW_ENABLE_DEBUG_MODE) {
+            this.injectedFields$.next([
+                {
+                    field: '___submitterEmployeeId',
+                    flexSize: 12,
+                    type: 'number',
+                    controlType: EnumFormBaseContolType.SEEKER,
+                    seekerSourceType: EnumCoreFormControlSeekerSourceType.EMPLOYEE_SEEK,
+                    getByIdApi: '',
+                    getByIdObject$: new BehaviorSubject({}),
+                    label: 'Simulated Requester',
+                    boundFrom: 'id',
+                    shownFrom: 'fullname',
+                    value: null,
+                },
+                {
+                    field: "___reason",
+                    type: "text",
+                    value: '',
+                    label: "UI_FORM_CONTROL_LABEL.REASON",
+                    flexSize: 12,
+                    controlType: EnumFormBaseContolType.TEXTAREA,
+                    textareaRows: 5,
+                    validators: [
+                        {
+                            name: 'required',
+                            validator: Validators.required,
+                            errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_REQUIRED
+                        }
+                    ],
+                }
+            ]);
+        }
+        else {
+            this.injectedFields$.next([
+                {
+                    field: "___reason",
+                    type: "text",
+                    value: '',
+                    label: "UI_FORM_CONTROL_LABEL.REASON",
+                    flexSize: 12,
+                    controlType: EnumFormBaseContolType.TEXTAREA,
+                    textareaRows: 5,
+                    validators: [
+                        {
+                            name: 'required',
+                            validator: Validators.required,
+                            errorMessage: EnumTranslateKey.UI_FORM_CONTROL_ERROR_REQUIRED
+                        }
+                    ],
+                }
+            ]);
+        }
+    }
+    switchJson() {
+        if (this.$jsonMode() === 'full') {
+            this.$jsonMode.set('selectedField');
+        }
+        else {
+            this.$jsonMode.set('full');
+        }
+    }
+    onDragStart(event, control) {
+        this.coreFormDesignService.beginDragTemplate(control);
+    }
+    onDragOver(event, section, control) {
+        event.preventDefault(); // necessary to allow drop
+        if ((!!section.forCalculatedFields && this.coreFormDesignService.$draggingControl()?.type === 'calculated') ||
+            (!section.forCalculatedFields && this.coreFormDesignService.$draggingControl()?.type !== 'calculated')) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+        else {
+            event.dataTransfer.dropEffect = 'none';
+        }
+    }
+    onDragEnter(placeholderId) {
+        this.isDragOverMap[placeholderId] = true;
+    }
+    onDragLeave(placeholderId) {
+        this.isDragOverMap[placeholderId] = false;
+    }
+    addCalculatedSection() {
+        this.coreFormDesignService.$placeholderSections.update(sections => [
+            {
+                caption: `Calculated Section`,
+                forCalculatedFields: true,
+                hidden: true,
+                rows: [{ cells: [{ flexSize: 12 }] }]
+            },
+            ...sections,
+        ]);
+    }
+    addSection() {
+        this.coreFormDesignService.$placeholderSections.update(sections => [
+            ...sections,
+            {
+                caption: `Section ${sections.length + 1}`,
+                rows: [{ cells: [{ flexSize: 12 }] }]
+            }
+        ]);
+    }
+    deleteSection(sectionIndex) {
+        const sections = this.coreFormDesignService.$placeholderSections();
+        const section = sections[sectionIndex];
+        const hasControls = section?.rows?.some(row => row?.cells?.some(cell => !!cell?.control));
+        if (hasControls) {
+            const confirmed = confirm('This section contains controls. Are you sure you want to delete it?');
+            if (!confirmed)
+                return;
+        }
+        this.coreFormDesignService.$placeholderSections.update(prev => prev.filter((_, idx) => idx !== sectionIndex));
+    }
+    deleteRow(sectionIndex, rowIndex) {
+        const sections = this.coreFormDesignService.$placeholderSections();
+        const section = sections[sectionIndex];
+        const row = section?.rows?.[rowIndex];
+        if (!row)
+            return; // safety check
+        const hasControls = row.cells?.some(cell => !!cell?.control);
+        if (hasControls) {
+            const confirmed = confirm('This row contains controls. Are you sure you want to delete it?');
+            if (!confirmed)
+                return; // user canceled
+        }
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            return sections.map((section, sIdx) => {
+                if (sIdx !== sectionIndex)
+                    return section;
+                return {
+                    ...section,
+                    rows: (section.rows ?? []).filter((_, rIdx) => rIdx !== rowIndex)
+                };
+            });
+        });
+    }
+    addRow(sectionIndex) {
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            const section = sections[sectionIndex];
+            if (section) {
+                section.rows.push({ cells: [{ flexSize: 12 }] });
+            }
+            return sections;
+        });
+    }
+    addColumn(row) {
+        if (!row || row.cells.length >= 4)
+            return;
+        const usedFlex = row.cells.reduce((sum, c) => sum + (c.flexSize ?? 0), 0);
+        // ✅ Case 1: Normal case – still space available
+        if (usedFlex < 12) {
+            const remaining = 12 - usedFlex;
+            row.cells.push({ flexSize: Math.min(3, remaining) });
+            return;
+        }
+        // 💥 Case 2: Full row — try to rebalance
+        if (usedFlex === 12) {
+            const count = row.cells.length;
+            if (count === 1) {
+                // 12 → 6 + 6
+                row.cells[0].flexSize = 6;
+                row.cells.push({ flexSize: 6 });
+                return;
+            }
+            if (count === 2) {
+                // 6 + 6 → 4 + 4 + 4
+                row.cells.forEach(c => (c.flexSize = 4));
+                row.cells.push({ flexSize: 4 });
+                return;
+            }
+            if (count === 3) {
+                // 4 + 4 + 4 → 3 + 3 + 3 + 3
+                row.cells.forEach(c => (c.flexSize = 3));
+                row.cells.push({ flexSize: 3 });
+                return;
+            }
+            // ❌ Already 4 cells, each 3 — can’t split further
+            return;
+        }
+        // 🔧 Optional fallback logic for unknown edge cases
+        const maxIndex = row.cells.reduce((maxI, c, i, arr) => (c.flexSize ?? 0) > (arr[maxI]?.flexSize ?? 0) ? i : maxI, 0);
+        const maxCell = row.cells[maxIndex];
+        if ((maxCell?.flexSize ?? 0) <= 3)
+            return; // nothing to shrink
+        maxCell.flexSize -= 3;
+        row.cells.push({ flexSize: 3 });
+    }
+    onCorePageHeaderButtonClicked(e) {
+        if (e.code === EnumCoreButtonVNSCode.HEADER_SWITCH_VIEW) {
+            if (this.coreFormDesignService.$mode() === EnumFormDesignMode.Default) {
+                const sections = this.coreFormDesignService.toCoreFormSections(this.coreFormDesignService.$placeholderSections());
+                this.coreFormDesignService.$liveFormSections.set(sections);
+            }
+            setTimeout(() => this.coreFormDesignService.$mode.set(this.coreFormDesignService.$mode() === EnumFormDesignMode.Preview ? EnumFormDesignMode.Default : EnumFormDesignMode.Preview));
+        }
+        else if (e.code === EnumCoreButtonVNSCode.HEADER_SAVE) {
+        }
+    }
+    closePreview() {
+        this.coreFormDesignService.$mode.set(EnumFormDesignMode.Default);
+    }
+    onPreviewSubmit(e) {
+        alert(JSON.stringify(e, null, 2));
+    }
+    onCellClicked(sectionIndex, rowIndex, colIndex) {
+        const row = this.coreFormDesignService.$placeholderSections()[sectionIndex].rows[rowIndex];
+        if (!!row) {
+            // Toggle selection
+            if (!!row.cells && row.cells.length > colIndex) {
+                row.cells[colIndex].selected = !row.cells[colIndex].selected;
+            }
+            // Only allow max 2 selections
+            const selected = row.cells.filter(c => c?.selected);
+            if (selected.length > 2) {
+                row.cells.forEach(c => c && (c.selected = false));
+                row[colIndex].selected = true;
+            }
+        }
+    }
+    canMergeCells(sectionIndex, rowIndex) {
+        const row = this.coreFormDesignService.$placeholderSections()[sectionIndex].rows[rowIndex];
+        const selected = row?.cells.map((c, i) => ({ c, i })).filter(x => x.c?.selected);
+        if (selected?.length !== 2)
+            return false;
+        const [a, b] = selected;
+        if (a.c.control || b.c.control)
+            return false;
+        return Math.abs(a.i - b.i) === 1; // Must be neighbors
+    }
+    mergeCells(sectionIndex, rowIndex) {
+        const row = this.coreFormDesignService.$placeholderSections()[sectionIndex].rows[rowIndex];
+        if (!row)
+            return;
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            const selected = row.cells
+                .map((c, i) => ({ c, i }))
+                .filter(x => x.c?.selected);
+            if (selected.length !== 2)
+                return sections;
+            const [a, b] = selected.sort((a, b) => a.i - b.i);
+            const mergedFlex = (typeof a.c.flexSize === 'number' ? a.c.flexSize : 3) +
+                (typeof b.c.flexSize === 'number' ? b.c.flexSize : 3);
+            const mergedCell = {
+                //control: { ...a.c.control, flexSize: mergedFlex }, // keep control data
+                flexSize: mergedFlex,
+                selected: false
+            };
+            row.cells.splice(a.i, 2, mergedCell); // replace both cells with one
+            return sections;
+        });
+    }
+    openSettingsForCell(cell, sectionIndex, rowIndex, colIndex) {
+        this.coreFormDesignService.$sectionIndex.set(sectionIndex);
+        this.coreFormDesignService.$rowIndex.set(rowIndex);
+        this.coreFormDesignService.$colIndex.set(colIndex);
+        this.coreFormDesignService.$selectedCell.set({ ...cell });
+        this.coreFormDesignService.$fieldSettingPanelOpen.set(true);
+    }
+    deleteField(row, sectionIndex, rowIndex, colIndex) {
+        if (!row)
+            return;
+        const dCell = row.cells[colIndex];
+        const currentControl = dCell.control;
+        if (!currentControl)
+            return;
+        const currentPlaceholderSections = this.coreFormDesignService.$placeholderSections();
+        if (!currentPlaceholderSections[sectionIndex].rows[rowIndex])
+            return;
+        currentPlaceholderSections[sectionIndex].rows[rowIndex].cells[colIndex].control = undefined;
+        this.coreFormDesignService.$selectedCell.set(null);
+        this.coreFormDesignService.$placeholderSections.set([...currentPlaceholderSections]);
+    }
+    onCaptionEditEnd(index, event) {
+        const newCaption = event.target.innerText.trim();
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            sections[index].caption = newCaption;
+            return sections;
+        });
+    }
+    onFieldCaptionEditEnd(cell, event) {
+        const element = event.target;
+        const newLabel = element.innerText.trim();
+        // Fallback if empty
+        cell.control.label = newLabel || 'Unnamed Field';
+        this.triggerUpdateSections();
+    }
+    insertSection() {
+    }
+    insertRow(sectionIndex, rowIndex) {
+        const sections = this.coreFormDesignService.$placeholderSections();
+        const section = sections[sectionIndex];
+        if (!section)
+            return;
+        const newRow = {
+            cells: [
+                { flexSize: 12 },
+            ]
+        };
+        section.rows.splice(rowIndex + 1, 0, newRow);
+        this.coreFormDesignService.$placeholderSections.set([...sections]);
+    }
+    closeFieldSettingPanel() {
+        this.coreFormDesignService.$fieldSettingPanelOpen.set(false);
+        this.coreFormDesignService.$selectedCell.set(null);
+        this.coreFormDesignService.$currentControlTemplate.set(null);
+        this.coreFormDesignService.$currentControl.set(null);
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.subscriptions.push(this.getByIdStream$.subscribe(x => {
+                this.$loading.set(false);
+                if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                    this.coreFormDesignService.$afInstance.set(this.coreFormDesignService.mapFromAfInstanceDTO(x.body.innerBody));
+                    this.coreFormDesignService.syncPlaceholderSectionsFromInstance();
+                    this.coreFormDesignService.$shouldPatchMetadataForm.set(true);
+                    const saveLiveJson = this.coreFormDesignService.$saveLiveJson();
+                    setTimeout(() => this.wfs.$initialFormDesignJson.set(saveLiveJson));
+                }
+            }));
+            if (!this.$idAsInput()) {
+                this.subscriptions.push(this.route.params.subscribe(x => {
+                    let id = '0';
+                    try {
+                        id = atob(x['id']);
+                        this.coreFormDesignService.$afInstance.update(instance => ({
+                            ...instance,
+                            id
+                        }));
+                    }
+                    catch (err) {
+                        if (isDevMode()) {
+                            this.alertService.error(err.toString(), noneAutoClosedAlertOptions);
+                        }
+                        return;
+                    }
+                    this.idStream$.next(id);
+                }));
+            }
+            console.warn('InitialFormDesignJson on load', this.wfs.$initialFormDesignJson());
+        });
+    }
+    onControlParamsChange(updated) {
+        this.coreFormDesignService.$placeholderSections.update(sections => {
+            const cell = this.coreFormDesignService.$selectedCell();
+            if (!cell)
+                return sections;
+            // Patch the selected cell
+            Object.assign(cell.control, updated);
+            return sections;
+        });
+    }
+    get normalizedSelectedControl() {
+        const cell = this.coreFormDesignService.$selectedCell();
+        if (!cell?.control) {
+            throw new Error('No control is currently selected.');
+        }
+        return this.coreFormDesignService.normalize(cell.control);
+    }
+    triggerUpdateSections() {
+        const newValue = this.coreFormDesignService.$placeholderSections();
+        this.coreFormDesignService.$placeholderSections.set([...newValue]);
+    }
+    syncFormDesignWithSections() {
+        const existingControls = Object.keys(this.formDesign.controls);
+        const expectedControls = [];
+        for (const section of this.coreFormDesignService.$placeholderSections()) {
+            for (const row of section.rows) {
+                for (const cell of row?.cells || []) {
+                    const control = cell?.control;
+                    if (control?.field) {
+                        expectedControls.push(control.field);
+                        if (!this.formDesign.contains(control.field)) {
+                            this.formDesign.addControl(control.field, new FormControl(control.value ?? null));
+                        }
+                    }
+                }
+            }
+        }
+        // 🧹 Remove controls that no longer exist
+        for (const field of existingControls) {
+            if (!expectedControls.includes(field)) {
+                this.formDesign.removeControl(field);
+            }
+        }
+    }
+    isRequired(control) {
+        if (!control || !control.validators)
+            return false;
+        return control.validators.some((v) => v.name === 'required' || v.name === 'requiredTrue');
     }
     onFormDesignCreated(e) {
         console.log("onFormDesignCreated", e);
@@ -2393,7 +3234,7 @@ class CoreFormDesignComponent extends BaseComponent {
         this.coreFormDesignService.$showFormMetadata.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormDesignComponent, isStandalone: true, selector: "core-form-design", inputs: { $idAsInput: { classPropertyName: "$idAsInput", publicName: "$idAsInput", isSignal: true, isRequired: false, transformFunction: null }, $id: { classPropertyName: "$id", publicName: "$id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "$settingPanel", first: true, predicate: ["settingPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n    <ng-template #formMetadata>\r\n        <form-metadata></form-metadata>\r\n    </ng-template>\r\n\r\n    @if (coreFormDesignService.$showFormArrayDesign()) {\r\n        <core-form-array-layout-editor />\r\n    }\r\n\r\n    @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n        <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n            [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n        >\r\n            <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n        </aside>\r\n    }\r\n\r\n    <div \r\n        class=\"field-setting-panel\" \r\n        [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" \r\n        [class.calculated-type]=\"coreFormDesignService.$selectedCell()?.control?.type==='calculated'\"\r\n        [ngStyle]=\"{ zIndex: $zIndex() }\"\r\n        #settingPanel\r\n    >\r\n        @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n            <field-setting></field-setting>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"form-design-left\">\r\n\r\n        @switch ($leftPanelMode()) {\r\n            @case (enumLeftPanelMode.FieldCollection) {\r\n                @for (category of controlCategories; track $index) {\r\n                    <div class=\"category-name\">\r\n                        {{ category.name }}\r\n                    </div>\r\n                    <ul>\r\n                        @for (control of category.controls; track $index) {\r\n                        <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT' || control.controlType === 'GRIDBUFFER'\">\r\n                            @if (control.controlType === 'GRIDBUFFER') {\r\n                                <div class=\"grid-buffer-wrapper\">\r\n                                    <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                                </div>\r\n                            } @else {\r\n                                <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                            }\r\n                        </li>\r\n                        <div class=\"space\"></div>\r\n                        }\r\n                    </ul>\r\n                    }\r\n            }\r\n            @case (enumLeftPanelMode.Json) {\r\n                <button type=\"button\" class=\"btn btn-secondary\" (click)=\"switchJson()\">{{ $jsonMode() }}</button>\r\n                @if ($jsonMode()==='selectedField') {\r\n                    <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() }}</pre>\r\n                } @else {\r\n                    <pre class=\"json-preview\">{{ coreFormDesignService.$saveLiveJson() }}</pre>\r\n                }\r\n                \r\n            }\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"form-design-right\">\r\n            <!-- <pre>{{ $injectedFieldsJson() }}</pre> -->\r\n\r\n        @if (coreFormDesignService.$mode() === enumType.Default) {\r\n            <div class=\"form-wrapper\">\r\n\r\n                @if (!!coreFormDesignService.$isInWorkflowDesign()) {\r\n                    <form-metadata></form-metadata>\r\n                }\r\n\r\n                <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n                <div class=\"form-cells\">\r\n\r\n                    <div class=\"form-tool-bar\">\r\n                        @if (!$hasCalculatedSection()) {\r\n                            <button class=\"core-button-vns-container\" (click)=\"addCalculatedSection()\">+ Calculated fields</button>\r\n                        }\r\n                        <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n                    </div>\r\n    \r\n                    @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n                        <div class=\"form-section-placeholder\">\r\n\r\n                          <div class=\"section-header\">\r\n\r\n                            <div class=\"section-img-wrapper\">\r\n                                <div class=\"section-img\" [class.calculated]=\"section.forCalculatedFields\"></div>\r\n                            </div>\r\n\r\n                            <label [attr.contenteditable]=\"!section.forCalculatedFields\"\r\n                                [htmlTooltip]=\"!!section.forCalculatedFields ? calculatedFieldsTooltip : null\"\r\n                                (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n                                (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n                            >{{ section.caption }}</label>\r\n\r\n                            <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n                                <i class=\"feather-x\"></i>\r\n                            </div>\r\n                            \r\n                          </div>\r\n                      \r\n                          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n                            <div class=\"form-row-wrapper\">\r\n                                <div class=\"form-row\">\r\n                                    @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n                                      <div class=\"form-cell drop-target\" \r\n                                           [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n                                           [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n                                           (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n                                           (dragover)=\"onDragOver($event, section, cell.control!)\"\r\n                                           (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           [class.selected]=\"cell?.selected\"\r\n                                           [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n                                           [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n                                           (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n                                      >\r\n\r\n\r\n                                        @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n                                            @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n                                                <label contenteditable=\"true\"\r\n                                                    (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n                                                    (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n                                                    [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n                                                    [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n                                                >{{ cell.control.label || 'label' }}</label>\r\n\r\n                                                @if (cell.control.controlType==='CALCULATED') {\r\n                                                <div class=\"control-wrapper\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\">\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                </div>\r\n                                                } @else {\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                }\r\n    \r\n                                                <div class=\"field-toolbar\">\r\n                                                    <ul>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n                                                                <i class=\"feather-settings\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"deleteField(row, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n                                                                <i class=\"feather-x\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                    </ul>\r\n                                                </div>\r\n        \r\n                                                } @else {\r\n                                                    <div class=\"placeholder\" [class.calculated]=\"!!section.forCalculatedFields\">\r\n                                                        {{ !!section.forCalculatedFields ? 'Drop calculated field here' : 'Drop here'}}\r\n                                                    </div>\r\n                                                }\r\n\r\n                                              @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n                                                <div class=\"merge-toolbar\">\r\n                                                    <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n                                                </div>\r\n                                              }\r\n    \r\n                                        }\r\n\r\n                                      </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row-tool-bar\">\r\n                                    <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n                                </div>\r\n                            </div>\r\n\r\n                          }\r\n                        </div>\r\n                    }\r\n                      \r\n              \r\n                </div>\r\n            </form>\r\n            </div>\r\n        } @else if (!!$sections()) {\r\n\r\n            @if(!!(injectedFields$ | async) && !!(injectedFields$ | async)!.length) {\r\n\r\n                @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" />\r\n                } @else {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" ($onClose)=\"closePreview()\" />\r\n                }\r\n\r\n            } @else {\r\n                <h2>COULD NOT UPDATE injectedFields$</h2>\r\n            }\r\n\r\n        } @else {\r\n            <h2>$sections() empty / null / undefined</h2>\r\n        }\r\n\r\n\r\n        \r\n    </div>\r\n    @if ($loading()) {\r\n        <core-toast-loading></core-toast-loading>\r\n    }\r\n\r\n    <ng-template #calculatedFieldsTooltip>\r\n        <div style=\"max-width: 280px;\">\r\n            <strong>Calculated Fields</strong><br />\r\n            <p></p>\r\n            These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n            - They are computed automatically during workflow execution.<br />\r\n            - Each field depends on one or more standard input fields.<br />\r\n            - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n            In both cases, the result is a <code>0</code> or <code>1</code>, representing <strong>false</strong> or <strong>true</strong>.<br /><br />\r\n            These results can be used to influence workflow logic, rule trees, or approval paths.\r\n        </div>\r\n    </ng-template>\r\n   \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-design-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-design-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.calculated-type{width:500px;right:-500px}.core-form-design-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;overflow-y:hidden}.core-form-design-container .form-design-left .category-name{color:#fff}.core-form-design-container .form-design-left .grid-buffer-wrapper{background-color:#fff;padding:15px}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 205px)}.core-form-design-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder.calculated{color:#ff4500}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoreFormArrayLayoutEditorComponent, selector: "core-form-array-layout-editor" }, { kind: "component", type: CoreToastLoadingComponent, selector: "core-toast-loading" }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup", "htmlTooltipRef"], outputs: ["buttonClick"] }, { kind: "component", type: FormMetadataComponent, selector: "form-metadata" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "directive", type: HotKeysDirective, selector: "[hotKeys]", inputs: ["hotKeys"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "component", type: FieldSettingComponent, selector: "field-setting" }, { kind: "component", type: LiveFormComponent, selector: "live-form", inputs: ["$designMode", "$forKickOff", "$workflowReactContext"], outputs: ["$onClose"] }, { kind: "directive", type: HtmlTooltipDirective, selector: "[htmlTooltip]", inputs: ["htmlTooltip", "tooltipContext", "maxWidthUnset", "backgroundColor"] }], animations: [slideFromTopFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreFormDesignComponent, isStandalone: true, selector: "core-form-design", inputs: { $idAsInput: { classPropertyName: "$idAsInput", publicName: "$idAsInput", isSignal: true, isRequired: false, transformFunction: null }, $id: { classPropertyName: "$id", publicName: "$id", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "$settingPanel", first: true, predicate: ["settingPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n    <ng-template #formMetadata>\r\n        <form-metadata></form-metadata>\r\n    </ng-template>\r\n\r\n    @if (coreFormDesignService.$showFormArrayDesign()) {\r\n        <core-form-array-layout-editor />\r\n    }\r\n\r\n    @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n        <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n            [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n        >\r\n            <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n        </aside>\r\n    }\r\n\r\n    <div \r\n        class=\"field-setting-panel\" \r\n        [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" \r\n        [class.calculated-type]=\"coreFormDesignService.$selectedCell()?.control?.type==='calculated'\"\r\n        [ngStyle]=\"{ zIndex: $zIndex() }\"\r\n        #settingPanel\r\n    >\r\n        @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n            <field-setting></field-setting>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"form-design-left\">\r\n\r\n        @switch ($leftPanelMode()) {\r\n            @case (enumLeftPanelMode.FieldCollection) {\r\n                @for (category of controlCategories; track $index) {\r\n                    <div class=\"category-name\">\r\n                        {{ category.name }}\r\n                    </div>\r\n                    <ul>\r\n                        @for (control of category.controls; track $index) {\r\n                        <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT' || control.controlType === 'GRIDBUFFER'\">\r\n                            @if (control.controlType === 'GRIDBUFFER') {\r\n                                <div class=\"grid-buffer-wrapper\">\r\n                                    <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                                </div>\r\n                            } @else {\r\n                                <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                            }\r\n                        </li>\r\n                        <div class=\"space\"></div>\r\n                        }\r\n                    </ul>\r\n                    }\r\n            }\r\n            @case (enumLeftPanelMode.Json) {\r\n                <button type=\"button\" class=\"btn btn-secondary\" (click)=\"switchJson()\">{{ $jsonMode() }}</button>\r\n                @if ($jsonMode()==='selectedField') {\r\n                    <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() }}</pre>\r\n                } @else {\r\n                    <pre class=\"json-preview\">{{ coreFormDesignService.$saveLiveJson() }}</pre>\r\n                }\r\n                \r\n            }\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"form-design-right\">\r\n\r\n        <core-form-group-editor [$idAsInput]=\"true\" />\r\n            <!-- <pre>{{ $injectedFieldsJson() }}</pre> -->\r\n\r\n        \r\n        <!-- @if (coreFormDesignService.$mode() === enumType.Default) {\r\n            <div class=\"form-wrapper\">\r\n\r\n                @if (!!coreFormDesignService.$isInWorkflowDesign()) {\r\n                    <form-metadata></form-metadata>\r\n                }\r\n\r\n                <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n                <div class=\"form-cells\">\r\n\r\n                    <div class=\"form-tool-bar\">\r\n                        @if (!$hasCalculatedSection()) {\r\n                            <button class=\"core-button-vns-container\" (click)=\"addCalculatedSection()\">+ Calculated fields</button>\r\n                        }\r\n                        <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n                    </div>\r\n    \r\n                    @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n                        <div class=\"form-section-placeholder\">\r\n\r\n                          <div class=\"section-header\">\r\n\r\n                            <div class=\"section-img-wrapper\">\r\n                                <div class=\"section-img\" [class.calculated]=\"section.forCalculatedFields\"></div>\r\n                            </div>\r\n\r\n                            <label [attr.contenteditable]=\"!section.forCalculatedFields\"\r\n                                [htmlTooltip]=\"!!section.forCalculatedFields ? calculatedFieldsTooltip : null\"\r\n                                (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n                                (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n                            >{{ section.caption }}</label>\r\n\r\n                            <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n                                <i class=\"feather-x\"></i>\r\n                            </div>\r\n                            \r\n                          </div>\r\n                      \r\n                          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n                            <div class=\"form-row-wrapper\">\r\n                                <div class=\"form-row\">\r\n                                    @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n                                      <div class=\"form-cell drop-target\" \r\n                                           [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n                                           [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n                                           (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n                                           (dragover)=\"onDragOver($event, section, cell.control!)\"\r\n                                           (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           [class.selected]=\"cell?.selected\"\r\n                                           [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n                                           [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n                                           (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n                                      >\r\n\r\n\r\n                                        @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n                                            @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n                                                <label contenteditable=\"true\"\r\n                                                    (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n                                                    (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n                                                    [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n                                                    [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n                                                >{{ cell.control.label || 'label' }}</label>\r\n\r\n                                                @if (cell.control.controlType==='CALCULATED') {\r\n                                                <div class=\"control-wrapper\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\">\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                </div>\r\n                                                } @else {\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                }\r\n    \r\n                                                <div class=\"field-toolbar\">\r\n                                                    <ul>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n                                                                <i class=\"feather-settings\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"deleteField(row, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n                                                                <i class=\"feather-x\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                    </ul>\r\n                                                </div>\r\n        \r\n                                                } @else {\r\n                                                    <div class=\"placeholder\" [class.calculated]=\"!!section.forCalculatedFields\">\r\n                                                        {{ !!section.forCalculatedFields ? 'Drop calculated field here' : 'Drop here'}}\r\n                                                    </div>\r\n                                                }\r\n\r\n                                              @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n                                                <div class=\"merge-toolbar\">\r\n                                                    <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n                                                </div>\r\n                                              }\r\n    \r\n                                        }\r\n\r\n                                      </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row-tool-bar\">\r\n                                    <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n                                </div>\r\n                            </div>\r\n\r\n                          }\r\n                        </div>\r\n                    }\r\n                      \r\n              \r\n                </div>\r\n                </form>\r\n            </div>\r\n        } @else if (!!$sections()) {\r\n\r\n            @if(!!(injectedFields$ | async) && !!(injectedFields$ | async)!.length) {\r\n\r\n                @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" />\r\n                } @else {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" ($onClose)=\"closePreview()\" />\r\n                }\r\n\r\n            } @else {\r\n                <h2>COULD NOT UPDATE injectedFields$</h2>\r\n            }\r\n\r\n        } @else {\r\n            <h2>$sections() empty / null / undefined</h2>\r\n        } -->\r\n\r\n\r\n        \r\n    </div>\r\n    @if ($loading()) {\r\n        <core-toast-loading></core-toast-loading>\r\n    }\r\n\r\n    <ng-template #calculatedFieldsTooltip>\r\n        <div style=\"max-width: 280px;\">\r\n            <strong>Calculated Fields</strong><br />\r\n            <p></p>\r\n            These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n            - They are computed automatically during workflow execution.<br />\r\n            - Each field depends on one or more standard input fields.<br />\r\n            - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n            In both cases, the result is a <code>0</code> or <code>1</code>, representing <strong>false</strong> or <strong>true</strong>.<br /><br />\r\n            These results can be used to influence workflow logic, rule trees, or approval paths.\r\n        </div>\r\n    </ng-template>\r\n   \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-design-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-design-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.calculated-type{width:500px;right:-500px}.core-form-design-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;overflow-y:hidden}.core-form-design-container .form-design-left .category-name{color:#fff}.core-form-design-container .form-design-left .grid-buffer-wrapper{background-color:#fff;padding:15px}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 205px)}.core-form-design-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder.calculated{color:#ff4500}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoreFormGroupEditorComponent, selector: "core-form-group-editor", inputs: ["$isNested", "$idAsInput", "$id"] }, { kind: "component", type: CoreFormArrayLayoutEditorComponent, selector: "core-form-array-layout-editor" }, { kind: "component", type: CoreToastLoadingComponent, selector: "core-toast-loading" }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup", "htmlTooltipRef"], outputs: ["buttonClick"] }, { kind: "component", type: FormMetadataComponent, selector: "form-metadata" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: HotKeysDirective, selector: "[hotKeys]", inputs: ["hotKeys"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "component", type: FieldSettingComponent, selector: "field-setting", inputs: ["$isNested"] }], animations: [slideFromTopFadeIn], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreFormDesignComponent, decorators: [{
             type: Component,
@@ -2401,6 +3242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         NgStyle,
                         AsyncPipe,
                         NgTemplateOutlet,
+                        CoreFormGroupEditorComponent,
                         CoreFormArrayLayoutEditorComponent,
                         CoreToastLoadingComponent,
                         CorePageHeaderComponent,
@@ -2425,7 +3267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         FieldSettingComponent,
                         LiveFormComponent,
                         HtmlTooltipDirective,
-                    ], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n    <ng-template #formMetadata>\r\n        <form-metadata></form-metadata>\r\n    </ng-template>\r\n\r\n    @if (coreFormDesignService.$showFormArrayDesign()) {\r\n        <core-form-array-layout-editor />\r\n    }\r\n\r\n    @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n        <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n            [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n        >\r\n            <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n        </aside>\r\n    }\r\n\r\n    <div \r\n        class=\"field-setting-panel\" \r\n        [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" \r\n        [class.calculated-type]=\"coreFormDesignService.$selectedCell()?.control?.type==='calculated'\"\r\n        [ngStyle]=\"{ zIndex: $zIndex() }\"\r\n        #settingPanel\r\n    >\r\n        @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n            <field-setting></field-setting>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"form-design-left\">\r\n\r\n        @switch ($leftPanelMode()) {\r\n            @case (enumLeftPanelMode.FieldCollection) {\r\n                @for (category of controlCategories; track $index) {\r\n                    <div class=\"category-name\">\r\n                        {{ category.name }}\r\n                    </div>\r\n                    <ul>\r\n                        @for (control of category.controls; track $index) {\r\n                        <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT' || control.controlType === 'GRIDBUFFER'\">\r\n                            @if (control.controlType === 'GRIDBUFFER') {\r\n                                <div class=\"grid-buffer-wrapper\">\r\n                                    <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                                </div>\r\n                            } @else {\r\n                                <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                            }\r\n                        </li>\r\n                        <div class=\"space\"></div>\r\n                        }\r\n                    </ul>\r\n                    }\r\n            }\r\n            @case (enumLeftPanelMode.Json) {\r\n                <button type=\"button\" class=\"btn btn-secondary\" (click)=\"switchJson()\">{{ $jsonMode() }}</button>\r\n                @if ($jsonMode()==='selectedField') {\r\n                    <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() }}</pre>\r\n                } @else {\r\n                    <pre class=\"json-preview\">{{ coreFormDesignService.$saveLiveJson() }}</pre>\r\n                }\r\n                \r\n            }\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"form-design-right\">\r\n            <!-- <pre>{{ $injectedFieldsJson() }}</pre> -->\r\n\r\n        @if (coreFormDesignService.$mode() === enumType.Default) {\r\n            <div class=\"form-wrapper\">\r\n\r\n                @if (!!coreFormDesignService.$isInWorkflowDesign()) {\r\n                    <form-metadata></form-metadata>\r\n                }\r\n\r\n                <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n                <div class=\"form-cells\">\r\n\r\n                    <div class=\"form-tool-bar\">\r\n                        @if (!$hasCalculatedSection()) {\r\n                            <button class=\"core-button-vns-container\" (click)=\"addCalculatedSection()\">+ Calculated fields</button>\r\n                        }\r\n                        <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n                    </div>\r\n    \r\n                    @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n                        <div class=\"form-section-placeholder\">\r\n\r\n                          <div class=\"section-header\">\r\n\r\n                            <div class=\"section-img-wrapper\">\r\n                                <div class=\"section-img\" [class.calculated]=\"section.forCalculatedFields\"></div>\r\n                            </div>\r\n\r\n                            <label [attr.contenteditable]=\"!section.forCalculatedFields\"\r\n                                [htmlTooltip]=\"!!section.forCalculatedFields ? calculatedFieldsTooltip : null\"\r\n                                (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n                                (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n                            >{{ section.caption }}</label>\r\n\r\n                            <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n                                <i class=\"feather-x\"></i>\r\n                            </div>\r\n                            \r\n                          </div>\r\n                      \r\n                          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n                            <div class=\"form-row-wrapper\">\r\n                                <div class=\"form-row\">\r\n                                    @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n                                      <div class=\"form-cell drop-target\" \r\n                                           [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n                                           [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n                                           (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n                                           (dragover)=\"onDragOver($event, section, cell.control!)\"\r\n                                           (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           [class.selected]=\"cell?.selected\"\r\n                                           [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n                                           [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n                                           (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n                                      >\r\n\r\n\r\n                                        @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n                                            @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n                                                <label contenteditable=\"true\"\r\n                                                    (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n                                                    (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n                                                    [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n                                                    [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n                                                >{{ cell.control.label || 'label' }}</label>\r\n\r\n                                                @if (cell.control.controlType==='CALCULATED') {\r\n                                                <div class=\"control-wrapper\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\">\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                </div>\r\n                                                } @else {\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                }\r\n    \r\n                                                <div class=\"field-toolbar\">\r\n                                                    <ul>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n                                                                <i class=\"feather-settings\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"deleteField(row, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n                                                                <i class=\"feather-x\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                    </ul>\r\n                                                </div>\r\n        \r\n                                                } @else {\r\n                                                    <div class=\"placeholder\" [class.calculated]=\"!!section.forCalculatedFields\">\r\n                                                        {{ !!section.forCalculatedFields ? 'Drop calculated field here' : 'Drop here'}}\r\n                                                    </div>\r\n                                                }\r\n\r\n                                              @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n                                                <div class=\"merge-toolbar\">\r\n                                                    <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n                                                </div>\r\n                                              }\r\n    \r\n                                        }\r\n\r\n                                      </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row-tool-bar\">\r\n                                    <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n                                </div>\r\n                            </div>\r\n\r\n                          }\r\n                        </div>\r\n                    }\r\n                      \r\n              \r\n                </div>\r\n            </form>\r\n            </div>\r\n        } @else if (!!$sections()) {\r\n\r\n            @if(!!(injectedFields$ | async) && !!(injectedFields$ | async)!.length) {\r\n\r\n                @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" />\r\n                } @else {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" ($onClose)=\"closePreview()\" />\r\n                }\r\n\r\n            } @else {\r\n                <h2>COULD NOT UPDATE injectedFields$</h2>\r\n            }\r\n\r\n        } @else {\r\n            <h2>$sections() empty / null / undefined</h2>\r\n        }\r\n\r\n\r\n        \r\n    </div>\r\n    @if ($loading()) {\r\n        <core-toast-loading></core-toast-loading>\r\n    }\r\n\r\n    <ng-template #calculatedFieldsTooltip>\r\n        <div style=\"max-width: 280px;\">\r\n            <strong>Calculated Fields</strong><br />\r\n            <p></p>\r\n            These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n            - They are computed automatically during workflow execution.<br />\r\n            - Each field depends on one or more standard input fields.<br />\r\n            - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n            In both cases, the result is a <code>0</code> or <code>1</code>, representing <strong>false</strong> or <strong>true</strong>.<br /><br />\r\n            These results can be used to influence workflow logic, rule trees, or approval paths.\r\n        </div>\r\n    </ng-template>\r\n   \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-design-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-design-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.calculated-type{width:500px;right:-500px}.core-form-design-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;overflow-y:hidden}.core-form-design-container .form-design-left .category-name{color:#fff}.core-form-design-container .form-design-left .grid-buffer-wrapper{background-color:#fff;padding:15px}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 205px)}.core-form-design-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder.calculated{color:#ff4500}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"] }]
+                    ], animations: [slideFromTopFadeIn], template: "<div class=\"core-form-design-container fs-13\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_FORM_DESIGN\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n\r\n    <ng-template #formMetadata>\r\n        <form-metadata></form-metadata>\r\n    </ng-template>\r\n\r\n    @if (coreFormDesignService.$showFormArrayDesign()) {\r\n        <core-form-array-layout-editor />\r\n    }\r\n\r\n    @if (!coreFormDesignService.$isInWorkflowDesign()) {\r\n        <aside class=\"af-metadata-overlay\" [@slideFromTopFadeIn]=\"coreFormDesignService.$showFormMetadata() ? 'in' : 'out'\"\r\n            [class.shown]=\"coreFormDesignService.$showFormMetadata()\"\r\n        >\r\n            <ng-container *ngTemplateOutlet=\"formMetadata\"></ng-container>\r\n        </aside>\r\n    }\r\n\r\n    <div \r\n        class=\"field-setting-panel\" \r\n        [class.open]=\"coreFormDesignService.$fieldSettingPanelOpen()\" \r\n        [class.calculated-type]=\"coreFormDesignService.$selectedCell()?.control?.type==='calculated'\"\r\n        [ngStyle]=\"{ zIndex: $zIndex() }\"\r\n        #settingPanel\r\n    >\r\n        @if (!!(this.coreFormDesignService.$selectedCell())) {\r\n            <field-setting></field-setting>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"form-design-left\">\r\n\r\n        @switch ($leftPanelMode()) {\r\n            @case (enumLeftPanelMode.FieldCollection) {\r\n                @for (category of controlCategories; track $index) {\r\n                    <div class=\"category-name\">\r\n                        {{ category.name }}\r\n                    </div>\r\n                    <ul>\r\n                        @for (control of category.controls; track $index) {\r\n                        <li draggable=\"true\" (dragstart)=\"onDragStart($event, control)\" [class.full-width]=\"control.controlType === 'SEEKER' || control.controlType === 'ATTACHMENT' || control.controlType === 'GRIDBUFFER'\">\r\n                            @if (control.controlType === 'GRIDBUFFER') {\r\n                                <div class=\"grid-buffer-wrapper\">\r\n                                    <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                                </div>\r\n                            } @else {\r\n                                <core-control [control]=\"control\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                            }\r\n                        </li>\r\n                        <div class=\"space\"></div>\r\n                        }\r\n                    </ul>\r\n                    }\r\n            }\r\n            @case (enumLeftPanelMode.Json) {\r\n                <button type=\"button\" class=\"btn btn-secondary\" (click)=\"switchJson()\">{{ $jsonMode() }}</button>\r\n                @if ($jsonMode()==='selectedField') {\r\n                    <pre class=\"json-preview\">{{ coreFormDesignService.$currentControlJson() }}</pre>\r\n                } @else {\r\n                    <pre class=\"json-preview\">{{ coreFormDesignService.$saveLiveJson() }}</pre>\r\n                }\r\n                \r\n            }\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"form-design-right\">\r\n\r\n        <core-form-group-editor [$idAsInput]=\"true\" />\r\n            <!-- <pre>{{ $injectedFieldsJson() }}</pre> -->\r\n\r\n        \r\n        <!-- @if (coreFormDesignService.$mode() === enumType.Default) {\r\n            <div class=\"form-wrapper\">\r\n\r\n                @if (!!coreFormDesignService.$isInWorkflowDesign()) {\r\n                    <form-metadata></form-metadata>\r\n                }\r\n\r\n                <form [formGroup]=\"formDesign\" autocomplete=\"off\">\r\n                <div class=\"form-cells\">\r\n\r\n                    <div class=\"form-tool-bar\">\r\n                        @if (!$hasCalculatedSection()) {\r\n                            <button class=\"core-button-vns-container\" (click)=\"addCalculatedSection()\">+ Calculated fields</button>\r\n                        }\r\n                        <button class=\"core-button-vns-container\" (click)=\"addSection()\">+ Add Section</button>\r\n                    </div>\r\n    \r\n                    @for (section of coreFormDesignService.$placeholderSections(); track $index; let sectionIndex = $index) {\r\n                        <div class=\"form-section-placeholder\">\r\n\r\n                          <div class=\"section-header\">\r\n\r\n                            <div class=\"section-img-wrapper\">\r\n                                <div class=\"section-img\" [class.calculated]=\"section.forCalculatedFields\"></div>\r\n                            </div>\r\n\r\n                            <label [attr.contenteditable]=\"!section.forCalculatedFields\"\r\n                                [htmlTooltip]=\"!!section.forCalculatedFields ? calculatedFieldsTooltip : null\"\r\n                                (blur)=\"onCaptionEditEnd(sectionIndex, $event)\"\r\n                                (keydown.enter)=\"onCaptionEditEnd(sectionIndex, $event); $event.preventDefault()\"\r\n                            >{{ section.caption }}</label>\r\n\r\n                            <div class=\"section-tool pointer\" (click)=\"deleteSection(sectionIndex)\" [appTooltip]=\"'Delete section'\" [showAnyway]=\"true\">\r\n                                <i class=\"feather-x\"></i>\r\n                            </div>\r\n                            \r\n                          </div>\r\n                      \r\n                          @for (row of section.rows; track $index; let rowIndex = $index) {\r\n\r\n                            <div class=\"form-row-wrapper\">\r\n                                <div class=\"form-row\">\r\n                                    @for (cell of filteredCells(row); track $index; let colIndex = $index) {\r\n                                      <div class=\"form-cell drop-target\" \r\n                                           [ngStyle]=\"{ flex: (cell.flexSize ?? 0) + ' 1 0%' }\"\r\n                                           [attr.data-flex]=\"cell.flexSize ?? 0\"\r\n                                           (drop)=\"onDropIntoCell($event, sectionIndex, rowIndex, colIndex)\"\r\n                                           (dragover)=\"onDragOver($event, section, cell.control!)\"\r\n                                           (dragenter)=\"onDragEnter(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           (dragleave)=\"onDragLeave(sectionIndex + '_' + rowIndex + '_' + colIndex)\"\r\n                                           [class.selected]=\"cell?.selected\"\r\n                                           [class.dragging-over]=\"isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]\"\r\n                                           [class.has-control]=\"!!cell && !!cell.control && !!getControl(cell)\"\r\n                                           (click)=\"onCellClicked(sectionIndex, rowIndex, colIndex)\"\r\n                                      >\r\n\r\n\r\n                                        @if (!isDragOverMap[sectionIndex + '_' + rowIndex + '_' + colIndex]) {\r\n\r\n                                            @if (!!cell && !!cell.control && !!getControl(cell)) {\r\n                                                <label contenteditable=\"true\"\r\n                                                    (blur)=\"onFieldCaptionEditEnd(cell, $event)\"\r\n                                                    (keydown.enter)=\"onFieldCaptionEditEnd(cell, $event); $event.preventDefault()\"\r\n                                                    [class.d-none]=\"!!getControl(cell)?.hidden\"\r\n                                                    [class.required]=\"!!cell && !!cell.control && !!getControl(cell) && isRequired(getControl(cell))\"\r\n                                                >{{ cell.control.label || 'label' }}</label>\r\n\r\n                                                @if (cell.control.controlType==='CALCULATED') {\r\n                                                <div class=\"control-wrapper\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\">\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                </div>\r\n                                                } @else {\r\n                                                    <core-control \r\n                                                        [control]=\"getControl(cell)!\" \r\n                                                        [form]=\"formDesign\"\r\n                                                        [checkError$]=\"checkError$\" />\r\n                                                }\r\n    \r\n                                                <div class=\"field-toolbar\">\r\n                                                    <ul>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"openSettingsForCell(cell, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Show settings'\">\r\n                                                                <i class=\"feather-settings\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                        <li>\r\n                                                            <div class=\"field-tool pointer\" (click)=\"deleteField(row, sectionIndex, rowIndex, colIndex)\" [appTooltip]=\"'Remove field from cell'\">\r\n                                                                <i class=\"feather-x\"></i>\r\n                                                            </div>\r\n                                                        </li>\r\n                                                    </ul>\r\n                                                </div>\r\n        \r\n                                                } @else {\r\n                                                    <div class=\"placeholder\" [class.calculated]=\"!!section.forCalculatedFields\">\r\n                                                        {{ !!section.forCalculatedFields ? 'Drop calculated field here' : 'Drop here'}}\r\n                                                    </div>\r\n                                                }\r\n\r\n                                              @if (cell?.selected && canMergeCells(sectionIndex, rowIndex)) {\r\n                                                <div class=\"merge-toolbar\">\r\n                                                    <button (click)=\"mergeCells(sectionIndex, rowIndex)\">\uD83D\uDD17 Merge</button>\r\n                                                </div>\r\n                                              }\r\n    \r\n                                        }\r\n\r\n                                      </div>\r\n                                    }\r\n                                </div>\r\n                                <div class=\"row-tool-bar\">\r\n                                    <div class=\"icon-wrapper\" (click)=\"deleteRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Delete row'\" [showAnyway]=\"true\"><i class=\"feather-x\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addRow(sectionIndex)\" [appTooltip]=\"'Add row'\" [showAnyway]=\"true\"><i class=\"feather-arrow-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"insertRow(sectionIndex, rowIndex)\" [appTooltip]=\"'Insert row'\" [showAnyway]=\"true\"><i class=\"feather-corner-right-down\"></i></div>\r\n                                    <div class=\"icon-wrapper\" (click)=\"addColumn(row)\" [appTooltip]=\"'Add column'\" [showAnyway]=\"true\"><i class=\"feather-arrow-right\"></i></div>\r\n                                </div>\r\n                            </div>\r\n\r\n                          }\r\n                        </div>\r\n                    }\r\n                      \r\n              \r\n                </div>\r\n                </form>\r\n            </div>\r\n        } @else if (!!$sections()) {\r\n\r\n            @if(!!(injectedFields$ | async) && !!(injectedFields$ | async)!.length) {\r\n\r\n                @if (!!coreFormDesignService.$afInstance().normalMode) {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" />\r\n                } @else {\r\n                    <live-form [$designMode]=\"true\" [$forKickOff]=\"true\" ($onClose)=\"closePreview()\" />\r\n                }\r\n\r\n            } @else {\r\n                <h2>COULD NOT UPDATE injectedFields$</h2>\r\n            }\r\n\r\n        } @else {\r\n            <h2>$sections() empty / null / undefined</h2>\r\n        } -->\r\n\r\n\r\n        \r\n    </div>\r\n    @if ($loading()) {\r\n        <core-toast-loading></core-toast-loading>\r\n    }\r\n\r\n    <ng-template #calculatedFieldsTooltip>\r\n        <div style=\"max-width: 280px;\">\r\n            <strong>Calculated Fields</strong><br />\r\n            <p></p>\r\n            These fields are hidden from the form and cannot be edited directly.<br /><br />\r\n            - They are computed automatically during workflow execution.<br />\r\n            - Each field depends on one or more standard input fields.<br />\r\n            - The calculation is evaluated using either an SQL query engine (like <strong>Dapper</strong>) or an in-memory expression engine (like <strong>Dynamic Expresso</strong>).<br /><br />\r\n            In both cases, the result is a <code>0</code> or <code>1</code>, representing <strong>false</strong> or <strong>true</strong>.<br /><br />\r\n            These results can be used to influence workflow logic, rule trees, or approval paths.\r\n        </div>\r\n    </ng-template>\r\n   \r\n</div>", styles: ["@charset \"UTF-8\";.core-form-design-container{position:relative;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));width:100%;overflow:hidden;background-color:#eff0f1;font-size:13px}.core-form-design-container .core-button-vns-container{margin-right:8px!important}.core-form-design-container .core-button-vns-container:last-child{background-color:#000;color:#fff;margin-right:0}.core-form-design-container .af-metadata-overlay{position:fixed;top:60px;left:66px;background:#fff;box-shadow:.4rem 0 2rem #0000002e;z-index:1000;width:1214px;height:calc(100vh - 75px);overflow-y:auto;pointer-events:none}.core-form-design-container .af-metadata-overlay.shown{pointer-events:auto}.core-form-design-container *{border-radius:0}.core-form-design-container ul,.core-form-design-container li{padding:0}.core-form-design-container li{max-width:200px}.core-form-design-container ul div.space{display:block;height:15px}.core-form-design-container li.full-width{max-width:100%}.core-form-design-container .field-setting-panel{display:block;position:fixed;width:360px;height:100vh;top:0;right:-360px;background-color:#fff;box-shadow:.4rem 0 2rem #0000002e;transition:right .5s ease-out}.core-form-design-container .field-setting-panel .close-wrapper{width:32px;height:32px;position:absolute;top:15px;right:15px;display:flex;background-color:#848484;border-radius:50%}.core-form-design-container .field-setting-panel .close-wrapper i{width:16px;height:16px;font-size:18px;color:#848484}.core-form-design-container .field-setting-panel .panel-caption{margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ddd;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.core-form-design-container .field-setting-panel.calculated-type{width:500px;right:-500px}.core-form-design-container .field-setting-panel.calculated-type textarea{border-radius:8px;height:150px}.core-form-design-container .field-setting-panel.open{right:0}.core-form-design-container .form-design-left{position:absolute;top:var(--size-core-page-header-height);bottom:0;left:0;z-index:1;width:360px;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px;padding-right:calc(15px + var(--size-scrollbar-width));background-color:#87ceeb;overflow-y:hidden}.core-form-design-container .form-design-left .category-name{color:#fff}.core-form-design-container .form-design-left .grid-buffer-wrapper{background-color:#fff;padding:15px}.core-form-design-container .form-design-left ul:last-child{padding-bottom:400px}.core-form-design-container .form-design-left .category-name{margin-bottom:15px}.core-form-design-container .form-design-left .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;width:330px;height:calc(100vh - 205px)}.core-form-design-container .form-design-left button{height:35px;border-radius:0;margin-bottom:15px;color:#fff;border:none;font-size:13px;background-color:transparent}.core-form-design-container .form-design-left:hover{overflow-y:auto;padding-right:15px}.core-form-design-container .form-design-right{width:100%;height:calc(100vh - var(--size-header-height) - var(--size-layout-block-cell-spacing));padding:15px 15px 15px 375px;overflow-y:auto}.core-form-design-container .form-design-right .form-wrapper{width:100%;overflow-y:visible;background-color:#fff}.core-form-design-container .form-design-right .form-wrapper button{margin-left:12px;padding:4px 10px;border:1px solid #ccc;cursor:pointer;transition:all .2s;width:110px}.core-form-design-container .form-design-right .form-wrapper button:hover{background-color:#e4f0ff;border-color:#007bff;color:#007bff}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar{display:flex;align-items:center;justify-content:flex-end}.core-form-design-container .form-design-right .form-wrapper .form-tool-bar>button{width:150px;margin:0}.core-form-design-container .form-design-right .form-wrapper .form-cells{display:flex;flex-direction:column;gap:32px;padding:20px 15px 15px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder{padding:12px 15px;border:1px dashed #ccc;background-color:#fff;box-shadow:0 2px 6px #0000000a}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header{display:flex;position:relative;align-items:center;justify-content:flex-start;font-weight:600;margin-bottom:12px;color:#333}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img{width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center;margin-right:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);background-color:transparent;border-radius:0}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool{position:absolute;right:5px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header .section-tool i{font-size:24px;color:#848484}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-section-placeholder .section-header:hover .section-tool{display:block}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .row-tool-bar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-row{display:flex;gap:15px;margin-bottom:15px;min-height:50px;background-color:#d3d3d3;padding:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell{flex:1;min-height:90px;background-color:#fcfcfc;border:1px dashed #ccc;position:relative;padding:20px 10px 10px;transition:border .2s ease-in-out}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell:before{content:attr(data-flex);position:absolute;top:2px;left:4px;font-size:10px;color:#999}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell label.required:after{content:\" *\";color:#ff040b}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar{position:absolute;right:7px;top:6px;display:none;z-index:2;color:gray}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div{display:flex;width:24px;height:24px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell .field-toolbar ul li div i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.has-control:hover .field-toolbar{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .form-cell.active-drop{border-color:#007bff;background-color:#eef6ff;transition:.2s}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007bff;padding:15px 0;width:100%;cursor:default}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .placeholder.calculated{color:#ff4500}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper{width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;display:none;color:gray;border:1px solid gray;margin-left:8px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper .icon-wrapper i{font-size:18px;width:18px;height:18px}.core-form-design-container .form-design-right .form-wrapper .form-cells .form-row-wrapper:hover .icon-wrapper{display:flex}.core-form-design-container .form-design-right .form-wrapper .form-cell.selected{background-color:#dff6dd}.core-form-design-container .form-design-right .form-wrapper .merge-toolbar{text-align:center;margin-top:4px}.core-form-design-container .form-design-right .form-wrapper.live-form{padding-bottom:15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header{padding:0 15px}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.core-form-design-container .form-design-right .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.core-form-design-container .drop-target{min-height:50px;min-width:50px;border:2px dashed transparent;transition:border .2s ease}.core-form-design-container .drop-target.active-drop{border-color:#007bff;background-color:#eaf4ff}.core-form-design-container .no-padding{padding:0!important}.core-form-design-container .modal-content-root{overflow:visible}\n", ".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img.calculated{background-image:url(/assets/images/sql-icon.svg);border-radius:0;background-color:transparent}.core-form-container>form .section .section-header-label .section-calc-wrapper{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3;border-radius:50%}.core-form-container>form .section .section-header-label .section-calc-wrapper i{width:24px;height:24px;font-size:24px;color:#1b4332}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;padding:8px;width:120px;border-radius:18px;box-shadow:.4rem 0 2rem #0000002e}.core-form-container .dev-button:not(:last-child){margin-right:15px}.core-form-container .dev-button:first-child{background-color:#dff6dd;border:1px #9fdc9d solid}.core-form-container .dev-button:last-child{background-color:#fff4ce;border:1px #ffda6a solid}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;background-color:#dff6dd;padding:24px;margin:24px;text-indent:-58px;color:#333!important;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;line-height:1.5}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n", ".core-button-vns-container{height:30px;display:flex;align-items:center;justify-content:center;min-width:30px}.core-button-vns-container .action-wrapper{height:30px!important;width:30px!important;display:flex;align-items:center;justify-content:center}.core-button-vns-container .action-wrapper:has(i:hover){background-color:#e7e7e7;border-radius:50%}.core-button-vns-container .btn-for-form{border:none;border-radius:0;background-color:transparent;color:#000;min-width:120px}.core-button-vns-container button.last-child{background-color:#000;color:#fff}.core-button-vns-container .action-wrapper.last-child{background-color:var(--color-basic-orange);color:#fff;border-radius:50%}.core-button-vns-container .action-wrapper.last-child:hover{background-color:var(--color-basic-orange);box-shadow:0 1rem 3rem #0000002e}.core-button-vns-container .temporary-unavailable{user-select:none;-moz-user-select:none;-webkit-user-select:none;cursor:not-allowed!important;opacity:.5}.core-button-vns-container .temporary-unavailable:hover{background-color:transparent!important}\n"] }]
         }], ctorParameters: () => [{ type: MultiLanguageService }] });
 
 var coreFormDesign_component = /*#__PURE__*/Object.freeze({
@@ -2434,4 +3276,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-KQsI4L2g.mjs.map
+//# sourceMappingURL=ngx-histaff-alpha-core-form-design.component-CGf-jOqR.mjs.map