ngx-histaff-alpha 6.4.8 → 6.5.0

package/fesm2022/{ngx-histaff-alpha-design-wrapper.route-Bk9j5IIl.mjs → ngx-histaff-alpha-design-wrapper.route-DQoOPQge.mjs}

@@ -1,23 +1,23 @@
-import { s as CanDeactivateGuard } from './ngx-histaff-alpha-ngx-histaff-alpha-DZMJyvtg.mjs';
+import { s as CanDeactivateGuard } from './ngx-histaff-alpha-ngx-histaff-alpha-B4dw5BXZ.mjs';
 
 const wfDesignWrapperRoutes = [
     {
         path: '',
-        loadComponent: () => import('./ngx-histaff-alpha-design-wrapper.component-C9Jf7XWj.mjs').then(m => m.DesignWrapperComponent),
+        loadComponent: () => import('./ngx-histaff-alpha-design-wrapper.component-hBUaZceS.mjs').then(m => m.DesignWrapperComponent),
         canDeactivate: [CanDeactivateGuard],
         children: [
             {
                 path: ':id',
                 outlet: 'preview',
-                loadComponent: () => import('./ngx-histaff-alpha-live-form.component-CkeOK3B7.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent)
+                loadComponent: () => import('./ngx-histaff-alpha-live-form.component-x08G6uI3.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent)
             },
         ]
     },
     {
         path: ':id',
-        loadComponent: () => import('./ngx-histaff-alpha-live-form.component-CkeOK3B7.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent)
+        loadComponent: () => import('./ngx-histaff-alpha-live-form.component-x08G6uI3.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent)
     }
 ];
 
 export { wfDesignWrapperRoutes };
-//# sourceMappingURL=ngx-histaff-alpha-design-wrapper.route-Bk9j5IIl.mjs.map
+//# sourceMappingURL=ngx-histaff-alpha-design-wrapper.route-DQoOPQge.mjs.map

package/fesm2022/{ngx-histaff-alpha-design-wrapper.route-Bk9j5IIl.mjs.map → ngx-histaff-alpha-design-wrapper.route-DQoOPQge.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ngx-histaff-alpha-design-wrapper.route-Bk9j5IIl.mjs","sources":["../../../projects/ngx-histaff-alpha/src/lib/app/libraries/core-workflow-builder/design-wrapper/design-wrapper.route.ts"],"sourcesContent":["import { Routes } from '@angular/router';\r\nimport { CanDeactivateGuard } from '../../../guards/can-deactivate.guard';\r\n\r\nexport const wfDesignWrapperRoutes: Routes = [\r\n    {\r\n        path: '',\r\n        loadComponent: () => import('./design-wrapper.component').then(m => m.DesignWrapperComponent),\r\n        canDeactivate: [CanDeactivateGuard],\r\n        children: [\r\n            {\r\n                path: ':id',\r\n                outlet: 'preview',\r\n                loadComponent: () => import('../../core-form-design/live-form/live-form.component').then(m => m.LiveFormComponent)\r\n            },\r\n        ]\r\n    },\r\n    {\r\n        path: ':id',\r\n        loadComponent: () => import('../../core-form-design/live-form/live-form.component').then(m => m.LiveFormComponent)\r\n    }\r\n]"],"names":[],"mappings":";;AAGa,MAAA,qBAAqB,GAAW;AACzC,IAAA;AACI,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,aAAa,EAAE,MAAM,OAAO,2DAA4B,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,sBAAsB,CAAC;QAC7F,aAAa,EAAE,CAAC,kBAAkB,CAAC;AACnC,QAAA,QAAQ,EAAE;AACN,YAAA;AACI,gBAAA,IAAI,EAAE,KAAK;AACX,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,aAAa,EAAE,MAAM,OAAO,sDAAsD,oCAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,iBAAiB;AACpH,aAAA;AACJ;AACJ,KAAA;AACD,IAAA;AACI,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,aAAa,EAAE,MAAM,OAAO,sDAAsD,oCAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,iBAAiB;AACpH;;;;;"}
+{"version":3,"file":"ngx-histaff-alpha-design-wrapper.route-DQoOPQge.mjs","sources":["../../../projects/ngx-histaff-alpha/src/lib/app/libraries/core-workflow-builder/design-wrapper/design-wrapper.route.ts"],"sourcesContent":["import { Routes } from '@angular/router';\r\nimport { CanDeactivateGuard } from '../../../guards/can-deactivate.guard';\r\n\r\nexport const wfDesignWrapperRoutes: Routes = [\r\n    {\r\n        path: '',\r\n        loadComponent: () => import('./design-wrapper.component').then(m => m.DesignWrapperComponent),\r\n        canDeactivate: [CanDeactivateGuard],\r\n        children: [\r\n            {\r\n                path: ':id',\r\n                outlet: 'preview',\r\n                loadComponent: () => import('../../core-form-design/live-form/live-form.component').then(m => m.LiveFormComponent)\r\n            },\r\n        ]\r\n    },\r\n    {\r\n        path: ':id',\r\n        loadComponent: () => import('../../core-form-design/live-form/live-form.component').then(m => m.LiveFormComponent)\r\n    }\r\n]"],"names":[],"mappings":";;AAGa,MAAA,qBAAqB,GAAW;AACzC,IAAA;AACI,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,aAAa,EAAE,MAAM,OAAO,2DAA4B,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,sBAAsB,CAAC;QAC7F,aAAa,EAAE,CAAC,kBAAkB,CAAC;AACnC,QAAA,QAAQ,EAAE;AACN,YAAA;AACI,gBAAA,IAAI,EAAE,KAAK;AACX,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,aAAa,EAAE,MAAM,OAAO,sDAAsD,oCAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,iBAAiB;AACpH,aAAA;AACJ;AACJ,KAAA;AACD,IAAA;AACI,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,aAAa,EAAE,MAAM,OAAO,sDAAsD,oCAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,iBAAiB;AACpH;;;;;"}

package/fesm2022/{ngx-histaff-alpha-hrm-schema.component-SerupGF3.mjs → ngx-histaff-alpha-hrm-schema.component-BJZOW5Wi.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, Component } from '@angular/core';
-import { B as BaseComponent, A as AppService } from './ngx-histaff-alpha-ngx-histaff-alpha-DZMJyvtg.mjs';
+import { B as BaseComponent, A as AppService } from './ngx-histaff-alpha-ngx-histaff-alpha-B4dw5BXZ.mjs';
 import { finalize } from 'rxjs';
 
 class HrmSchemaComponent extends BaseComponent {
@@ -36,4 +36,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }] });
 
 export { HrmSchemaComponent };
-//# sourceMappingURL=ngx-histaff-alpha-hrm-schema.component-SerupGF3.mjs.map
+//# sourceMappingURL=ngx-histaff-alpha-hrm-schema.component-BJZOW5Wi.mjs.map

package/fesm2022/{ngx-histaff-alpha-hrm-schema.component-SerupGF3.mjs.map → ngx-histaff-alpha-hrm-schema.component-BJZOW5Wi.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ngx-histaff-alpha-hrm-schema.component-SerupGF3.mjs","sources":["../../../projects/ngx-histaff-alpha/src/lib/app/root/hrm-schema/hrm-schema.component.ts","../../../projects/ngx-histaff-alpha/src/lib/app/root/hrm-schema/hrm-schema.component.html"],"sourcesContent":["import { AfterViewInit, Component, inject } from '@angular/core';\r\nimport { AppService } from '../../services/app.service';\r\nimport { BaseComponent } from '../../libraries/base-component/base/base.component';\r\nimport { finalize } from 'rxjs';\r\n\r\ninterface SchemaReport {\r\n  name: string;\r\n  success: boolean;\r\n  durationMs: number;\r\n  logs: string[];\r\n  errors: string[];\r\n}\r\n\r\n@Component({\r\n  selector: 'hrm-schema',\r\n  imports: [],\r\n  templateUrl: './hrm-schema.component.html',\r\n  styleUrl: './hrm-schema.component.scss'\r\n})\r\nexport class HrmSchemaComponent extends BaseComponent implements AfterViewInit {\r\n  reports: SchemaReport[] = [];\r\n  loading: boolean = false;\r\n  appService = inject(AppService)\r\n\r\n  get maxDuration(): number {\r\n    return this.reports.length ? Math.max(...this.reports.map(r => r.durationMs)) : 1;\r\n  }\r\n\r\n  // Scale bar width as percentage\r\n  getWidth(report: SchemaReport): string {\r\n    return `${(report.durationMs / this.maxDuration) * 100}%`;\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    setTimeout(() => {\r\n      this.loading = true;\r\n      this.subscriptions.push(\r\n        this.appService.get('/api/HrmSchemaEssential/SchemaCheck').pipe(\r\n          finalize(() => this.loading = false)\r\n        ).subscribe(x => {\r\n          if (x.ok && x.status === 200 && x.body?.statusCode === 200) {\r\n            this.reports = x.body.innerBody;\r\n          }\r\n        })\r\n      )\r\n    })\r\n  }\r\n}\r\n","\r\n<div class=\"container-fluid\">\r\n    <div class=\"schema-bar-chart\">\r\n        @for (r of reports; track $index) {\r\n        <div class=\"schema-bar-row\">\r\n            <div class=\"schema-label\">{{ r.name }}</div>\r\n            <div class=\"schema-bar-wrapper\">\r\n                <div class=\"schema-bar\" [class.success]=\"r.success\" [class.fail]=\"!r.success\" [style.width]=\"getWidth(r)\"\r\n                    [title]=\"r.durationMs + ' ms\\n' + (r.errors.length ? r.errors.join('; ') : 'OK')\">\r\n                    {{ r.durationMs }} ms\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>"],"names":[],"mappings":";;;;;AAmBM,MAAO,kBAAmB,SAAQ,aAAa,CAAA;AANrD,IAAA,WAAA,GAAA;;QAOE,IAAO,CAAA,OAAA,GAAmB,EAAE;QAC5B,IAAO,CAAA,OAAA,GAAY,KAAK;AACxB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAyBhC;AAvBC,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC;;;AAInF,IAAA,QAAQ,CAAC,MAAoB,EAAA;AAC3B,QAAA,OAAO,CAAG,EAAA,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,IAAI,GAAG,GAAG;;IAG3D,eAAe,GAAA;QACb,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CACrB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC,IAAI,CAC7D,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,CACrC,CAAC,SAAS,CAAC,CAAC,IAAG;AACd,gBAAA,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,IAAI,EAAE,UAAU,KAAK,GAAG,EAAE;oBAC1D,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;;aAElC,CAAC,CACH;AACH,SAAC,CAAC;;8GA1BO,kBAAkB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,6FCnB/B,4pBAeM,EAAA,MAAA,EAAA,CAAA,sfAAA,CAAA,EAAA,CAAA,CAAA;;2FDIO,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,WACb,EAAE,EAAA,QAAA,EAAA,4pBAAA,EAAA,MAAA,EAAA,CAAA,sfAAA,CAAA,EAAA;;;;;"}
+{"version":3,"file":"ngx-histaff-alpha-hrm-schema.component-BJZOW5Wi.mjs","sources":["../../../projects/ngx-histaff-alpha/src/lib/app/root/hrm-schema/hrm-schema.component.ts","../../../projects/ngx-histaff-alpha/src/lib/app/root/hrm-schema/hrm-schema.component.html"],"sourcesContent":["import { AfterViewInit, Component, inject } from '@angular/core';\r\nimport { AppService } from '../../services/app.service';\r\nimport { BaseComponent } from '../../libraries/base-component/base/base.component';\r\nimport { finalize } from 'rxjs';\r\n\r\ninterface SchemaReport {\r\n  name: string;\r\n  success: boolean;\r\n  durationMs: number;\r\n  logs: string[];\r\n  errors: string[];\r\n}\r\n\r\n@Component({\r\n  selector: 'hrm-schema',\r\n  imports: [],\r\n  templateUrl: './hrm-schema.component.html',\r\n  styleUrl: './hrm-schema.component.scss'\r\n})\r\nexport class HrmSchemaComponent extends BaseComponent implements AfterViewInit {\r\n  reports: SchemaReport[] = [];\r\n  loading: boolean = false;\r\n  appService = inject(AppService)\r\n\r\n  get maxDuration(): number {\r\n    return this.reports.length ? Math.max(...this.reports.map(r => r.durationMs)) : 1;\r\n  }\r\n\r\n  // Scale bar width as percentage\r\n  getWidth(report: SchemaReport): string {\r\n    return `${(report.durationMs / this.maxDuration) * 100}%`;\r\n  }\r\n\r\n  ngAfterViewInit(): void {\r\n    setTimeout(() => {\r\n      this.loading = true;\r\n      this.subscriptions.push(\r\n        this.appService.get('/api/HrmSchemaEssential/SchemaCheck').pipe(\r\n          finalize(() => this.loading = false)\r\n        ).subscribe(x => {\r\n          if (x.ok && x.status === 200 && x.body?.statusCode === 200) {\r\n            this.reports = x.body.innerBody;\r\n          }\r\n        })\r\n      )\r\n    })\r\n  }\r\n}\r\n","\r\n<div class=\"container-fluid\">\r\n    <div class=\"schema-bar-chart\">\r\n        @for (r of reports; track $index) {\r\n        <div class=\"schema-bar-row\">\r\n            <div class=\"schema-label\">{{ r.name }}</div>\r\n            <div class=\"schema-bar-wrapper\">\r\n                <div class=\"schema-bar\" [class.success]=\"r.success\" [class.fail]=\"!r.success\" [style.width]=\"getWidth(r)\"\r\n                    [title]=\"r.durationMs + ' ms\\n' + (r.errors.length ? r.errors.join('; ') : 'OK')\">\r\n                    {{ r.durationMs }} ms\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>"],"names":[],"mappings":";;;;;AAmBM,MAAO,kBAAmB,SAAQ,aAAa,CAAA;AANrD,IAAA,WAAA,GAAA;;QAOE,IAAO,CAAA,OAAA,GAAmB,EAAE;QAC5B,IAAO,CAAA,OAAA,GAAY,KAAK;AACxB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAyBhC;AAvBC,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC;;;AAInF,IAAA,QAAQ,CAAC,MAAoB,EAAA;AAC3B,QAAA,OAAO,CAAG,EAAA,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,IAAI,GAAG,GAAG;;IAG3D,eAAe,GAAA;QACb,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CACrB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC,IAAI,CAC7D,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,CACrC,CAAC,SAAS,CAAC,CAAC,IAAG;AACd,gBAAA,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,IAAI,EAAE,UAAU,KAAK,GAAG,EAAE;oBAC1D,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;;aAElC,CAAC,CACH;AACH,SAAC,CAAC;;8GA1BO,kBAAkB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,6FCnB/B,4pBAeM,EAAA,MAAA,EAAA,CAAA,sfAAA,CAAA,EAAA,CAAA,CAAA;;2FDIO,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,WACb,EAAE,EAAA,QAAA,EAAA,4pBAAA,EAAA,MAAA,EAAA,CAAA,sfAAA,CAAA,EAAA;;;;;"}

package/fesm2022/{ngx-histaff-alpha-live-form.component-CkeOK3B7.mjs → ngx-histaff-alpha-live-form.component-x08G6uI3.mjs}

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, signal, computed, isDevMode, inject, HostListener, ChangeDetectionStrategy, Component, output, ChangeDetectorRef, Injector, effect } from '@angular/core';
-import { B as BaseComponent, a9 as EnumImageResolverType, m as CoreWorkflowService, o as CoreFormService, b as AlertService, a as AppConfigService, v as alertOptions, M as MultiLanguageService, e as TranslatePipe, I as ImageErrorResolverDirective, aa as NormalizeHumanNamePipe, T as TooltipDirective, ab as CoreIosSwitcherComponent, c as CoreTerminalSpinnerComponent, d as CorePageHeaderComponent, z as DomService, O as CoreParamControlComponent, x as CoreFormDesignService, R as ApplicationHelpService, Y as JsonService, A as AppService, i as EnumFormBaseContolType, V as EnumCorePageEditMode, Z as EnumCoreButtonVNSCode, n as EnumCoreFormControlSeekerSourceType, U as HotKeysDirective, W as CoreFormComponent, a6 as JsonSafePipe } from './ngx-histaff-alpha-ngx-histaff-alpha-DZMJyvtg.mjs';
-import { catchError, of, finalize, BehaviorSubject, filter, distinctUntilChanged } from 'rxjs';
+import { B as BaseComponent, aa as EnumImageResolverType, m as CoreWorkflowService, o as CoreFormService, b as AlertService, a as AppConfigService, v as alertOptions, M as MultiLanguageService, e as TranslatePipe, I as ImageErrorResolverDirective, ab as NormalizeHumanNamePipe, T as TooltipDirective, ac as CoreIosSwitcherComponent, c as CoreTerminalSpinnerComponent, d as CorePageHeaderComponent, z as DomService, O as CoreParamControlComponent, x as CoreFormDesignService, U as ApplicationHelpService, Z as JsonService, A as AppService, i as EnumFormBaseContolType, W as EnumCorePageEditMode, _ as EnumCoreButtonVNSCode, n as EnumCoreFormControlSeekerSourceType, V as HotKeysDirective, X as CoreFormComponent, a7 as JsonSafePipe } from './ngx-histaff-alpha-ngx-histaff-alpha-B4dw5BXZ.mjs';
+import { catchError, of, finalize, BehaviorSubject, filter, distinctUntilChanged, tap } from 'rxjs';
 import { NgClass, JsonPipe, NgStyle } from '@angular/common';
 import { RouterLink, Router, ActivatedRoute } from '@angular/router';
 import * as i1 from '@angular/forms';
@@ -355,6 +355,20 @@ class LiveFormComponent extends BaseComponent {
         this.$reactMode = signal(false);
         this.$onBehalfMode = computed(() => this.$workflow()?.allowOnBehalf);
         this.$reactInjectedFieldsAdded = signal(false);
+        this.$effectiveSections = computed(() => {
+            const raw = this.$inputSections();
+            // CHÌA KHÓA VÀNG
+            //const steps = this.wfs.$currentSteps();
+            //const step = steps?.[0]; // Kickoff & React đều đúng
+            //if (!step) return raw;
+            const formUi = this.$workflowReactContext()?.stepFormConfig?.formUi;
+            if (!formUi) {
+                console.log("[$effectiveSections computed]: formUi was undefined");
+                return raw;
+            }
+            console.log("[$effectiveSections computed]: Calling applyFormUi()", raw, formUi);
+            return this.applyFormUi(raw, formUi);
+        });
         // 🔁 Reactive bindings
         this.$inputSections = signal([
             {
@@ -400,37 +414,15 @@ class LiveFormComponent extends BaseComponent {
         effect(() => {
             const context = this.$workflowReactContext();
             const form = this.$form();
-            const reactMode = this.$reactMode();
-            const ___reasonsField = this.wfs.liveForm?.get('___reasons');
-            if (!context || !form || (reactMode && !___reasonsField))
+            if (!context || !form)
                 return;
             try {
                 const attributesJson = context.instance.attributesJson;
                 const formValue = JSON.parse(attributesJson);
-                const reasons = context.instance.reasons;
-                let ___reasons = "";
-                try {
-                    ___reasons = JSON.parse(reasons);
-                }
-                catch (err) {
-                    if (isDevMode()) {
-                        this.alertService.error(err?.message || "Error while deserializing 'reasons' value from the instance");
-                    }
-                }
-                try {
-                    delete formValue['___reason']; // Focus only on new ___reason
-                }
-                catch (err) {
-                    if (isDevMode()) {
-                        this.alertService.error(err?.message || "Error while delete '___reason' value for the attributes");
-                    }
-                }
                 // 🔑 Ensure FormArrays have correct length BEFORE patching
                 this.cfs.ensureFormArraysMatch(this.wfs.liveForm, formValue, this.cfs.formArrayConfigMap);
+                console.log("this.wfs.liveForm.patchValue(formValue)", formValue);
                 this.wfs.liveForm.patchValue(formValue);
-                if (reactMode) {
-                    ___reasonsField.patchValue(___reasons);
-                }
             }
             catch (err) {
                 if (isDevMode()) {
@@ -459,7 +451,7 @@ class LiveFormComponent extends BaseComponent {
                     this.$reactMode.set(true);
                     this.clearInjectedFields();
                     // this.makeOriginReadonly();
-                    this.addReactInjectedFields();
+                    //this.addReactInjectedFields();
                 }
             }
             else {
@@ -533,7 +525,7 @@ class LiveFormComponent extends BaseComponent {
         }
         const request = {
             workflowId: this.wfs.$currentFlow()?.id,
-            attributes: this.cfs.getAttributesWithWys(this.$form()), //this.$form()?.getRawValue(),
+            attributes: this.cfs.getAttributesWithWys(this.$form()),
             ___targetEmployees: this.$form()?.get('___targetEmployees')?.getRawValue()
         };
         this.$backendMessage.set('');
@@ -613,11 +605,9 @@ class LiveFormComponent extends BaseComponent {
         if (!this.$designMode() && !this.$previewMode()) {
             if (!!this.workflowId) {
                 setTimeout(() => {
-                    this.$loading.set(true);
-                    this.subscriptions.push(this.wfs.loadWorkflowWithAfInstance(this.workflowId).pipe(catchError(err => {
-                        this.$loading.set(false);
+                    this.subscriptions.push(this.wfs.loadWorkflowWithAfInstance(this.workflowId).pipe(tap(_ => this.$loading.set(true)), catchError(err => {
                         return of(err);
-                    })).subscribe(x => {
+                    }), finalize(() => this.$loading.set(false))).subscribe(x => {
                         this.$loading.set(false);
                         if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
                             const workflow = x.body.innerBody;
@@ -627,15 +617,13 @@ class LiveFormComponent extends BaseComponent {
                                 const instance = this.coreFormDesignService.mapFromAfInstanceDTO(afInstanceDto);
                                 instance.sections = this.coreFormDesignService.toCoreFormSections(instance.formDesignSections);
                                 this.$afInstance.set(instance);
+                                console.log("this.$inputSections being merged wuth:", instance.sections);
                                 this.$inputSections.set([...instance.sections, ...this.$inputSections()]);
                                 this.$normalMode.set(instance.normalMode);
                                 this.$submitApi.set(instance.submitApi);
                                 this.coreFormDesignService.$afInstance.set(instance);
                                 this.clearInjectedFields();
-                                if (this.$reactMode()) {
-                                    this.addReactInjectedFields();
-                                }
-                                else {
+                                if (!this.$reactMode()) {
                                     this.addKickOffInjectedFields();
                                 }
                             }
@@ -653,7 +641,7 @@ class LiveFormComponent extends BaseComponent {
             this.$submitApi.set(this.coreFormDesignService.$afInstance().submitApi);
             this.clearInjectedFields();
             if (this.$reactMode()) {
-                this.addReactInjectedFields();
+                //this.addReactInjectedFields();
             }
             else {
                 this.addKickOffInjectedFields();
@@ -664,19 +652,7 @@ class LiveFormComponent extends BaseComponent {
         const form = e.formGroup;
         this.$form.set(form);
         this.wfs.liveForm = form;
-        if (this.$reactMode()) {
-            this.$inputSections().forEach(s => {
-                s.rows.forEach(r => {
-                    r.forEach(c => {
-                        const toBeDisabled = c.field !== '___reason';
-                        if (toBeDisabled) {
-                            form.get(c.field)?.disable();
-                        }
-                    });
-                });
-            });
-        }
-        else {
+        if (!this.$reactMode()) {
             this.wfs.liveForm.get('___submitOnBehalf')?.valueChanges.subscribe(x => {
                 const inputSections = this.$inputSections();
                 const targetCtrl = this.coreFormService.getFormBaseControlByName(inputSections, '___targetEmployees');
@@ -684,10 +660,10 @@ class LiveFormComponent extends BaseComponent {
                     targetCtrl.hidden = !x;
                     this.$inputSections.set([...inputSections]);
                     // Optional: restore current form values without triggering another valueChanges loop
-                    const currentValue = this.cfs.getAttributesWithWys(this.wfs.liveForm); //this.wfs.liveForm.getRawValue();
+                    const currentValue = this.cfs.getAttributesWithWys(this.wfs.liveForm);
+                    console.log("onLiveFormCreated", currentValue);
                     setTimeout(() => {
                         this.wfs.liveForm.patchValue({
-                            ...currentValue,
                             ___submitOnBehalf: x // ensure value stays intact
                         }, { emitEvent: false });
                         if (!x && targetCtrl) {
@@ -771,30 +747,6 @@ class LiveFormComponent extends BaseComponent {
                 ]
             ]
         });
-        sections.push({
-            rows: [
-                [
-                    {
-                        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
-                          }
-                        ],
-                        */
-                    }
-                ]
-            ]
-        });
         if (!!workflow && !!workflow.allowCustomCc) {
             sections.push({
                 rows: [
@@ -851,66 +803,28 @@ class LiveFormComponent extends BaseComponent {
         }
         this.$inputSections.set(sections);
     }
-    addReactInjectedFields() {
-        if (this.$reactInjectedFieldsAdded())
-            return;
-        const current = this.$inputSections();
-        const sections = [...current];
-        sections.push({
-            rows: [
-                [
-                    {
-                        field: "___reasons",
-                        type: "text",
-                        value: '',
-                        label: "UI_FORM_CONTROL_LABEL.REASON_HISTORY",
-                        flexSize: 12,
-                        controlType: EnumFormBaseContolType.TEXTAREA,
-                        textareaRows: 5,
-                        disabled: true,
-                    }
-                ]
-            ]
-        });
-        sections.push({
-            rows: [
-                [
-                    {
-                        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
-                        //   }
-                        // ],
-                    }
-                ]
-            ]
-        });
-        this.$inputSections.set(sections);
-        this.$reactInjectedFieldsAdded.set(true);
-    }
     clearInjectedFields() {
-        const current = this.$inputSections();
-        const sections = [...current];
-        console.log("sections before in clearInjectedFields", sections);
-        sections
-            .map(section => ({
-            ...section,
-            rows: section.rows
-                ?.map(row => row.filter(ctrl => ctrl.field.indexOf('___') !== 0))
-                .filter(row => row.length > 0)
-        }))
-            .filter(section => section.rows?.length);
-        console.log("sections after in clearInjectedFields, being set", sections);
-        this.$inputSections.set(sections);
+        const original = this.$inputSections();
+        if (!original || !original.length)
+            return;
+        // Tạo bản sao deep để tránh mutate sai
+        const cleaned = original
+            .map(section => {
+            // deep clone rows
+            const newRows = (section.rows || [])
+                .map(row => row.filter(ctrl => !ctrl.field.startsWith('___')) // remove injected
+            )
+                .filter(row => row.length > 0); // remove empty rows
+            // Nếu rows rỗng → bỏ luôn section
+            if (!newRows.length)
+                return null;
+            return {
+                ...section,
+                rows: newRows
+            };
+        })
+            .filter(x => x !== null);
+        this.$inputSections.set(cleaned);
     }
     react(reactType) {
         const context = this.$workflowReactContext();
@@ -920,8 +834,9 @@ class LiveFormComponent extends BaseComponent {
         }
         const { workflow, instance, step, actor } = context;
         const unitedCorrelationIds = `${workflow.id}___${instance.correlationId}___${step.id}___${actor.id}`;
+        const updatedAttributes = this.cfs.getAttributesWithWys(this.$form());
         this.$loading.set(true);
-        this.subscriptions.push(this.wfs.react(unitedCorrelationIds, reactType, this.wfs.liveForm.get('___reason')?.getRawValue()).pipe(catchError(err => {
+        this.subscriptions.push(this.wfs.react(unitedCorrelationIds, reactType, "", updatedAttributes).pipe(catchError(err => {
             this.$loading.set(false);
             return of(err);
         })).subscribe(x => {
@@ -930,12 +845,57 @@ class LiveFormComponent extends BaseComponent {
             }
         }));
     }
+    applyFormUi(sections, formUi) {
+        if (!sections || !formUi)
+            return sections;
+        const hidden = formUi.hidden ?? {};
+        const readonly = formUi.readonly ?? {};
+        const required = formUi.required ?? {};
+        console.log("[applyFormUi] hidden", hidden);
+        console.log("[applyFormUi] readonly", readonly);
+        console.log("[applyFormUi] required", required);
+        const sectionsTransformed = sections.map(sec => ({
+            ...sec,
+            rows: sec.rows.map(row => row.map(ctrl => {
+                const c = { ...ctrl };
+                const key = c.field;
+                // 1) Hidden
+                if (hidden[key]) {
+                    c.hidden = true;
+                    return c;
+                }
+                // 2) Readonly
+                if (readonly[key]) {
+                    c.readonly = true;
+                    c.disabled = true;
+                }
+                // 3) Required
+                if (required[key]) {
+                    c.validators = [
+                        ...(c.validators ?? []),
+                        {
+                            name: 'required',
+                            validator: Validators.required,
+                            errorMessage: `${c.label ?? c.field} is required`
+                        }
+                    ];
+                }
+                else {
+                    // remove required if exists (optional)
+                    c.validators = (c.validators ?? []).filter(v => v.name !== 'required');
+                }
+                return c;
+            }))
+        }));
+        console.log("[applyFormUi] sectionsTransformed", sectionsTransformed);
+        return sectionsTransformed;
+    }
     ngOnDestroy() {
         this.subscriptions.forEach(x => x?.unsubscribe());
         this.clearInjectedFields();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: LiveFormComponent, deps: [{ token: MultiLanguageService }, { token: CoreFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: LiveFormComponent, isStandalone: true, selector: "live-form", inputs: { $designMode: { classPropertyName: "$designMode", publicName: "$designMode", isSignal: true, isRequired: false, transformFunction: null }, $forKickOff: { classPropertyName: "$forKickOff", publicName: "$forKickOff", isSignal: true, isRequired: false, transformFunction: null }, $workflowReactContext: { classPropertyName: "$workflowReactContext", publicName: "$workflowReactContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { $onClose: "$onClose" }, usesInheritance: true, ngImport: i0, template: "<div class=\"live-form-container\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n  @if ($normalMode()) {\r\n    <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n        width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n    }\">\r\n      <div class=\"live-form-header\">\r\n        <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n      </div>\r\n\r\n      <core-form\r\n        [inputSections]=\"$inputSections()\"\r\n        [customFormButtonItems]=\"$customButtons()!\"\r\n        [forceCreateNewForm]=\"true\"\r\n        [mode$]=\"mode$\"\r\n        [hideButtons]=\"$previewMode()\"\r\n        [hideCalculatedSection]=\"true\"\r\n        [hideDevSector]=\"true\"\r\n        [bottomTemplateRef]=\"bottomTemplateRef\"\r\n        [buttonGroupTemplateRef]=\"buttonGroupTemplateRef\"\r\n        [checkError$]=\"checkError$\"\r\n        (onSubmit)=\"onLiveSubmit($event)\"\r\n        (onFormCreated)=\"onLiveFormCreated($event)\"\r\n        (onCancal)=\"onClose()\"\r\n      />\r\n\r\n      @if ($previewMode()) {\r\n        <div class=\"show-routing-wrapper\">\r\n          <button type=\"button\" class=\"btn btn-primary\" (click)=\"toggleShowRouting()\">\r\n            {{ $showLiveRouting() ? 'Hide Routing' : 'Show Routing' }}\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n\r\n    <div class=\"routing-preview-wrapper\" [class.visible]=\"$showLiveRouting()\">\r\n      @if ($showLiveRouting()) {\r\n        <routing-preview-panel />\r\n      }\r\n    </div>\r\n\r\n\r\n  } @else {\r\n    <div class=\"modal-container\">\r\n      <div class=\"modal-content-root no-padding\">\r\n\r\n        <div class=\"form-wrapper live-form\" [class.d-none]=\"$showLiveRouting()\" [ngStyle]=\"{\r\n            width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n        }\">\r\n\r\n          <div class=\"live-form-header\">\r\n            <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\" />\r\n            <div class=\"preview-close-icon\" (click)=\"onClose()\">\r\n              <i class=\"feather-x\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <core-form\r\n            [inputSections]=\"$inputSections()\"\r\n            [customFormButtonItems]=\"$customButtons()!\"\r\n            [forceCreateNewForm]=\"true\"\r\n            [hideCalculatedSection]=\"true\"\r\n            [mode$]=\"mode$\"\r\n            [hideButtons]=\"$previewMode()\"\r\n            [bottomTemplateRef]=\"bottomTemplateRef\"\r\n            [buttonGroupTemplateRef]=\"buttonGroupTemplateRef\"\r\n            [hideDevSector]=\"false\"\r\n            [checkError$]=\"checkError$\"\r\n            (onSubmit)=\"onLiveSubmit($event)\"\r\n            (onFormCreated)=\"onLiveFormCreated($event)\"\r\n            (onCancal)=\"onClose()\"\r\n          />\r\n\r\n          <div class=\"submition-wrapper\">\r\n            <button type=\"button\" class=\"btn btn-secondary\" (click)=\"toggleShowRouting()\">\r\n              {{ $showLiveRouting() ? 'Hide Routing' : 'Show Routing' }}\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"initialSubmit()\">\r\n              Submit  \r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"routing-preview-wrapper\" [class.visible]=\"$showLiveRouting()\">\r\n          @if ($showLiveRouting()) {\r\n            <div class=\"h50\"></div>\r\n            <routing-preview-panel [$minWidth]=\"coreFormDesignService.$afInstance().width\"/>\r\n            <div class=\"h50\"></div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #bottomTemplateRef>\r\n    <!-- <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $inputSectionsJson() }}</pre> -->\r\n    <!-- @if (isDevMode) {\r\n      <p class=\"dev-hint\">F3/ESC: Show/Hide afInstance | F6/ESC: Show/Hide Workflow</p>\r\n    } -->\r\n    @if ($showAfInstanceJson()) {\r\n      <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $afInstanceJson() }}</pre>\r\n    }\r\n    @if ($showWfWorkflowJson()) {\r\n      <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $wfWorkflowJson() }}</pre>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #buttonGroupTemplateRef>\r\n    <div class=\"button-group\">\r\n      <div class=\"button-group-left\"></div>\r\n      <div class=\"button-group-right\">\r\n        @if ($reactMode()) {\r\n          @if (true) {\r\n            <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>  \r\n          }\r\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"react('REJECTED')\">Reject</button>\r\n          <button type=\"button\" class=\"btn btn-primary\" (click)=\"react('APPROVED')\">Approve</button>\r\n        } @else {\r\n          <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-primary\">Send Request</button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n</div>", styles: [".live-form-container .modal-container{overflow-y:auto!important;box-sizing:border-box}.live-form-container .form-wrapper.live-form{padding-top:0;padding-bottom:15px;background-color:#fff;position:relative}.live-form-container .form-wrapper.live-form .live-form-header{padding:0 15px}.live-form-container .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.live-form-container .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.live-form-container .form-wrapper.live-form .submition-wrapper{display:flex;align-items:center;justify-content:flex-end;padding:0 24px;font-size:13px}.live-form-container .form-wrapper.live-form .submition-wrapper button{border-radius:0;font-size:13px}.live-form-container .form-wrapper.live-form .submition-wrapper button:not(:last-child){margin-right:8px}.live-form-container .form-wrapper.live-form .show-routing-wrapper{padding:15px;display:flex;align-items:center;justify-content:flex-end}.live-form-container .form-wrapper.live-form .show-routing-wrapper input{width:120px}.live-form-container .modal-content-root{padding:0;overflow-y:visible;background-color:transparent!important;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.live-form-container pre{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;max-height:500px;overflow-y:auto;margin:0}.live-form-container .dev-hint{font-size:12px;color:#888;background-color:#f9f9f9;padding:6px 12px;margin:8px 0;border-left:4px solid #ccc}.live-form-container .h50{height:50px}.live-form-container .routing-preview-wrapper{overflow:hidden;max-height:0;opacity:0;transform:translateY(-10px);transition:max-height .4s ease-out,opacity .4s ease-out,transform .4s ease-out}.live-form-container .routing-preview-wrapper.visible{max-height:800px;overflow:visible;opacity:1;transform:translateY(0)}.live-form-container .show-routing-wrapper button{height:35px;font-size:13px;border-radius:0;color:#fff}.live-form-container .hidden-requester-selector{position:absolute;width:0;height:0;top:-200px;left:-200px;overflow:visible}.live-form-container .button-group{padding:15px;display:flex;align-items:center;justify-content:flex-end}.live-form-container .button-group button{height:35px;border-radius:0;font-size:13px;margin:0 7.5px;width:120px}.live-form-container .button-group button:last-child{margin-right:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HotKeysDirective, selector: "[hotKeys]", inputs: ["hotKeys"] }, { kind: "component", type: RoutingPreviewPanelComponent, selector: "routing-preview-panel", inputs: ["$minWidth"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup", "htmlTooltipRef"], outputs: ["buttonClick"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$", "hideButtons", "forceCreateNewForm", "secondBottomTemplateRef", "hideDevSector", "hideCalculatedSection", "buttonGroupTemplateRef", "wrapEachSectionInAccordion", "gridMode"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: LiveFormComponent, isStandalone: true, selector: "live-form", inputs: { $designMode: { classPropertyName: "$designMode", publicName: "$designMode", isSignal: true, isRequired: false, transformFunction: null }, $forKickOff: { classPropertyName: "$forKickOff", publicName: "$forKickOff", isSignal: true, isRequired: false, transformFunction: null }, $workflowReactContext: { classPropertyName: "$workflowReactContext", publicName: "$workflowReactContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { $onClose: "$onClose" }, usesInheritance: true, ngImport: i0, template: "<div class=\"live-form-container\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n  @if ($normalMode()) {\r\n    <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n        width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n    }\">\r\n      <div class=\"live-form-header\">\r\n        <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n      </div>\r\n\r\n      <core-form\r\n        [inputSections]=\"$effectiveSections()\"\r\n        [customFormButtonItems]=\"$customButtons()!\"\r\n        [forceCreateNewForm]=\"true\"\r\n        [mode$]=\"mode$\"\r\n        [hideButtons]=\"$previewMode()\"\r\n        [hideCalculatedSection]=\"true\"\r\n        [hideDevSector]=\"true\"\r\n        [bottomTemplateRef]=\"bottomTemplateRef\"\r\n        [buttonGroupTemplateRef]=\"buttonGroupTemplateRef\"\r\n        [checkError$]=\"checkError$\"\r\n        (onSubmit)=\"onLiveSubmit($event)\"\r\n        (onFormCreated)=\"onLiveFormCreated($event)\"\r\n        (onCancal)=\"onClose()\"\r\n      />\r\n\r\n      @if ($previewMode()) {\r\n        <div class=\"show-routing-wrapper\">\r\n          <button type=\"button\" class=\"btn btn-primary\" (click)=\"toggleShowRouting()\">\r\n            {{ $showLiveRouting() ? 'Hide Routing' : 'Show Routing' }}\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n\r\n    <div class=\"routing-preview-wrapper\" [class.visible]=\"$showLiveRouting()\">\r\n      @if ($showLiveRouting()) {\r\n        <routing-preview-panel />\r\n      }\r\n    </div>\r\n\r\n\r\n  } @else {\r\n    <div class=\"modal-container\">\r\n      <div class=\"modal-content-root no-padding\">\r\n\r\n        <div class=\"form-wrapper live-form\" [class.d-none]=\"$showLiveRouting()\" [ngStyle]=\"{\r\n            width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n        }\">\r\n\r\n          <div class=\"live-form-header\">\r\n            <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\" />\r\n            <div class=\"preview-close-icon\" (click)=\"onClose()\">\r\n              <i class=\"feather-x\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <core-form\r\n            [inputSections]=\"$effectiveSections()\"\r\n            [customFormButtonItems]=\"$customButtons()!\"\r\n            [forceCreateNewForm]=\"true\"\r\n            [hideCalculatedSection]=\"true\"\r\n            [mode$]=\"mode$\"\r\n            [hideButtons]=\"$previewMode()\"\r\n            [bottomTemplateRef]=\"bottomTemplateRef\"\r\n            [buttonGroupTemplateRef]=\"buttonGroupTemplateRef\"\r\n            [hideDevSector]=\"false\"\r\n            [checkError$]=\"checkError$\"\r\n            (onSubmit)=\"onLiveSubmit($event)\"\r\n            (onFormCreated)=\"onLiveFormCreated($event)\"\r\n            (onCancal)=\"onClose()\"\r\n          />\r\n\r\n          <div class=\"submition-wrapper\">\r\n            <button type=\"button\" class=\"btn btn-secondary\" (click)=\"toggleShowRouting()\">\r\n              {{ $showLiveRouting() ? 'Hide Routing' : 'Show Routing' }}\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"initialSubmit()\">\r\n              Submit  \r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"routing-preview-wrapper\" [class.visible]=\"$showLiveRouting()\">\r\n          @if ($showLiveRouting()) {\r\n            <div class=\"h50\"></div>\r\n            <routing-preview-panel [$minWidth]=\"coreFormDesignService.$afInstance().width\"/>\r\n            <div class=\"h50\"></div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #bottomTemplateRef>\r\n    <!-- <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $inputSectionsJson() }}</pre> -->\r\n    <!-- @if (isDevMode) {\r\n      <p class=\"dev-hint\">F3/ESC: Show/Hide afInstance | F6/ESC: Show/Hide Workflow</p>\r\n    } -->\r\n    @if ($showAfInstanceJson()) {\r\n      <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $afInstanceJson() }}</pre>\r\n    }\r\n    @if ($showWfWorkflowJson()) {\r\n      <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $wfWorkflowJson() }}</pre>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #buttonGroupTemplateRef>\r\n    <div class=\"button-group\">\r\n      <div class=\"button-group-left\"></div>\r\n      <div class=\"button-group-right\">\r\n        @if ($reactMode()) {\r\n          @if (true) {\r\n            <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>  \r\n          }\r\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"react('REJECTED')\">Reject</button>\r\n          <button type=\"button\" class=\"btn btn-primary\" (click)=\"react('APPROVED')\">Approve</button>\r\n        } @else {\r\n          <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-primary\">Send Request</button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n</div>", styles: [".live-form-container .modal-container{overflow-y:auto!important;box-sizing:border-box}.live-form-container .form-wrapper.live-form{padding-top:0;padding-bottom:15px;background-color:#fff;position:relative}.live-form-container .form-wrapper.live-form .live-form-header{padding:0 15px}.live-form-container .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.live-form-container .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.live-form-container .form-wrapper.live-form .submition-wrapper{display:flex;align-items:center;justify-content:flex-end;padding:0 24px;font-size:13px}.live-form-container .form-wrapper.live-form .submition-wrapper button{border-radius:0;font-size:13px}.live-form-container .form-wrapper.live-form .submition-wrapper button:not(:last-child){margin-right:8px}.live-form-container .form-wrapper.live-form .show-routing-wrapper{padding:15px;display:flex;align-items:center;justify-content:flex-end}.live-form-container .form-wrapper.live-form .show-routing-wrapper input{width:120px}.live-form-container .modal-content-root{padding:0;overflow-y:visible;background-color:transparent!important;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.live-form-container pre{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;max-height:500px;overflow-y:auto;margin:0}.live-form-container .dev-hint{font-size:12px;color:#888;background-color:#f9f9f9;padding:6px 12px;margin:8px 0;border-left:4px solid #ccc}.live-form-container .h50{height:50px}.live-form-container .routing-preview-wrapper{overflow:hidden;max-height:0;opacity:0;transform:translateY(-10px);transition:max-height .4s ease-out,opacity .4s ease-out,transform .4s ease-out}.live-form-container .routing-preview-wrapper.visible{max-height:800px;overflow:visible;opacity:1;transform:translateY(0)}.live-form-container .show-routing-wrapper button{height:35px;font-size:13px;border-radius:0;color:#fff}.live-form-container .hidden-requester-selector{position:absolute;width:0;height:0;top:-200px;left:-200px;overflow:visible}.live-form-container .button-group{padding:15px;display:flex;align-items:center;justify-content:flex-end}.live-form-container .button-group button{height:35px;border-radius:0;font-size:13px;margin:0 7.5px;width:120px}.live-form-container .button-group button:last-child{margin-right:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HotKeysDirective, selector: "[hotKeys]", inputs: ["hotKeys"] }, { kind: "component", type: RoutingPreviewPanelComponent, selector: "routing-preview-panel", inputs: ["$minWidth"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup", "htmlTooltipRef"], outputs: ["buttonClick"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$", "hideButtons", "forceCreateNewForm", "secondBottomTemplateRef", "hideDevSector", "hideCalculatedSection", "buttonGroupTemplateRef", "wrapEachSectionInAccordion", "gridMode"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: LiveFormComponent, decorators: [{
             type: Component,
@@ -947,7 +907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         CorePageHeaderComponent,
                         CoreFormComponent,
                         TranslatePipe,
-                    ], template: "<div class=\"live-form-container\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n  @if ($normalMode()) {\r\n    <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n        width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n    }\">\r\n      <div class=\"live-form-header\">\r\n        <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n      </div>\r\n\r\n      <core-form\r\n        [inputSections]=\"$inputSections()\"\r\n        [customFormButtonItems]=\"$customButtons()!\"\r\n        [forceCreateNewForm]=\"true\"\r\n        [mode$]=\"mode$\"\r\n        [hideButtons]=\"$previewMode()\"\r\n        [hideCalculatedSection]=\"true\"\r\n        [hideDevSector]=\"true\"\r\n        [bottomTemplateRef]=\"bottomTemplateRef\"\r\n        [buttonGroupTemplateRef]=\"buttonGroupTemplateRef\"\r\n        [checkError$]=\"checkError$\"\r\n        (onSubmit)=\"onLiveSubmit($event)\"\r\n        (onFormCreated)=\"onLiveFormCreated($event)\"\r\n        (onCancal)=\"onClose()\"\r\n      />\r\n\r\n      @if ($previewMode()) {\r\n        <div class=\"show-routing-wrapper\">\r\n          <button type=\"button\" class=\"btn btn-primary\" (click)=\"toggleShowRouting()\">\r\n            {{ $showLiveRouting() ? 'Hide Routing' : 'Show Routing' }}\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n\r\n    <div class=\"routing-preview-wrapper\" [class.visible]=\"$showLiveRouting()\">\r\n      @if ($showLiveRouting()) {\r\n        <routing-preview-panel />\r\n      }\r\n    </div>\r\n\r\n\r\n  } @else {\r\n    <div class=\"modal-container\">\r\n      <div class=\"modal-content-root no-padding\">\r\n\r\n        <div class=\"form-wrapper live-form\" [class.d-none]=\"$showLiveRouting()\" [ngStyle]=\"{\r\n            width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n        }\">\r\n\r\n          <div class=\"live-form-header\">\r\n            <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\" />\r\n            <div class=\"preview-close-icon\" (click)=\"onClose()\">\r\n              <i class=\"feather-x\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <core-form\r\n            [inputSections]=\"$inputSections()\"\r\n            [customFormButtonItems]=\"$customButtons()!\"\r\n            [forceCreateNewForm]=\"true\"\r\n            [hideCalculatedSection]=\"true\"\r\n            [mode$]=\"mode$\"\r\n            [hideButtons]=\"$previewMode()\"\r\n            [bottomTemplateRef]=\"bottomTemplateRef\"\r\n            [buttonGroupTemplateRef]=\"buttonGroupTemplateRef\"\r\n            [hideDevSector]=\"false\"\r\n            [checkError$]=\"checkError$\"\r\n            (onSubmit)=\"onLiveSubmit($event)\"\r\n            (onFormCreated)=\"onLiveFormCreated($event)\"\r\n            (onCancal)=\"onClose()\"\r\n          />\r\n\r\n          <div class=\"submition-wrapper\">\r\n            <button type=\"button\" class=\"btn btn-secondary\" (click)=\"toggleShowRouting()\">\r\n              {{ $showLiveRouting() ? 'Hide Routing' : 'Show Routing' }}\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"initialSubmit()\">\r\n              Submit  \r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"routing-preview-wrapper\" [class.visible]=\"$showLiveRouting()\">\r\n          @if ($showLiveRouting()) {\r\n            <div class=\"h50\"></div>\r\n            <routing-preview-panel [$minWidth]=\"coreFormDesignService.$afInstance().width\"/>\r\n            <div class=\"h50\"></div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #bottomTemplateRef>\r\n    <!-- <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $inputSectionsJson() }}</pre> -->\r\n    <!-- @if (isDevMode) {\r\n      <p class=\"dev-hint\">F3/ESC: Show/Hide afInstance | F6/ESC: Show/Hide Workflow</p>\r\n    } -->\r\n    @if ($showAfInstanceJson()) {\r\n      <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $afInstanceJson() }}</pre>\r\n    }\r\n    @if ($showWfWorkflowJson()) {\r\n      <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $wfWorkflowJson() }}</pre>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #buttonGroupTemplateRef>\r\n    <div class=\"button-group\">\r\n      <div class=\"button-group-left\"></div>\r\n      <div class=\"button-group-right\">\r\n        @if ($reactMode()) {\r\n          @if (true) {\r\n            <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>  \r\n          }\r\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"react('REJECTED')\">Reject</button>\r\n          <button type=\"button\" class=\"btn btn-primary\" (click)=\"react('APPROVED')\">Approve</button>\r\n        } @else {\r\n          <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-primary\">Send Request</button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n</div>", styles: [".live-form-container .modal-container{overflow-y:auto!important;box-sizing:border-box}.live-form-container .form-wrapper.live-form{padding-top:0;padding-bottom:15px;background-color:#fff;position:relative}.live-form-container .form-wrapper.live-form .live-form-header{padding:0 15px}.live-form-container .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.live-form-container .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.live-form-container .form-wrapper.live-form .submition-wrapper{display:flex;align-items:center;justify-content:flex-end;padding:0 24px;font-size:13px}.live-form-container .form-wrapper.live-form .submition-wrapper button{border-radius:0;font-size:13px}.live-form-container .form-wrapper.live-form .submition-wrapper button:not(:last-child){margin-right:8px}.live-form-container .form-wrapper.live-form .show-routing-wrapper{padding:15px;display:flex;align-items:center;justify-content:flex-end}.live-form-container .form-wrapper.live-form .show-routing-wrapper input{width:120px}.live-form-container .modal-content-root{padding:0;overflow-y:visible;background-color:transparent!important;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.live-form-container pre{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;max-height:500px;overflow-y:auto;margin:0}.live-form-container .dev-hint{font-size:12px;color:#888;background-color:#f9f9f9;padding:6px 12px;margin:8px 0;border-left:4px solid #ccc}.live-form-container .h50{height:50px}.live-form-container .routing-preview-wrapper{overflow:hidden;max-height:0;opacity:0;transform:translateY(-10px);transition:max-height .4s ease-out,opacity .4s ease-out,transform .4s ease-out}.live-form-container .routing-preview-wrapper.visible{max-height:800px;overflow:visible;opacity:1;transform:translateY(0)}.live-form-container .show-routing-wrapper button{height:35px;font-size:13px;border-radius:0;color:#fff}.live-form-container .hidden-requester-selector{position:absolute;width:0;height:0;top:-200px;left:-200px;overflow:visible}.live-form-container .button-group{padding:15px;display:flex;align-items:center;justify-content:flex-end}.live-form-container .button-group button{height:35px;border-radius:0;font-size:13px;margin:0 7.5px;width:120px}.live-form-container .button-group button:last-child{margin-right:0}\n"] }]
+                    ], template: "<div class=\"live-form-container\" [hotKeys]=\"['F3', 'F6', 'Escape']\">\r\n\r\n  @if ($normalMode()) {\r\n    <div class=\"form-wrapper live-form\" [ngStyle]=\"{\r\n        width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n    }\">\r\n      <div class=\"live-form-header\">\r\n        <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\"></core-page-header>\r\n      </div>\r\n\r\n      <core-form\r\n        [inputSections]=\"$effectiveSections()\"\r\n        [customFormButtonItems]=\"$customButtons()!\"\r\n        [forceCreateNewForm]=\"true\"\r\n        [mode$]=\"mode$\"\r\n        [hideButtons]=\"$previewMode()\"\r\n        [hideCalculatedSection]=\"true\"\r\n        [hideDevSector]=\"true\"\r\n        [bottomTemplateRef]=\"bottomTemplateRef\"\r\n        [buttonGroupTemplateRef]=\"buttonGroupTemplateRef\"\r\n        [checkError$]=\"checkError$\"\r\n        (onSubmit)=\"onLiveSubmit($event)\"\r\n        (onFormCreated)=\"onLiveFormCreated($event)\"\r\n        (onCancal)=\"onClose()\"\r\n      />\r\n\r\n      @if ($previewMode()) {\r\n        <div class=\"show-routing-wrapper\">\r\n          <button type=\"button\" class=\"btn btn-primary\" (click)=\"toggleShowRouting()\">\r\n            {{ $showLiveRouting() ? 'Hide Routing' : 'Show Routing' }}\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n\r\n    <div class=\"routing-preview-wrapper\" [class.visible]=\"$showLiveRouting()\">\r\n      @if ($showLiveRouting()) {\r\n        <routing-preview-panel />\r\n      }\r\n    </div>\r\n\r\n\r\n  } @else {\r\n    <div class=\"modal-container\">\r\n      <div class=\"modal-content-root no-padding\">\r\n\r\n        <div class=\"form-wrapper live-form\" [class.d-none]=\"$showLiveRouting()\" [ngStyle]=\"{\r\n            width: !!coreFormDesignService.$afInstance().width ? coreFormDesignService.$afInstance().width + 'px' : 'unset'\r\n        }\">\r\n\r\n          <div class=\"live-form-header\">\r\n            <core-page-header [title]=\"coreFormDesignService.$afInstance().captionCode | translate : lang\" [hideButtonGroup]=\"true\" />\r\n            <div class=\"preview-close-icon\" (click)=\"onClose()\">\r\n              <i class=\"feather-x\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <core-form\r\n            [inputSections]=\"$effectiveSections()\"\r\n            [customFormButtonItems]=\"$customButtons()!\"\r\n            [forceCreateNewForm]=\"true\"\r\n            [hideCalculatedSection]=\"true\"\r\n            [mode$]=\"mode$\"\r\n            [hideButtons]=\"$previewMode()\"\r\n            [bottomTemplateRef]=\"bottomTemplateRef\"\r\n            [buttonGroupTemplateRef]=\"buttonGroupTemplateRef\"\r\n            [hideDevSector]=\"false\"\r\n            [checkError$]=\"checkError$\"\r\n            (onSubmit)=\"onLiveSubmit($event)\"\r\n            (onFormCreated)=\"onLiveFormCreated($event)\"\r\n            (onCancal)=\"onClose()\"\r\n          />\r\n\r\n          <div class=\"submition-wrapper\">\r\n            <button type=\"button\" class=\"btn btn-secondary\" (click)=\"toggleShowRouting()\">\r\n              {{ $showLiveRouting() ? 'Hide Routing' : 'Show Routing' }}\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-primary\" (click)=\"initialSubmit()\">\r\n              Submit  \r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"routing-preview-wrapper\" [class.visible]=\"$showLiveRouting()\">\r\n          @if ($showLiveRouting()) {\r\n            <div class=\"h50\"></div>\r\n            <routing-preview-panel [$minWidth]=\"coreFormDesignService.$afInstance().width\"/>\r\n            <div class=\"h50\"></div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <ng-template #bottomTemplateRef>\r\n    <!-- <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $inputSectionsJson() }}</pre> -->\r\n    <!-- @if (isDevMode) {\r\n      <p class=\"dev-hint\">F3/ESC: Show/Hide afInstance | F6/ESC: Show/Hide Workflow</p>\r\n    } -->\r\n    @if ($showAfInstanceJson()) {\r\n      <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $afInstanceJson() }}</pre>\r\n    }\r\n    @if ($showWfWorkflowJson()) {\r\n      <pre [ngStyle]=\"{ maxWidth: !!$afInstance()?.width ? $afInstance()?.width! + 'px' : 'unset'}\">{{ $wfWorkflowJson() }}</pre>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #buttonGroupTemplateRef>\r\n    <div class=\"button-group\">\r\n      <div class=\"button-group-left\"></div>\r\n      <div class=\"button-group-right\">\r\n        @if ($reactMode()) {\r\n          @if (true) {\r\n            <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>  \r\n          }\r\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"react('REJECTED')\">Reject</button>\r\n          <button type=\"button\" class=\"btn btn-primary\" (click)=\"react('APPROVED')\">Approve</button>\r\n        } @else {\r\n          <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-primary\">Send Request</button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n</div>", styles: [".live-form-container .modal-container{overflow-y:auto!important;box-sizing:border-box}.live-form-container .form-wrapper.live-form{padding-top:0;padding-bottom:15px;background-color:#fff;position:relative}.live-form-container .form-wrapper.live-form .live-form-header{padding:0 15px}.live-form-container .form-wrapper.live-form .live-form-header .preview-close-icon{position:absolute;right:7px;top:6px;z-index:2;color:gray;cursor:pointer}.live-form-container .form-wrapper.live-form .live-form-header .preview-close-icon i{font-size:18px}.live-form-container .form-wrapper.live-form .submition-wrapper{display:flex;align-items:center;justify-content:flex-end;padding:0 24px;font-size:13px}.live-form-container .form-wrapper.live-form .submition-wrapper button{border-radius:0;font-size:13px}.live-form-container .form-wrapper.live-form .submition-wrapper button:not(:last-child){margin-right:8px}.live-form-container .form-wrapper.live-form .show-routing-wrapper{padding:15px;display:flex;align-items:center;justify-content:flex-end}.live-form-container .form-wrapper.live-form .show-routing-wrapper input{width:120px}.live-form-container .modal-content-root{padding:0;overflow-y:visible;background-color:transparent!important;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.live-form-container pre{background-color:#fff;color:#333;padding:1rem 1.5rem;border-radius:10px;box-shadow:0 2px 6px #00000014;font-family:Fira Code,monospace;font-size:.85rem;word-break:keep-all;overflow-x:auto;line-height:1.5;max-height:500px;overflow-y:auto;margin:0}.live-form-container .dev-hint{font-size:12px;color:#888;background-color:#f9f9f9;padding:6px 12px;margin:8px 0;border-left:4px solid #ccc}.live-form-container .h50{height:50px}.live-form-container .routing-preview-wrapper{overflow:hidden;max-height:0;opacity:0;transform:translateY(-10px);transition:max-height .4s ease-out,opacity .4s ease-out,transform .4s ease-out}.live-form-container .routing-preview-wrapper.visible{max-height:800px;overflow:visible;opacity:1;transform:translateY(0)}.live-form-container .show-routing-wrapper button{height:35px;font-size:13px;border-radius:0;color:#fff}.live-form-container .hidden-requester-selector{position:absolute;width:0;height:0;top:-200px;left:-200px;overflow:visible}.live-form-container .button-group{padding:15px;display:flex;align-items:center;justify-content:flex-end}.live-form-container .button-group button{height:35px;border-radius:0;font-size:13px;margin:0 7.5px;width:120px}.live-form-container .button-group button:last-child{margin-right:0}\n"] }]
         }], ctorParameters: () => [{ type: MultiLanguageService }, { type: CoreFormService }] });
 
 var liveForm_component = /*#__PURE__*/Object.freeze({
@@ -956,4 +916,4 @@ var liveForm_component = /*#__PURE__*/Object.freeze({
 });
 
 export { LiveFormComponent as L, RoutingPreviewPanelComponent as R, liveForm_component as l };
-//# sourceMappingURL=ngx-histaff-alpha-live-form.component-CkeOK3B7.mjs.map
+//# sourceMappingURL=ngx-histaff-alpha-live-form.component-x08G6uI3.mjs.map