ngx-histaff-alpha 5.7.3 → 5.7.4

package/fesm2022/{ngx-histaff-alpha-design-wrapper.route-DnkN49JV.mjs → ngx-histaff-alpha-design-wrapper.route-B2Pv8hQq.mjs}

@@ -1,23 +1,23 @@
-import { g as CanDeactivateGuard } from './ngx-histaff-alpha-ngx-histaff-alpha-BUV0gHis.mjs';
+import { g as CanDeactivateGuard } from './ngx-histaff-alpha-ngx-histaff-alpha-tEKeWJgJ.mjs';
 
 const wfDesignWrapperRoutes = [
     {
         path: '',
-        loadComponent: () => import('./ngx-histaff-alpha-design-wrapper.component-BiM3aKvD.mjs').then(m => m.DesignWrapperComponent),
+        loadComponent: () => import('./ngx-histaff-alpha-design-wrapper.component-CR2DfllM.mjs').then(m => m.DesignWrapperComponent),
         canDeactivate: [CanDeactivateGuard],
         children: [
             {
                 path: ':id',
                 outlet: 'preview',
-                loadComponent: () => import('./ngx-histaff-alpha-live-form.component-DdKOgA8G.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent)
+                loadComponent: () => import('./ngx-histaff-alpha-live-form.component-Djf5udbq.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent)
             },
         ]
     },
     {
         path: ':id',
-        loadComponent: () => import('./ngx-histaff-alpha-live-form.component-DdKOgA8G.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent)
+        loadComponent: () => import('./ngx-histaff-alpha-live-form.component-Djf5udbq.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent)
     }
 ];
 
 export { wfDesignWrapperRoutes };
-//# sourceMappingURL=ngx-histaff-alpha-design-wrapper.route-DnkN49JV.mjs.map
+//# sourceMappingURL=ngx-histaff-alpha-design-wrapper.route-B2Pv8hQq.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ngx-histaff-alpha-design-wrapper.route-DnkN49JV.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-B2Pv8hQq.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-live-form.component-DdKOgA8G.mjs → ngx-histaff-alpha-live-form.component-Djf5udbq.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, signal, isDevMode, computed, inject, HostListener, ChangeDetectionStrategy, Component, output, ChangeDetectorRef, Injector, effect } from '@angular/core';
-import { c as BaseComponent, $ as EnumImageResolverType, C as CoreWorkflowService, h as AlertService, z as AppConfigService, k as alertOptions, M as MultiLanguageService, T as TranslatePipe, I as ImageErrorResolverDirective, a0 as NormalizeHumanNamePipe, f as TooltipDirective, a1 as CoreIosSwitcherComponent, l as CoreTerminalSpinnerComponent, d as CorePageHeaderComponent, p as DomService, w as CoreParamControlComponent, m as CoreFormDesignService, y as ApplicationHelpService, J as JsonService, A as AppService, a2 as CoreFormService, E as EnumFormBaseContolType, K as EnumCorePageEditMode, L as EnumCoreButtonVNSCode, a as EnumCoreFormControlSeekerSourceType, H as HotKeysDirective, P as CoreFormComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-BUV0gHis.mjs';
+import { c as BaseComponent, $ as EnumImageResolverType, C as CoreWorkflowService, h as AlertService, z as AppConfigService, k as alertOptions, M as MultiLanguageService, T as TranslatePipe, I as ImageErrorResolverDirective, a0 as NormalizeHumanNamePipe, f as TooltipDirective, a1 as CoreIosSwitcherComponent, l as CoreTerminalSpinnerComponent, d as CorePageHeaderComponent, p as DomService, w as CoreParamControlComponent, m as CoreFormDesignService, y as ApplicationHelpService, J as JsonService, A as AppService, a2 as CoreFormService, E as EnumFormBaseContolType, K as EnumCorePageEditMode, L as EnumCoreButtonVNSCode, a as EnumCoreFormControlSeekerSourceType, H as HotKeysDirective, P as CoreFormComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-tEKeWJgJ.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';
@@ -19,7 +19,7 @@ class RoutingPreviewComponent extends BaseComponent {
         this.$backendMessage = signal('');
         this.$submitResponseItems = signal([]);
         this.$results = signal([]);
-        this.logExpandedStates = signal([]);
+        this.$logExpandedStates = signal([]);
         this.$logs = signal([]);
         this.imageResolverType = EnumImageResolverType.AVATAR;
         this.isDevMode = isDevMode();
@@ -112,7 +112,7 @@ class RoutingPreviewComponent extends BaseComponent {
                         this.liveForm.patchValue(response.attributes);
                     }
                     this.$results.set(validResults);
-                    this.logExpandedStates.set(new Array(validResults.length).fill(false));
+                    this.$logExpandedStates.set(new Array(validResults.length).fill(false));
                     this.$backendMessage.set(allErrors.join('\n'));
                 }
                 else {
@@ -171,14 +171,14 @@ class RoutingPreviewComponent extends BaseComponent {
         });
     }
     toggleLog(index) {
-        this.logExpandedStates.update(arr => {
+        this.$logExpandedStates.update(arr => {
             const newArr = [...arr];
             newArr[index] = !newArr[index];
             return newArr;
         });
     }
     isLogVisible(index) {
-        return this.logExpandedStates()?.[index] ?? false;
+        return this.$logExpandedStates()?.[index] ?? false;
     }
     getLogLinesFor(index) {
         const logs = this.$logs();
@@ -196,7 +196,7 @@ class RoutingPreviewComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: RoutingPreviewComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: RoutingPreviewComponent, isStandalone: true, selector: "routing-preview", inputs: { $previewMode: { classPropertyName: "$previewMode", publicName: "$previewMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown": "handleKeyDown($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"routing-preview-container inter-font p-relative\">\r\n\r\n  <div class=\"correlation-id\">\r\n\r\n    <!-- @if ($saga()?.correlationId) {\r\n      Workflow live instance: \r\n      <a [routerLink]=\"['/root/workflow/status', $saga()?.correlationId]\">\r\n        {{ $saga()?.correlationId }}\r\n      </a>\r\n    } -->\r\n\r\n    <!-- @if ($loading()) {\r\n    <core-terminal-spinner />\r\n    } @else if ($saga()?.correlationId) {\r\n    <button @fadeToggle type=\"button\" (click)=\"copy($saga()?.correlationId || '')\" class=\"copy-btn\">\r\n      <i class=\"feather-clipboard\"></i>\r\n    </button>\r\n\r\n    } -->\r\n  </div>\r\n\r\n  <div class=\"routing-preview-header\">\r\n\r\n    <div class=\"button-group\">\r\n      <button type=\"button\" class=\"btn btn-primary h35\" (click)=\"backToLiveForm()\">Back to Form (ESC)</button>\r\n      <button type=\"button\" class=\"btn btn-secondary h35\" (click)=\"generateRouting()\">Generate</button>\r\n      @if (!!appConfigService.WORKFLOW_ENABLE_DEBUG_MODE && $isDebugMode()) {\r\n      <button @fadeToggle type=\"button\" class=\"btn btn-secondary h35\" (click)=\"toggleResolvedSteps()\">Show/Hide resolved\r\n        steps</button>\r\n      }\r\n      <button @fadeToggle type=\"button\" class=\"btn btn-primary h35\" (click)=\"initialDebugSubmit()\">Submit</button>\r\n    </div>\r\n\r\n    @if (!!appConfigService.WORKFLOW_ENABLE_DEBUG_MODE) {\r\n    <div class=\"debug-group\">\r\n      <label>Debug mode</label>\r\n      <core-ios-switcher [width]=\"45\" [showOnOffText]=\"false\" [ngModel]=\"$isDebugMode()\"\r\n        (ngModelChange)=\"onIsDebugModeChange($event)\"></core-ios-switcher>\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  <div class=\"workflows-wrapper\">\r\n    @if ($loading()) {\r\n      <core-terminal-spinner /><span>Generating...</span>\r\n    } @else {\r\n\r\n\r\n    @if (!!$results().length) {\r\n\r\n    @for (result of $results(); track $index) {\r\n\r\n    <div class=\"result-group mb-8 p-4 rounded bg-white shadow-sm\">\r\n\r\n      <div class=\"flex items-center justify-between mb-3\">\r\n        <h6 class=\"text-base font-semibold text-sky-700\">Routing for {{ result.targetEmployeeFullName }}</h6>\r\n        <div class=\"d-flex d-flex-between\">\r\n          <button type=\"button\" class=\"text-xs text-blue-500 underline btn btn-secondary\" (click)=\"toggleLog($index)\">\r\n            {{ logExpandedStates()[ $index ] ? 'Hide log' : 'Show log' }}\r\n          </button>\r\n          @if ($loading()) {\r\n            <core-terminal-spinner />\r\n          }\r\n          <!-- @if (!!$submitResponseItems().length && !!getCorrelationId(result)) {\r\n            <div class=\"saga-link d-flex d-flex-start\">\r\n              <label>The process activated:</label>\r\n              <a class=\"external-link\" [routerLink]=\"['/root/workflow/status', getCorrelationId(result)]\">\r\n                Click here to see status\r\n              </a>\r\n            </div>\r\n          } -->\r\n            @for (result of $submitResponseItems(); track result.employeeId) {\r\n              <div class=\"saga-link d-flex d-flex-start\">\r\n                <label>{{ result.employeeFullName }}:</label>\r\n\r\n                @if (result.correlationId) {\r\n                  <a class=\"external-link\" [routerLink]=\"['/root/workflow/status', result.correlationId]\">\r\n                    \u2705 Click to see status\r\n                  </a>\r\n                } @else {\r\n                  <span class=\"text-danger d-flex flex-column\">\r\n                    @for (line of (result.error?.split('\\n') || []); track line) {\r\n                      <div>\u274C {{ line }}</div>\r\n                    }\r\n                  </span>\r\n                }\r\n              </div>\r\n            }\r\n\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"workflow-wrapper\">\r\n\r\n        @for (step of result.response.steps! ?? []; track step.id) {\r\n        <div class=\"step-column\" [attr.data-actor-count]=\"step.resolvedActors?.length || 0\">\r\n\r\n          <div class=\"step-column-aux\">\r\n\r\n            <div class=\"step-header {{ step.type.toLowerCase() }}\"\r\n              [ngClass]=\"(step.actorResolvedStatus ?? 'RESOLVED').toLowerCase()\">\r\n              {{ step.name | translate : lang }} {{ step.config?.routingLogic }}\r\n            </div>\r\n\r\n            @for (actor of step.resolvedActors; track $index) {\r\n            <div class=\"actor-card-aux\">\r\n              <div class=\"actor-card d-flex d-flex-start {{ step.type.toLowerCase() }}\">\r\n                <div class=\"avatar-wrapper\">\r\n                  <img [src]=\"actor.avatar\" appImageErrorResolver [type]=\"imageResolverType\"\r\n                    [isFemale]=\"!!actor.isFemale!\" class=\"actor-avatar\" alt=\"{{ actor.fullName }}\" />\r\n                </div>\r\n                <div class=\"actor-details\">\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-user\"></i>\r\n                    <span class=\"actor-full-name\" [appTooltip]=\"actor.fullName\">{{ actor.fullName | normalizeHumanName\r\n                      }}</span>\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-briefcase\"></i>\r\n                    <span [appTooltip]=\"actor.jobName\">{{ actor.jobName }}</span>\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-mail\"></i>\r\n                    @if ($isDebugMode()) {\r\n                    <input @fadeToggle class=\"email-debug-input\" type=\"email\" [(ngModel)]=\"actor.email\"\r\n                      (ngModelChange)=\"onEmailChange(actor, $event)\" placeholder=\"Enter demo email\" />\r\n                    } @else {\r\n                    <span [appTooltip]=\"actor.email\">{{ actor.email }}</span>\r\n                    }\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-hash\"></i>\r\n                    <span @fadeToggle [appTooltip]=\"actor.employeeCode\">{{ actor.employeeCode }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      @if (isLogVisible($index)) {\r\n      <pre class=\"employee-log mt-4 bg-gray-50 p-3 rounded text-xs font-mono text-gray-800\">\r\n          @for (line of getLogLinesFor($index); track $index) {\r\n            {{ line }}\r\n          }\r\n        </pre>\r\n      }\r\n\r\n    </div>\r\n\r\n    }\r\n\r\n    } @else if (!!$backendMessage()) {\r\n\r\n    <div class=\"backend-message error-list bg-red-50 rounded p-4 text-sm text-red-800 leading-relaxed\">\r\n      @for (line of $backendMessage().split('\\n'); track $index) {\r\n      <div class=\"error-item flex items-start gap-2\">\r\n        <i class=\"feather-alert-circle text-red-600 mt-0.5\"></i>\r\n        <span [innerText]=\"line\"></span>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    } @else {\r\n    No routing steps found.\r\n    }\r\n\r\n\r\n    }\r\n\r\n  </div>\r\n\r\n  @if ($showResolvedSteps()) {\r\n  <h5>Resolved steps</h5>\r\n  <div class=\"resolved-steps\">\r\n    <!-- <pre>{{ $resolvedStepsJson() }}</pre> -->\r\n  </div>\r\n  }\r\n\r\n</div>", styles: [".routing-preview-container{font-size:13px}.routing-preview-container .correlation-id{display:flex;align-items:center;height:35px;font-family:monospace}.routing-preview-container .correlation-id button{border:none;margin-left:8px}.routing-preview-container .workflow-wrapper{display:flex;flex-direction:row;gap:64px;padding:24px;background:#f5f5f5;overflow-x:auto;min-width:576px;min-height:200px}.routing-preview-container .workflow-wrapper .step-column{width:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;position:relative;min-height:100%}.routing-preview-container .workflow-wrapper .step-header{position:relative;font-weight:600;font-size:14px;text-align:center;border:1px solid #ccc;border-radius:8px;box-shadow:0 1px 3px #0000001a;padding:6px 10px;margin-bottom:10px;width:100%;color:#fff}.routing-preview-container .workflow-wrapper .step-header.submit{background-color:#00bcd4}.routing-preview-container .workflow-wrapper .step-header.approval{background-color:#f80}.routing-preview-container .workflow-wrapper .step-header.cc{background-color:#3370ff}.routing-preview-container .workflow-wrapper .step-header.handle{background-color:#935af6}.routing-preview-container .workflow-wrapper .step-header.end{background-color:#673ab7}.routing-preview-container .workflow-wrapper .step-header.resolved{box-shadow:0 0 0 3px #4caf50 inset}.routing-preview-container .workflow-wrapper .step-header.empty{box-shadow:0 0 0 3px #ff9800 inset}.routing-preview-container .workflow-wrapper .step-header.fallback{box-shadow:0 0 0 3px #03a9f4 inset}.routing-preview-container .workflow-wrapper .step-header.error{box-shadow:0 0 0 3px #f44336 inset}.routing-preview-container .workflow-wrapper .actor-card-aux{position:relative}.routing-preview-container .workflow-wrapper .actor-card.d-flex{display:flex;align-items:center;justify-content:flex-start;width:240px;height:110px;font-size:13px;border:1px solid #ccc;padding:0 12px;margin:8px auto;box-shadow:0 1px 3px #0000001a;position:relative;background-color:#fff;border-radius:8px}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-details .actor-line>span{font-weight:700;width:140px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-details .actor-line>span.actor-full-name{color:#000}.routing-preview-container .workflow-wrapper .actor-card.d-flex .avatar-wrapper{flex-shrink:0;margin-right:8px}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #ccc}.routing-preview-container .workflow-wrapper .step-column:not(:first-child) .actor-card:before{content:\"\";position:absolute;top:50%;left:-20px;width:16px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:first-child) .actor-card-aux:not(:last-child) .actor-card:after{content:\"\";position:absolute;top:50%;left:-20px;width:2px;height:calc(100% + 10px);background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .actor-card-aux:before{content:\"\";position:absolute;top:50%;right:-16px;width:16px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .actor-card-aux:not(:last-child):after{content:\"\";position:absolute;top:50%;right:-16px;width:2px;height:calc(100% + 10px);background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column-aux{position:relative}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .step-column-aux:after{content:\"\";position:absolute;top:calc(50% + 18.5px);right:-48px;width:32px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .actor-card.submit{background-color:#e0f7fa;border-left:4px solid #00bcd4}.routing-preview-container .workflow-wrapper .actor-card.approval{background-color:#fff3e0;border-left:4px solid #f80}.routing-preview-container .workflow-wrapper .actor-card.cc{background-color:#e6ecff;border-left:4px solid #3370ff}.routing-preview-container .workflow-wrapper .actor-card.handle{background-color:#f3e6ff;border-left:4px solid #935af6}.routing-preview-container .workflow-wrapper .actor-card.end{background-color:#ede7f6;border-left:4px solid #673ab7}.routing-preview-container .workflow-wrapper .actor-line{display:flex;align-items:center;gap:6px;margin:2px 0;height:23.5px}.routing-preview-container .workflow-wrapper .actor-line i{width:16px;height:16px;font-size:16px;color:#848484}.routing-preview-container .workflow-wrapper .actor-line input.email-debug-input{border:1px dashed #00bcd4;background-color:#e0f7fa;width:140px;padding:0 8px}.routing-preview-container .workflow-wrapper .actor-card span{display:block;color:#555;margin:2px 0}@media (max-width: 576px){.routing-preview-container .workflow-wrapper .workflow-wrapper{flex-direction:column;align-items:center;gap:24px}.routing-preview-container .workflow-wrapper .step-column{width:90vw}.routing-preview-container .workflow-wrapper .actor-card{width:100%}}.routing-preview-container .p-relative{position:relative}.routing-preview-container .routing-preview-header{display:flex;align-items:center;justify-content:space-between;height:35px;margin-bottom:15px}.routing-preview-container .routing-preview-header .button-group{display:flex;align-items:center;justify-content:flex-start;gap:8px;height:35px}.routing-preview-container .routing-preview-header .button-group button{border-radius:0;color:#fff;height:35px;font-size:13px}.routing-preview-container .routing-preview-header .debug-group{display:flex;align-items:center;justify-content:flex-start;height:35px}.routing-preview-container .routing-preview-header .debug-group label{-webkit-user-select:none;user-select:none;margin-right:8px}.routing-preview-container h5{padding:15px;color:#848484}.routing-preview-container .resolved-steps pre{padding:15px}.routing-preview-container .employee-log{max-width:100%;overflow-x:auto;background:#f9f9f9;border-left:4px solid #3b82f6;padding:12px 16px;margin-top:16px;font-family:monospace;font-size:13px;border-radius:6px;white-space:pre-wrap;box-sizing:border-box}.routing-preview-container .saga-link label{font-size:13px;color:#848484;margin-right:8px}.routing-preview-container a.external-link{color:#358ccb!important}.routing-preview-container a.external-link:after{font-family:feather;content:\"\\e95b\"}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: ImageErrorResolverDirective, selector: "[appImageErrorResolver]", inputs: ["type", "isFemale"] }, { kind: "pipe", type: NormalizeHumanNamePipe, name: "normalizeHumanName" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "component", type: CoreIosSwitcherComponent, selector: "core-ios-switcher", inputs: ["bgColor", "showOnOffText", "width", "readonly"] }, { kind: "component", type: CoreTerminalSpinnerComponent, selector: "core-terminal-spinner" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: RoutingPreviewComponent, isStandalone: true, selector: "routing-preview", inputs: { $previewMode: { classPropertyName: "$previewMode", publicName: "$previewMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown": "handleKeyDown($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"routing-preview-container inter-font p-relative\">\r\n\r\n  <div class=\"correlation-id\">\r\n\r\n    <!-- @if ($saga()?.correlationId) {\r\n      Workflow live instance: \r\n      <a [routerLink]=\"['/root/workflow/status', $saga()?.correlationId]\">\r\n        {{ $saga()?.correlationId }}\r\n      </a>\r\n    } -->\r\n\r\n    <!-- @if ($loading()) {\r\n    <core-terminal-spinner />\r\n    } @else if ($saga()?.correlationId) {\r\n    <button @fadeToggle type=\"button\" (click)=\"copy($saga()?.correlationId || '')\" class=\"copy-btn\">\r\n      <i class=\"feather-clipboard\"></i>\r\n    </button>\r\n\r\n    } -->\r\n  </div>\r\n\r\n  <div class=\"routing-preview-header\">\r\n\r\n    <div class=\"button-group\">\r\n      <button type=\"button\" class=\"btn btn-primary h35\" (click)=\"backToLiveForm()\">Back to Form (ESC)</button>\r\n      <button type=\"button\" class=\"btn btn-secondary h35\" (click)=\"generateRouting()\">Generate</button>\r\n      @if (!!appConfigService.WORKFLOW_ENABLE_DEBUG_MODE && $isDebugMode()) {\r\n      <button @fadeToggle type=\"button\" class=\"btn btn-secondary h35\" (click)=\"toggleResolvedSteps()\">Show/Hide resolved\r\n        steps</button>\r\n      }\r\n      <button @fadeToggle type=\"button\" class=\"btn btn-primary h35\" (click)=\"initialDebugSubmit()\">Submit</button>\r\n    </div>\r\n\r\n    @if (!!appConfigService.WORKFLOW_ENABLE_DEBUG_MODE) {\r\n    <div class=\"debug-group\">\r\n      <label>Debug mode</label>\r\n      <core-ios-switcher [width]=\"45\" [showOnOffText]=\"false\" [ngModel]=\"$isDebugMode()\"\r\n        (ngModelChange)=\"onIsDebugModeChange($event)\"></core-ios-switcher>\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  <div class=\"workflows-wrapper\">\r\n    @if ($loading()) {\r\n      <core-terminal-spinner /><span>Generating...</span>\r\n    } @else {\r\n\r\n\r\n    @if (!!$results().length) {\r\n\r\n    @for (result of $results(); track $index) {\r\n\r\n    <div class=\"result-group mb-8 p-4 rounded bg-white shadow-sm\">\r\n\r\n      <div class=\"flex items-center justify-between mb-3\">\r\n        <h6 class=\"text-base font-semibold text-sky-700\">Routing for {{ result.targetEmployeeFullName }}</h6>\r\n        <div class=\"d-flex d-flex-between\">\r\n          <button type=\"button\" class=\"text-xs text-blue-500 underline btn btn-secondary\" (click)=\"toggleLog($index)\">\r\n            {{ $logExpandedStates()[ $index ] ? 'Hide log' : 'Show log' }}\r\n          </button>\r\n          @if ($loading()) {\r\n            <core-terminal-spinner />\r\n          }\r\n          <!-- @if (!!$submitResponseItems().length && !!getCorrelationId(result)) {\r\n            <div class=\"saga-link d-flex d-flex-start\">\r\n              <label>The process activated:</label>\r\n              <a class=\"external-link\" [routerLink]=\"['/root/workflow/status', getCorrelationId(result)]\">\r\n                Click here to see status\r\n              </a>\r\n            </div>\r\n          } -->\r\n            @for (result of $submitResponseItems(); track result.employeeId) {\r\n              <div class=\"saga-link d-flex d-flex-start\">\r\n                <label>{{ result.employeeFullName }}:</label>\r\n\r\n                @if (result.correlationId) {\r\n                  <a class=\"external-link\" [routerLink]=\"['/root/workflow/status', result.correlationId]\">\r\n                    \u2705 Click to see status\r\n                  </a>\r\n                } @else {\r\n                  <span class=\"text-danger d-flex flex-column\">\r\n                    @for (line of (result.error?.split('\\n') || []); track line) {\r\n                      <div>\u274C {{ line }}</div>\r\n                    }\r\n                  </span>\r\n                }\r\n              </div>\r\n            }\r\n\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"workflow-wrapper\">\r\n\r\n        @for (step of result.response.steps! ?? []; track step.id) {\r\n        <div class=\"step-column\" [attr.data-actor-count]=\"step.resolvedActors?.length || 0\">\r\n\r\n          <div class=\"step-column-aux\">\r\n\r\n            <div class=\"step-header {{ step.type.toLowerCase() }}\"\r\n              [ngClass]=\"(step.actorResolvedStatus ?? 'RESOLVED').toLowerCase()\">\r\n              {{ step.name | translate : lang }} {{ step.config?.routingLogic }}\r\n            </div>\r\n\r\n            @for (actor of step.resolvedActors; track $index) {\r\n            <div class=\"actor-card-aux\">\r\n              <div class=\"actor-card d-flex d-flex-start {{ step.type.toLowerCase() }}\">\r\n                <div class=\"avatar-wrapper\">\r\n                  <img [src]=\"actor.avatar\" appImageErrorResolver [type]=\"imageResolverType\"\r\n                    [isFemale]=\"!!actor.isFemale!\" class=\"actor-avatar\" alt=\"{{ actor.fullName }}\" />\r\n                </div>\r\n                <div class=\"actor-details\">\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-user\"></i>\r\n                    <span class=\"actor-full-name\" [appTooltip]=\"actor.fullName\">{{ actor.fullName | normalizeHumanName\r\n                      }}</span>\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-briefcase\"></i>\r\n                    <span [appTooltip]=\"actor.jobName\">{{ actor.jobName }}</span>\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-mail\"></i>\r\n                    @if ($isDebugMode()) {\r\n                    <input @fadeToggle class=\"email-debug-input\" type=\"email\" [(ngModel)]=\"actor.email\"\r\n                      (ngModelChange)=\"onEmailChange(actor, $event)\" placeholder=\"Enter demo email\" />\r\n                    } @else {\r\n                    <span [appTooltip]=\"actor.email\">{{ actor.email }}</span>\r\n                    }\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-hash\"></i>\r\n                    <span @fadeToggle [appTooltip]=\"actor.employeeCode\">{{ actor.employeeCode }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      @if (isLogVisible($index)) {\r\n      <pre class=\"employee-log mt-4 bg-gray-50 p-3 rounded text-xs font-mono text-gray-800\">\r\n          @for (line of getLogLinesFor($index); track $index) {\r\n            {{ line }}\r\n          }\r\n        </pre>\r\n      }\r\n\r\n    </div>\r\n\r\n    }\r\n\r\n    } @else if (!!$backendMessage()) {\r\n\r\n    <div class=\"backend-message error-list bg-red-50 rounded p-4 text-sm text-red-800 leading-relaxed\">\r\n      @for (line of $backendMessage().split('\\n'); track $index) {\r\n      <div class=\"error-item flex items-start gap-2\">\r\n        <i class=\"feather-alert-circle text-red-600 mt-0.5\"></i>\r\n        <span [innerText]=\"line\"></span>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    } @else {\r\n    No routing steps found.\r\n    }\r\n\r\n\r\n    }\r\n\r\n  </div>\r\n\r\n  @if ($showResolvedSteps()) {\r\n  <h5>Resolved steps</h5>\r\n  <div class=\"resolved-steps\">\r\n    <!-- <pre>{{ $resolvedStepsJson() }}</pre> -->\r\n  </div>\r\n  }\r\n\r\n</div>", styles: [".routing-preview-container{font-size:13px}.routing-preview-container .correlation-id{display:flex;align-items:center;height:35px;font-family:monospace}.routing-preview-container .correlation-id button{border:none;margin-left:8px}.routing-preview-container .workflow-wrapper{display:flex;flex-direction:row;gap:64px;padding:24px;background:#f5f5f5;overflow-x:auto;min-width:576px;min-height:200px}.routing-preview-container .workflow-wrapper .step-column{width:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;position:relative;min-height:100%}.routing-preview-container .workflow-wrapper .step-header{position:relative;font-weight:600;font-size:14px;text-align:center;border:1px solid #ccc;border-radius:8px;box-shadow:0 1px 3px #0000001a;padding:6px 10px;margin-bottom:10px;width:100%;color:#fff}.routing-preview-container .workflow-wrapper .step-header.submit{background-color:#00bcd4}.routing-preview-container .workflow-wrapper .step-header.approval{background-color:#f80}.routing-preview-container .workflow-wrapper .step-header.cc{background-color:#3370ff}.routing-preview-container .workflow-wrapper .step-header.handle{background-color:#935af6}.routing-preview-container .workflow-wrapper .step-header.end{background-color:#673ab7}.routing-preview-container .workflow-wrapper .step-header.resolved{box-shadow:0 0 0 3px #4caf50 inset}.routing-preview-container .workflow-wrapper .step-header.empty{box-shadow:0 0 0 3px #ff9800 inset}.routing-preview-container .workflow-wrapper .step-header.fallback{box-shadow:0 0 0 3px #03a9f4 inset}.routing-preview-container .workflow-wrapper .step-header.error{box-shadow:0 0 0 3px #f44336 inset}.routing-preview-container .workflow-wrapper .actor-card-aux{position:relative}.routing-preview-container .workflow-wrapper .actor-card.d-flex{display:flex;align-items:center;justify-content:flex-start;width:240px;height:110px;font-size:13px;border:1px solid #ccc;padding:0 12px;margin:8px auto;box-shadow:0 1px 3px #0000001a;position:relative;background-color:#fff;border-radius:8px}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-details .actor-line>span{font-weight:700;width:140px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-details .actor-line>span.actor-full-name{color:#000}.routing-preview-container .workflow-wrapper .actor-card.d-flex .avatar-wrapper{flex-shrink:0;margin-right:8px}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #ccc}.routing-preview-container .workflow-wrapper .step-column:not(:first-child) .actor-card:before{content:\"\";position:absolute;top:50%;left:-20px;width:16px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:first-child) .actor-card-aux:not(:last-child) .actor-card:after{content:\"\";position:absolute;top:50%;left:-20px;width:2px;height:calc(100% + 10px);background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .actor-card-aux:before{content:\"\";position:absolute;top:50%;right:-16px;width:16px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .actor-card-aux:not(:last-child):after{content:\"\";position:absolute;top:50%;right:-16px;width:2px;height:calc(100% + 10px);background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column-aux{position:relative}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .step-column-aux:after{content:\"\";position:absolute;top:calc(50% + 18.5px);right:-48px;width:32px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .actor-card.submit{background-color:#e0f7fa;border-left:4px solid #00bcd4}.routing-preview-container .workflow-wrapper .actor-card.approval{background-color:#fff3e0;border-left:4px solid #f80}.routing-preview-container .workflow-wrapper .actor-card.cc{background-color:#e6ecff;border-left:4px solid #3370ff}.routing-preview-container .workflow-wrapper .actor-card.handle{background-color:#f3e6ff;border-left:4px solid #935af6}.routing-preview-container .workflow-wrapper .actor-card.end{background-color:#ede7f6;border-left:4px solid #673ab7}.routing-preview-container .workflow-wrapper .actor-line{display:flex;align-items:center;gap:6px;margin:2px 0;height:23.5px}.routing-preview-container .workflow-wrapper .actor-line i{width:16px;height:16px;font-size:16px;color:#848484}.routing-preview-container .workflow-wrapper .actor-line input.email-debug-input{border:1px dashed #00bcd4;background-color:#e0f7fa;width:140px;padding:0 8px}.routing-preview-container .workflow-wrapper .actor-card span{display:block;color:#555;margin:2px 0}@media (max-width: 576px){.routing-preview-container .workflow-wrapper .workflow-wrapper{flex-direction:column;align-items:center;gap:24px}.routing-preview-container .workflow-wrapper .step-column{width:90vw}.routing-preview-container .workflow-wrapper .actor-card{width:100%}}.routing-preview-container .p-relative{position:relative}.routing-preview-container .routing-preview-header{display:flex;align-items:center;justify-content:space-between;height:35px;margin-bottom:15px}.routing-preview-container .routing-preview-header .button-group{display:flex;align-items:center;justify-content:flex-start;gap:8px;height:35px}.routing-preview-container .routing-preview-header .button-group button{border-radius:0;color:#fff;height:35px;font-size:13px}.routing-preview-container .routing-preview-header .debug-group{display:flex;align-items:center;justify-content:flex-start;height:35px}.routing-preview-container .routing-preview-header .debug-group label{-webkit-user-select:none;user-select:none;margin-right:8px}.routing-preview-container h5{padding:15px;color:#848484}.routing-preview-container .resolved-steps pre{padding:15px}.routing-preview-container .employee-log{max-width:100%;overflow-x:auto;background:#f9f9f9;border-left:4px solid #3b82f6;padding:12px 16px;margin-top:16px;font-family:monospace;font-size:13px;border-radius:6px;white-space:pre-wrap;box-sizing:border-box}.routing-preview-container .saga-link label{font-size:13px;color:#848484;margin-right:8px}.routing-preview-container a.external-link{color:#358ccb!important}.routing-preview-container a.external-link:after{font-family:feather;content:\"\\e95b\"}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: ImageErrorResolverDirective, selector: "[appImageErrorResolver]", inputs: ["type", "isFemale"] }, { kind: "pipe", type: NormalizeHumanNamePipe, name: "normalizeHumanName" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "component", type: CoreIosSwitcherComponent, selector: "core-ios-switcher", inputs: ["bgColor", "showOnOffText", "width", "readonly"] }, { kind: "component", type: CoreTerminalSpinnerComponent, selector: "core-terminal-spinner" }], animations: [
             trigger('fadeToggle', [
                 transition(':enter', [
                     style({ opacity: 0 }),
@@ -232,7 +232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                                 animate('150ms ease-in', style({ opacity: 0 }))
                             ])
                         ])
-                    ], template: "<div class=\"routing-preview-container inter-font p-relative\">\r\n\r\n  <div class=\"correlation-id\">\r\n\r\n    <!-- @if ($saga()?.correlationId) {\r\n      Workflow live instance: \r\n      <a [routerLink]=\"['/root/workflow/status', $saga()?.correlationId]\">\r\n        {{ $saga()?.correlationId }}\r\n      </a>\r\n    } -->\r\n\r\n    <!-- @if ($loading()) {\r\n    <core-terminal-spinner />\r\n    } @else if ($saga()?.correlationId) {\r\n    <button @fadeToggle type=\"button\" (click)=\"copy($saga()?.correlationId || '')\" class=\"copy-btn\">\r\n      <i class=\"feather-clipboard\"></i>\r\n    </button>\r\n\r\n    } -->\r\n  </div>\r\n\r\n  <div class=\"routing-preview-header\">\r\n\r\n    <div class=\"button-group\">\r\n      <button type=\"button\" class=\"btn btn-primary h35\" (click)=\"backToLiveForm()\">Back to Form (ESC)</button>\r\n      <button type=\"button\" class=\"btn btn-secondary h35\" (click)=\"generateRouting()\">Generate</button>\r\n      @if (!!appConfigService.WORKFLOW_ENABLE_DEBUG_MODE && $isDebugMode()) {\r\n      <button @fadeToggle type=\"button\" class=\"btn btn-secondary h35\" (click)=\"toggleResolvedSteps()\">Show/Hide resolved\r\n        steps</button>\r\n      }\r\n      <button @fadeToggle type=\"button\" class=\"btn btn-primary h35\" (click)=\"initialDebugSubmit()\">Submit</button>\r\n    </div>\r\n\r\n    @if (!!appConfigService.WORKFLOW_ENABLE_DEBUG_MODE) {\r\n    <div class=\"debug-group\">\r\n      <label>Debug mode</label>\r\n      <core-ios-switcher [width]=\"45\" [showOnOffText]=\"false\" [ngModel]=\"$isDebugMode()\"\r\n        (ngModelChange)=\"onIsDebugModeChange($event)\"></core-ios-switcher>\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  <div class=\"workflows-wrapper\">\r\n    @if ($loading()) {\r\n      <core-terminal-spinner /><span>Generating...</span>\r\n    } @else {\r\n\r\n\r\n    @if (!!$results().length) {\r\n\r\n    @for (result of $results(); track $index) {\r\n\r\n    <div class=\"result-group mb-8 p-4 rounded bg-white shadow-sm\">\r\n\r\n      <div class=\"flex items-center justify-between mb-3\">\r\n        <h6 class=\"text-base font-semibold text-sky-700\">Routing for {{ result.targetEmployeeFullName }}</h6>\r\n        <div class=\"d-flex d-flex-between\">\r\n          <button type=\"button\" class=\"text-xs text-blue-500 underline btn btn-secondary\" (click)=\"toggleLog($index)\">\r\n            {{ logExpandedStates()[ $index ] ? 'Hide log' : 'Show log' }}\r\n          </button>\r\n          @if ($loading()) {\r\n            <core-terminal-spinner />\r\n          }\r\n          <!-- @if (!!$submitResponseItems().length && !!getCorrelationId(result)) {\r\n            <div class=\"saga-link d-flex d-flex-start\">\r\n              <label>The process activated:</label>\r\n              <a class=\"external-link\" [routerLink]=\"['/root/workflow/status', getCorrelationId(result)]\">\r\n                Click here to see status\r\n              </a>\r\n            </div>\r\n          } -->\r\n            @for (result of $submitResponseItems(); track result.employeeId) {\r\n              <div class=\"saga-link d-flex d-flex-start\">\r\n                <label>{{ result.employeeFullName }}:</label>\r\n\r\n                @if (result.correlationId) {\r\n                  <a class=\"external-link\" [routerLink]=\"['/root/workflow/status', result.correlationId]\">\r\n                    \u2705 Click to see status\r\n                  </a>\r\n                } @else {\r\n                  <span class=\"text-danger d-flex flex-column\">\r\n                    @for (line of (result.error?.split('\\n') || []); track line) {\r\n                      <div>\u274C {{ line }}</div>\r\n                    }\r\n                  </span>\r\n                }\r\n              </div>\r\n            }\r\n\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"workflow-wrapper\">\r\n\r\n        @for (step of result.response.steps! ?? []; track step.id) {\r\n        <div class=\"step-column\" [attr.data-actor-count]=\"step.resolvedActors?.length || 0\">\r\n\r\n          <div class=\"step-column-aux\">\r\n\r\n            <div class=\"step-header {{ step.type.toLowerCase() }}\"\r\n              [ngClass]=\"(step.actorResolvedStatus ?? 'RESOLVED').toLowerCase()\">\r\n              {{ step.name | translate : lang }} {{ step.config?.routingLogic }}\r\n            </div>\r\n\r\n            @for (actor of step.resolvedActors; track $index) {\r\n            <div class=\"actor-card-aux\">\r\n              <div class=\"actor-card d-flex d-flex-start {{ step.type.toLowerCase() }}\">\r\n                <div class=\"avatar-wrapper\">\r\n                  <img [src]=\"actor.avatar\" appImageErrorResolver [type]=\"imageResolverType\"\r\n                    [isFemale]=\"!!actor.isFemale!\" class=\"actor-avatar\" alt=\"{{ actor.fullName }}\" />\r\n                </div>\r\n                <div class=\"actor-details\">\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-user\"></i>\r\n                    <span class=\"actor-full-name\" [appTooltip]=\"actor.fullName\">{{ actor.fullName | normalizeHumanName\r\n                      }}</span>\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-briefcase\"></i>\r\n                    <span [appTooltip]=\"actor.jobName\">{{ actor.jobName }}</span>\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-mail\"></i>\r\n                    @if ($isDebugMode()) {\r\n                    <input @fadeToggle class=\"email-debug-input\" type=\"email\" [(ngModel)]=\"actor.email\"\r\n                      (ngModelChange)=\"onEmailChange(actor, $event)\" placeholder=\"Enter demo email\" />\r\n                    } @else {\r\n                    <span [appTooltip]=\"actor.email\">{{ actor.email }}</span>\r\n                    }\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-hash\"></i>\r\n                    <span @fadeToggle [appTooltip]=\"actor.employeeCode\">{{ actor.employeeCode }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      @if (isLogVisible($index)) {\r\n      <pre class=\"employee-log mt-4 bg-gray-50 p-3 rounded text-xs font-mono text-gray-800\">\r\n          @for (line of getLogLinesFor($index); track $index) {\r\n            {{ line }}\r\n          }\r\n        </pre>\r\n      }\r\n\r\n    </div>\r\n\r\n    }\r\n\r\n    } @else if (!!$backendMessage()) {\r\n\r\n    <div class=\"backend-message error-list bg-red-50 rounded p-4 text-sm text-red-800 leading-relaxed\">\r\n      @for (line of $backendMessage().split('\\n'); track $index) {\r\n      <div class=\"error-item flex items-start gap-2\">\r\n        <i class=\"feather-alert-circle text-red-600 mt-0.5\"></i>\r\n        <span [innerText]=\"line\"></span>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    } @else {\r\n    No routing steps found.\r\n    }\r\n\r\n\r\n    }\r\n\r\n  </div>\r\n\r\n  @if ($showResolvedSteps()) {\r\n  <h5>Resolved steps</h5>\r\n  <div class=\"resolved-steps\">\r\n    <!-- <pre>{{ $resolvedStepsJson() }}</pre> -->\r\n  </div>\r\n  }\r\n\r\n</div>", styles: [".routing-preview-container{font-size:13px}.routing-preview-container .correlation-id{display:flex;align-items:center;height:35px;font-family:monospace}.routing-preview-container .correlation-id button{border:none;margin-left:8px}.routing-preview-container .workflow-wrapper{display:flex;flex-direction:row;gap:64px;padding:24px;background:#f5f5f5;overflow-x:auto;min-width:576px;min-height:200px}.routing-preview-container .workflow-wrapper .step-column{width:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;position:relative;min-height:100%}.routing-preview-container .workflow-wrapper .step-header{position:relative;font-weight:600;font-size:14px;text-align:center;border:1px solid #ccc;border-radius:8px;box-shadow:0 1px 3px #0000001a;padding:6px 10px;margin-bottom:10px;width:100%;color:#fff}.routing-preview-container .workflow-wrapper .step-header.submit{background-color:#00bcd4}.routing-preview-container .workflow-wrapper .step-header.approval{background-color:#f80}.routing-preview-container .workflow-wrapper .step-header.cc{background-color:#3370ff}.routing-preview-container .workflow-wrapper .step-header.handle{background-color:#935af6}.routing-preview-container .workflow-wrapper .step-header.end{background-color:#673ab7}.routing-preview-container .workflow-wrapper .step-header.resolved{box-shadow:0 0 0 3px #4caf50 inset}.routing-preview-container .workflow-wrapper .step-header.empty{box-shadow:0 0 0 3px #ff9800 inset}.routing-preview-container .workflow-wrapper .step-header.fallback{box-shadow:0 0 0 3px #03a9f4 inset}.routing-preview-container .workflow-wrapper .step-header.error{box-shadow:0 0 0 3px #f44336 inset}.routing-preview-container .workflow-wrapper .actor-card-aux{position:relative}.routing-preview-container .workflow-wrapper .actor-card.d-flex{display:flex;align-items:center;justify-content:flex-start;width:240px;height:110px;font-size:13px;border:1px solid #ccc;padding:0 12px;margin:8px auto;box-shadow:0 1px 3px #0000001a;position:relative;background-color:#fff;border-radius:8px}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-details .actor-line>span{font-weight:700;width:140px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-details .actor-line>span.actor-full-name{color:#000}.routing-preview-container .workflow-wrapper .actor-card.d-flex .avatar-wrapper{flex-shrink:0;margin-right:8px}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #ccc}.routing-preview-container .workflow-wrapper .step-column:not(:first-child) .actor-card:before{content:\"\";position:absolute;top:50%;left:-20px;width:16px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:first-child) .actor-card-aux:not(:last-child) .actor-card:after{content:\"\";position:absolute;top:50%;left:-20px;width:2px;height:calc(100% + 10px);background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .actor-card-aux:before{content:\"\";position:absolute;top:50%;right:-16px;width:16px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .actor-card-aux:not(:last-child):after{content:\"\";position:absolute;top:50%;right:-16px;width:2px;height:calc(100% + 10px);background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column-aux{position:relative}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .step-column-aux:after{content:\"\";position:absolute;top:calc(50% + 18.5px);right:-48px;width:32px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .actor-card.submit{background-color:#e0f7fa;border-left:4px solid #00bcd4}.routing-preview-container .workflow-wrapper .actor-card.approval{background-color:#fff3e0;border-left:4px solid #f80}.routing-preview-container .workflow-wrapper .actor-card.cc{background-color:#e6ecff;border-left:4px solid #3370ff}.routing-preview-container .workflow-wrapper .actor-card.handle{background-color:#f3e6ff;border-left:4px solid #935af6}.routing-preview-container .workflow-wrapper .actor-card.end{background-color:#ede7f6;border-left:4px solid #673ab7}.routing-preview-container .workflow-wrapper .actor-line{display:flex;align-items:center;gap:6px;margin:2px 0;height:23.5px}.routing-preview-container .workflow-wrapper .actor-line i{width:16px;height:16px;font-size:16px;color:#848484}.routing-preview-container .workflow-wrapper .actor-line input.email-debug-input{border:1px dashed #00bcd4;background-color:#e0f7fa;width:140px;padding:0 8px}.routing-preview-container .workflow-wrapper .actor-card span{display:block;color:#555;margin:2px 0}@media (max-width: 576px){.routing-preview-container .workflow-wrapper .workflow-wrapper{flex-direction:column;align-items:center;gap:24px}.routing-preview-container .workflow-wrapper .step-column{width:90vw}.routing-preview-container .workflow-wrapper .actor-card{width:100%}}.routing-preview-container .p-relative{position:relative}.routing-preview-container .routing-preview-header{display:flex;align-items:center;justify-content:space-between;height:35px;margin-bottom:15px}.routing-preview-container .routing-preview-header .button-group{display:flex;align-items:center;justify-content:flex-start;gap:8px;height:35px}.routing-preview-container .routing-preview-header .button-group button{border-radius:0;color:#fff;height:35px;font-size:13px}.routing-preview-container .routing-preview-header .debug-group{display:flex;align-items:center;justify-content:flex-start;height:35px}.routing-preview-container .routing-preview-header .debug-group label{-webkit-user-select:none;user-select:none;margin-right:8px}.routing-preview-container h5{padding:15px;color:#848484}.routing-preview-container .resolved-steps pre{padding:15px}.routing-preview-container .employee-log{max-width:100%;overflow-x:auto;background:#f9f9f9;border-left:4px solid #3b82f6;padding:12px 16px;margin-top:16px;font-family:monospace;font-size:13px;border-radius:6px;white-space:pre-wrap;box-sizing:border-box}.routing-preview-container .saga-link label{font-size:13px;color:#848484;margin-right:8px}.routing-preview-container a.external-link{color:#358ccb!important}.routing-preview-container a.external-link:after{font-family:feather;content:\"\\e95b\"}\n"] }]
+                    ], template: "<div class=\"routing-preview-container inter-font p-relative\">\r\n\r\n  <div class=\"correlation-id\">\r\n\r\n    <!-- @if ($saga()?.correlationId) {\r\n      Workflow live instance: \r\n      <a [routerLink]=\"['/root/workflow/status', $saga()?.correlationId]\">\r\n        {{ $saga()?.correlationId }}\r\n      </a>\r\n    } -->\r\n\r\n    <!-- @if ($loading()) {\r\n    <core-terminal-spinner />\r\n    } @else if ($saga()?.correlationId) {\r\n    <button @fadeToggle type=\"button\" (click)=\"copy($saga()?.correlationId || '')\" class=\"copy-btn\">\r\n      <i class=\"feather-clipboard\"></i>\r\n    </button>\r\n\r\n    } -->\r\n  </div>\r\n\r\n  <div class=\"routing-preview-header\">\r\n\r\n    <div class=\"button-group\">\r\n      <button type=\"button\" class=\"btn btn-primary h35\" (click)=\"backToLiveForm()\">Back to Form (ESC)</button>\r\n      <button type=\"button\" class=\"btn btn-secondary h35\" (click)=\"generateRouting()\">Generate</button>\r\n      @if (!!appConfigService.WORKFLOW_ENABLE_DEBUG_MODE && $isDebugMode()) {\r\n      <button @fadeToggle type=\"button\" class=\"btn btn-secondary h35\" (click)=\"toggleResolvedSteps()\">Show/Hide resolved\r\n        steps</button>\r\n      }\r\n      <button @fadeToggle type=\"button\" class=\"btn btn-primary h35\" (click)=\"initialDebugSubmit()\">Submit</button>\r\n    </div>\r\n\r\n    @if (!!appConfigService.WORKFLOW_ENABLE_DEBUG_MODE) {\r\n    <div class=\"debug-group\">\r\n      <label>Debug mode</label>\r\n      <core-ios-switcher [width]=\"45\" [showOnOffText]=\"false\" [ngModel]=\"$isDebugMode()\"\r\n        (ngModelChange)=\"onIsDebugModeChange($event)\"></core-ios-switcher>\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  <div class=\"workflows-wrapper\">\r\n    @if ($loading()) {\r\n      <core-terminal-spinner /><span>Generating...</span>\r\n    } @else {\r\n\r\n\r\n    @if (!!$results().length) {\r\n\r\n    @for (result of $results(); track $index) {\r\n\r\n    <div class=\"result-group mb-8 p-4 rounded bg-white shadow-sm\">\r\n\r\n      <div class=\"flex items-center justify-between mb-3\">\r\n        <h6 class=\"text-base font-semibold text-sky-700\">Routing for {{ result.targetEmployeeFullName }}</h6>\r\n        <div class=\"d-flex d-flex-between\">\r\n          <button type=\"button\" class=\"text-xs text-blue-500 underline btn btn-secondary\" (click)=\"toggleLog($index)\">\r\n            {{ $logExpandedStates()[ $index ] ? 'Hide log' : 'Show log' }}\r\n          </button>\r\n          @if ($loading()) {\r\n            <core-terminal-spinner />\r\n          }\r\n          <!-- @if (!!$submitResponseItems().length && !!getCorrelationId(result)) {\r\n            <div class=\"saga-link d-flex d-flex-start\">\r\n              <label>The process activated:</label>\r\n              <a class=\"external-link\" [routerLink]=\"['/root/workflow/status', getCorrelationId(result)]\">\r\n                Click here to see status\r\n              </a>\r\n            </div>\r\n          } -->\r\n            @for (result of $submitResponseItems(); track result.employeeId) {\r\n              <div class=\"saga-link d-flex d-flex-start\">\r\n                <label>{{ result.employeeFullName }}:</label>\r\n\r\n                @if (result.correlationId) {\r\n                  <a class=\"external-link\" [routerLink]=\"['/root/workflow/status', result.correlationId]\">\r\n                    \u2705 Click to see status\r\n                  </a>\r\n                } @else {\r\n                  <span class=\"text-danger d-flex flex-column\">\r\n                    @for (line of (result.error?.split('\\n') || []); track line) {\r\n                      <div>\u274C {{ line }}</div>\r\n                    }\r\n                  </span>\r\n                }\r\n              </div>\r\n            }\r\n\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"workflow-wrapper\">\r\n\r\n        @for (step of result.response.steps! ?? []; track step.id) {\r\n        <div class=\"step-column\" [attr.data-actor-count]=\"step.resolvedActors?.length || 0\">\r\n\r\n          <div class=\"step-column-aux\">\r\n\r\n            <div class=\"step-header {{ step.type.toLowerCase() }}\"\r\n              [ngClass]=\"(step.actorResolvedStatus ?? 'RESOLVED').toLowerCase()\">\r\n              {{ step.name | translate : lang }} {{ step.config?.routingLogic }}\r\n            </div>\r\n\r\n            @for (actor of step.resolvedActors; track $index) {\r\n            <div class=\"actor-card-aux\">\r\n              <div class=\"actor-card d-flex d-flex-start {{ step.type.toLowerCase() }}\">\r\n                <div class=\"avatar-wrapper\">\r\n                  <img [src]=\"actor.avatar\" appImageErrorResolver [type]=\"imageResolverType\"\r\n                    [isFemale]=\"!!actor.isFemale!\" class=\"actor-avatar\" alt=\"{{ actor.fullName }}\" />\r\n                </div>\r\n                <div class=\"actor-details\">\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-user\"></i>\r\n                    <span class=\"actor-full-name\" [appTooltip]=\"actor.fullName\">{{ actor.fullName | normalizeHumanName\r\n                      }}</span>\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-briefcase\"></i>\r\n                    <span [appTooltip]=\"actor.jobName\">{{ actor.jobName }}</span>\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-mail\"></i>\r\n                    @if ($isDebugMode()) {\r\n                    <input @fadeToggle class=\"email-debug-input\" type=\"email\" [(ngModel)]=\"actor.email\"\r\n                      (ngModelChange)=\"onEmailChange(actor, $event)\" placeholder=\"Enter demo email\" />\r\n                    } @else {\r\n                    <span [appTooltip]=\"actor.email\">{{ actor.email }}</span>\r\n                    }\r\n                  </div>\r\n                  <div class=\"actor-line\">\r\n                    <i class=\"feather-hash\"></i>\r\n                    <span @fadeToggle [appTooltip]=\"actor.employeeCode\">{{ actor.employeeCode }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      @if (isLogVisible($index)) {\r\n      <pre class=\"employee-log mt-4 bg-gray-50 p-3 rounded text-xs font-mono text-gray-800\">\r\n          @for (line of getLogLinesFor($index); track $index) {\r\n            {{ line }}\r\n          }\r\n        </pre>\r\n      }\r\n\r\n    </div>\r\n\r\n    }\r\n\r\n    } @else if (!!$backendMessage()) {\r\n\r\n    <div class=\"backend-message error-list bg-red-50 rounded p-4 text-sm text-red-800 leading-relaxed\">\r\n      @for (line of $backendMessage().split('\\n'); track $index) {\r\n      <div class=\"error-item flex items-start gap-2\">\r\n        <i class=\"feather-alert-circle text-red-600 mt-0.5\"></i>\r\n        <span [innerText]=\"line\"></span>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    } @else {\r\n    No routing steps found.\r\n    }\r\n\r\n\r\n    }\r\n\r\n  </div>\r\n\r\n  @if ($showResolvedSteps()) {\r\n  <h5>Resolved steps</h5>\r\n  <div class=\"resolved-steps\">\r\n    <!-- <pre>{{ $resolvedStepsJson() }}</pre> -->\r\n  </div>\r\n  }\r\n\r\n</div>", styles: [".routing-preview-container{font-size:13px}.routing-preview-container .correlation-id{display:flex;align-items:center;height:35px;font-family:monospace}.routing-preview-container .correlation-id button{border:none;margin-left:8px}.routing-preview-container .workflow-wrapper{display:flex;flex-direction:row;gap:64px;padding:24px;background:#f5f5f5;overflow-x:auto;min-width:576px;min-height:200px}.routing-preview-container .workflow-wrapper .step-column{width:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;position:relative;min-height:100%}.routing-preview-container .workflow-wrapper .step-header{position:relative;font-weight:600;font-size:14px;text-align:center;border:1px solid #ccc;border-radius:8px;box-shadow:0 1px 3px #0000001a;padding:6px 10px;margin-bottom:10px;width:100%;color:#fff}.routing-preview-container .workflow-wrapper .step-header.submit{background-color:#00bcd4}.routing-preview-container .workflow-wrapper .step-header.approval{background-color:#f80}.routing-preview-container .workflow-wrapper .step-header.cc{background-color:#3370ff}.routing-preview-container .workflow-wrapper .step-header.handle{background-color:#935af6}.routing-preview-container .workflow-wrapper .step-header.end{background-color:#673ab7}.routing-preview-container .workflow-wrapper .step-header.resolved{box-shadow:0 0 0 3px #4caf50 inset}.routing-preview-container .workflow-wrapper .step-header.empty{box-shadow:0 0 0 3px #ff9800 inset}.routing-preview-container .workflow-wrapper .step-header.fallback{box-shadow:0 0 0 3px #03a9f4 inset}.routing-preview-container .workflow-wrapper .step-header.error{box-shadow:0 0 0 3px #f44336 inset}.routing-preview-container .workflow-wrapper .actor-card-aux{position:relative}.routing-preview-container .workflow-wrapper .actor-card.d-flex{display:flex;align-items:center;justify-content:flex-start;width:240px;height:110px;font-size:13px;border:1px solid #ccc;padding:0 12px;margin:8px auto;box-shadow:0 1px 3px #0000001a;position:relative;background-color:#fff;border-radius:8px}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-details .actor-line>span{font-weight:700;width:140px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-details .actor-line>span.actor-full-name{color:#000}.routing-preview-container .workflow-wrapper .actor-card.d-flex .avatar-wrapper{flex-shrink:0;margin-right:8px}.routing-preview-container .workflow-wrapper .actor-card.d-flex .actor-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #ccc}.routing-preview-container .workflow-wrapper .step-column:not(:first-child) .actor-card:before{content:\"\";position:absolute;top:50%;left:-20px;width:16px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:first-child) .actor-card-aux:not(:last-child) .actor-card:after{content:\"\";position:absolute;top:50%;left:-20px;width:2px;height:calc(100% + 10px);background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .actor-card-aux:before{content:\"\";position:absolute;top:50%;right:-16px;width:16px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .actor-card-aux:not(:last-child):after{content:\"\";position:absolute;top:50%;right:-16px;width:2px;height:calc(100% + 10px);background-color:#ccc}.routing-preview-container .workflow-wrapper .step-column-aux{position:relative}.routing-preview-container .workflow-wrapper .step-column:not(:last-child) .step-column-aux:after{content:\"\";position:absolute;top:calc(50% + 18.5px);right:-48px;width:32px;height:2px;background-color:#ccc}.routing-preview-container .workflow-wrapper .actor-card.submit{background-color:#e0f7fa;border-left:4px solid #00bcd4}.routing-preview-container .workflow-wrapper .actor-card.approval{background-color:#fff3e0;border-left:4px solid #f80}.routing-preview-container .workflow-wrapper .actor-card.cc{background-color:#e6ecff;border-left:4px solid #3370ff}.routing-preview-container .workflow-wrapper .actor-card.handle{background-color:#f3e6ff;border-left:4px solid #935af6}.routing-preview-container .workflow-wrapper .actor-card.end{background-color:#ede7f6;border-left:4px solid #673ab7}.routing-preview-container .workflow-wrapper .actor-line{display:flex;align-items:center;gap:6px;margin:2px 0;height:23.5px}.routing-preview-container .workflow-wrapper .actor-line i{width:16px;height:16px;font-size:16px;color:#848484}.routing-preview-container .workflow-wrapper .actor-line input.email-debug-input{border:1px dashed #00bcd4;background-color:#e0f7fa;width:140px;padding:0 8px}.routing-preview-container .workflow-wrapper .actor-card span{display:block;color:#555;margin:2px 0}@media (max-width: 576px){.routing-preview-container .workflow-wrapper .workflow-wrapper{flex-direction:column;align-items:center;gap:24px}.routing-preview-container .workflow-wrapper .step-column{width:90vw}.routing-preview-container .workflow-wrapper .actor-card{width:100%}}.routing-preview-container .p-relative{position:relative}.routing-preview-container .routing-preview-header{display:flex;align-items:center;justify-content:space-between;height:35px;margin-bottom:15px}.routing-preview-container .routing-preview-header .button-group{display:flex;align-items:center;justify-content:flex-start;gap:8px;height:35px}.routing-preview-container .routing-preview-header .button-group button{border-radius:0;color:#fff;height:35px;font-size:13px}.routing-preview-container .routing-preview-header .debug-group{display:flex;align-items:center;justify-content:flex-start;height:35px}.routing-preview-container .routing-preview-header .debug-group label{-webkit-user-select:none;user-select:none;margin-right:8px}.routing-preview-container h5{padding:15px;color:#848484}.routing-preview-container .resolved-steps pre{padding:15px}.routing-preview-container .employee-log{max-width:100%;overflow-x:auto;background:#f9f9f9;border-left:4px solid #3b82f6;padding:12px 16px;margin-top:16px;font-family:monospace;font-size:13px;border-radius:6px;white-space:pre-wrap;box-sizing:border-box}.routing-preview-container .saga-link label{font-size:13px;color:#848484;margin-right:8px}.routing-preview-container a.external-link{color:#358ccb!important}.routing-preview-container a.external-link:after{font-family:feather;content:\"\\e95b\"}\n"] }]
         }], ctorParameters: () => [{ type: MultiLanguageService }], propDecorators: { handleKeyDown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -277,6 +277,11 @@ class LiveFormComponent extends BaseComponent {
         this.$loading = signal(false);
         this.$showAfInstanceJson = signal(false);
         this.$showWfWorkflowJson = signal(false);
+        this.$logExpandedStates = signal([]);
+        this.$backendMessage = signal('');
+        this.$loadingMessage = signal('');
+        this.$logs = signal([]);
+        this.$results = signal([]);
         this.coreFormDesignService = inject(CoreFormDesignService);
         this.applicationHelpService = inject(ApplicationHelpService);
         this.ds = inject(DomService);
@@ -296,7 +301,6 @@ class LiveFormComponent extends BaseComponent {
         this.$employeeSubmiterId = signal(0);
         this.simulatedEmployee$ = new BehaviorSubject(null);
         this.$showLiveRouting = this.wfs.$showLiveRouting;
-        // $afInstance = this.fds.$afInstance;
         this.$zIndex = signal(0);
         this.$reactMode = signal(false);
         this.$onBehalfMode = computed(() => this.$workflow()?.allowOnBehalf);
@@ -446,6 +450,93 @@ class LiveFormComponent extends BaseComponent {
         }
         this.$showLiveRouting.set(!this.$showLiveRouting());
     }
+    initialSubmit() {
+        const steps = this.wfs.$currentSteps();
+        const nameMap = new Map();
+        for (const step of steps) {
+            const name = step.name?.trim();
+            if (!name)
+                continue;
+            nameMap.set(name, (nameMap.get(name) ?? 0) + 1);
+        }
+        const duplicateNames = [...nameMap.entries()]
+            .filter(([_, count]) => count > 1)
+            .map(([name]) => name);
+        if (duplicateNames.length > 0) {
+            this.alertService.warn(`Duplicate step name(s) found: ${duplicateNames.join(", ")}`, alertOptions);
+            this.wfs.$designActiveTab.set(3);
+            return;
+        }
+        const form = this.$form();
+        if (!form || !form.valid) {
+            const controls = form?.controls ?? {};
+            const entries = Object.entries(controls);
+            const filteredInvalids = entries.filter(([key, ctrl]) => {
+                if (key === '___submitterEmployeeId')
+                    return false; // skip check
+                return ctrl.invalid;
+            });
+            if (filteredInvalids.length > 0) {
+                this.wfs.liveFormCheckError$.next(true);
+                setTimeout(() => this.wfs.liveFormCheckError$.next(false), 5000);
+                this.alertService.info("Please fill required fields", alertOptions);
+                return;
+            }
+        }
+        if (!this.wfs.$currentFlow()) {
+            this.alertService.info("No flow detected", alertOptions);
+            return;
+        }
+        const request = {
+            workflowId: this.wfs.$currentFlow()?.id,
+            attributes: this.$form()?.getRawValue(),
+            ___targetEmployees: this.$form()?.get('___targetEmployees')?.getRawValue()
+        };
+        this.$backendMessage.set('');
+        this.$loading.set(true);
+        this.$loadingMessage.set("Generating routes...");
+        this.wfs.initialSubmit(request).pipe(catchError(err => {
+            const msg = err?.error?.message || // API-defined message
+                err?.message || // Native JS or HttpErrorResponse
+                err?.statusText || // Fallback
+                'An unknown error occurred.';
+            this.$backendMessage.set(msg);
+            return of({ ok: false, status: 500, body: { messageCode: msg } });
+        }), finalize(() => {
+            this.$loading.set(false);
+            this.$loadingMessage.set('');
+        })).subscribe(x => {
+            if (x.ok && x.status === 200) {
+                const body = x.body;
+                if (body?.statusCode === 200) {
+                    const inner = body.innerBody;
+                    if (!!inner.errors.length) {
+                        this.alertService.error(inner.errors[0]);
+                    }
+                    this.$logs.set(inner.logs ?? []);
+                    const backendResults = inner.items;
+                    const allErrors = [];
+                    for (const result of backendResults) {
+                        const { employeeId, employeeFullName, correlationId, error } = result;
+                        if (error || !correlationId) {
+                            allErrors.push(`🚫 Employee ${employeeId} (${employeeFullName}): ${error || 'Unknown error'}`);
+                            continue;
+                        }
+                    }
+                    this.$backendMessage.set(allErrors.join('\n'));
+                    if (!!allErrors.length) {
+                        this.alertService.error(allErrors[0]);
+                    }
+                }
+                else {
+                    this.$backendMessage.set(body?.messageCode || 'UNEXPECTED_ERROR');
+                }
+            }
+            else {
+                this.$backendMessage.set('API_ERROR');
+            }
+        });
+    }
     ngOnInit() {
         this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
         // Get query param ?preview=true
@@ -520,27 +611,6 @@ class LiveFormComponent extends BaseComponent {
             }
         }
     }
-    /*
-    mergeSectionsByField(a: ICoreFormSection[], b: ICoreFormSection[]): ICoreFormSection[] {
-      const existingFields = new Set<string>();
-  
-      // Collect all fields from a
-      a.forEach(section =>
-        section.rows.forEach(row =>
-          row.forEach(control => existingFields.add(control.field))
-        )
-      );
-  
-      // Check if any field in b already exists in a
-      const hasOverlap = b.some(section =>
-        section.rows.some(row =>
-          row.some(control => existingFields.has(control.field))
-        )
-      );
-  
-      return hasOverlap ? [...a] : [...a, ...b];
-    }
-    */
     onLiveFormCreated(e) {
         const form = e.formGroup;
         this.$form.set(form);
@@ -788,7 +858,7 @@ class LiveFormComponent extends BaseComponent {
         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=\"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        </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          <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>\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 .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"], 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]=\"$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          <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>\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}.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"], 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,
@@ -799,7 +869,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=\"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        </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          <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>\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 .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]=\"$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          <button type=\"button\" class=\"btn btn-secondary\">Cancel</button>\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}.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({
@@ -808,4 +878,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-DdKOgA8G.mjs.map
+//# sourceMappingURL=ngx-histaff-alpha-live-form.component-Djf5udbq.mjs.map