ngx-histaff-alpha 6.0.0 → 6.0.2

package/fesm2022/{ngx-histaff-alpha-design-wrapper.component-Dujs4qzo.mjs → ngx-histaff-alpha-design-wrapper.component-IOymN2uo.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, ChangeDetectionStrategy, Component, Injector, runInInjectionContext, effect, Input, EventEmitter, ElementRef, ViewChild, Output, Renderer2, input, isDevMode, signal, computed, Injectable, output, viewChild, ChangeDetectorRef, Directive, Pipe, ViewChildren } from '@angular/core';
-import { B as BaseComponent, h as CoreWorkflowService, s as CoreFormDesignService, n as AlertService, t as EnumWorkflowStepType, q as alertOptions, d as EnumFormBaseContolType, M as MultiLanguageService, k as TooltipDirective, T as TranslatePipe, c as BaseEditComponent, D as DialogService, A as AppService, e as CorePageEditComponent, F as FullscreenModalLoaderComponent, u as DomService, v as CoreDropdownComponent, w as CoreChecklistComponent, x as CoreDatePickerComponent, y as CoreFormControlSeekerComponent, z as CoreCurrencyInputComponent, i as EnumCoreFormControlSeekerSourceType, G as EnumActorSourceType, H as CoreParamControlComponent, J as CoreRadioGroupComponent, K as GptService, L as ApplicationHelpService, N as HotKeysDirective, b as CoreCheckboxComponent, O as NavigatorService, P as JsonService } from './ngx-histaff-alpha-ngx-histaff-alpha-OX-fPVM-.mjs';
+import { B as BaseComponent, h as CoreWorkflowService, s as CoreFormDesignService, n as AlertService, t as EnumWorkflowStepType, q as alertOptions, d as EnumFormBaseContolType, M as MultiLanguageService, k as TooltipDirective, T as TranslatePipe, c as BaseEditComponent, D as DialogService, A as AppService, e as CorePageEditComponent, F as FullscreenModalLoaderComponent, u as DomService, v as CoreDropdownComponent, w as CoreChecklistComponent, x as CoreDatePickerComponent, y as CoreFormControlSeekerComponent, z as CoreCurrencyInputComponent, i as EnumCoreFormControlSeekerSourceType, G as EnumActorSourceType, H as CoreParamControlComponent, J as CoreRadioGroupComponent, K as GptService, L as ApplicationHelpService, N as HotKeysDirective, b as CoreCheckboxComponent, O as NavigatorService, P as JsonService } from './ngx-histaff-alpha-ngx-histaff-alpha-CUsdQZiS.mjs';
 import * as i1$1 from '@angular/router';
 import { Router, ActivatedRoute, RouterOutlet } from '@angular/router';
 import { catchError, of, BehaviorSubject, distinctUntilChanged } from 'rxjs';
@@ -8,11 +8,11 @@ import { EnumTranslateKey } from 'alpha-global-constants';
 import { AsyncPipe, NgTemplateOutlet, LowerCasePipe, NgStyle } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormGroup, FormControl, FormArray, FormsModule } from '@angular/forms';
-import { C as CoreFormDesignComponent } from './ngx-histaff-alpha-core-form-design.component-a1ho0-oS.mjs';
+import { C as CoreFormDesignComponent } from './ngx-histaff-alpha-core-form-design.component-DOu9PO1E.mjs';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { HttpClient } from '@angular/common/http';
-import { C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-b0bLEV46.mjs';
-import { R as RoutingPreviewPanelComponent } from './ngx-histaff-alpha-live-form.component-BJVtjmhk.mjs';
+import { C as CoreToastLoadingComponent } from './ngx-histaff-alpha-core-toast-loading.component-741D00L2.mjs';
+import { R as RoutingPreviewPanelComponent } from './ngx-histaff-alpha-live-form.component-QfcZYNiV.mjs';
 
 class CurrentHeaderComponent extends BaseComponent {
     constructor(mls) {
@@ -164,7 +164,7 @@ class CurrentHeaderComponent extends BaseComponent {
         this.$activeTab.set(4);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CurrentHeaderComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CurrentHeaderComponent, isStandalone: true, selector: "current-header", usesInheritance: true, ngImport: i0, template: "<div class=\"current-header-container\">\r\n    <div class=\"left pointer\" (click)=\"backToList()\">\r\n\r\n        <div class=\"icon-wrapper\" [appTooltip]=\"'Back to list' | translate : lang\" [showAnyway]=\"true\">\r\n            <i class=\"feather-chevron-left\"></i>\r\n        </div>\r\n        <div class=\"current-flow-name\" [appTooltip]=\"wfs.$currentFlow()?.name || ''\">\r\n            {{ wfs.$currentFlow()?.name || 'New Workflow' }}\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"stages\">\r\n        @for (step of steps; track step.index) {\r\n        <div\r\n            class=\"step-wrapper\"\r\n            [class.active]=\"$activeTab() === step.index\"\r\n            [class.changed]=\"step.changed()\"\r\n            (click)=\"step.onClick()\"\r\n            (keydown.enter)=\"step.onClick()\"\r\n        >\r\n            <div class=\"order\">{{ step.index }}</div>\r\n            <div class=\"step\">{{ step.label }}</div>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"right\">\r\n        <button type=\"button\" class=\"btn preview\" (click)=\"preview()\">Preview</button>\r\n        <button type=\"button\" class=\"btn publish\" (click)=\"publish()\">Save</button>\r\n    </div>\r\n  </div>\r\n  ", styles: [".current-header-container{height:50px;display:flex;gap:24px;overflow:visible;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e0e0}.current-header-container .left{height:50px;display:flex;gap:24px;justify-content:flex-start;align-items:center}.current-header-container .left .icon-wrapper{cursor:pointer}.current-header-container .left .icon-wrapper i{font-size:24px}.current-header-container .left .current-flow-name{max-width:190px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.current-header-container .stages{height:50px;display:flex;gap:36px;justify-content:center;align-items:center;overflow:visible}.current-header-container .stages .step-wrapper{display:flex;position:relative;align-items:center;justify-content:flex-start;height:50px;cursor:pointer;transition:all .5s ease-out}.current-header-container .stages .step-wrapper .order{display:flex;align-items:center;justify-content:center;width:35px;height:35px;margin-right:8px;border:1px solid #bbb;border-radius:50%;transform:none;transition:all .5s ease-out}.current-header-container .stages .step-wrapper .step{display:flex;align-items:center;justify-content:flex-start;font-size:14px;color:#666;height:50px;position:relative;transition:all .5s ease-out}.current-header-container .stages .step-wrapper .step:after{content:\"\";position:absolute;width:0px;height:0px;display:block;left:0;bottom:15px;border:1px dashed #848484;opacity:0;transition:width opacity .25s ease-out}.current-header-container .stages .step-wrapper.active:after{content:\"\";display:block;position:absolute;left:0;bottom:-3px;width:100%;height:3px;background-color:#87ceeb;z-index:1}.current-header-container .stages .step-wrapper.active .order{background-color:#87ceeb;color:#fff;backface-visibility:hidden;-webkit-font-smoothing:antialiased;box-shadow:#88a5bf7a 6px 2px 16px,#fffc -6px -2px 16px}.current-header-container .stages .step-wrapper.active .step{font-weight:700;color:#007bff}.current-header-container .stages .step-wrapper.changed .step:after{width:100%;opacity:1}.current-header-container .right{display:flex;align-items:center;justify-content:flex-end}.current-header-container .right button.preview{background-color:#87ceeb;color:#fff;border-radius:0;height:35px;font-size:13px;margin-right:8px}.current-header-container .right button.publish{background-color:#000;color:#fff;border-radius:0;height:35px;font-size:13px}@media (max-width: 992px){.current-header-container .step{width:0px;display:none!important}.current-header-container .order{margin:0!important}}@media (max-width: 768px){.current-header-container .stages{gap:8px}}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CurrentHeaderComponent, isStandalone: true, selector: "current-header", usesInheritance: true, ngImport: i0, template: "<div class=\"current-header-container\">\r\n    <div class=\"left pointer\" (click)=\"backToList()\">\r\n\r\n        <div class=\"icon-wrapper\" [appTooltip]=\"'Back to list' | translate : lang\" [showAnyway]=\"true\">\r\n            <i class=\"feather-chevron-left\"></i>\r\n        </div>\r\n        <div class=\"current-flow-name\" [appTooltip]=\"wfs.$currentFlow()?.name || ''\">\r\n            {{ wfs.$currentFlow()?.name || 'New Workflow' }}\r\n        </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"stages\">\r\n        @for (step of steps; track step.index) {\r\n        <div\r\n            class=\"step-wrapper\"\r\n            [class.active]=\"$activeTab() === step.index\"\r\n            [class.changed]=\"step.changed()\"\r\n            (click)=\"step.onClick()\"\r\n            (keydown.enter)=\"step.onClick()\"\r\n        >\r\n            <div class=\"order\">{{ step.index }}</div>\r\n            <div class=\"step\">{{ step.label }}</div>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"right\">\r\n        <button type=\"button\" class=\"btn preview\" (click)=\"preview()\">Preview</button>\r\n        <button type=\"button\" class=\"btn publish\" (click)=\"publish()\">Save</button>\r\n    </div>\r\n  </div>\r\n  ", styles: [".current-header-container{height:50px;display:flex;gap:24px;overflow:visible;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e0e0}.current-header-container .left{height:50px;display:flex;gap:24px;justify-content:flex-start;align-items:center}.current-header-container .left .icon-wrapper{cursor:pointer}.current-header-container .left .icon-wrapper i{font-size:24px}.current-header-container .left .current-flow-name{max-width:190px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.current-header-container .stages{height:50px;display:flex;gap:36px;justify-content:center;align-items:center;overflow:visible}.current-header-container .stages .step-wrapper{display:flex;position:relative;align-items:center;justify-content:flex-start;height:50px;cursor:pointer;transition:all .5s ease-out}.current-header-container .stages .step-wrapper .order{display:flex;align-items:center;justify-content:center;width:35px;height:35px;margin-right:8px;border:1px solid #bbb;border-radius:50%;transform:none;transition:all .5s ease-out}.current-header-container .stages .step-wrapper .step{display:flex;align-items:center;justify-content:flex-start;font-size:14px;color:#666;height:50px;position:relative;transition:all .5s ease-out}.current-header-container .stages .step-wrapper .step:after{content:\"\";position:absolute;width:0px;height:0px;display:block;left:0;bottom:15px;border:1px dashed #848484;opacity:0;transition:width opacity .25s ease-out}.current-header-container .stages .step-wrapper.active:after{content:\"\";display:block;position:absolute;left:0;bottom:-3px;width:100%;height:3px;background-color:#87ceeb;z-index:1}.current-header-container .stages .step-wrapper.active .order{background-color:#87ceeb;color:#fff;backface-visibility:hidden;-webkit-font-smoothing:antialiased;box-shadow:#88a5bf7a 6px 2px 16px,#fffc -6px -2px 16px}.current-header-container .stages .step-wrapper.active .step{font-weight:700;color:#007bff}.current-header-container .stages .step-wrapper.changed .step:after{width:100%;opacity:1}.current-header-container .right{display:flex;align-items:center;justify-content:flex-end}.current-header-container .right button.preview{background-color:#87ceeb;color:#fff;border-radius:0;height:35px;font-size:13px;margin-right:8px}.current-header-container .right button.publish{background-color:#000;color:#fff;border-radius:0;height:35px;font-size:13px}@media (max-width: 992px){.current-header-container .step{width:0px;display:none!important}.current-header-container .order{margin:0!important}}@media (max-width: 768px){.current-header-container .stages{gap:8px}}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CurrentHeaderComponent, decorators: [{
             type: Component,
@@ -958,7 +958,7 @@ class CoreRuleTreeComponent extends BaseComponent {
         return control?.controlType === 'CALCULATED';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRuleTreeComponent, deps: [{ token: MultiLanguageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreRuleTreeComponent, isStandalone: true, selector: "core-rule-tree", inputs: { $totalCols: { classPropertyName: "$totalCols", publicName: "$totalCols", isSignal: true, isRequired: false, transformFunction: null }, $mainForm: { classPropertyName: "$mainForm", publicName: "$mainForm", isSignal: true, isRequired: false, transformFunction: null }, $filterStringInput: { classPropertyName: "$filterStringInput", publicName: "$filterStringInput", isSignal: true, isRequired: false, transformFunction: null }, $expressionInput: { classPropertyName: "$expressionInput", publicName: "$expressionInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { $jsonEmitter: "$jsonEmitter" }, usesInheritance: true, ngImport: i0, template: "<div class=\"core-rule-tree-container\">\r\n\r\n    <form [formGroup]=\"$mainForm()\" (ngSubmit)=\"null\" class=\"core-rule-tree-form\">\r\n\r\n        <div class=\"top-bar\">\r\n          <div class=\"expression-box\">\r\n            Expression = {{ crts.$filterString() || '()' }}\r\n          </div>\r\n      \r\n        </div>\r\n      \r\n        <div class=\"query-builder\">\r\n          <ng-template #queryTemplate let-filter=\"filter\" let-groupToRemove=\"groupToRemove\">\r\n            \r\n            <div class=\"group-card\">\r\n\r\n                <div class=\"group-header\">\r\n\r\n                    <div class=\"logical-operator\">\r\n\r\n                        <select class=\"form-control pointer\" [formControl]=\"filter.get('logicalOperator')\">\r\n                            <option value=\"AND\">AND</option>\r\n                            <option value=\"OR\">OR</option>\r\n                        </select>\r\n\r\n                        <!-- Collapse/Expand Button -->\r\n                        @if (!!filter.value.filters?.length) {\r\n                            <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n                                (click)=\"toggleCollapse(filter)\"\r\n                                [appTooltip]=\"isCollapsed(filter) ? 'Expand Group' : 'Collapse Group'\">\r\n                                <i class=\"feather\" [class.feather-plus]=\"isCollapsed(filter)\" [class.feather-minus]=\"!isCollapsed(filter)\"></i>\r\n                            </button>\r\n                        }\r\n                        <div class=\"local-action-buttons\">\r\n                            <button type=\"button\" class=\"btn btn-success feather-file-plus\"\r\n                            (click)=\"addCondition(filter)\"\r\n                            [appTooltip]=\"'Add Condition to this Group'\" [position]=\"'top'\">\r\n                            </button>\r\n                            <button type=\"button\" class=\"btn btn-success feather-folder-plus\"\r\n                            (click)=\"addGroup(filter)\"\r\n                            [appTooltip]=\"'Add Subgroup to this Group'\" [position]=\"'top'\">\r\n                            </button>\r\n                            @if (!!groupToRemove) {\r\n                                <button type=\"button\" class=\"btn btn-danger feather-trash\"\r\n                                (click)=\"removeGroup(groupToRemove.group, groupToRemove.index)\"\r\n                                [appTooltip]=\"'Remove Group'\" [position]=\"'top'\">\r\n                                </button>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"group-content\">\r\n            \r\n                    @if (!isCollapsed(filter)) {\r\n\r\n                        @if (!!filter.value.filters?.length) {\r\n                            <div class=\"filter-list\" formArrayName=\"filters\">\r\n                            @for (childFilter of filter.get('filters').controls; track $index; let idx = $index) {\r\n                                <div class=\"filter-row\" [formGroup]=\"childFilter\">\r\n                \r\n                                @if (!childFilter.value.logicalOperator) {\r\n\r\n                                    <div class=\"filter-raw\">\r\n\r\n                                        <div class=\"field-cell\">\r\n                                            <select class=\"form-control\"\r\n                                                    [appTooltip]=\"getColLabelTooltip(childFilter)\"\r\n                                                    [showAnyway]=\"true\"\r\n                                                    formControlName=\"name\">\r\n                                            @for (col of $totalCols(); track $index) {\r\n                                                <option [value]=\"col.field\">{{ col.label || col.field }}</option>\r\n                                            }\r\n                                            </select>\r\n\r\n                                        </div>\r\n\r\n                                        <div class=\"operator-cell\">\r\n                                            <select class=\"form-control\" formControlName=\"relationalOperator\">\r\n                                            @for (op of relationalOperator; track $index) {\r\n                                            <option [value]=\"op\">{{ operatorFriendlyMap[op] || op }}</option>\r\n                                            }\r\n                                            </select>\r\n                                        </div>                                    \r\n\r\n                                        <div class=\"value-cell\">\r\n                                            @if (shouldShowValueControl(childFilter.value.relationalOperator)) {\r\n                                            <core-control-value-only\r\n                                            @fadeSwitch\r\n                                            [$control]=\"resolveControl(childFilter.value.name)!\"\r\n                                            [$form]=\"childFilter\"\r\n                                            [$fieldName]=\"'value'\"\r\n                                            >\r\n                                            </core-control-value-only>\r\n                                            }\r\n                                        </div>\r\n\r\n                                        <div class=\"action-cell\">\r\n                                            <button type=\"button\" class=\"btn btn-danger btn-sm feather-trash-2\"\r\n                                                (click)=\"removeCondition(filter, idx)\"\r\n                                                [appTooltip]=\"'Remove Condition'\">\r\n                                            </button>\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                    <div class=\"filter-message default\">\r\n                                    <input type=\"text\"\r\n                                            class=\"form-control\"\r\n                                            placeholder=\"Default message...\"\r\n                                            formControlName=\"defaultMessage\" />\r\n                                    </div>\r\n\r\n                                    <div class=\"filter-message english\">\r\n                                    <input type=\"text\"\r\n                                            class=\"form-control\"\r\n                                            placeholder=\"English message...\"\r\n                                            formControlName=\"englishMessage\" />\r\n                                    </div>\r\n\r\n                                } @else {\r\n                                    <!-- Recursive nested groups -->\r\n                                    <ng-container *ngTemplateOutlet=\"queryTemplate; context: { filter: childFilter, groupToRemove: { group: filter, index: idx } }\"></ng-container>\r\n                                }\r\n                                \r\n                                </div>\r\n                            }\r\n                            </div>\r\n                        }\r\n            \r\n\r\n                    }\r\n\r\n                </div>\r\n\r\n            </div>\r\n      \r\n          </ng-template>\r\n      \r\n          <ng-container\r\n            *ngTemplateOutlet=\"queryTemplate; context: { filter: $mainForm(), groupToRemove: null }\">\r\n          </ng-container>\r\n      \r\n        </div>\r\n      \r\n    </form>\r\n  \r\n    <div class=\"dev-json-view\">\r\n      <pre class=\"json-preview\">{{ crts.$filterFormJsonString() }}</pre>\r\n    </div>\r\n  \r\n  </div>\r\n", styles: [".core-rule-tree-container{display:flex;flex-direction:column;width:100%;overflow-y:auto}.core-rule-tree-container button{border-radius:0}.expression-box{background:#e0f2fe;padding:6px 12px;font-weight:500;font-size:14px}.top-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:8px}.expression-display{background-color:#e0f2fe;padding:8px 16px;font-family:monospace;font-size:14px;color:#0369a1}.query-builder{flex-grow:1;overflow-y:visible}.json-preview{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;margin-top:15px}.core-rule-tree-form{display:flex;flex-direction:column;gap:16px}.top-bar{display:flex;justify-content:space-between;align-items:center}.expression-box{background:#e0f2fe;padding:6px 12px;font-weight:500;font-size:14px;margin-right:8px}.query-builder{display:flex;flex-direction:column;gap:16px}.group-card{padding:15px;background:#f9f9f9;display:flex;flex-direction:column;gap:8px;position:relative}.group-card .group-header{display:block;position:relative}.group-card .logical-operator{display:flex;align-items:center;align-self:flex-start;gap:8px}.group-card .logical-operator select{width:57px;background-color:#fff4ce}.group-card .logical-operator .local-action-buttons{margin-left:auto;display:flex;gap:4px}.group-card .logical-operator:hover .local-action-buttons{display:flex}.filter-list{display:flex;flex-direction:column;gap:8px}.filter-row{margin:8px 0}.filter-row .filter-raw{display:flex;align-items:center;gap:8px}.field-cell,.operator-cell,.value-cell{flex:1}.field-cell select{width:136px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.filter-message{margin-top:8px}.action-cell{flex-shrink:0}.btn-xs{padding:2px 6px;font-size:10px}.rule-group-container:hover{background-color:#f9f9f9}.group-content{pointer-events:none}.group-content>*{pointer-events:auto}.logical-operator-label{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border:1px solid #ced4da;background-color:#fff4ce;color:#495057;font-size:14px;font-weight:500;min-width:100px;width:57px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CoreControlValueOnlyComponent, selector: "core-control-value-only", inputs: ["$control", "$form", "$fieldName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreRuleTreeComponent, isStandalone: true, selector: "core-rule-tree", inputs: { $totalCols: { classPropertyName: "$totalCols", publicName: "$totalCols", isSignal: true, isRequired: false, transformFunction: null }, $mainForm: { classPropertyName: "$mainForm", publicName: "$mainForm", isSignal: true, isRequired: false, transformFunction: null }, $filterStringInput: { classPropertyName: "$filterStringInput", publicName: "$filterStringInput", isSignal: true, isRequired: false, transformFunction: null }, $expressionInput: { classPropertyName: "$expressionInput", publicName: "$expressionInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { $jsonEmitter: "$jsonEmitter" }, usesInheritance: true, ngImport: i0, template: "<div class=\"core-rule-tree-container\">\r\n\r\n    <form [formGroup]=\"$mainForm()\" (ngSubmit)=\"null\" class=\"core-rule-tree-form\">\r\n\r\n        <div class=\"top-bar\">\r\n          <div class=\"expression-box\">\r\n            Expression = {{ crts.$filterString() || '()' }}\r\n          </div>\r\n      \r\n        </div>\r\n      \r\n        <div class=\"query-builder\">\r\n          <ng-template #queryTemplate let-filter=\"filter\" let-groupToRemove=\"groupToRemove\">\r\n            \r\n            <div class=\"group-card\">\r\n\r\n                <div class=\"group-header\">\r\n\r\n                    <div class=\"logical-operator\">\r\n\r\n                        <select class=\"form-control pointer\" [formControl]=\"filter.get('logicalOperator')\">\r\n                            <option value=\"AND\">AND</option>\r\n                            <option value=\"OR\">OR</option>\r\n                        </select>\r\n\r\n                        <!-- Collapse/Expand Button -->\r\n                        @if (!!filter.value.filters?.length) {\r\n                            <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n                                (click)=\"toggleCollapse(filter)\"\r\n                                [appTooltip]=\"isCollapsed(filter) ? 'Expand Group' : 'Collapse Group'\">\r\n                                <i class=\"feather\" [class.feather-plus]=\"isCollapsed(filter)\" [class.feather-minus]=\"!isCollapsed(filter)\"></i>\r\n                            </button>\r\n                        }\r\n                        <div class=\"local-action-buttons\">\r\n                            <button type=\"button\" class=\"btn btn-success feather-file-plus\"\r\n                            (click)=\"addCondition(filter)\"\r\n                            [appTooltip]=\"'Add Condition to this Group'\" [position]=\"'above'\">\r\n                            </button>\r\n                            <button type=\"button\" class=\"btn btn-success feather-folder-plus\"\r\n                            (click)=\"addGroup(filter)\"\r\n                            [appTooltip]=\"'Add Subgroup to this Group'\" [position]=\"'above'\">\r\n                            </button>\r\n                            @if (!!groupToRemove) {\r\n                                <button type=\"button\" class=\"btn btn-danger feather-trash\"\r\n                                (click)=\"removeGroup(groupToRemove.group, groupToRemove.index)\"\r\n                                [appTooltip]=\"'Remove Group'\" [position]=\"'above'\">\r\n                                </button>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"group-content\">\r\n            \r\n                    @if (!isCollapsed(filter)) {\r\n\r\n                        @if (!!filter.value.filters?.length) {\r\n                            <div class=\"filter-list\" formArrayName=\"filters\">\r\n                            @for (childFilter of filter.get('filters').controls; track $index; let idx = $index) {\r\n                                <div class=\"filter-row\" [formGroup]=\"childFilter\">\r\n                \r\n                                @if (!childFilter.value.logicalOperator) {\r\n\r\n                                    <div class=\"filter-raw\">\r\n\r\n                                        <div class=\"field-cell\">\r\n                                            <select class=\"form-control\"\r\n                                                    [appTooltip]=\"getColLabelTooltip(childFilter)\"\r\n                                                    [showAnyway]=\"true\"\r\n                                                    formControlName=\"name\">\r\n                                            @for (col of $totalCols(); track $index) {\r\n                                                <option [value]=\"col.field\">{{ col.label || col.field }}</option>\r\n                                            }\r\n                                            </select>\r\n\r\n                                        </div>\r\n\r\n                                        <div class=\"operator-cell\">\r\n                                            <select class=\"form-control\" formControlName=\"relationalOperator\">\r\n                                            @for (op of relationalOperator; track $index) {\r\n                                            <option [value]=\"op\">{{ operatorFriendlyMap[op] || op }}</option>\r\n                                            }\r\n                                            </select>\r\n                                        </div>                                    \r\n\r\n                                        <div class=\"value-cell\">\r\n                                            @if (shouldShowValueControl(childFilter.value.relationalOperator)) {\r\n                                            <core-control-value-only\r\n                                            @fadeSwitch\r\n                                            [$control]=\"resolveControl(childFilter.value.name)!\"\r\n                                            [$form]=\"childFilter\"\r\n                                            [$fieldName]=\"'value'\"\r\n                                            >\r\n                                            </core-control-value-only>\r\n                                            }\r\n                                        </div>\r\n\r\n                                        <div class=\"action-cell\">\r\n                                            <button type=\"button\" class=\"btn btn-danger btn-sm feather-trash-2\"\r\n                                                (click)=\"removeCondition(filter, idx)\"\r\n                                                [appTooltip]=\"'Remove Condition'\">\r\n                                            </button>\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                    <div class=\"filter-message default\">\r\n                                    <input type=\"text\"\r\n                                            class=\"form-control\"\r\n                                            placeholder=\"Default message...\"\r\n                                            formControlName=\"defaultMessage\" />\r\n                                    </div>\r\n\r\n                                    <div class=\"filter-message english\">\r\n                                    <input type=\"text\"\r\n                                            class=\"form-control\"\r\n                                            placeholder=\"English message...\"\r\n                                            formControlName=\"englishMessage\" />\r\n                                    </div>\r\n\r\n                                } @else {\r\n                                    <!-- Recursive nested groups -->\r\n                                    <ng-container *ngTemplateOutlet=\"queryTemplate; context: { filter: childFilter, groupToRemove: { group: filter, index: idx } }\"></ng-container>\r\n                                }\r\n                                \r\n                                </div>\r\n                            }\r\n                            </div>\r\n                        }\r\n            \r\n\r\n                    }\r\n\r\n                </div>\r\n\r\n            </div>\r\n      \r\n          </ng-template>\r\n      \r\n          <ng-container\r\n            *ngTemplateOutlet=\"queryTemplate; context: { filter: $mainForm(), groupToRemove: null }\">\r\n          </ng-container>\r\n      \r\n        </div>\r\n      \r\n    </form>\r\n  \r\n    <div class=\"dev-json-view\">\r\n      <pre class=\"json-preview\">{{ crts.$filterFormJsonString() }}</pre>\r\n    </div>\r\n  \r\n  </div>\r\n", styles: [".core-rule-tree-container{display:flex;flex-direction:column;width:100%;overflow-y:auto}.core-rule-tree-container button{border-radius:0}.expression-box{background:#e0f2fe;padding:6px 12px;font-weight:500;font-size:14px}.top-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:8px}.expression-display{background-color:#e0f2fe;padding:8px 16px;font-family:monospace;font-size:14px;color:#0369a1}.query-builder{flex-grow:1;overflow-y:visible}.json-preview{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;margin-top:15px}.core-rule-tree-form{display:flex;flex-direction:column;gap:16px}.top-bar{display:flex;justify-content:space-between;align-items:center}.expression-box{background:#e0f2fe;padding:6px 12px;font-weight:500;font-size:14px;margin-right:8px}.query-builder{display:flex;flex-direction:column;gap:16px}.group-card{padding:15px;background:#f9f9f9;display:flex;flex-direction:column;gap:8px;position:relative}.group-card .group-header{display:block;position:relative}.group-card .logical-operator{display:flex;align-items:center;align-self:flex-start;gap:8px}.group-card .logical-operator select{width:57px;background-color:#fff4ce}.group-card .logical-operator .local-action-buttons{margin-left:auto;display:flex;gap:4px}.group-card .logical-operator:hover .local-action-buttons{display:flex}.filter-list{display:flex;flex-direction:column;gap:8px}.filter-row{margin:8px 0}.filter-row .filter-raw{display:flex;align-items:center;gap:8px}.field-cell,.operator-cell,.value-cell{flex:1}.field-cell select{width:136px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.filter-message{margin-top:8px}.action-cell{flex-shrink:0}.btn-xs{padding:2px 6px;font-size:10px}.rule-group-container:hover{background-color:#f9f9f9}.group-content{pointer-events:none}.group-content>*{pointer-events:auto}.logical-operator-label{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border:1px solid #ced4da;background-color:#fff4ce;color:#495057;font-size:14px;font-weight:500;min-width:100px;width:57px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CoreControlValueOnlyComponent, selector: "core-control-value-only", inputs: ["$control", "$form", "$fieldName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }], animations: [
             trigger('fadeSwitch', [
                 state('visible', style({ opacity: 1 })),
                 state('hidden', style({ opacity: 0 })),
@@ -984,7 +984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                             transition('hidden => visible', [animate('250ms ease-in')]),
                             transition('visible => hidden', [animate('150ms ease-out')]),
                         ])
-                    ], template: "<div class=\"core-rule-tree-container\">\r\n\r\n    <form [formGroup]=\"$mainForm()\" (ngSubmit)=\"null\" class=\"core-rule-tree-form\">\r\n\r\n        <div class=\"top-bar\">\r\n          <div class=\"expression-box\">\r\n            Expression = {{ crts.$filterString() || '()' }}\r\n          </div>\r\n      \r\n        </div>\r\n      \r\n        <div class=\"query-builder\">\r\n          <ng-template #queryTemplate let-filter=\"filter\" let-groupToRemove=\"groupToRemove\">\r\n            \r\n            <div class=\"group-card\">\r\n\r\n                <div class=\"group-header\">\r\n\r\n                    <div class=\"logical-operator\">\r\n\r\n                        <select class=\"form-control pointer\" [formControl]=\"filter.get('logicalOperator')\">\r\n                            <option value=\"AND\">AND</option>\r\n                            <option value=\"OR\">OR</option>\r\n                        </select>\r\n\r\n                        <!-- Collapse/Expand Button -->\r\n                        @if (!!filter.value.filters?.length) {\r\n                            <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n                                (click)=\"toggleCollapse(filter)\"\r\n                                [appTooltip]=\"isCollapsed(filter) ? 'Expand Group' : 'Collapse Group'\">\r\n                                <i class=\"feather\" [class.feather-plus]=\"isCollapsed(filter)\" [class.feather-minus]=\"!isCollapsed(filter)\"></i>\r\n                            </button>\r\n                        }\r\n                        <div class=\"local-action-buttons\">\r\n                            <button type=\"button\" class=\"btn btn-success feather-file-plus\"\r\n                            (click)=\"addCondition(filter)\"\r\n                            [appTooltip]=\"'Add Condition to this Group'\" [position]=\"'top'\">\r\n                            </button>\r\n                            <button type=\"button\" class=\"btn btn-success feather-folder-plus\"\r\n                            (click)=\"addGroup(filter)\"\r\n                            [appTooltip]=\"'Add Subgroup to this Group'\" [position]=\"'top'\">\r\n                            </button>\r\n                            @if (!!groupToRemove) {\r\n                                <button type=\"button\" class=\"btn btn-danger feather-trash\"\r\n                                (click)=\"removeGroup(groupToRemove.group, groupToRemove.index)\"\r\n                                [appTooltip]=\"'Remove Group'\" [position]=\"'top'\">\r\n                                </button>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"group-content\">\r\n            \r\n                    @if (!isCollapsed(filter)) {\r\n\r\n                        @if (!!filter.value.filters?.length) {\r\n                            <div class=\"filter-list\" formArrayName=\"filters\">\r\n                            @for (childFilter of filter.get('filters').controls; track $index; let idx = $index) {\r\n                                <div class=\"filter-row\" [formGroup]=\"childFilter\">\r\n                \r\n                                @if (!childFilter.value.logicalOperator) {\r\n\r\n                                    <div class=\"filter-raw\">\r\n\r\n                                        <div class=\"field-cell\">\r\n                                            <select class=\"form-control\"\r\n                                                    [appTooltip]=\"getColLabelTooltip(childFilter)\"\r\n                                                    [showAnyway]=\"true\"\r\n                                                    formControlName=\"name\">\r\n                                            @for (col of $totalCols(); track $index) {\r\n                                                <option [value]=\"col.field\">{{ col.label || col.field }}</option>\r\n                                            }\r\n                                            </select>\r\n\r\n                                        </div>\r\n\r\n                                        <div class=\"operator-cell\">\r\n                                            <select class=\"form-control\" formControlName=\"relationalOperator\">\r\n                                            @for (op of relationalOperator; track $index) {\r\n                                            <option [value]=\"op\">{{ operatorFriendlyMap[op] || op }}</option>\r\n                                            }\r\n                                            </select>\r\n                                        </div>                                    \r\n\r\n                                        <div class=\"value-cell\">\r\n                                            @if (shouldShowValueControl(childFilter.value.relationalOperator)) {\r\n                                            <core-control-value-only\r\n                                            @fadeSwitch\r\n                                            [$control]=\"resolveControl(childFilter.value.name)!\"\r\n                                            [$form]=\"childFilter\"\r\n                                            [$fieldName]=\"'value'\"\r\n                                            >\r\n                                            </core-control-value-only>\r\n                                            }\r\n                                        </div>\r\n\r\n                                        <div class=\"action-cell\">\r\n                                            <button type=\"button\" class=\"btn btn-danger btn-sm feather-trash-2\"\r\n                                                (click)=\"removeCondition(filter, idx)\"\r\n                                                [appTooltip]=\"'Remove Condition'\">\r\n                                            </button>\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                    <div class=\"filter-message default\">\r\n                                    <input type=\"text\"\r\n                                            class=\"form-control\"\r\n                                            placeholder=\"Default message...\"\r\n                                            formControlName=\"defaultMessage\" />\r\n                                    </div>\r\n\r\n                                    <div class=\"filter-message english\">\r\n                                    <input type=\"text\"\r\n                                            class=\"form-control\"\r\n                                            placeholder=\"English message...\"\r\n                                            formControlName=\"englishMessage\" />\r\n                                    </div>\r\n\r\n                                } @else {\r\n                                    <!-- Recursive nested groups -->\r\n                                    <ng-container *ngTemplateOutlet=\"queryTemplate; context: { filter: childFilter, groupToRemove: { group: filter, index: idx } }\"></ng-container>\r\n                                }\r\n                                \r\n                                </div>\r\n                            }\r\n                            </div>\r\n                        }\r\n            \r\n\r\n                    }\r\n\r\n                </div>\r\n\r\n            </div>\r\n      \r\n          </ng-template>\r\n      \r\n          <ng-container\r\n            *ngTemplateOutlet=\"queryTemplate; context: { filter: $mainForm(), groupToRemove: null }\">\r\n          </ng-container>\r\n      \r\n        </div>\r\n      \r\n    </form>\r\n  \r\n    <div class=\"dev-json-view\">\r\n      <pre class=\"json-preview\">{{ crts.$filterFormJsonString() }}</pre>\r\n    </div>\r\n  \r\n  </div>\r\n", styles: [".core-rule-tree-container{display:flex;flex-direction:column;width:100%;overflow-y:auto}.core-rule-tree-container button{border-radius:0}.expression-box{background:#e0f2fe;padding:6px 12px;font-weight:500;font-size:14px}.top-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:8px}.expression-display{background-color:#e0f2fe;padding:8px 16px;font-family:monospace;font-size:14px;color:#0369a1}.query-builder{flex-grow:1;overflow-y:visible}.json-preview{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;margin-top:15px}.core-rule-tree-form{display:flex;flex-direction:column;gap:16px}.top-bar{display:flex;justify-content:space-between;align-items:center}.expression-box{background:#e0f2fe;padding:6px 12px;font-weight:500;font-size:14px;margin-right:8px}.query-builder{display:flex;flex-direction:column;gap:16px}.group-card{padding:15px;background:#f9f9f9;display:flex;flex-direction:column;gap:8px;position:relative}.group-card .group-header{display:block;position:relative}.group-card .logical-operator{display:flex;align-items:center;align-self:flex-start;gap:8px}.group-card .logical-operator select{width:57px;background-color:#fff4ce}.group-card .logical-operator .local-action-buttons{margin-left:auto;display:flex;gap:4px}.group-card .logical-operator:hover .local-action-buttons{display:flex}.filter-list{display:flex;flex-direction:column;gap:8px}.filter-row{margin:8px 0}.filter-row .filter-raw{display:flex;align-items:center;gap:8px}.field-cell,.operator-cell,.value-cell{flex:1}.field-cell select{width:136px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.filter-message{margin-top:8px}.action-cell{flex-shrink:0}.btn-xs{padding:2px 6px;font-size:10px}.rule-group-container:hover{background-color:#f9f9f9}.group-content{pointer-events:none}.group-content>*{pointer-events:auto}.logical-operator-label{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border:1px solid #ced4da;background-color:#fff4ce;color:#495057;font-size:14px;font-weight:500;min-width:100px;width:57px;-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<div class=\"core-rule-tree-container\">\r\n\r\n    <form [formGroup]=\"$mainForm()\" (ngSubmit)=\"null\" class=\"core-rule-tree-form\">\r\n\r\n        <div class=\"top-bar\">\r\n          <div class=\"expression-box\">\r\n            Expression = {{ crts.$filterString() || '()' }}\r\n          </div>\r\n      \r\n        </div>\r\n      \r\n        <div class=\"query-builder\">\r\n          <ng-template #queryTemplate let-filter=\"filter\" let-groupToRemove=\"groupToRemove\">\r\n            \r\n            <div class=\"group-card\">\r\n\r\n                <div class=\"group-header\">\r\n\r\n                    <div class=\"logical-operator\">\r\n\r\n                        <select class=\"form-control pointer\" [formControl]=\"filter.get('logicalOperator')\">\r\n                            <option value=\"AND\">AND</option>\r\n                            <option value=\"OR\">OR</option>\r\n                        </select>\r\n\r\n                        <!-- Collapse/Expand Button -->\r\n                        @if (!!filter.value.filters?.length) {\r\n                            <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n                                (click)=\"toggleCollapse(filter)\"\r\n                                [appTooltip]=\"isCollapsed(filter) ? 'Expand Group' : 'Collapse Group'\">\r\n                                <i class=\"feather\" [class.feather-plus]=\"isCollapsed(filter)\" [class.feather-minus]=\"!isCollapsed(filter)\"></i>\r\n                            </button>\r\n                        }\r\n                        <div class=\"local-action-buttons\">\r\n                            <button type=\"button\" class=\"btn btn-success feather-file-plus\"\r\n                            (click)=\"addCondition(filter)\"\r\n                            [appTooltip]=\"'Add Condition to this Group'\" [position]=\"'above'\">\r\n                            </button>\r\n                            <button type=\"button\" class=\"btn btn-success feather-folder-plus\"\r\n                            (click)=\"addGroup(filter)\"\r\n                            [appTooltip]=\"'Add Subgroup to this Group'\" [position]=\"'above'\">\r\n                            </button>\r\n                            @if (!!groupToRemove) {\r\n                                <button type=\"button\" class=\"btn btn-danger feather-trash\"\r\n                                (click)=\"removeGroup(groupToRemove.group, groupToRemove.index)\"\r\n                                [appTooltip]=\"'Remove Group'\" [position]=\"'above'\">\r\n                                </button>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"group-content\">\r\n            \r\n                    @if (!isCollapsed(filter)) {\r\n\r\n                        @if (!!filter.value.filters?.length) {\r\n                            <div class=\"filter-list\" formArrayName=\"filters\">\r\n                            @for (childFilter of filter.get('filters').controls; track $index; let idx = $index) {\r\n                                <div class=\"filter-row\" [formGroup]=\"childFilter\">\r\n                \r\n                                @if (!childFilter.value.logicalOperator) {\r\n\r\n                                    <div class=\"filter-raw\">\r\n\r\n                                        <div class=\"field-cell\">\r\n                                            <select class=\"form-control\"\r\n                                                    [appTooltip]=\"getColLabelTooltip(childFilter)\"\r\n                                                    [showAnyway]=\"true\"\r\n                                                    formControlName=\"name\">\r\n                                            @for (col of $totalCols(); track $index) {\r\n                                                <option [value]=\"col.field\">{{ col.label || col.field }}</option>\r\n                                            }\r\n                                            </select>\r\n\r\n                                        </div>\r\n\r\n                                        <div class=\"operator-cell\">\r\n                                            <select class=\"form-control\" formControlName=\"relationalOperator\">\r\n                                            @for (op of relationalOperator; track $index) {\r\n                                            <option [value]=\"op\">{{ operatorFriendlyMap[op] || op }}</option>\r\n                                            }\r\n                                            </select>\r\n                                        </div>                                    \r\n\r\n                                        <div class=\"value-cell\">\r\n                                            @if (shouldShowValueControl(childFilter.value.relationalOperator)) {\r\n                                            <core-control-value-only\r\n                                            @fadeSwitch\r\n                                            [$control]=\"resolveControl(childFilter.value.name)!\"\r\n                                            [$form]=\"childFilter\"\r\n                                            [$fieldName]=\"'value'\"\r\n                                            >\r\n                                            </core-control-value-only>\r\n                                            }\r\n                                        </div>\r\n\r\n                                        <div class=\"action-cell\">\r\n                                            <button type=\"button\" class=\"btn btn-danger btn-sm feather-trash-2\"\r\n                                                (click)=\"removeCondition(filter, idx)\"\r\n                                                [appTooltip]=\"'Remove Condition'\">\r\n                                            </button>\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                    <div class=\"filter-message default\">\r\n                                    <input type=\"text\"\r\n                                            class=\"form-control\"\r\n                                            placeholder=\"Default message...\"\r\n                                            formControlName=\"defaultMessage\" />\r\n                                    </div>\r\n\r\n                                    <div class=\"filter-message english\">\r\n                                    <input type=\"text\"\r\n                                            class=\"form-control\"\r\n                                            placeholder=\"English message...\"\r\n                                            formControlName=\"englishMessage\" />\r\n                                    </div>\r\n\r\n                                } @else {\r\n                                    <!-- Recursive nested groups -->\r\n                                    <ng-container *ngTemplateOutlet=\"queryTemplate; context: { filter: childFilter, groupToRemove: { group: filter, index: idx } }\"></ng-container>\r\n                                }\r\n                                \r\n                                </div>\r\n                            }\r\n                            </div>\r\n                        }\r\n            \r\n\r\n                    }\r\n\r\n                </div>\r\n\r\n            </div>\r\n      \r\n          </ng-template>\r\n      \r\n          <ng-container\r\n            *ngTemplateOutlet=\"queryTemplate; context: { filter: $mainForm(), groupToRemove: null }\">\r\n          </ng-container>\r\n      \r\n        </div>\r\n      \r\n    </form>\r\n  \r\n    <div class=\"dev-json-view\">\r\n      <pre class=\"json-preview\">{{ crts.$filterFormJsonString() }}</pre>\r\n    </div>\r\n  \r\n  </div>\r\n", styles: [".core-rule-tree-container{display:flex;flex-direction:column;width:100%;overflow-y:auto}.core-rule-tree-container button{border-radius:0}.expression-box{background:#e0f2fe;padding:6px 12px;font-weight:500;font-size:14px}.top-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:8px}.expression-display{background-color:#e0f2fe;padding:8px 16px;font-family:monospace;font-size:14px;color:#0369a1}.query-builder{flex-grow:1;overflow-y:visible}.json-preview{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;margin-top:15px}.core-rule-tree-form{display:flex;flex-direction:column;gap:16px}.top-bar{display:flex;justify-content:space-between;align-items:center}.expression-box{background:#e0f2fe;padding:6px 12px;font-weight:500;font-size:14px;margin-right:8px}.query-builder{display:flex;flex-direction:column;gap:16px}.group-card{padding:15px;background:#f9f9f9;display:flex;flex-direction:column;gap:8px;position:relative}.group-card .group-header{display:block;position:relative}.group-card .logical-operator{display:flex;align-items:center;align-self:flex-start;gap:8px}.group-card .logical-operator select{width:57px;background-color:#fff4ce}.group-card .logical-operator .local-action-buttons{margin-left:auto;display:flex;gap:4px}.group-card .logical-operator:hover .local-action-buttons{display:flex}.filter-list{display:flex;flex-direction:column;gap:8px}.filter-row{margin:8px 0}.filter-row .filter-raw{display:flex;align-items:center;gap:8px}.field-cell,.operator-cell,.value-cell{flex:1}.field-cell select{width:136px;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.filter-message{margin-top:8px}.action-cell{flex-shrink:0}.btn-xs{padding:2px 6px;font-size:10px}.rule-group-container:hover{background-color:#f9f9f9}.group-content{pointer-events:none}.group-content>*{pointer-events:auto}.logical-operator-label{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border:1px solid #ced4da;background-color:#fff4ce;color:#495057;font-size:14px;font-weight:500;min-width:100px;width:57px;-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: MultiLanguageService }, { type: i0.ChangeDetectorRef }] });
 
 class WfActorSelectorComponent extends BaseComponent {
@@ -1174,7 +1174,7 @@ class WfActorSelectorComponent extends BaseComponent {
         this.$valueChange.emit(next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfActorSelectorComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WfActorSelectorComponent, isStandalone: true, selector: "wf-actor-selector", outputs: { $valueChange: "$valueChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"wf-actor-selector-container\">\r\n    <div class=\"soure-options\"\r\n      [appTooltip]=\"'This version currently supports: Manager | Supervisor | Employee | Position | Requester'\"\r\n      [showAnyway]=\"true\"\r\n      [position]=\"'above'\"    \r\n    >\r\n      <pre>{{ $selectedActorAssignmentJson() }}</pre>\r\n      <core-radio-group\r\n        [options$]=\"actorSourceOptions$\"\r\n        [vertical]=\"true\"\r\n        [columnCount]=\"2\"\r\n        [gapY]=\"8\"\r\n        [(ngModel)]=\"$value()!.source\"\r\n        (ngModelChange)=\"onSourceChanged($event)\">\r\n      </core-radio-group>\r\n    </div>\r\n\r\n    <div class=\"soure-options form-control-disabled\"\r\n      [appTooltip]=\"'Not supported yet in this version'\"\r\n      [showAnyway]=\"true\"\r\n    >\r\n      <core-radio-group\r\n        [options$]=\"unsupportedYetactorSourceOptions$\"\r\n        [vertical]=\"true\"\r\n        [columnCount]=\"2\"\r\n        [gapY]=\"8\"\r\n        [disabled]=\"true\"\r\n        [(ngModel)]=\"$value()!.source\"\r\n        (ngModelChange)=\"onSourceChanged($event)\">\r\n      </core-radio-group>\r\n    </div>\r\n  \r\n    <!-- Manager / DepartmentSupervisor -->\r\n    @if (!!$value() && $showLevel()) {\r\n      <div class=\"manager-level\">\r\n        <label>\r\n          {{ $value()!.source === 'Manager' ? 'Manager level' : 'Supervisor level' }}\r\n        </label>\r\n        <core-param-control\r\n          [control]=\"levelSpecificControl\"\r\n        ></core-param-control>\r\n      </div>\r\n    }\r\n  \r\n    <!-- Employee / Position / UserGroup (choose static entities) -->\r\n    @if (!!$value() && $value()!.source === 'Employee' || $value()!.source === 'Position' || $value()!.source === 'UserGroup') {\r\n      <div class=\"static-selector\">\r\n        <label>Select {{ $value()!.source }}</label>\r\n        <!-- Choose component based on source -->\r\n        @switch ($value()!.source) {\r\n          @case('Employee') {\r\n            <core-param-control\r\n              [control]=\"employeeIdsControl\"\r\n            ></core-param-control>\r\n          }\r\n          @case('Position') {\r\n            <core-param-control\r\n              [control]=\"positionIdsControl\"\r\n            ></core-param-control>\r\n          }\r\n          @case('UserGroup') {\r\n            <div>Not supported yet in this version</div>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  \r\n    @if (!!$value() && $value()!.source === 'StepRecipient') {\r\n        <div>Not supported yet in this version</div>\r\n    }\r\n  \r\n</div>\r\n  ", styles: [".wf-actor-selector-container{height:100%;font-size:13px}.wf-actor-selector-container>*{margin-bottom:15px}.wf-actor-selector-container .soure-options{border:1px solid #e0e0e0;padding:15px 15px 15px 30px}.wf-actor-selector-container .soure-options.form-control-disabled{pointer-events:none}.wf-actor-selector-container .manager-level{position:relative;overflow-y:visible}.wf-actor-selector-container .manager-level label{color:#464646}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoreParamControlComponent, selector: "core-param-control", inputs: ["control", "enableTimeZoneConverterForDateTimePeriodParameters"] }, { kind: "component", type: CoreRadioGroupComponent, selector: "core-radio-group", inputs: ["options$", "vertical", "columnCount", "gapY", "defaultValue"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WfActorSelectorComponent, isStandalone: true, selector: "wf-actor-selector", outputs: { $valueChange: "$valueChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"wf-actor-selector-container\">\r\n    <div class=\"soure-options\"\r\n      [appTooltip]=\"'This version currently supports: Manager | Supervisor | Employee | Position | Requester'\"\r\n      [showAnyway]=\"true\"\r\n      [position]=\"'above'\"    \r\n    >\r\n      <pre>{{ $selectedActorAssignmentJson() }}</pre>\r\n      <core-radio-group\r\n        [options$]=\"actorSourceOptions$\"\r\n        [vertical]=\"true\"\r\n        [columnCount]=\"2\"\r\n        [gapY]=\"8\"\r\n        [(ngModel)]=\"$value()!.source\"\r\n        (ngModelChange)=\"onSourceChanged($event)\">\r\n      </core-radio-group>\r\n    </div>\r\n\r\n    <div class=\"soure-options form-control-disabled\"\r\n      [appTooltip]=\"'Not supported yet in this version'\"\r\n      [showAnyway]=\"true\"\r\n    >\r\n      <core-radio-group\r\n        [options$]=\"unsupportedYetactorSourceOptions$\"\r\n        [vertical]=\"true\"\r\n        [columnCount]=\"2\"\r\n        [gapY]=\"8\"\r\n        [disabled]=\"true\"\r\n        [(ngModel)]=\"$value()!.source\"\r\n        (ngModelChange)=\"onSourceChanged($event)\">\r\n      </core-radio-group>\r\n    </div>\r\n  \r\n    <!-- Manager / DepartmentSupervisor -->\r\n    @if (!!$value() && $showLevel()) {\r\n      <div class=\"manager-level\">\r\n        <label>\r\n          {{ $value()!.source === 'Manager' ? 'Manager level' : 'Supervisor level' }}\r\n        </label>\r\n        <core-param-control\r\n          [control]=\"levelSpecificControl\"\r\n        ></core-param-control>\r\n      </div>\r\n    }\r\n  \r\n    <!-- Employee / Position / UserGroup (choose static entities) -->\r\n    @if (!!$value() && $value()!.source === 'Employee' || $value()!.source === 'Position' || $value()!.source === 'UserGroup') {\r\n      <div class=\"static-selector\">\r\n        <label>Select {{ $value()!.source }}</label>\r\n        <!-- Choose component based on source -->\r\n        @switch ($value()!.source) {\r\n          @case('Employee') {\r\n            <core-param-control\r\n              [control]=\"employeeIdsControl\"\r\n            ></core-param-control>\r\n          }\r\n          @case('Position') {\r\n            <core-param-control\r\n              [control]=\"positionIdsControl\"\r\n            ></core-param-control>\r\n          }\r\n          @case('UserGroup') {\r\n            <div>Not supported yet in this version</div>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  \r\n    @if (!!$value() && $value()!.source === 'StepRecipient') {\r\n        <div>Not supported yet in this version</div>\r\n    }\r\n  \r\n</div>\r\n  ", styles: [".wf-actor-selector-container{height:100%;font-size:13px}.wf-actor-selector-container>*{margin-bottom:15px}.wf-actor-selector-container .soure-options{border:1px solid #e0e0e0;padding:15px 15px 15px 30px}.wf-actor-selector-container .soure-options.form-control-disabled{pointer-events:none}.wf-actor-selector-container .manager-level{position:relative;overflow-y:visible}.wf-actor-selector-container .manager-level label{color:#464646}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoreParamControlComponent, selector: "core-param-control", inputs: ["control", "enableTimeZoneConverterForDateTimePeriodParameters"] }, { kind: "component", type: CoreRadioGroupComponent, selector: "core-radio-group", inputs: ["options$", "vertical", "columnCount", "gapY", "defaultValue"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfActorSelectorComponent, decorators: [{
             type: Component,
@@ -1759,7 +1759,7 @@ class WfNodeComponent extends BaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WfNodeComponent, isStandalone: true, selector: "wf-node", inputs: { branchId: "branchId", step: "step", index: "index", branchPriority: "branchPriority", stepGroup: "stepGroup", conditionalBranches: "conditionalBranches", isRootLevelStepGroup: "isRootLevelStepGroup", grandParentSteps: "grandParentSteps", isInFallbackBranch: "isInFallbackBranch" }, viewQueries: [{ propertyName: "branchHeader", first: true, predicate: ["branchHeader"], descendants: true }, { propertyName: "branchName", first: true, predicate: ["branchName"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "branchGroupRef", first: true, predicate: ["branchGroup"], descendants: true }, { propertyName: "topBridgeLineRef", first: true, predicate: ["topBridgeLine"], descendants: true }, { propertyName: "bottomBridgeLineRef", first: true, predicate: ["bottomBridgeLine"], descendants: true }, { propertyName: "branchColumnRefs", predicate: ["branchColumn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@switch (step.type) {\r\n\r\n    @case (enumType.ConditionalBranch) {\r\n      <div class=\"wf-branch-group-container\">\r\n        <div \r\n        class=\"branch-group\" \r\n        #branchGroup \r\n        bridgeLine\r\n        (bridgeLinesAdjusted)=\"adjustBridgeLines()\"\r\n        >\r\n          <!-- \uD83D\uDD39 Top Bridge Line -->\r\n          <div class=\"horizontal-bridge-line\" #topBridgeLine></div>\r\n\r\n          <div class=\"add-branch-inline\" [appTooltip]=\"'All conditional branches are checked from Left to Right in a strict order'\" [showAnyway]=\"true\">\r\n            <button class=\"add-branch-btn\" (click)=\"coreWorkflowService.addBranchToStep(step.id)\">\r\n                \uFF0B Add New Branch\r\n            </button>\r\n          </div>\r\n\r\n  \r\n          @for (branch of step.branches; track $index; let j = $index) {\r\n            <div class=\"branch-column\" #branchColumn>\r\n              <div class=\"branch-column-inner\">\r\n  \r\n                @for (bstep of branch.steps; track $index; let k = $index) {\r\n                  <wf-node\r\n                    [branchId]=\"branch.id\"\r\n                    [branchPriority]=\"branch.priority\"\r\n                    [step]=\"bstep\"\r\n                    [conditionalBranches]=\"step.branches || []\"\r\n                    [stepGroup]=\"branch.steps\"\r\n                    [grandParentSteps]=\"stepGroup\"\r\n                    [index]=\"k\"\r\n                    [isInFallbackBranch]=\"!!branch.isFallback\"\r\n                  ></wf-node>\r\n                }\r\n  \r\n              </div>\r\n  \r\n              <div class=\"vertical-bridge-line\"></div>\r\n            </div>\r\n          }\r\n  \r\n          <!-- \uD83D\uDD39 Bottom Bridge Line -->\r\n          <div class=\"horizontal-bridge-line\" #bottomBridgeLine></div>\r\n        </div>\r\n      </div>\r\n    }\r\n  \r\n    @case (enumType.BranchCard) {\r\n      <div class=\"wf-step-container wf-branch-card-container workflow-box\">\r\n        <div class=\"step-wrapper branch-card-wrapper\" [class.fallback]=\"!!isInFallbackBranch\">\r\n          <div class=\"arrow-down-container\">\r\n            <div class=\"arrow-down\"></div>\r\n          </div>\r\n  \r\n          <div class=\"step-header branch-header\" [class.edit-mode]=\"stepNameEditMode\" #branchHeader>\r\n            @if (stepNameEditMode) {\r\n              <div class=\"input-wrapper\">\r\n                <input class=\"form-control\" \r\n                  (blur)=\"onInputBlur()\" \r\n                  [(ngModel)]=\"step.name\"\r\n                  (ngModelChange)=\"onStepNameChanged($event)\" \r\n                  #input>\r\n              </div>\r\n            } @else {\r\n              <div class=\"step-name-wrapper branch-name-wrapper\">\r\n                <div\r\n                  class=\"step-name branch-name\"\r\n                  [class.pointer]=\"!isInFallbackBranch\"\r\n                  (click)=\"switchToNameEditMode()\"\r\n                  #branchName>\r\n                  {{ step.name }}\r\n                </div>\r\n  \r\n                @if (!!isInFallbackBranch) {\r\n                  <i class=\"ti-info-alt\"\r\n                     [appTooltip]=\"'This branch is created by default and will only be activated if none of the other branches can be executed.'\"\r\n                     [showAnyway]=\"true\" [position]=\"'above'\"></i>\r\n                }\r\n              </div>\r\n  \r\n              <div class=\"branch-priority\">Priority {{ branchPriority }}</div>\r\n              <div class=\"step-delete branch-delete pointer\" (click)=\"onDeleteBranch(branchId)\">\r\n                <i class=\"feather-x\"></i>\r\n              </div>\r\n            }\r\n          </div>\r\n  \r\n          <div class=\"step-set-config branch-set-condition\" [class.pointer]=\"!isInFallbackBranch\">\r\n            @if (!!isInFallbackBranch) {\r\n              <div class=\"branch-subtext fallback\"\r\n                   [appTooltip]=\"'If other branches are not met, the alternative branch will be executed'\"\r\n                   [showAnyway]=\"true\" [position]=\"'above'\">\r\n                If other branches are not met, the alternative branch will be executed\r\n              </div>\r\n            } @else {\r\n              <div class=\"step-subtext branch-subtext\" (click)=\"openConditionEditor()\">Set conditions</div>\r\n              <div><i class=\"feather-chevron-right\"></i></div>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- The handler node applies to the situation where no approval is required, but a member needs to process something:\r\n\uD83D\uDCB0 Financial payment,\r\n\uD83D\uDCCE Stamping,\r\n\uD83D\uDDC2 Document filing, and so on. -->\r\n  \r\n    @default() {\r\n      <div class=\"wf-step-container workflow-box {{ step.type.toLowerCase() }}\">\r\n\r\n          <div class=\"step-wrapper\">\r\n    \r\n            <div class=\"step-header\" [class.edit-mode]=\"stepNameEditMode\">\r\n              @if (stepNameEditMode) {\r\n                <div class=\"input-wrapper\">\r\n                  <input class=\"form-control\" \r\n                    (blur)=\"onInputBlur()\" \r\n                    [(ngModel)]=\"step.name\" \r\n                    (ngModelChange)=\"onStepNameChanged($event)\"                     \r\n                    #input>\r\n                </div>\r\n              } @else {\r\n                <div class=\"step-name-wrapper\">\r\n                  <div\r\n                    class=\"step-name pointer\"\r\n                    (click)=\"switchToNameEditMode()\"\r\n                    #stepName>\r\n                    {{ step.name }}\r\n                  </div>\r\n                  @if (step.type === enumType.Handle) {\r\n                    <i class=\"ti-info-alt pointer\"\r\n                      [appTooltip]=\"'The handler node applies to the situation where no approval is required, but a member needs to process something (Financial payment, Stamping, Document filing, and so on.)'\"\r\n                      [showAnyway]=\"true\" [position]=\"'above'\"></i>\r\n                  }\r\n                </div>\r\n    \r\n                <div class=\"step-delete pointer\" (click)=\"onDeleteStep()\" [class.d-none]=\"step.type === enumType.Submit || step.type === enumType.End\">\r\n                  <i class=\"feather-x\" ></i>\r\n                </div>\r\n              }\r\n            </div>\r\n    \r\n            <div class=\"step-set-config pointer\" (click)=\"openNoneBranchRelatedEditor()\">\r\n              <div class=\"step-subtext pointer\" [class.configurated]=\"!!step.config\" [appTooltip]=\"step | wfNodeLabel\">{{ step | wfNodeLabel }}</div>\r\n              <div><i class=\"feather-chevron-right\"></i></div>\r\n            </div>\r\n          </div>\r\n      </div>\r\n    }\r\n}\r\n  \r\n@if (step.type !== enumType.End) {\r\n    <wf-bottom-v-insert\r\n        [currentContext]=\"{ branchId: step.branchId, index: index + 1 }\"\r\n        [currentStep]=\"step\"\r\n    ></wf-bottom-v-insert>\r\n}\r\n  ", styles: [".wf-workflow-canvas-container{--standard-connector-height: 90px;--print-area-scale: 1;padding-top:50px;padding-bottom:50px;background-color:#f2f3f5;position:relative;overflow:auto}.wf-workflow-canvas-container .zoom-tools{display:block;position:absolute;left:15px;z-index:1}.wf-workflow-canvas-container .zoom-tools .tools-wrapper{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background-color:#f9fafb;box-shadow:0 1px 3px #0000001a}.wf-workflow-canvas-container .zoom-tools .tools-wrapper>*{cursor:pointer}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-btn{background:none;border:none;padding:6px;cursor:pointer;transition:background-color .2s}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-btn:hover{background-color:#e5e7eb}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-label{background:none;border:none;padding:6px 8px;cursor:default}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .universe-icon{font-size:16px;display:inline-flex;align-items:center;justify-content:center}.wf-workflow-canvas-container .scroll-container{display:block;width:var(--width);height:var(--height);overflow-x:auto}.wf-workflow-canvas-container .canvas{display:flex;flex-direction:column;align-items:center;position:relative}.wf-workflow-canvas-container .canvas.is-dragging *{-webkit-user-select:none;user-select:none}.wf-workflow-canvas-container .print-area{transform:scale(var(--print-area-scale));transition:.2s linear}.wf-workflow-canvas-container .step{text-align:center;position:relative}.wf-workflow-canvas-container .canvas-top-tool{position:absolute;display:block;top:15px;left:15px;box-shadow:0 0 4px #0000000d}.wf-workflow-canvas-container .canvas-top-tool button{border-radius:0;height:30px;font-size:13px}.workflow-box{width:220px;min-height:85px;max-height:100px;padding:0 4px 4px;box-shadow:0 0 4px #0000000d}.workflow-box.submit,.workflow-box.end{background-color:#a9b4cd}.workflow-box.approval{background-color:#f80}.workflow-box.cc{background-color:#3370ff}.workflow-box.handle{background-color:#935af6}.connector{font-size:24px;color:#888}.plus-btn{font-size:18px;background:#fff;border:1px solid #ccc;border-radius:9999px;width:28px;height:28px;cursor:pointer}.insert-menu{background:#fff;border:1px solid #ddd;border-radius:6px;padding:8px;margin-top:6px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;gap:6px;z-index:10}.insert-menu div{cursor:pointer;font-size:14px;padding:2px 6px}.insert-menu .cancel{color:red}.branch-column{position:relative}.branch-column .branch-column-inner{width:100%;display:flex;flex-direction:column;align-items:center}.wf-branch-group-container,.wf-branch-group-container .branch-group{position:relative}.wf-branch-group-container .branch-group .branch-column{display:table-cell;min-width:220px;vertical-align:top;padding:0 12px}.wf-branch-group-container .branch-group .branch-column .vertical-bridge-line{position:absolute;width:2px;background-color:#d9d9d9;z-index:2;pointer-events:none}.wf-branch-group-container .branch-group .horizontal-bridge-line{position:absolute;height:2px;background-color:#d9d9d9;pointer-events:none;z-index:1}.wf-branch-group-container:after{content:\"\";display:block;position:absolute;height:2px;width:calc(100% - 244px);left:122px;bottom:102px}.branch-title{font-weight:700;font-size:14px;margin-bottom:8px}.branch-group-header{display:flex;justify-content:center;margin:12px 0}.add-branch-btn{position:absolute;top:0;width:175px;left:calc(50% - 87.5px);z-index:2;background:#fff;color:#0f172a;border:1px solid #ccc;padding:4px 12px;border-radius:9999px;font-weight:500;cursor:pointer;box-shadow:0 2px 4px #0000000f;text-wrap:nowrap}.workflow-box.submit{background-color:#e0f7fa;border-left:4px solid #00bcd4}.workflow-box.end{background-color:#ede7f6;border-left:4px solid #673ab7}.box.special{font-style:italic;opacity:.9}.bottom-v-container{min-height:65px;width:220px}.wf-bottom-v-insert-container{position:relative;display:flex;flex-direction:column;align-items:center;height:var(--standard-connector-height);width:100%;margin:0}.wf-bottom-v-insert-container .vertical-line{position:absolute;top:0;height:100%;width:2px;background-color:#d9d9d9;z-index:0}.wf-bottom-v-insert-container .plus-container{display:block;position:absolute;border-radius:50%;top:calc(var(--standard-connector-height) / 2 - 16px)}.wf-bottom-v-insert-container .plus-btn{width:32px;height:32px;border-radius:50%;border:none;background:#fff;color:#3b82f6;font-size:20px;box-shadow:.4rem 0 2rem #0000002e;cursor:pointer;display:flex;align-items:center;justify-content:center}.wf-bottom-v-insert-container .plus-btn:hover{background:#f0f8ff;box-shadow:0 0 0 4px #3b82f633}.wf-bottom-v-insert-container.shorter{height:calc(var(--standard-connector-height) - 15px)}.wf-bottom-v-insert-container.shorter .plus-container{display:block;position:absolute;top:calc((var(--standard-connector-height) - 18px) / 2 - 16px)}.wf-bottom-v-insert-container.insert-context .plus-container{outline:#2eb795 solid 2px}.add-branch-inline{position:relative;height:35px;margin-bottom:calc(var(--standard-connector-height) - 17.5px)}.arrow-down-container{display:block;position:absolute;z-index:1;bottom:0}.arrow-down-container .arrow-down{margin-top:5px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #d9d9d9}.branch-card-wrapper{position:relative}.branch-card-wrapper .arrow-down-container{top:-12px;left:calc(50% - 5px)}.wf-step-container .step-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:43px;font-size:12px;border-bottom:1px solid #f6f6f7}.wf-step-container .step-header .input-wrapper{padding-top:4px}.wf-step-container .step-header .step-name-wrapper{display:flex;align-items:center;justify-content:flex-start;padding-right:8px}.wf-step-container .step-header .step-name-wrapper .step-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:140px;padding-left:4px}.wf-step-container .step-header .step-name-wrapper i{margin-left:2px}.wf-step-container .step-header .step-delete{color:gray;display:none}.wf-step-container .step-header .step-delete i{font-size:24px}.wf-step-container .step-header:hover .step-name-wrapper:after{content:\"\\e95a\";font-family:feather}.wf-step-container .step-header:hover .branch-priority{display:none}.wf-step-container .step-header:hover .step-delete,.wf-step-container .step-header.edit-mode{display:block}.wf-step-container .step-set-config{display:flex;align-items:center;justify-content:space-between;min-height:38px;max-height:56px;padding:7px 4px;font-size:14px;background-color:#fff;color:gray}.wf-step-container .step-set-config .step-subtext{width:100%;text-align:left}.wf-step-container .step-set-config .step-subtext.configurated{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-line;word-break:break-word;line-height:1.5em;max-height:3em;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.wf-step-container.wf-branch-card-container{background-color:#fff}.wf-step-container.wf-branch-card-container .branch-header{color:#2eb795;border-bottom:1px solid #f6f6f7}.wf-step-container.wf-branch-card-container .branch-header:before{content:\"\";display:block;position:absolute;height:var(--standard-connector-height);width:2px;background-color:#d9d9d9;left:50%;top:calc(var(--standard-connector-height) * -1)}.wf-step-container.wf-branch-card-container .branch-set-condition{display:flex;align-items:center;justify-content:space-between;min-height:38px;max-height:56px;color:#3e4759;padding:7px 4px;font-size:14px}.wf-step-container.wf-branch-card-container .branch-set-condition .branch-subtext{width:100%;text-align:left}.wf-step-container.wf-branch-card-container .branch-set-condition .branch-subtext.fallback{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-line;word-break:break-word;line-height:1.5em;max-height:3em;overflow:hidden;cursor:default}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header,.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-set-condition{color:gray}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header .branch-priority{padding-right:4px}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-priority{display:block}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-delete{display:none}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-name-wrapper:after{content:\"\"}.steps-preview{position:fixed;width:390px;height:100vh;background-color:#fff;top:0;left:-390px;overflow-y:auto;transition:left .2s ease-out}.steps-preview.shown{left:0}\n", ""], dependencies: [{ kind: "component", type: WfNodeComponent, selector: "wf-node", inputs: ["branchId", "step", "index", "branchPriority", "stepGroup", "conditionalBranches", "isRootLevelStepGroup", "grandParentSteps", "isInFallbackBranch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: WfNodeLabelPipe, name: "wfNodeLabel" }, { kind: "directive", type: BridgeLineDirective, selector: "[bridgeLine]", outputs: ["bridgeLinesAdjusted"] }, { kind: "component", type: WfBottomVInsertComponent, selector: "wf-bottom-v-insert", inputs: ["currentContext", "currentStep"], outputs: ["insertStep"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WfNodeComponent, isStandalone: true, selector: "wf-node", inputs: { branchId: "branchId", step: "step", index: "index", branchPriority: "branchPriority", stepGroup: "stepGroup", conditionalBranches: "conditionalBranches", isRootLevelStepGroup: "isRootLevelStepGroup", grandParentSteps: "grandParentSteps", isInFallbackBranch: "isInFallbackBranch" }, viewQueries: [{ propertyName: "branchHeader", first: true, predicate: ["branchHeader"], descendants: true }, { propertyName: "branchName", first: true, predicate: ["branchName"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "branchGroupRef", first: true, predicate: ["branchGroup"], descendants: true }, { propertyName: "topBridgeLineRef", first: true, predicate: ["topBridgeLine"], descendants: true }, { propertyName: "bottomBridgeLineRef", first: true, predicate: ["bottomBridgeLine"], descendants: true }, { propertyName: "branchColumnRefs", predicate: ["branchColumn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@switch (step.type) {\r\n\r\n    @case (enumType.ConditionalBranch) {\r\n      <div class=\"wf-branch-group-container\">\r\n        <div \r\n        class=\"branch-group\" \r\n        #branchGroup \r\n        bridgeLine\r\n        (bridgeLinesAdjusted)=\"adjustBridgeLines()\"\r\n        >\r\n          <!-- \uD83D\uDD39 Top Bridge Line -->\r\n          <div class=\"horizontal-bridge-line\" #topBridgeLine></div>\r\n\r\n          <div class=\"add-branch-inline\" [appTooltip]=\"'All conditional branches are checked from Left to Right in a strict order'\" [showAnyway]=\"true\">\r\n            <button class=\"add-branch-btn\" (click)=\"coreWorkflowService.addBranchToStep(step.id)\">\r\n                \uFF0B Add New Branch\r\n            </button>\r\n          </div>\r\n\r\n  \r\n          @for (branch of step.branches; track $index; let j = $index) {\r\n            <div class=\"branch-column\" #branchColumn>\r\n              <div class=\"branch-column-inner\">\r\n  \r\n                @for (bstep of branch.steps; track $index; let k = $index) {\r\n                  <wf-node\r\n                    [branchId]=\"branch.id\"\r\n                    [branchPriority]=\"branch.priority\"\r\n                    [step]=\"bstep\"\r\n                    [conditionalBranches]=\"step.branches || []\"\r\n                    [stepGroup]=\"branch.steps\"\r\n                    [grandParentSteps]=\"stepGroup\"\r\n                    [index]=\"k\"\r\n                    [isInFallbackBranch]=\"!!branch.isFallback\"\r\n                  ></wf-node>\r\n                }\r\n  \r\n              </div>\r\n  \r\n              <div class=\"vertical-bridge-line\"></div>\r\n            </div>\r\n          }\r\n  \r\n          <!-- \uD83D\uDD39 Bottom Bridge Line -->\r\n          <div class=\"horizontal-bridge-line\" #bottomBridgeLine></div>\r\n        </div>\r\n      </div>\r\n    }\r\n  \r\n    @case (enumType.BranchCard) {\r\n      <div class=\"wf-step-container wf-branch-card-container workflow-box\">\r\n        <div class=\"step-wrapper branch-card-wrapper\" [class.fallback]=\"!!isInFallbackBranch\">\r\n          <div class=\"arrow-down-container\">\r\n            <div class=\"arrow-down\"></div>\r\n          </div>\r\n  \r\n          <div class=\"step-header branch-header\" [class.edit-mode]=\"stepNameEditMode\" #branchHeader>\r\n            @if (stepNameEditMode) {\r\n              <div class=\"input-wrapper\">\r\n                <input class=\"form-control\" \r\n                  (blur)=\"onInputBlur()\" \r\n                  [(ngModel)]=\"step.name\"\r\n                  (ngModelChange)=\"onStepNameChanged($event)\" \r\n                  #input>\r\n              </div>\r\n            } @else {\r\n              <div class=\"step-name-wrapper branch-name-wrapper\">\r\n                <div\r\n                  class=\"step-name branch-name\"\r\n                  [class.pointer]=\"!isInFallbackBranch\"\r\n                  (click)=\"switchToNameEditMode()\"\r\n                  #branchName>\r\n                  {{ step.name }}\r\n                </div>\r\n  \r\n                @if (!!isInFallbackBranch) {\r\n                  <i class=\"ti-info-alt\"\r\n                     [appTooltip]=\"'This branch is created by default and will only be activated if none of the other branches can be executed.'\"\r\n                     [showAnyway]=\"true\" [position]=\"'above'\"></i>\r\n                }\r\n              </div>\r\n  \r\n              <div class=\"branch-priority\">Priority {{ branchPriority }}</div>\r\n              <div class=\"step-delete branch-delete pointer\" (click)=\"onDeleteBranch(branchId)\">\r\n                <i class=\"feather-x\"></i>\r\n              </div>\r\n            }\r\n          </div>\r\n  \r\n          <div class=\"step-set-config branch-set-condition\" [class.pointer]=\"!isInFallbackBranch\">\r\n            @if (!!isInFallbackBranch) {\r\n              <div class=\"branch-subtext fallback\"\r\n                   [appTooltip]=\"'If other branches are not met, the alternative branch will be executed'\"\r\n                   [showAnyway]=\"true\" [position]=\"'above'\">\r\n                If other branches are not met, the alternative branch will be executed\r\n              </div>\r\n            } @else {\r\n              <div class=\"step-subtext branch-subtext\" (click)=\"openConditionEditor()\">Set conditions</div>\r\n              <div><i class=\"feather-chevron-right\"></i></div>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n    <!-- The handler node applies to the situation where no approval is required, but a member needs to process something:\r\n\uD83D\uDCB0 Financial payment,\r\n\uD83D\uDCCE Stamping,\r\n\uD83D\uDDC2 Document filing, and so on. -->\r\n  \r\n    @default() {\r\n      <div class=\"wf-step-container workflow-box {{ step.type.toLowerCase() }}\">\r\n\r\n          <div class=\"step-wrapper\">\r\n    \r\n            <div class=\"step-header\" [class.edit-mode]=\"stepNameEditMode\">\r\n              @if (stepNameEditMode) {\r\n                <div class=\"input-wrapper\">\r\n                  <input class=\"form-control\" \r\n                    (blur)=\"onInputBlur()\" \r\n                    [(ngModel)]=\"step.name\" \r\n                    (ngModelChange)=\"onStepNameChanged($event)\"                     \r\n                    #input>\r\n                </div>\r\n              } @else {\r\n                <div class=\"step-name-wrapper\">\r\n                  <div\r\n                    class=\"step-name pointer\"\r\n                    (click)=\"switchToNameEditMode()\"\r\n                    #stepName>\r\n                    {{ step.name }}\r\n                  </div>\r\n                  @if (step.type === enumType.Handle) {\r\n                    <i class=\"ti-info-alt pointer\"\r\n                      [appTooltip]=\"'The handler node applies to the situation where no approval is required, but a member needs to process something (Financial payment, Stamping, Document filing, and so on.)'\"\r\n                      [showAnyway]=\"true\" [position]=\"'above'\"></i>\r\n                  }\r\n                </div>\r\n    \r\n                <div class=\"step-delete pointer\" (click)=\"onDeleteStep()\" [class.d-none]=\"step.type === enumType.Submit || step.type === enumType.End\">\r\n                  <i class=\"feather-x\" ></i>\r\n                </div>\r\n              }\r\n            </div>\r\n    \r\n            <div class=\"step-set-config pointer\" (click)=\"openNoneBranchRelatedEditor()\">\r\n              <div class=\"step-subtext pointer\" [class.configurated]=\"!!step.config\" [appTooltip]=\"step | wfNodeLabel\">{{ step | wfNodeLabel }}</div>\r\n              <div><i class=\"feather-chevron-right\"></i></div>\r\n            </div>\r\n          </div>\r\n      </div>\r\n    }\r\n}\r\n  \r\n@if (step.type !== enumType.End) {\r\n    <wf-bottom-v-insert\r\n        [currentContext]=\"{ branchId: step.branchId, index: index + 1 }\"\r\n        [currentStep]=\"step\"\r\n    ></wf-bottom-v-insert>\r\n}\r\n  ", styles: [".wf-workflow-canvas-container{--standard-connector-height: 90px;--print-area-scale: 1;padding-top:50px;padding-bottom:50px;background-color:#f2f3f5;position:relative;overflow:auto}.wf-workflow-canvas-container .zoom-tools{display:block;position:absolute;left:15px;z-index:1}.wf-workflow-canvas-container .zoom-tools .tools-wrapper{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background-color:#f9fafb;box-shadow:0 1px 3px #0000001a}.wf-workflow-canvas-container .zoom-tools .tools-wrapper>*{cursor:pointer}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-btn{background:none;border:none;padding:6px;cursor:pointer;transition:background-color .2s}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-btn:hover{background-color:#e5e7eb}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-label{background:none;border:none;padding:6px 8px;cursor:default}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .universe-icon{font-size:16px;display:inline-flex;align-items:center;justify-content:center}.wf-workflow-canvas-container .scroll-container{display:block;width:var(--width);height:var(--height);overflow-x:auto}.wf-workflow-canvas-container .canvas{display:flex;flex-direction:column;align-items:center;position:relative}.wf-workflow-canvas-container .canvas.is-dragging *{-webkit-user-select:none;user-select:none}.wf-workflow-canvas-container .print-area{transform:scale(var(--print-area-scale));transition:.2s linear}.wf-workflow-canvas-container .step{text-align:center;position:relative}.wf-workflow-canvas-container .canvas-top-tool{position:absolute;display:block;top:15px;left:15px;box-shadow:0 0 4px #0000000d}.wf-workflow-canvas-container .canvas-top-tool button{border-radius:0;height:30px;font-size:13px}.workflow-box{width:220px;min-height:85px;max-height:100px;padding:0 4px 4px;box-shadow:0 0 4px #0000000d}.workflow-box.submit,.workflow-box.end{background-color:#a9b4cd}.workflow-box.approval{background-color:#f80}.workflow-box.cc{background-color:#3370ff}.workflow-box.handle{background-color:#935af6}.connector{font-size:24px;color:#888}.plus-btn{font-size:18px;background:#fff;border:1px solid #ccc;border-radius:9999px;width:28px;height:28px;cursor:pointer}.insert-menu{background:#fff;border:1px solid #ddd;border-radius:6px;padding:8px;margin-top:6px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;gap:6px;z-index:10}.insert-menu div{cursor:pointer;font-size:14px;padding:2px 6px}.insert-menu .cancel{color:red}.branch-column{position:relative}.branch-column .branch-column-inner{width:100%;display:flex;flex-direction:column;align-items:center}.wf-branch-group-container,.wf-branch-group-container .branch-group{position:relative}.wf-branch-group-container .branch-group .branch-column{display:table-cell;min-width:220px;vertical-align:top;padding:0 12px}.wf-branch-group-container .branch-group .branch-column .vertical-bridge-line{position:absolute;width:2px;background-color:#d9d9d9;z-index:2;pointer-events:none}.wf-branch-group-container .branch-group .horizontal-bridge-line{position:absolute;height:2px;background-color:#d9d9d9;pointer-events:none;z-index:1}.wf-branch-group-container:after{content:\"\";display:block;position:absolute;height:2px;width:calc(100% - 244px);left:122px;bottom:102px}.branch-title{font-weight:700;font-size:14px;margin-bottom:8px}.branch-group-header{display:flex;justify-content:center;margin:12px 0}.add-branch-btn{position:absolute;top:0;width:175px;left:calc(50% - 87.5px);z-index:2;background:#fff;color:#0f172a;border:1px solid #ccc;padding:4px 12px;border-radius:9999px;font-weight:500;cursor:pointer;box-shadow:0 2px 4px #0000000f;text-wrap:nowrap}.workflow-box.submit{background-color:#e0f7fa;border-left:4px solid #00bcd4}.workflow-box.end{background-color:#ede7f6;border-left:4px solid #673ab7}.box.special{font-style:italic;opacity:.9}.bottom-v-container{min-height:65px;width:220px}.wf-bottom-v-insert-container{position:relative;display:flex;flex-direction:column;align-items:center;height:var(--standard-connector-height);width:100%;margin:0}.wf-bottom-v-insert-container .vertical-line{position:absolute;top:0;height:100%;width:2px;background-color:#d9d9d9;z-index:0}.wf-bottom-v-insert-container .plus-container{display:block;position:absolute;border-radius:50%;top:calc(var(--standard-connector-height) / 2 - 16px)}.wf-bottom-v-insert-container .plus-btn{width:32px;height:32px;border-radius:50%;border:none;background:#fff;color:#3b82f6;font-size:20px;box-shadow:.4rem 0 2rem #0000002e;cursor:pointer;display:flex;align-items:center;justify-content:center}.wf-bottom-v-insert-container .plus-btn:hover{background:#f0f8ff;box-shadow:0 0 0 4px #3b82f633}.wf-bottom-v-insert-container.shorter{height:calc(var(--standard-connector-height) - 15px)}.wf-bottom-v-insert-container.shorter .plus-container{display:block;position:absolute;top:calc((var(--standard-connector-height) - 18px) / 2 - 16px)}.wf-bottom-v-insert-container.insert-context .plus-container{outline:#2eb795 solid 2px}.add-branch-inline{position:relative;height:35px;margin-bottom:calc(var(--standard-connector-height) - 17.5px)}.arrow-down-container{display:block;position:absolute;z-index:1;bottom:0}.arrow-down-container .arrow-down{margin-top:5px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #d9d9d9}.branch-card-wrapper{position:relative}.branch-card-wrapper .arrow-down-container{top:-12px;left:calc(50% - 5px)}.wf-step-container .step-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:43px;font-size:12px;border-bottom:1px solid #f6f6f7}.wf-step-container .step-header .input-wrapper{padding-top:4px}.wf-step-container .step-header .step-name-wrapper{display:flex;align-items:center;justify-content:flex-start;padding-right:8px}.wf-step-container .step-header .step-name-wrapper .step-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:140px;padding-left:4px}.wf-step-container .step-header .step-name-wrapper i{margin-left:2px}.wf-step-container .step-header .step-delete{color:gray;display:none}.wf-step-container .step-header .step-delete i{font-size:24px}.wf-step-container .step-header:hover .step-name-wrapper:after{content:\"\\e95a\";font-family:feather}.wf-step-container .step-header:hover .branch-priority{display:none}.wf-step-container .step-header:hover .step-delete,.wf-step-container .step-header.edit-mode{display:block}.wf-step-container .step-set-config{display:flex;align-items:center;justify-content:space-between;min-height:38px;max-height:56px;padding:7px 4px;font-size:14px;background-color:#fff;color:gray}.wf-step-container .step-set-config .step-subtext{width:100%;text-align:left}.wf-step-container .step-set-config .step-subtext.configurated{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-line;word-break:break-word;line-height:1.5em;max-height:3em;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.wf-step-container.wf-branch-card-container{background-color:#fff}.wf-step-container.wf-branch-card-container .branch-header{color:#2eb795;border-bottom:1px solid #f6f6f7}.wf-step-container.wf-branch-card-container .branch-header:before{content:\"\";display:block;position:absolute;height:var(--standard-connector-height);width:2px;background-color:#d9d9d9;left:50%;top:calc(var(--standard-connector-height) * -1)}.wf-step-container.wf-branch-card-container .branch-set-condition{display:flex;align-items:center;justify-content:space-between;min-height:38px;max-height:56px;color:#3e4759;padding:7px 4px;font-size:14px}.wf-step-container.wf-branch-card-container .branch-set-condition .branch-subtext{width:100%;text-align:left}.wf-step-container.wf-branch-card-container .branch-set-condition .branch-subtext.fallback{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-line;word-break:break-word;line-height:1.5em;max-height:3em;overflow:hidden;cursor:default}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header,.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-set-condition{color:gray}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header .branch-priority{padding-right:4px}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-priority{display:block}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-delete{display:none}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-name-wrapper:after{content:\"\"}.steps-preview{position:fixed;width:390px;height:100vh;background-color:#fff;top:0;left:-390px;overflow-y:auto;transition:left .2s ease-out}.steps-preview.shown{left:0}\n", ""], dependencies: [{ kind: "component", type: WfNodeComponent, selector: "wf-node", inputs: ["branchId", "step", "index", "branchPriority", "stepGroup", "conditionalBranches", "isRootLevelStepGroup", "grandParentSteps", "isInFallbackBranch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: WfNodeLabelPipe, name: "wfNodeLabel" }, { kind: "directive", type: BridgeLineDirective, selector: "[bridgeLine]", outputs: ["bridgeLinesAdjusted"] }, { kind: "component", type: WfBottomVInsertComponent, selector: "wf-bottom-v-insert", inputs: ["currentContext", "currentStep"], outputs: ["insertStep"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfNodeComponent, decorators: [{
             type: Component,
@@ -2103,7 +2103,7 @@ class WfWorkflowCanvasComponent extends BaseComponent {
         this.subscriptions.forEach(x => x?.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfWorkflowCanvasComponent, deps: [{ token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WfWorkflowCanvasComponent, isStandalone: true, selector: "wf-workflow-canvas", viewQueries: [{ propertyName: "$container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "$printArea", first: true, predicate: ["printArea"], descendants: true, isSignal: true }, { propertyName: "$zoomTools", first: true, predicate: ["zoomTools"], descendants: true, isSignal: true }, { propertyName: "$parent", first: true, predicate: ["parent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wf-workflow-canvas-container\" #container [hotKeys]=\"hotKeys\"\r\n    (mousedown)=\"startDragging($event, false)\"\r\n    (mouseup)=\"stopDragging($event, false)\" \r\n    (mouseleave)=\"stopDragging($event, false)\" \r\n    (mousemove)=\"moveEvent($event)\"\r\n>\r\n\r\n  <div class=\"canvas-top-tool\">\r\n    <button type=\"button\" class=\"btn btn-secondary\"\r\n      [appTooltip]=\"'Press F3 to show, Escape to hide'\"\r\n      [showAnyway]=\"true\"\r\n      (click)=\"showStepsJSON()\"\r\n    >Show JSON</button>\r\n  </div>  \r\n\r\n  <div class=\"zoom-tools\" #zoomTools>\r\n    <div class=\"tools-wrapper\">\r\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"zoonOut()\">\r\n        <span class=\"universe-icon\"><i class=\"feather-zoom-out\"></i></span>\r\n      </button>\r\n      <button type=\"button\" class=\"zoom-label\">\r\n        {{ $scalePercent() }}\r\n      </button>\r\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"zoonIn()\">\r\n        <span class=\"universe-icon\"><i class=\"feather-zoom-in\"></i></span>\r\n      </button>\r\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"zoonFeat()\">\r\n        <span class=\"universe-icon\"><i class=\"feather-zap\"></i></span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"scroll-container\" #parent [ngStyle]=\"{ cursor: $mouseDown() ? 'all-scroll' : 'unset', width: $width() ? $width() + 'px' : '100%', height: $height() ? $height() + 'px' : 'unset'}\">\r\n\r\n    <div class=\"canvas print-area\" #printArea [class.is-dragging]=\"$isDragging()\">\r\n\r\n      @for (step of wfs.$currentSteps(); track $index; let i = $index) {\r\n        <div class=\"step\">\r\n          <wf-node\r\n            [branchId]=\"'root'\"\r\n            [branchPriority]=\"1\"\r\n            [step]=\"step\"\r\n            [stepGroup]=\"wfs.$currentSteps()\"\r\n            [index]=\"i\"\r\n            [isRootLevelStepGroup]=\"true\"\r\n          ></wf-node>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!!(wfs.insertContext$ | async)) {\r\n    <wf-insert-menu (insert)=\"insertStep($event)\"></wf-insert-menu>\r\n  }\r\n\r\n  <wf-step-config-shell></wf-step-config-shell>\r\n\r\n  <div class=\"steps-preview\" [class.shown]=\"wfs.$showCurrentStepsPreview()\"\r\n    [ngStyle]=\"{\r\n      zIndex: $previewZIndex()\r\n    }\"\r\n  >\r\n    <wf-steps-preview></wf-steps-preview>\r\n  </div>\r\n  \r\n\r\n</div>", styles: [".wf-workflow-canvas-container{--standard-connector-height: 90px;--print-area-scale: 1;padding-top:50px;padding-bottom:50px;background-color:#f2f3f5;position:relative;overflow:auto}.wf-workflow-canvas-container .zoom-tools{display:block;position:absolute;left:15px;z-index:1}.wf-workflow-canvas-container .zoom-tools .tools-wrapper{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background-color:#f9fafb;box-shadow:0 1px 3px #0000001a}.wf-workflow-canvas-container .zoom-tools .tools-wrapper>*{cursor:pointer}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-btn{background:none;border:none;padding:6px;cursor:pointer;transition:background-color .2s}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-btn:hover{background-color:#e5e7eb}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-label{background:none;border:none;padding:6px 8px;cursor:default}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .universe-icon{font-size:16px;display:inline-flex;align-items:center;justify-content:center}.wf-workflow-canvas-container .scroll-container{display:block;width:var(--width);height:var(--height);overflow-x:auto}.wf-workflow-canvas-container .canvas{display:flex;flex-direction:column;align-items:center;position:relative}.wf-workflow-canvas-container .canvas.is-dragging *{-webkit-user-select:none;user-select:none}.wf-workflow-canvas-container .print-area{transform:scale(var(--print-area-scale));transition:.2s linear}.wf-workflow-canvas-container .step{text-align:center;position:relative}.wf-workflow-canvas-container .canvas-top-tool{position:absolute;display:block;top:15px;left:15px;box-shadow:0 0 4px #0000000d}.wf-workflow-canvas-container .canvas-top-tool button{border-radius:0;height:30px;font-size:13px}.workflow-box{width:220px;min-height:85px;max-height:100px;padding:0 4px 4px;box-shadow:0 0 4px #0000000d}.workflow-box.submit,.workflow-box.end{background-color:#a9b4cd}.workflow-box.approval{background-color:#f80}.workflow-box.cc{background-color:#3370ff}.workflow-box.handle{background-color:#935af6}.connector{font-size:24px;color:#888}.plus-btn{font-size:18px;background:#fff;border:1px solid #ccc;border-radius:9999px;width:28px;height:28px;cursor:pointer}.insert-menu{background:#fff;border:1px solid #ddd;border-radius:6px;padding:8px;margin-top:6px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;gap:6px;z-index:10}.insert-menu div{cursor:pointer;font-size:14px;padding:2px 6px}.insert-menu .cancel{color:red}.branch-column{position:relative}.branch-column .branch-column-inner{width:100%;display:flex;flex-direction:column;align-items:center}.wf-branch-group-container,.wf-branch-group-container .branch-group{position:relative}.wf-branch-group-container .branch-group .branch-column{display:table-cell;min-width:220px;vertical-align:top;padding:0 12px}.wf-branch-group-container .branch-group .branch-column .vertical-bridge-line{position:absolute;width:2px;background-color:#d9d9d9;z-index:2;pointer-events:none}.wf-branch-group-container .branch-group .horizontal-bridge-line{position:absolute;height:2px;background-color:#d9d9d9;pointer-events:none;z-index:1}.wf-branch-group-container:after{content:\"\";display:block;position:absolute;height:2px;width:calc(100% - 244px);left:122px;bottom:102px}.branch-title{font-weight:700;font-size:14px;margin-bottom:8px}.branch-group-header{display:flex;justify-content:center;margin:12px 0}.add-branch-btn{position:absolute;top:0;width:175px;left:calc(50% - 87.5px);z-index:2;background:#fff;color:#0f172a;border:1px solid #ccc;padding:4px 12px;border-radius:9999px;font-weight:500;cursor:pointer;box-shadow:0 2px 4px #0000000f;text-wrap:nowrap}.workflow-box.submit{background-color:#e0f7fa;border-left:4px solid #00bcd4}.workflow-box.end{background-color:#ede7f6;border-left:4px solid #673ab7}.box.special{font-style:italic;opacity:.9}.bottom-v-container{min-height:65px;width:220px}.wf-bottom-v-insert-container{position:relative;display:flex;flex-direction:column;align-items:center;height:var(--standard-connector-height);width:100%;margin:0}.wf-bottom-v-insert-container .vertical-line{position:absolute;top:0;height:100%;width:2px;background-color:#d9d9d9;z-index:0}.wf-bottom-v-insert-container .plus-container{display:block;position:absolute;border-radius:50%;top:calc(var(--standard-connector-height) / 2 - 16px)}.wf-bottom-v-insert-container .plus-btn{width:32px;height:32px;border-radius:50%;border:none;background:#fff;color:#3b82f6;font-size:20px;box-shadow:.4rem 0 2rem #0000002e;cursor:pointer;display:flex;align-items:center;justify-content:center}.wf-bottom-v-insert-container .plus-btn:hover{background:#f0f8ff;box-shadow:0 0 0 4px #3b82f633}.wf-bottom-v-insert-container.shorter{height:calc(var(--standard-connector-height) - 15px)}.wf-bottom-v-insert-container.shorter .plus-container{display:block;position:absolute;top:calc((var(--standard-connector-height) - 18px) / 2 - 16px)}.wf-bottom-v-insert-container.insert-context .plus-container{outline:#2eb795 solid 2px}.add-branch-inline{position:relative;height:35px;margin-bottom:calc(var(--standard-connector-height) - 17.5px)}.arrow-down-container{display:block;position:absolute;z-index:1;bottom:0}.arrow-down-container .arrow-down{margin-top:5px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #d9d9d9}.branch-card-wrapper{position:relative}.branch-card-wrapper .arrow-down-container{top:-12px;left:calc(50% - 5px)}.wf-step-container .step-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:43px;font-size:12px;border-bottom:1px solid #f6f6f7}.wf-step-container .step-header .input-wrapper{padding-top:4px}.wf-step-container .step-header .step-name-wrapper{display:flex;align-items:center;justify-content:flex-start;padding-right:8px}.wf-step-container .step-header .step-name-wrapper .step-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:140px;padding-left:4px}.wf-step-container .step-header .step-name-wrapper i{margin-left:2px}.wf-step-container .step-header .step-delete{color:gray;display:none}.wf-step-container .step-header .step-delete i{font-size:24px}.wf-step-container .step-header:hover .step-name-wrapper:after{content:\"\\e95a\";font-family:feather}.wf-step-container .step-header:hover .branch-priority{display:none}.wf-step-container .step-header:hover .step-delete,.wf-step-container .step-header.edit-mode{display:block}.wf-step-container .step-set-config{display:flex;align-items:center;justify-content:space-between;min-height:38px;max-height:56px;padding:7px 4px;font-size:14px;background-color:#fff;color:gray}.wf-step-container .step-set-config .step-subtext{width:100%;text-align:left}.wf-step-container .step-set-config .step-subtext.configurated{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-line;word-break:break-word;line-height:1.5em;max-height:3em;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.wf-step-container.wf-branch-card-container{background-color:#fff}.wf-step-container.wf-branch-card-container .branch-header{color:#2eb795;border-bottom:1px solid #f6f6f7}.wf-step-container.wf-branch-card-container .branch-header:before{content:\"\";display:block;position:absolute;height:var(--standard-connector-height);width:2px;background-color:#d9d9d9;left:50%;top:calc(var(--standard-connector-height) * -1)}.wf-step-container.wf-branch-card-container .branch-set-condition{display:flex;align-items:center;justify-content:space-between;min-height:38px;max-height:56px;color:#3e4759;padding:7px 4px;font-size:14px}.wf-step-container.wf-branch-card-container .branch-set-condition .branch-subtext{width:100%;text-align:left}.wf-step-container.wf-branch-card-container .branch-set-condition .branch-subtext.fallback{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-line;word-break:break-word;line-height:1.5em;max-height:3em;overflow:hidden;cursor:default}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header,.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-set-condition{color:gray}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header .branch-priority{padding-right:4px}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-priority{display:block}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-delete{display:none}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-name-wrapper:after{content:\"\"}.steps-preview{position:fixed;width:390px;height:100vh;background-color:#fff;top:0;left:-390px;overflow-y:auto;transition:left .2s ease-out}.steps-preview.shown{left:0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HotKeysDirective, selector: "[hotKeys]", inputs: ["hotKeys"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "component", type: WfInsertMenuComponent, selector: "wf-insert-menu", outputs: ["insert"] }, { kind: "component", type: WfStepConfigShellComponent, selector: "wf-step-config-shell" }, { kind: "component", type: WfNodeComponent, selector: "wf-node", inputs: ["branchId", "step", "index", "branchPriority", "stepGroup", "conditionalBranches", "isRootLevelStepGroup", "grandParentSteps", "isInFallbackBranch"] }, { kind: "component", type: WfStepsPreviewComponent, selector: "wf-steps-preview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WfWorkflowCanvasComponent, isStandalone: true, selector: "wf-workflow-canvas", viewQueries: [{ propertyName: "$container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "$printArea", first: true, predicate: ["printArea"], descendants: true, isSignal: true }, { propertyName: "$zoomTools", first: true, predicate: ["zoomTools"], descendants: true, isSignal: true }, { propertyName: "$parent", first: true, predicate: ["parent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wf-workflow-canvas-container\" #container [hotKeys]=\"hotKeys\"\r\n    (mousedown)=\"startDragging($event, false)\"\r\n    (mouseup)=\"stopDragging($event, false)\" \r\n    (mouseleave)=\"stopDragging($event, false)\" \r\n    (mousemove)=\"moveEvent($event)\"\r\n>\r\n\r\n  <div class=\"canvas-top-tool\">\r\n    <button type=\"button\" class=\"btn btn-secondary\"\r\n      [appTooltip]=\"'Press F3 to show, Escape to hide'\"\r\n      [showAnyway]=\"true\"\r\n      (click)=\"showStepsJSON()\"\r\n    >Show JSON</button>\r\n  </div>  \r\n\r\n  <div class=\"zoom-tools\" #zoomTools>\r\n    <div class=\"tools-wrapper\">\r\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"zoonOut()\">\r\n        <span class=\"universe-icon\"><i class=\"feather-zoom-out\"></i></span>\r\n      </button>\r\n      <button type=\"button\" class=\"zoom-label\">\r\n        {{ $scalePercent() }}\r\n      </button>\r\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"zoonIn()\">\r\n        <span class=\"universe-icon\"><i class=\"feather-zoom-in\"></i></span>\r\n      </button>\r\n      <button type=\"button\" class=\"zoom-btn\" (click)=\"zoonFeat()\">\r\n        <span class=\"universe-icon\"><i class=\"feather-zap\"></i></span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"scroll-container\" #parent [ngStyle]=\"{ cursor: $mouseDown() ? 'all-scroll' : 'unset', width: $width() ? $width() + 'px' : '100%', height: $height() ? $height() + 'px' : 'unset'}\">\r\n\r\n    <div class=\"canvas print-area\" #printArea [class.is-dragging]=\"$isDragging()\">\r\n\r\n      @for (step of wfs.$currentSteps(); track $index; let i = $index) {\r\n        <div class=\"step\">\r\n          <wf-node\r\n            [branchId]=\"'root'\"\r\n            [branchPriority]=\"1\"\r\n            [step]=\"step\"\r\n            [stepGroup]=\"wfs.$currentSteps()\"\r\n            [index]=\"i\"\r\n            [isRootLevelStepGroup]=\"true\"\r\n          ></wf-node>\r\n        </div>\r\n      }\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!!(wfs.insertContext$ | async)) {\r\n    <wf-insert-menu (insert)=\"insertStep($event)\"></wf-insert-menu>\r\n  }\r\n\r\n  <wf-step-config-shell></wf-step-config-shell>\r\n\r\n  <div class=\"steps-preview\" [class.shown]=\"wfs.$showCurrentStepsPreview()\"\r\n    [ngStyle]=\"{\r\n      zIndex: $previewZIndex()\r\n    }\"\r\n  >\r\n    <wf-steps-preview></wf-steps-preview>\r\n  </div>\r\n  \r\n\r\n</div>", styles: [".wf-workflow-canvas-container{--standard-connector-height: 90px;--print-area-scale: 1;padding-top:50px;padding-bottom:50px;background-color:#f2f3f5;position:relative;overflow:auto}.wf-workflow-canvas-container .zoom-tools{display:block;position:absolute;left:15px;z-index:1}.wf-workflow-canvas-container .zoom-tools .tools-wrapper{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background-color:#f9fafb;box-shadow:0 1px 3px #0000001a}.wf-workflow-canvas-container .zoom-tools .tools-wrapper>*{cursor:pointer}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-btn{background:none;border:none;padding:6px;cursor:pointer;transition:background-color .2s}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-btn:hover{background-color:#e5e7eb}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .zoom-label{background:none;border:none;padding:6px 8px;cursor:default}.wf-workflow-canvas-container .zoom-tools .tools-wrapper .universe-icon{font-size:16px;display:inline-flex;align-items:center;justify-content:center}.wf-workflow-canvas-container .scroll-container{display:block;width:var(--width);height:var(--height);overflow-x:auto}.wf-workflow-canvas-container .canvas{display:flex;flex-direction:column;align-items:center;position:relative}.wf-workflow-canvas-container .canvas.is-dragging *{-webkit-user-select:none;user-select:none}.wf-workflow-canvas-container .print-area{transform:scale(var(--print-area-scale));transition:.2s linear}.wf-workflow-canvas-container .step{text-align:center;position:relative}.wf-workflow-canvas-container .canvas-top-tool{position:absolute;display:block;top:15px;left:15px;box-shadow:0 0 4px #0000000d}.wf-workflow-canvas-container .canvas-top-tool button{border-radius:0;height:30px;font-size:13px}.workflow-box{width:220px;min-height:85px;max-height:100px;padding:0 4px 4px;box-shadow:0 0 4px #0000000d}.workflow-box.submit,.workflow-box.end{background-color:#a9b4cd}.workflow-box.approval{background-color:#f80}.workflow-box.cc{background-color:#3370ff}.workflow-box.handle{background-color:#935af6}.connector{font-size:24px;color:#888}.plus-btn{font-size:18px;background:#fff;border:1px solid #ccc;border-radius:9999px;width:28px;height:28px;cursor:pointer}.insert-menu{background:#fff;border:1px solid #ddd;border-radius:6px;padding:8px;margin-top:6px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;gap:6px;z-index:10}.insert-menu div{cursor:pointer;font-size:14px;padding:2px 6px}.insert-menu .cancel{color:red}.branch-column{position:relative}.branch-column .branch-column-inner{width:100%;display:flex;flex-direction:column;align-items:center}.wf-branch-group-container,.wf-branch-group-container .branch-group{position:relative}.wf-branch-group-container .branch-group .branch-column{display:table-cell;min-width:220px;vertical-align:top;padding:0 12px}.wf-branch-group-container .branch-group .branch-column .vertical-bridge-line{position:absolute;width:2px;background-color:#d9d9d9;z-index:2;pointer-events:none}.wf-branch-group-container .branch-group .horizontal-bridge-line{position:absolute;height:2px;background-color:#d9d9d9;pointer-events:none;z-index:1}.wf-branch-group-container:after{content:\"\";display:block;position:absolute;height:2px;width:calc(100% - 244px);left:122px;bottom:102px}.branch-title{font-weight:700;font-size:14px;margin-bottom:8px}.branch-group-header{display:flex;justify-content:center;margin:12px 0}.add-branch-btn{position:absolute;top:0;width:175px;left:calc(50% - 87.5px);z-index:2;background:#fff;color:#0f172a;border:1px solid #ccc;padding:4px 12px;border-radius:9999px;font-weight:500;cursor:pointer;box-shadow:0 2px 4px #0000000f;text-wrap:nowrap}.workflow-box.submit{background-color:#e0f7fa;border-left:4px solid #00bcd4}.workflow-box.end{background-color:#ede7f6;border-left:4px solid #673ab7}.box.special{font-style:italic;opacity:.9}.bottom-v-container{min-height:65px;width:220px}.wf-bottom-v-insert-container{position:relative;display:flex;flex-direction:column;align-items:center;height:var(--standard-connector-height);width:100%;margin:0}.wf-bottom-v-insert-container .vertical-line{position:absolute;top:0;height:100%;width:2px;background-color:#d9d9d9;z-index:0}.wf-bottom-v-insert-container .plus-container{display:block;position:absolute;border-radius:50%;top:calc(var(--standard-connector-height) / 2 - 16px)}.wf-bottom-v-insert-container .plus-btn{width:32px;height:32px;border-radius:50%;border:none;background:#fff;color:#3b82f6;font-size:20px;box-shadow:.4rem 0 2rem #0000002e;cursor:pointer;display:flex;align-items:center;justify-content:center}.wf-bottom-v-insert-container .plus-btn:hover{background:#f0f8ff;box-shadow:0 0 0 4px #3b82f633}.wf-bottom-v-insert-container.shorter{height:calc(var(--standard-connector-height) - 15px)}.wf-bottom-v-insert-container.shorter .plus-container{display:block;position:absolute;top:calc((var(--standard-connector-height) - 18px) / 2 - 16px)}.wf-bottom-v-insert-container.insert-context .plus-container{outline:#2eb795 solid 2px}.add-branch-inline{position:relative;height:35px;margin-bottom:calc(var(--standard-connector-height) - 17.5px)}.arrow-down-container{display:block;position:absolute;z-index:1;bottom:0}.arrow-down-container .arrow-down{margin-top:5px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #d9d9d9}.branch-card-wrapper{position:relative}.branch-card-wrapper .arrow-down-container{top:-12px;left:calc(50% - 5px)}.wf-step-container .step-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:43px;font-size:12px;border-bottom:1px solid #f6f6f7}.wf-step-container .step-header .input-wrapper{padding-top:4px}.wf-step-container .step-header .step-name-wrapper{display:flex;align-items:center;justify-content:flex-start;padding-right:8px}.wf-step-container .step-header .step-name-wrapper .step-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:140px;padding-left:4px}.wf-step-container .step-header .step-name-wrapper i{margin-left:2px}.wf-step-container .step-header .step-delete{color:gray;display:none}.wf-step-container .step-header .step-delete i{font-size:24px}.wf-step-container .step-header:hover .step-name-wrapper:after{content:\"\\e95a\";font-family:feather}.wf-step-container .step-header:hover .branch-priority{display:none}.wf-step-container .step-header:hover .step-delete,.wf-step-container .step-header.edit-mode{display:block}.wf-step-container .step-set-config{display:flex;align-items:center;justify-content:space-between;min-height:38px;max-height:56px;padding:7px 4px;font-size:14px;background-color:#fff;color:gray}.wf-step-container .step-set-config .step-subtext{width:100%;text-align:left}.wf-step-container .step-set-config .step-subtext.configurated{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-line;word-break:break-word;line-height:1.5em;max-height:3em;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}.wf-step-container.wf-branch-card-container{background-color:#fff}.wf-step-container.wf-branch-card-container .branch-header{color:#2eb795;border-bottom:1px solid #f6f6f7}.wf-step-container.wf-branch-card-container .branch-header:before{content:\"\";display:block;position:absolute;height:var(--standard-connector-height);width:2px;background-color:#d9d9d9;left:50%;top:calc(var(--standard-connector-height) * -1)}.wf-step-container.wf-branch-card-container .branch-set-condition{display:flex;align-items:center;justify-content:space-between;min-height:38px;max-height:56px;color:#3e4759;padding:7px 4px;font-size:14px}.wf-step-container.wf-branch-card-container .branch-set-condition .branch-subtext{width:100%;text-align:left}.wf-step-container.wf-branch-card-container .branch-set-condition .branch-subtext.fallback{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-line;word-break:break-word;line-height:1.5em;max-height:3em;overflow:hidden;cursor:default}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header,.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-set-condition{color:gray}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header .branch-priority{padding-right:4px}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-priority{display:block}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-delete{display:none}.wf-step-container.wf-branch-card-container .branch-card-wrapper.fallback .branch-header:hover .branch-name-wrapper:after{content:\"\"}.steps-preview{position:fixed;width:390px;height:100vh;background-color:#fff;top:0;left:-390px;overflow-y:auto;transition:left .2s ease-out}.steps-preview.shown{left:0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HotKeysDirective, selector: "[hotKeys]", inputs: ["hotKeys"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }, { kind: "component", type: WfInsertMenuComponent, selector: "wf-insert-menu", outputs: ["insert"] }, { kind: "component", type: WfStepConfigShellComponent, selector: "wf-step-config-shell" }, { kind: "component", type: WfNodeComponent, selector: "wf-node", inputs: ["branchId", "step", "index", "branchPriority", "stepGroup", "conditionalBranches", "isRootLevelStepGroup", "grandParentSteps", "isInFallbackBranch"] }, { kind: "component", type: WfStepsPreviewComponent, selector: "wf-steps-preview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfWorkflowCanvasComponent, decorators: [{
             type: Component,
@@ -2285,4 +2285,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
         }], ctorParameters: () => [] });
 
 export { DesignWrapperComponent };
-//# sourceMappingURL=ngx-histaff-alpha-design-wrapper.component-Dujs4qzo.mjs.map
+//# sourceMappingURL=ngx-histaff-alpha-design-wrapper.component-IOymN2uo.mjs.map