ngx-histaff-alpha 5.2.2 → 5.2.3

package/fesm2022/ngx-histaff-alpha-wf-process-design.component-CQxxRCqC.mjs

@@ -0,0 +1,1439 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, ElementRef, ViewChild, Output, Component, Renderer2, Input, input, ChangeDetectionStrategy, output, signal, computed, effect, ChangeDetectorRef, viewChild, Injectable, Directive, ViewChildren } from '@angular/core';
+import { f as BaseComponent, w as CoreWorkflowService, H as EnumWorkflowStepType, M as MultiLanguageService, I as DomService, i as CoreDropdownComponent, p as CoreChecklistComponent, s as CoreDatePickerComponent, q as CoreFormControlSeekerComponent, v as CoreCurrencyInputComponent, j as TooltipDirective, m as TableCellPipe, T as TranslatePipe, a as EnumFormBaseContolType, l as EnumCoreFormControlSeekerSourceType, J as CoreParamControlComponent, t as CoreRadioGroupComponent, K as ApplicationHelpService, L as HotKeysDirective, b as EnumCoreButtonVNSCode, N as INITIAL_PROCESS_DEFINITION, c as CorePageHeaderComponent, F as FullscreenModalLoaderComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-B6dYCMll.mjs';
+import { AsyncPipe, NgTemplateOutlet, LowerCasePipe, NgStyle } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, FormGroup, FormControl, FormArray, FormsModule } from '@angular/forms';
+import { BehaviorSubject, distinctUntilChanged } from 'rxjs';
+import * as i1$1 from '@angular/router';
+
+class WfInsertMenuComponent extends BaseComponent {
+    constructor(mls, renderer, domService) {
+        super(mls);
+        this.mls = mls;
+        this.renderer = renderer;
+        this.domService = domService;
+        this.insert = new EventEmitter();
+        this.coreWorkflowService = inject(CoreWorkflowService);
+        this.elRef = inject(ElementRef);
+        this.enumType = EnumWorkflowStepType;
+    }
+    onInsert(type) {
+        this.insert.emit({
+            type,
+            index: this.coreWorkflowService.insertContext$.value.index,
+            branchId: this.coreWorkflowService.insertContext$.value.branchId ?? 'root'
+        });
+        this.coreWorkflowService.insertContext$.next(null);
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.listenerFn = this.renderer.listen('window', 'click', (e) => {
+                e.stopPropagation();
+                if (this.container && !!!this.container.nativeElement.contains(e.target)) {
+                    this.coreWorkflowService.insertContext$.next(null);
+                }
+            });
+            const rect = this.coreWorkflowService.insertAnchorPoint$.value;
+            const menuEl = this.elRef.nativeElement;
+            if (!rect)
+                return;
+            const menuHeight = menuEl.offsetHeight;
+            const zIndex = this.domService.getMaxZIndex() + 1;
+            menuEl.style.position = 'fixed';
+            menuEl.style.left = `${rect.right + 8}px`;
+            menuEl.style.top = `${rect.top}px`;
+            menuEl.style.zIndex = `${zIndex}`;
+        });
+    }
+    onCancelClicked() {
+        this.coreWorkflowService.insertContext$.next(null);
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(x => x?.unsubscribe());
+        if (this.listenerFn)
+            this.listenerFn();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfInsertMenuComponent, deps: [{ token: MultiLanguageService }, { token: i0.Renderer2 }, { token: DomService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WfInsertMenuComponent, isStandalone: true, selector: "wf-insert-menu", outputs: { insert: "insert" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wf-insert-menu-container\" #container>\r\n\r\n    <div class=\"menu-item\" (click)=\"onInsert(enumType.Approval)\">\r\n        <div class=\"menu-item-icon-wrapper\">\r\n            <div class=\"menu-item-icon\">\uD83D\uDFE7</div>\r\n        </div>\r\n        <div class=\"menu-item-text\">\r\n            <div>Approver</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu-item\" (click)=\"onInsert(enumType.CC)\">\r\n        <div class=\"menu-item-icon-wrapper\">\r\n            <div class=\"menu-item-icon\">\uD83D\uDFE6</div>\r\n        </div>\r\n        <div class=\"menu-item-text\">\r\n            <div>CC</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu-item\" (click)=\"onInsert(enumType.Handle)\">\r\n        <div class=\"menu-item-icon-wrapper\">\r\n            <div class=\"menu-item-icon\">\uD83D\uDFEA</div>\r\n        </div>\r\n        <div class=\"menu-item-text\">\r\n            <div>Handler</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu-item\" (click)=\"onInsert(enumType.ConditionalBranch)\">\r\n        <div class=\"menu-item-icon-wrapper\">\r\n            <div class=\"menu-item-icon\">\uD83C\uDF3F</div>\r\n        </div>\r\n        <div class=\"menu-item-text\">\r\n            <div>Conditional Branch</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu-item\" (click)=\"onCancelClicked()\">\r\n        <div class=\"menu-item-icon-wrapper\">\r\n            <div class=\"menu-item-icon\">\u274C</div>\r\n        </div>\r\n        <div class=\"menu-item-text\">\r\n            <div>Cancel</div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".wf-insert-menu-container{width:220px;display:block;position:fixed;z-index:99;background:beige;padding:8px;box-shadow:.4rem 0 2rem #0000002e}.wf-insert-menu-container .menu-item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer}.wf-insert-menu-container .menu-item .menu-item-icon-wrapper{width:24px;height:24px;display:flex}.wf-insert-menu-container .menu-item .menu-item-text{display:flex;align-items:center}.wf-insert-menu-container .insert-menu div{padding:6px 12px;cursor:pointer}.wf-insert-menu-container .insert-menu div:hover{background-color:#f3f4f6}.wf-insert-menu-container .cancel{color:red}.wf-insert-menu-overlay{position:absolute;top:0;left:0;z-index:99;pointer-events:none}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfInsertMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-insert-menu', imports: [], template: "<div class=\"wf-insert-menu-container\" #container>\r\n\r\n    <div class=\"menu-item\" (click)=\"onInsert(enumType.Approval)\">\r\n        <div class=\"menu-item-icon-wrapper\">\r\n            <div class=\"menu-item-icon\">\uD83D\uDFE7</div>\r\n        </div>\r\n        <div class=\"menu-item-text\">\r\n            <div>Approver</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu-item\" (click)=\"onInsert(enumType.CC)\">\r\n        <div class=\"menu-item-icon-wrapper\">\r\n            <div class=\"menu-item-icon\">\uD83D\uDFE6</div>\r\n        </div>\r\n        <div class=\"menu-item-text\">\r\n            <div>CC</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu-item\" (click)=\"onInsert(enumType.Handle)\">\r\n        <div class=\"menu-item-icon-wrapper\">\r\n            <div class=\"menu-item-icon\">\uD83D\uDFEA</div>\r\n        </div>\r\n        <div class=\"menu-item-text\">\r\n            <div>Handler</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu-item\" (click)=\"onInsert(enumType.ConditionalBranch)\">\r\n        <div class=\"menu-item-icon-wrapper\">\r\n            <div class=\"menu-item-icon\">\uD83C\uDF3F</div>\r\n        </div>\r\n        <div class=\"menu-item-text\">\r\n            <div>Conditional Branch</div>\r\n        </div>\r\n    </div>\r\n    <div class=\"menu-item\" (click)=\"onCancelClicked()\">\r\n        <div class=\"menu-item-icon-wrapper\">\r\n            <div class=\"menu-item-icon\">\u274C</div>\r\n        </div>\r\n        <div class=\"menu-item-text\">\r\n            <div>Cancel</div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".wf-insert-menu-container{width:220px;display:block;position:fixed;z-index:99;background:beige;padding:8px;box-shadow:.4rem 0 2rem #0000002e}.wf-insert-menu-container .menu-item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer}.wf-insert-menu-container .menu-item .menu-item-icon-wrapper{width:24px;height:24px;display:flex}.wf-insert-menu-container .menu-item .menu-item-text{display:flex;align-items:center}.wf-insert-menu-container .insert-menu div{padding:6px 12px;cursor:pointer}.wf-insert-menu-container .insert-menu div:hover{background-color:#f3f4f6}.wf-insert-menu-container .cancel{color:red}.wf-insert-menu-overlay{position:absolute;top:0;left:0;z-index:99;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: i0.Renderer2 }, { type: DomService }], propDecorators: { insert: [{
+                type: Output
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }] } });
+
+class WfBottomVInsertComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.insertStep = new EventEmitter();
+        this.shouldShowInsert = false;
+        this.coreWorkflowService = inject(CoreWorkflowService);
+        this.el = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.observer = null;
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
+        this.subscriptions.push(this.coreWorkflowService.insertContext$
+            .subscribe(ctx => {
+            this.shouldShowInsert = !!ctx &&
+                ctx.branchId === this.currentContext.branchId &&
+                ctx.index === this.currentContext.index;
+        }));
+    }
+    onShowInsert(e) {
+        const insertContext = {
+            branchId: this.currentContext.branchId,
+            index: this.currentContext.index
+        };
+        const triggerEl = e.currentTarget;
+        const rect = triggerEl.getBoundingClientRect();
+        this.coreWorkflowService.insertContext$.next(insertContext);
+        this.coreWorkflowService.insertAnchorPoint$.next(rect);
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+        });
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(x => x?.unsubscribe());
+        this.observer?.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfBottomVInsertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WfBottomVInsertComponent, isStandalone: true, selector: "wf-bottom-v-insert", inputs: { currentContext: "currentContext", currentStep: "currentStep" }, outputs: { insertStep: "insertStep" }, viewQueries: [{ propertyName: "plusContainer", first: true, predicate: ["plusContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wf-bottom-v-insert-container\" \r\n    [class.shorter]=\"(!!currentStep.isPseudo && !!currentStep.isInFallbackBranch!) || !!currentStep.config\"\r\n    [class.insert-context]=\"(coreWorkflowService.insertContext$ | async)?.branchId === currentContext.branchId && (coreWorkflowService.insertContext$ | async)?.index === currentContext.index\"\r\n>\r\n    <div class=\"vertical-line\"></div>\r\n\r\n    <div class=\"plus-container\" #plusContainer>\r\n        <button class=\"plus-btn\" (click)=\"onShowInsert($event)\">\uFF0B</button>\r\n    </div>\r\n\r\n    <div class=\"arrow-down-container\">\r\n        <div class=\"arrow-down\"></div>\r\n    </div>\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;cursor:default}.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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfBottomVInsertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-bottom-v-insert', imports: [
+                        AsyncPipe,
+                        WfInsertMenuComponent
+                    ], template: "<div class=\"wf-bottom-v-insert-container\" \r\n    [class.shorter]=\"(!!currentStep.isPseudo && !!currentStep.isInFallbackBranch!) || !!currentStep.config\"\r\n    [class.insert-context]=\"(coreWorkflowService.insertContext$ | async)?.branchId === currentContext.branchId && (coreWorkflowService.insertContext$ | async)?.index === currentContext.index\"\r\n>\r\n    <div class=\"vertical-line\"></div>\r\n\r\n    <div class=\"plus-container\" #plusContainer>\r\n        <button class=\"plus-btn\" (click)=\"onShowInsert($event)\">\uFF0B</button>\r\n    </div>\r\n\r\n    <div class=\"arrow-down-container\">\r\n        <div class=\"arrow-down\"></div>\r\n    </div>\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;cursor:default}.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"] }]
+        }], propDecorators: { currentContext: [{
+                type: Input,
+                args: [{ required: true }]
+            }], currentStep: [{
+                type: Input,
+                args: [{ required: true }]
+            }], insertStep: [{
+                type: Output
+            }], plusContainer: [{
+                type: ViewChild,
+                args: ['plusContainer']
+            }] } });
+
+class CoreControlValueOnlyComponent {
+    constructor() {
+        this.$control = input.required();
+        this.$form = input.required();
+        this.$fieldName = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreControlValueOnlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreControlValueOnlyComponent, isStandalone: true, selector: "core-control-value-only", inputs: { $control: { classPropertyName: "$control", publicName: "$control", isSignal: true, isRequired: true, transformFunction: null }, $form: { classPropertyName: "$form", publicName: "$form", isSignal: true, isRequired: true, transformFunction: null }, $fieldName: { classPropertyName: "$fieldName", publicName: "$fieldName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"$form()\">\r\n    @switch ($control().controlType) {\r\n    @case ('TEXTBOX') {\r\n    <input class=\"form-control\" [formControlName]=\"$fieldName() || $control().field\" [type]=\"$control().type || 'text'\"\r\n        [placeholder]=\"$control().placeholder || ''\" [readonly]=\"$control().readonly\" />\r\n    }\r\n    @case ('CURRENCY') {\r\n    <core-currency-input [formControlName]=\"$fieldName() || $control().field\"\r\n        [placeholder]=\"$control().placeholder || ''\">\r\n    </core-currency-input>\r\n    }\r\n    @case ('DROPDOWN') {\r\n    @if ($control().dropdownOptions$) {\r\n    <core-dropdown [formControlName]=\"$fieldName() || $control().field\" [options$]=\"$control().dropdownOptions$!\">\r\n    </core-dropdown>\r\n    }\r\n    }\r\n    @case ('CHECKLIST') {\r\n    @if ($control().checklistOptions$) {\r\n    <core-checklist [formControlName]=\"$fieldName() || $control().field\" [options$]=\"$control().checklistOptions$!\">\r\n    </core-checklist>\r\n    }\r\n    }\r\n    @case ('DATEPICKER') {\r\n    <core-date-picker [formControlName]=\"$fieldName() || $control().field\" [rangeLimit]=\"$control().rangeLimit!\"\r\n        [popupAlign]=\"$control().popupAlign!\" [placeholder]=\"$control().placeholder || ''\"\r\n        [readonly]=\"$control().readonly!\">\r\n    </core-date-picker>\r\n    }\r\n    @case ('SEEKER') {\r\n    <core-form-control-seeker [formControlName]=\"$fieldName() || $control().field\"\r\n        [seekerSourceType]=\"$control().seekerSourceType!\" [shownFrom]=\"$control().shownFrom!\"\r\n        [boundFrom]=\"$control().boundFrom!\" [objectList$]=\"$control().objectList$!\">\r\n    </core-form-control-seeker>\r\n    }\r\n    @default {\r\n    <input class=\"form-control\" [formControlName]=\"$fieldName() || $control().field\" type=\"text\"\r\n        [placeholder]=\"$control().placeholder || ''\" [readonly]=\"$control().readonly\" />\r\n    }\r\n    }\r\n</div>", styles: [":host{display:block}input.form-control,core-dropdown,core-checklist,core-date-picker,core-currency-input,core-form-control-seeker{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "clearDisable", "fitHeightWithItemCount", "itemHeight"] }, { kind: "component", type: CoreChecklistComponent, selector: "core-checklist", inputs: ["paramMode", "getByIdObject$", "shownFrom", "options$", "height", "placeholder", "loading", "readonly", "disabled"] }, { kind: "component", type: CoreDatePickerComponent, selector: "core-date-picker", inputs: ["enableTimeZoneConverter", "showPlaceholder", "popupWidth", "popupXPadding", "popupAlign", "rangeLimit", "placeholder", "readonly", "disabled"] }, { kind: "component", type: CoreFormControlSeekerComponent, selector: "core-form-control-seeker", inputs: ["title", "showPageHeader", "preDefinedOuterParam$", "preDefinedOuterFilter$", "click$", "getByIdObject$", "getByIdApi", "paramMode", "multiMode", "objectList$", "useTheseColumns", "hideOrgTree", "excludedColumns", "excludeExistingList", "placeholder", "sourceSpaceHeight", "indirectBinding", "bindGridIdTo", "multiModeExtendedColumns", "multiModeExtendedSections", "editBufferData$", "multiModeTableHeight", "multiModeRowHeight", "seekerSourceType", "boundFrom", "shownFrom", "alsoBindTo", "seekerVerifyIgnore"], outputs: ["onDoubleClick"] }, { kind: "component", type: CoreCurrencyInputComponent, selector: "core-currency-input", inputs: ["currencySign", "placeholder"], outputs: ["onLeftFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreControlValueOnlyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-control-value-only', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ReactiveFormsModule,
+                        CoreDropdownComponent,
+                        CoreChecklistComponent,
+                        CoreDatePickerComponent,
+                        CoreFormControlSeekerComponent,
+                        CoreCurrencyInputComponent
+                    ], template: "<div [formGroup]=\"$form()\">\r\n    @switch ($control().controlType) {\r\n    @case ('TEXTBOX') {\r\n    <input class=\"form-control\" [formControlName]=\"$fieldName() || $control().field\" [type]=\"$control().type || 'text'\"\r\n        [placeholder]=\"$control().placeholder || ''\" [readonly]=\"$control().readonly\" />\r\n    }\r\n    @case ('CURRENCY') {\r\n    <core-currency-input [formControlName]=\"$fieldName() || $control().field\"\r\n        [placeholder]=\"$control().placeholder || ''\">\r\n    </core-currency-input>\r\n    }\r\n    @case ('DROPDOWN') {\r\n    @if ($control().dropdownOptions$) {\r\n    <core-dropdown [formControlName]=\"$fieldName() || $control().field\" [options$]=\"$control().dropdownOptions$!\">\r\n    </core-dropdown>\r\n    }\r\n    }\r\n    @case ('CHECKLIST') {\r\n    @if ($control().checklistOptions$) {\r\n    <core-checklist [formControlName]=\"$fieldName() || $control().field\" [options$]=\"$control().checklistOptions$!\">\r\n    </core-checklist>\r\n    }\r\n    }\r\n    @case ('DATEPICKER') {\r\n    <core-date-picker [formControlName]=\"$fieldName() || $control().field\" [rangeLimit]=\"$control().rangeLimit!\"\r\n        [popupAlign]=\"$control().popupAlign!\" [placeholder]=\"$control().placeholder || ''\"\r\n        [readonly]=\"$control().readonly!\">\r\n    </core-date-picker>\r\n    }\r\n    @case ('SEEKER') {\r\n    <core-form-control-seeker [formControlName]=\"$fieldName() || $control().field\"\r\n        [seekerSourceType]=\"$control().seekerSourceType!\" [shownFrom]=\"$control().shownFrom!\"\r\n        [boundFrom]=\"$control().boundFrom!\" [objectList$]=\"$control().objectList$!\">\r\n    </core-form-control-seeker>\r\n    }\r\n    @default {\r\n    <input class=\"form-control\" [formControlName]=\"$fieldName() || $control().field\" type=\"text\"\r\n        [placeholder]=\"$control().placeholder || ''\" [readonly]=\"$control().readonly\" />\r\n    }\r\n    }\r\n</div>", styles: [":host{display:block}input.form-control,core-dropdown,core-checklist,core-date-picker,core-currency-input,core-form-control-seeker{width:100%}\n"] }]
+        }] });
+
+var EnumCoreRuleTreeOparator;
+(function (EnumCoreRuleTreeOparator) {
+    EnumCoreRuleTreeOparator["EQUAL"] = "EQUAL";
+    EnumCoreRuleTreeOparator["GREATER_THAN"] = "GREATER_THAN";
+    EnumCoreRuleTreeOparator["LESS_THAN"] = "LESS_THAN";
+    EnumCoreRuleTreeOparator["GREATER_OR_EQUAL_THAN"] = "GREATER_OR_EQUAL_THAN";
+    EnumCoreRuleTreeOparator["LESS_OR_EQUAL_THAN"] = "LESS_OR_EQUAL_THAN";
+    EnumCoreRuleTreeOparator["STARTS_WITH"] = "STARTS_WITH";
+    EnumCoreRuleTreeOparator["ENDS_WITH"] = "ENDS_WITH";
+    EnumCoreRuleTreeOparator["CONTAINS"] = "CONTAINS";
+    EnumCoreRuleTreeOparator["IN"] = "IN";
+    EnumCoreRuleTreeOparator["NOT_EQUAL"] = "NOT_EQUAL";
+    EnumCoreRuleTreeOparator["NOT_STARTS_WITH"] = "NOT_STARTS_WITH";
+    EnumCoreRuleTreeOparator["NOT_ENDS_WITH"] = "NOT_ENDS_WITH";
+    EnumCoreRuleTreeOparator["NOT_CONTAINS"] = "NOT_CONTAINS";
+    EnumCoreRuleTreeOparator["NOT_IN"] = "NOT_IN";
+})(EnumCoreRuleTreeOparator || (EnumCoreRuleTreeOparator = {}));
+class CoreRuleTreeComponent extends BaseComponent {
+    toggleCollapse(group) {
+        const current = this.collapsedGroups.get(group) || false;
+        this.collapsedGroups.set(group, !current);
+    }
+    isCollapsed(group) {
+        return this.collapsedGroups.get(group) || false;
+    }
+    field() {
+        return new FormGroup({
+            name: new FormControl(null),
+            value: new FormControl(null),
+            relationalOperator: new FormControl('EQUAL')
+        });
+    }
+    filter() {
+        return new FormGroup({
+            logicalOperator: new FormControl('AND'),
+            filters: new FormArray([])
+        });
+    }
+    constructor(mls, cdr) {
+        super(mls);
+        this.mls = mls;
+        this.cdr = cdr;
+        // Inputs
+        this.$totalCols = input([]);
+        this.$mainForm = input(new FormGroup({
+            logicalOperator: new FormControl('AND')
+        }));
+        this.$filterStringInput = input();
+        this.$expressionInput = input();
+        // Outputs
+        this.$jsonEmitter = output();
+        this.$expressionEmitter = output();
+        // Internal signals
+        this.$filterString = signal('()');
+        this.$filterFormJsonString = signal('{}');
+        this.$formValue = signal(null); // Manual form value signal
+        this.$rawValue = computed(() => JSON.stringify(this.$mainForm().getRawValue(), null, 2));
+        // Track collapsed groups manually
+        this.collapsedGroups = new WeakMap();
+        this.operatorFriendlyMap = {
+            [EnumCoreRuleTreeOparator.EQUAL]: 'Equals (=)',
+            [EnumCoreRuleTreeOparator.NOT_EQUAL]: 'Does not equal (≠)',
+            [EnumCoreRuleTreeOparator.STARTS_WITH]: 'Starts with (→)',
+            [EnumCoreRuleTreeOparator.ENDS_WITH]: 'Ends with (←)',
+            [EnumCoreRuleTreeOparator.CONTAINS]: 'Contains (∈)',
+            [EnumCoreRuleTreeOparator.NOT_STARTS_WITH]: 'Does NOT start with (↛)',
+            [EnumCoreRuleTreeOparator.NOT_ENDS_WITH]: 'Does NOT end with (↚)',
+            [EnumCoreRuleTreeOparator.NOT_CONTAINS]: 'Does NOT contain (∉)',
+            [EnumCoreRuleTreeOparator.GREATER_THAN]: 'Greater than (>)',
+            [EnumCoreRuleTreeOparator.LESS_THAN]: 'Less than (<)',
+            [EnumCoreRuleTreeOparator.GREATER_OR_EQUAL_THAN]: 'Greater or equal (≥)',
+            [EnumCoreRuleTreeOparator.LESS_OR_EQUAL_THAN]: 'Less or equal (≤)',
+            [EnumCoreRuleTreeOparator.IN]: 'In list (∈)',
+            [EnumCoreRuleTreeOparator.NOT_IN]: 'Not in list (∉)',
+        };
+        this.relationalOperator = Object.values(EnumCoreRuleTreeOparator);
+        effect((onCleanup) => {
+            const form = this.$mainForm();
+            if (!!form) {
+                const sub = form.valueChanges.subscribe(value => {
+                    this.$formValue.set(value);
+                    //this.cdr.markForCheck();
+                });
+                onCleanup(() => sub.unsubscribe()); // Unsubscribe if form changes
+            }
+        });
+        // ➡️ Separate reaction effect for serialization
+        effect(() => {
+            const formValue = this.$formValue();
+            if (!formValue)
+                return;
+            const cleaned = this.cleanEmptyFilters(formValue); // 👈 apply cleaning here
+            const expr = this.getFilterString(cleaned);
+            const json = JSON.stringify(cleaned, null, 2);
+            this.$filterString.set(expr);
+            this.$filterFormJsonString.set(json.trim());
+            this.$expressionEmitter.emit(expr);
+            this.$jsonEmitter.emit(json);
+        });
+        // Initialize immediately based on initial form
+        this.$formValue.set(this.$mainForm().getRawValue());
+    }
+    cleanEmptyFilters(node) {
+        if (!node || typeof node !== 'object')
+            return node;
+        // If it's a group with filters
+        if (Array.isArray(node.filters)) {
+            node.filters = node.filters
+                .map(f => this.cleanEmptyFilters(f))
+                .filter(f => f !== null); // optional: skip nulls
+            if (node.filters.length === 0) {
+                delete node.filters; // ← Clean!
+            }
+        }
+        return node;
+    }
+    getFilterString(filter) {
+        if (!filter || Object.keys(filter).length === 0)
+            return '()';
+        let str = '(';
+        for (let i = 0; i < filter.filters?.length; i++) {
+            if (i > 0)
+                str += ` ${filter.logicalOperator} `;
+            const f = filter.filters[i];
+            if (f?.filters?.length) {
+                str += this.getFilterString(f);
+            }
+            else {
+                const rawVal = f.value;
+                let formattedVal = rawVal;
+                if (rawVal instanceof Date) {
+                    formattedVal = this.formatDateToYMD(rawVal);
+                }
+                else if (typeof rawVal === 'string' && /^\d{4}-\d{2}-\d{2}T/.test(rawVal)) {
+                    // parse ISO string if needed
+                    try {
+                        formattedVal = this.formatDateToYMD(new Date(rawVal));
+                    }
+                    catch { }
+                }
+                str += `${f.name} ${f.relationalOperator} '${formattedVal}'`;
+            }
+        }
+        return str + ')';
+    }
+    addGroup(groupForm) {
+        const filtersArray = groupForm.get('filters');
+        if (filtersArray) {
+            const newGroup = this.filter(); // 🛠 use your existing filter() factory method
+            filtersArray.push(newGroup);
+        }
+    }
+    removeGroup(groupForm, index) {
+        const filtersArray = groupForm.get('filters');
+        if (filtersArray && filtersArray.length > index) {
+            setTimeout(() => filtersArray.removeAt(index));
+        }
+    }
+    addCondition(groupForm) {
+        const filtersArray = groupForm.get('filters');
+        if (filtersArray) {
+            const newCondition = this.field();
+            filtersArray.push(newCondition);
+        }
+    }
+    removeCondition(filterGroup, index) {
+        const filtersArray = filterGroup.get('filters');
+        if (filtersArray && filtersArray.length > index) {
+            setTimeout(() => filtersArray.removeAt(index));
+        }
+    }
+    resolveControl(fieldName) {
+        const cols = this.$totalCols();
+        if (!cols || !fieldName)
+            return undefined;
+        const tryfind = cols.find(x => x.field === fieldName);
+        if (!!tryfind) {
+        }
+        return tryfind;
+    }
+    safeStringify(obj) {
+        const seen = new WeakSet();
+        return JSON.stringify(obj, (key, value) => {
+            if (typeof value === 'object' && value !== null) {
+                if (seen.has(value)) {
+                    return undefined; // ✋ Skip circular reference
+                }
+                seen.add(value);
+            }
+            return value;
+        });
+    }
+    formatDateToYMD(date) {
+        const yyyy = date.getFullYear();
+        const mm = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+        const dd = String(date.getDate()).padStart(2, '0');
+        return `${yyyy}-${mm}-${dd}`;
+    }
+    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", $expressionEmitter: "$expressionEmitter" }, 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        <!-- Top Controls -->\r\n        <div class=\"top-bar\">\r\n          <div class=\"expression-box\">\r\n            Expression = {{ $filterString() || '()' }}\r\n          </div>\r\n      \r\n          <!-- <div class=\"button-group\">\r\n            <button type=\"button\" class=\"btn btn-success btn-sm feather-file-plus\"\r\n              (click)=\"addCondition($mainForm())\"\r\n              [appTooltip]=\"'Add Condition'\">\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-success btn-sm feather-folder-plus\"\r\n              (click)=\"addGroup($mainForm())\"\r\n              [appTooltip]=\"'Add Group'\">\r\n            </button>\r\n          </div> -->\r\n        </div>\r\n      \r\n        <!-- Query Builder -->\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                    <!-- Logical Operator -->\r\n                    <div class=\"logical-operator\">\r\n\r\n                        @if (filter === $mainForm()) {\r\n                            <div class=\"logical-operator-label\">\r\n                                AND\r\n                            </div>\r\n                        } @else {\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\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-xs 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-xs 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-xs 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                    <!-- Filter List (only shown when expanded) -->\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                                    <div class=\"field-cell\">\r\n                                        <select class=\"form-control\" formControlName=\"name\">\r\n                                            @for (col of $totalCols(); track $index) {\r\n                                            <option [value]=\"col.field\">\r\n                                                {{ col.label || col.field }}\r\n                                            </option>\r\n                                            }\r\n                                        </select>\r\n                                    </div>\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\">\r\n                                                {{ operatorFriendlyMap[op] || op }}\r\n                                            </option>\r\n                                            }\r\n                                        </select>\r\n                                    </div>\r\n                                    <div class=\"value-cell\">\r\n                                        <!-- <input class=\"form-control\" formControlName=\"value\" /> -->\r\n                                        <core-control-value-only\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                                    </div>\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                                } @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\">{{ $filterFormJsonString() | tableCell : 'TRIM' : lang }}</pre>\r\n    </div>\r\n  \r\n  </div>\r\n", styles: [".core-rule-tree-container{display:flex;flex-direction:column;height:100vh;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{display:flex;align-items:center;gap:8px}.field-cell,.operator-cell,.value-cell{flex:1}.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.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"] }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRuleTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-rule-tree', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        CoreControlValueOnlyComponent,
+                        NgTemplateOutlet,
+                        CoreDropdownComponent,
+                        TooltipDirective,
+                        TableCellPipe,
+                        TranslatePipe
+                    ], 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        <!-- Top Controls -->\r\n        <div class=\"top-bar\">\r\n          <div class=\"expression-box\">\r\n            Expression = {{ $filterString() || '()' }}\r\n          </div>\r\n      \r\n          <!-- <div class=\"button-group\">\r\n            <button type=\"button\" class=\"btn btn-success btn-sm feather-file-plus\"\r\n              (click)=\"addCondition($mainForm())\"\r\n              [appTooltip]=\"'Add Condition'\">\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-success btn-sm feather-folder-plus\"\r\n              (click)=\"addGroup($mainForm())\"\r\n              [appTooltip]=\"'Add Group'\">\r\n            </button>\r\n          </div> -->\r\n        </div>\r\n      \r\n        <!-- Query Builder -->\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                    <!-- Logical Operator -->\r\n                    <div class=\"logical-operator\">\r\n\r\n                        @if (filter === $mainForm()) {\r\n                            <div class=\"logical-operator-label\">\r\n                                AND\r\n                            </div>\r\n                        } @else {\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\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-xs 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-xs 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-xs 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                    <!-- Filter List (only shown when expanded) -->\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                                    <div class=\"field-cell\">\r\n                                        <select class=\"form-control\" formControlName=\"name\">\r\n                                            @for (col of $totalCols(); track $index) {\r\n                                            <option [value]=\"col.field\">\r\n                                                {{ col.label || col.field }}\r\n                                            </option>\r\n                                            }\r\n                                        </select>\r\n                                    </div>\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\">\r\n                                                {{ operatorFriendlyMap[op] || op }}\r\n                                            </option>\r\n                                            }\r\n                                        </select>\r\n                                    </div>\r\n                                    <div class=\"value-cell\">\r\n                                        <!-- <input class=\"form-control\" formControlName=\"value\" /> -->\r\n                                        <core-control-value-only\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                                    </div>\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                                } @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\">{{ $filterFormJsonString() | tableCell : 'TRIM' : lang }}</pre>\r\n    </div>\r\n  \r\n  </div>\r\n", styles: [".core-rule-tree-container{display:flex;flex-direction:column;height:100vh;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{display:flex;align-items:center;gap:8px}.field-cell,.operator-cell,.value-cell{flex:1}.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 }] });
+
+var EnumActorSourceType;
+(function (EnumActorSourceType) {
+    EnumActorSourceType["Employee"] = "Employee";
+    EnumActorSourceType["Manager"] = "Manager";
+    EnumActorSourceType["DepartmentSupervisor"] = "DepartmentSupervisor";
+    EnumActorSourceType["Position"] = "Position";
+    EnumActorSourceType["Requester"] = "Requester";
+    EnumActorSourceType["StepRecipient"] = "StepRecipient";
+    EnumActorSourceType["UserGroup"] = "UserGroup";
+    EnumActorSourceType["SelfSelection"] = "SelfSelection"; // Manually chosen at runtime
+})(EnumActorSourceType || (EnumActorSourceType = {}));
+
+class WfActorSelectorComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.wfs = inject(CoreWorkflowService);
+        this.$value = this.wfs.$selectedActorAssignment;
+        this.$valueChange = output();
+        this.levelSpecificOptions$ = new BehaviorSubject([]);
+        this.employeeObjectList$ = new BehaviorSubject([]);
+        this.positionObjectList$ = new BehaviorSubject([]);
+        this.onNgModelChange = (ngModel, value) => {
+            switch (ngModel) {
+                case 'level':
+                    this.onLevelChanged(value);
+                    break;
+                case 'employeeIds':
+                case 'positionIds':
+                    this.onStaticValueSelected(value);
+                    break;
+            }
+        };
+        this.levelSpecificControl = {
+            controlType: EnumFormBaseContolType.DROPDOWN,
+            name: 'level',
+            dropdownOptions$: this.levelSpecificOptions$,
+            ngModel: this.$value()?.level,
+            flexSize: 12,
+            label: '',
+            ngModelChange: this.onNgModelChange,
+            getByIdApi: '/api/HuEmployee/GetById'
+        };
+        this.employeeIdsControl = {
+            controlType: EnumFormBaseContolType.SEEKER,
+            seekerSourceType: EnumCoreFormControlSeekerSourceType.EMPLOYEE_SEEK,
+            multiMode: true,
+            objectList$: this.employeeObjectList$,
+            name: 'employeeIds',
+            ngModel: this.$value()?.staticValueIds,
+            flexSize: 12,
+            label: '',
+            ngModelChange: this.onNgModelChange,
+            shownFrom: 'fullname',
+            getByIdApi: '/api/HuEmployee/GetById'
+        };
+        this.positionIdsControl = {
+            controlType: EnumFormBaseContolType.SEEKER,
+            seekerSourceType: EnumCoreFormControlSeekerSourceType.POSITION_SEEK,
+            multiMode: true,
+            objectList$: this.positionObjectList$,
+            name: 'positionIds',
+            ngModel: this.$value()?.staticValueIds,
+            flexSize: 12,
+            label: '',
+            ngModelChange: this.onNgModelChange,
+            shownFrom: 'name',
+            getByIdApi: '/api/HuPosition/GetById'
+        };
+        this.cdr = inject(ChangeDetectorRef);
+        this.AVAILABLE_SOURCES = Object.values(EnumActorSourceType);
+        this.actorSourceOptions$ = new BehaviorSubject(Object.values(EnumActorSourceType)
+            .filter(val => ['Employee', 'Manager', 'DepartmentSupervisor', 'Position'].includes(val))
+            .map(val => ({
+            value: val,
+            text: val
+        })));
+        this.unsupportedYetactorSourceOptions$ = new BehaviorSubject(Object.values(EnumActorSourceType)
+            .filter(val => !['Employee', 'Manager', 'DepartmentSupervisor', 'Position'].includes(val))
+            .map(val => ({
+            value: val,
+            text: val
+        })));
+        this.$showEmployeeSeeker = computed(() => this.$value()?.source === EnumActorSourceType.Employee);
+        this.$showPositionSeeker = computed(() => this.$value()?.source === EnumActorSourceType.Position);
+        this.$showLevel = computed(() => [EnumActorSourceType.Manager, EnumActorSourceType.DepartmentSupervisor].includes(this.$value().source));
+        this.$showStepKey = computed(() => this.$value()?.source === EnumActorSourceType.StepRecipient);
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
+        const current = this.$value()?.source;
+        if (current === EnumActorSourceType.Manager ||
+            current === EnumActorSourceType.DepartmentSupervisor) {
+            this.updateLevelOptions(current);
+        }
+    }
+    updateLevelOptions(source) {
+        const prefix = source === EnumActorSourceType.Manager ? 'Direct manager' : 'Direct supervisor';
+        const options = Array.from({ length: 10 }, (_, i) => ({
+            value: i,
+            text: i === 0 ? `${prefix}` : `${prefix} + ${i}`
+        }));
+        this.levelSpecificOptions$.next(options);
+    }
+    onSourceChanged(newSource) {
+        let newValue = this.$value();
+        if (!newValue)
+            return;
+        // Optionally reset level
+        if (newSource === EnumActorSourceType.Manager ||
+            newSource === EnumActorSourceType.DepartmentSupervisor) {
+            newValue.level = undefined;
+            delete newValue.staticValueIds;
+            delete newValue.stepKey;
+        }
+        else {
+            delete newValue.level;
+        }
+        this.$value.set({ ...newValue });
+        this.updateLevelOptions(newSource);
+        this.$valueChange.emit({ source: newSource });
+        this.updateCurrentStepConfigPatch({
+            approvers: [{ source: newSource }],
+        });
+        this.cdr.markForCheck();
+    }
+    onStaticValueSelected(value) {
+        if (!this.$value())
+            return;
+        const next = { ...this.$value(), staticValueIds: value };
+        this.$valueChange.emit(next);
+        const prev = this.$value();
+        this.updateCurrentStepConfigPatch({
+            approvers: [{ ...prev, staticValueIds: value }]
+        });
+    }
+    onLevelChanged(level) {
+        if (!this.$value())
+            return;
+        const next = { ...this.$value(), level };
+        this.$valueChange.emit(next);
+        const prev = this.$value();
+        this.updateCurrentStepConfigPatch({
+            approvers: [{ ...prev, level }]
+        });
+    }
+    onStepKeyChanged(key) {
+        if (!this.$value())
+            return;
+        const next = { ...this.$value(), stepKey: key };
+        this.$valueChange.emit(next);
+    }
+    updateCurrentStepConfigPatch(patch) {
+        const step = this.wfs.$currentStep();
+        if (!step)
+            return;
+        const cloned = structuredClone(this.wfs.$currentSteps());
+        const target = cloned.find(s => s.id === step.id);
+        if (!target)
+            return;
+        target.config = {
+            ...(target.config ?? {}),
+            ...patch
+        };
+        this.wfs.$currentSteps.set(cloned);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfActorSelectorComponent, deps: null, 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'\"\r\n      [showAnyway]=\"true\"\r\n      [position]=\"'above'\"    \r\n    >\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 gray solid;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"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfActorSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-actor-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        CoreParamControlComponent,
+                        CoreRadioGroupComponent,
+                        TranslatePipe,
+                        TooltipDirective,
+                    ], template: "<div class=\"wf-actor-selector-container\">\r\n    <div class=\"soure-options\"\r\n      [appTooltip]=\"'This version currently supports: Manager | Supervisor | Employee | Position'\"\r\n      [showAnyway]=\"true\"\r\n      [position]=\"'above'\"    \r\n    >\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 gray solid;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"] }]
+        }] });
+
+class WfApproverConfigComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfApproverConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WfApproverConfigComponent, isStandalone: true, selector: "wf-approver-config", ngImport: i0, template: "<wf-actor-selector></wf-actor-selector>", styles: [""], dependencies: [{ kind: "component", type: WfActorSelectorComponent, selector: "wf-actor-selector", outputs: ["$valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfApproverConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-approver-config', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        WfActorSelectorComponent
+                    ], template: "<wf-actor-selector></wf-actor-selector>" }]
+        }] });
+
+class WfCcConfigComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfCcConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WfCcConfigComponent, isStandalone: true, selector: "wf-cc-config", ngImport: i0, template: "<wf-actor-selector></wf-actor-selector>", styles: [""], dependencies: [{ kind: "component", type: WfActorSelectorComponent, selector: "wf-actor-selector", outputs: ["$valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfCcConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-cc-config', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        WfActorSelectorComponent
+                    ], template: "<wf-actor-selector></wf-actor-selector>" }]
+        }] });
+
+class WfEndConfigComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfEndConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WfEndConfigComponent, isStandalone: true, selector: "wf-end-config", ngImport: i0, template: "<div class=\"wf-submit-config-container\">\r\n    <div class=\"submit-config-box\">\r\n        <span class=\"icon\"><i class=\"feather-mail\"></i></span>\r\n        <span class=\"message\">\r\n            In this version, an email will be sent the <strong>requester</strong> by default.\r\n        </span>\r\n    </div>\r\n    <div class=\"submit-config-box\">Press ESC to hide</div>\r\n</div>", styles: [".submit-config-box{display:flex;align-items:center;gap:8px;padding:15px;background-color:#ede7f6;border-left:4px solid #673ab7;margin-bottom:15px}.submit-config-box .icon{font-size:18px}.submit-config-box .message strong{font-weight:600}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfEndConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-end-config', imports: [], template: "<div class=\"wf-submit-config-container\">\r\n    <div class=\"submit-config-box\">\r\n        <span class=\"icon\"><i class=\"feather-mail\"></i></span>\r\n        <span class=\"message\">\r\n            In this version, an email will be sent the <strong>requester</strong> by default.\r\n        </span>\r\n    </div>\r\n    <div class=\"submit-config-box\">Press ESC to hide</div>\r\n</div>", styles: [".submit-config-box{display:flex;align-items:center;gap:8px;padding:15px;background-color:#ede7f6;border-left:4px solid #673ab7;margin-bottom:15px}.submit-config-box .icon{font-size:18px}.submit-config-box .message strong{font-weight:600}\n"] }]
+        }] });
+
+class WfHandlerConfigComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfHandlerConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WfHandlerConfigComponent, isStandalone: true, selector: "wf-handler-config", ngImport: i0, template: "<wf-actor-selector></wf-actor-selector>", styles: [""], dependencies: [{ kind: "component", type: WfActorSelectorComponent, selector: "wf-actor-selector", outputs: ["$valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfHandlerConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-handler-config', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        WfActorSelectorComponent
+                    ], template: "<wf-actor-selector></wf-actor-selector>" }]
+        }] });
+
+class WfSubmitConfigComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfSubmitConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WfSubmitConfigComponent, isStandalone: true, selector: "wf-submit-config", ngImport: i0, template: "<div class=\"wf-submit-config-container\">\r\n    <div class=\"submit-config-box\">\r\n        <span class=\"icon\"><i class=\"feather-check-square\"></i></span>\r\n        <span class=\"message\">\r\n            In this version, <strong>all members</strong> are allowed to submit.\r\n        </span>\r\n    </div>\r\n    <div class=\"submit-config-box\">Press ESC to hide</div>\r\n</div>", styles: [".submit-config-box{display:flex;align-items:center;gap:8px;padding:15px;background-color:#e0f7fa;border-left:4px solid #00bcd4;margin-bottom:15px}.submit-config-box .icon{font-size:18px}.submit-config-box .message strong{font-weight:600}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfSubmitConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-submit-config', imports: [], template: "<div class=\"wf-submit-config-container\">\r\n    <div class=\"submit-config-box\">\r\n        <span class=\"icon\"><i class=\"feather-check-square\"></i></span>\r\n        <span class=\"message\">\r\n            In this version, <strong>all members</strong> are allowed to submit.\r\n        </span>\r\n    </div>\r\n    <div class=\"submit-config-box\">Press ESC to hide</div>\r\n</div>", styles: [".submit-config-box{display:flex;align-items:center;gap:8px;padding:15px;background-color:#e0f7fa;border-left:4px solid #00bcd4;margin-bottom:15px}.submit-config-box .icon{font-size:18px}.submit-config-box .message strong{font-weight:600}\n"] }]
+        }] });
+
+class WfStepConfigShellComponent {
+    constructor(coreWorkflowService, domService) {
+        this.coreWorkflowService = coreWorkflowService;
+        this.domService = domService;
+        this.$container = viewChild('container');
+        // listenerFn!: () => void;
+        this.renderer = inject(Renderer2);
+        this.cdr = inject(ChangeDetectorRef);
+        this.enumType = EnumWorkflowStepType;
+        this.$stepFormGroup = computed(() => {
+            const step = this.coreWorkflowService.$currentStep();
+            if (!step) {
+                return new FormGroup({
+                    logicalOperator: new FormControl('AND'),
+                    filters: new FormArray([])
+                });
+            }
+            return this.buildFormGroupFromStep(step.config);
+        });
+        this.$isBranchCard = computed(() => {
+            const step = this.coreWorkflowService.$currentStep();
+            console.log(step?.type);
+            console.log(step?.type === EnumWorkflowStepType.BranchCard);
+            return !!step && step.type === EnumWorkflowStepType.BranchCard;
+        });
+        this.$canRenderRuleTree = computed(() => {
+            const form = this.$stepFormGroup();
+            const cols = this.coreWorkflowService.$availableCols();
+            const isBranchCard = this.$isBranchCard();
+            if (!form || !cols || !isBranchCard)
+                return false;
+            if (cols.length === 0)
+                return false;
+            return form.valid;
+        });
+        effect(() => {
+            const containerRef = this.$container();
+            if (containerRef) {
+                containerRef.nativeElement.style.zIndex = this.domService.getMaxZIndex() + 1;
+            }
+        });
+    }
+    buildFormGroupFromStep(config) {
+        if (!config) {
+            return new FormGroup({
+                logicalOperator: new FormControl('AND'),
+                filters: new FormArray([])
+            });
+        }
+        return new FormGroup({
+            logicalOperator: new FormControl(config.logicalOperator ?? 'AND'),
+            filters: new FormArray([]) // You could map config.filters to prefilled controls
+        });
+    }
+    close() {
+        this.coreWorkflowService.$showStepConfig.set(false); // example method
+    }
+    save() {
+        // handle save logic
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfStepConfigShellComponent, deps: [{ token: CoreWorkflowService }, { token: DomService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WfStepConfigShellComponent, isStandalone: true, selector: "wf-step-config-shell", viewQueries: [{ propertyName: "$container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wf-step-config-shell-container\" #container [class.shown]=\"coreWorkflowService.$showStepConfig()\">\r\n  \r\n    <div class=\"wf-step-config-header\">\r\n      <div class=\"panel-title\">\r\n        {{ coreWorkflowService.$currentStep()?.type || 'Step' }} Configuration\r\n      </div>\r\n      <div class=\"close-wrapper\" (click)=\"close()\">\r\n        <i class=\"feather-x\"></i>\r\n      </div>\r\n    </div>\r\n  \r\n    <div class=\"wf-step-config-content\">\r\n\r\n\r\n        @switch (coreWorkflowService.$currentStep()?.type) {\r\n          \r\n          @case (enumType.BranchCard) {\r\n            <core-rule-tree\r\n              [$totalCols]=\"coreWorkflowService.$availableCols()\"\r\n              [$mainForm]=\"$stepFormGroup()\" />\r\n          }\r\n      \r\n          @case (enumType.Approval) {\r\n            <wf-approver-config/>\r\n          }\r\n      \r\n          @case (enumType.Handle) {\r\n            <wf-handler-config/>\r\n          }\r\n      \r\n          @case (enumType.CC) {\r\n            <wf-cc-config/>\r\n          }\r\n      \r\n          @case (enumType.Submit) {\r\n            <wf-submit-config/>\r\n          }\r\n      \r\n          @case (enumType.End) {\r\n            <wf-end-config/>\r\n          }\r\n      \r\n          @default {\r\n            <div class=\"loading-placeholder\">\r\n              Unsupported step type.\r\n            </div>\r\n          }\r\n      \r\n        }\r\n      \r\n      \r\n    </div>\r\n  \r\n</div>", styles: [".wf-step-config-shell-container{display:block;position:fixed;top:0;right:-532px;width:532px;height:100vh;background-color:#fff;transition:right .2s ease-out;box-shadow:var(--decoration-box-shadow);overflow-y:auto}.wf-step-config-header{display:flex;align-items:center;justify-content:space-between;padding:15px;height:60px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;color:#1f2937}.panel-title{flex-grow:1}.close-wrapper{display:flex;align-items:center;justify-content:center;background-color:#f1f5f9;width:32px;height:32px;border-radius:50%;cursor:pointer;transition:background-color .2s}.close-wrapper:hover{background-color:#e2e8f0}.wf-step-config-content{flex-grow:1;padding:15px;overflow-y:visible;font-size:13px}.wf-step-config-content .core-radio-group-container label{font-size:13px!important}.loading-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;font-size:14px}.wf-step-config-shell-container.shown{right:0}\n"], dependencies: [{ kind: "component", type: CoreRuleTreeComponent, selector: "core-rule-tree", inputs: ["$totalCols", "$mainForm", "$filterStringInput", "$expressionInput"], outputs: ["$jsonEmitter", "$expressionEmitter"] }, { kind: "component", type: WfApproverConfigComponent, selector: "wf-approver-config" }, { kind: "component", type: WfCcConfigComponent, selector: "wf-cc-config" }, { kind: "component", type: WfEndConfigComponent, selector: "wf-end-config" }, { kind: "component", type: WfHandlerConfigComponent, selector: "wf-handler-config" }, { kind: "component", type: WfSubmitConfigComponent, selector: "wf-submit-config" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfStepConfigShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-step-config-shell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CoreRuleTreeComponent,
+                        WfApproverConfigComponent,
+                        WfCcConfigComponent,
+                        WfEndConfigComponent,
+                        WfHandlerConfigComponent,
+                        WfSubmitConfigComponent
+                    ], template: "<div class=\"wf-step-config-shell-container\" #container [class.shown]=\"coreWorkflowService.$showStepConfig()\">\r\n  \r\n    <div class=\"wf-step-config-header\">\r\n      <div class=\"panel-title\">\r\n        {{ coreWorkflowService.$currentStep()?.type || 'Step' }} Configuration\r\n      </div>\r\n      <div class=\"close-wrapper\" (click)=\"close()\">\r\n        <i class=\"feather-x\"></i>\r\n      </div>\r\n    </div>\r\n  \r\n    <div class=\"wf-step-config-content\">\r\n\r\n\r\n        @switch (coreWorkflowService.$currentStep()?.type) {\r\n          \r\n          @case (enumType.BranchCard) {\r\n            <core-rule-tree\r\n              [$totalCols]=\"coreWorkflowService.$availableCols()\"\r\n              [$mainForm]=\"$stepFormGroup()\" />\r\n          }\r\n      \r\n          @case (enumType.Approval) {\r\n            <wf-approver-config/>\r\n          }\r\n      \r\n          @case (enumType.Handle) {\r\n            <wf-handler-config/>\r\n          }\r\n      \r\n          @case (enumType.CC) {\r\n            <wf-cc-config/>\r\n          }\r\n      \r\n          @case (enumType.Submit) {\r\n            <wf-submit-config/>\r\n          }\r\n      \r\n          @case (enumType.End) {\r\n            <wf-end-config/>\r\n          }\r\n      \r\n          @default {\r\n            <div class=\"loading-placeholder\">\r\n              Unsupported step type.\r\n            </div>\r\n          }\r\n      \r\n        }\r\n      \r\n      \r\n    </div>\r\n  \r\n</div>", styles: [".wf-step-config-shell-container{display:block;position:fixed;top:0;right:-532px;width:532px;height:100vh;background-color:#fff;transition:right .2s ease-out;box-shadow:var(--decoration-box-shadow);overflow-y:auto}.wf-step-config-header{display:flex;align-items:center;justify-content:space-between;padding:15px;height:60px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;color:#1f2937}.panel-title{flex-grow:1}.close-wrapper{display:flex;align-items:center;justify-content:center;background-color:#f1f5f9;width:32px;height:32px;border-radius:50%;cursor:pointer;transition:background-color .2s}.close-wrapper:hover{background-color:#e2e8f0}.wf-step-config-content{flex-grow:1;padding:15px;overflow-y:visible;font-size:13px}.wf-step-config-content .core-radio-group-container label{font-size:13px!important}.loading-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;font-size:14px}.wf-step-config-shell-container.shown{right:0}\n"] }]
+        }], ctorParameters: () => [{ type: CoreWorkflowService }, { type: DomService }] });
+
+const ROOT_BRANCH_ID = 'root';
+
+class BridgeLineService {
+    constructor() {
+        this.coreWorkflowService = inject(CoreWorkflowService);
+        this.colorRadius = 10;
+    }
+    adjustBridgeLines(branchGroupEl, topBridgeLineEl, bottomBridgeLineEl, branchColumnEls) {
+        const columns = Array.from(branchGroupEl.querySelectorAll(':scope > .branch-column'));
+        if (columns.length < 2)
+            return;
+        // Helper: get the last .arrow-down inside a column
+        // ':scope > .arrow-down' only works if .arrow-down is a direct child of col.
+        // Safely queries only arrows inside wf-bottom-v-insert
+        // Uses .pop() to grab the last one, if any (safe fallback if there's more than one).
+        // Ensures type safety with instanceof HTMLElement.
+        const getLastArrow = (col) => {
+            const arrow = Array.from(col.querySelectorAll('wf-bottom-v-insert .arrow-down')).pop();
+            return arrow instanceof HTMLElement ? arrow : null;
+        };
+        const allArrows = columns
+            .map(getLastArrow)
+            .filter((el) => !!el);
+        if (allArrows.length < 2)
+            return;
+        const r1 = allArrows[0].getBoundingClientRect();
+        const r2 = allArrows[allArrows.length - 1].getBoundingClientRect();
+        const containerRect = branchGroupEl.getBoundingClientRect();
+        const left = r1.left + r1.width / 2 - containerRect.left;
+        const right = r2.left + r2.width / 2 - containerRect.left;
+        const maxArrowBottom = allArrows.reduce((max, el) => {
+            const bottom = el.getBoundingClientRect().bottom;
+            return Math.max(max, bottom);
+        }, 0);
+        const top = maxArrowBottom - containerRect.top - 1;
+        // TOP bridge line
+        topBridgeLineEl.style.top = `17.5px`;
+        topBridgeLineEl.style.left = `${left}px`;
+        topBridgeLineEl.style.width = `${right - left}px`;
+        // BOTTOM bridge line
+        bottomBridgeLineEl.style.top = `${top}px`;
+        bottomBridgeLineEl.style.left = `${left}px`;
+        bottomBridgeLineEl.style.width = `${right - left}px`;
+        // Vertical lines
+        branchColumnEls.forEach(col => {
+            const lastArrow = getLastArrow(col);
+            const vertical = col.querySelector(':scope > .vertical-bridge-line');
+            if (!lastArrow || !vertical)
+                return;
+            const arrowRect = lastArrow.getBoundingClientRect();
+            const colRect = col.getBoundingClientRect();
+            const startY = arrowRect.bottom - colRect.top;
+            const height = top - startY - this.coreWorkflowService.standardConnectorHeight - 17.5;
+            vertical.style.top = `${startY}px`;
+            vertical.style.left = `calc(50% - 1px)`;
+            vertical.style.height = `${height}px`;
+            vertical.style.display = height > 0 ? 'block' : 'none';
+            //vertical.style.backgroundColor = `hsl(${this.colorRadius}, 100%, 50%)`;
+            this.colorRadius += 10;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BridgeLineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BridgeLineService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BridgeLineService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class BridgeLineDirective {
+    constructor(elRef, bridgeLineService, zone) {
+        this.elRef = elRef;
+        this.bridgeLineService = bridgeLineService;
+        this.zone = zone;
+        this.bridgeLinesAdjusted = new EventEmitter();
+    }
+    ngOnInit() {
+        this.zone.runOutsideAngular(() => {
+            this.resizeObserver = new ResizeObserver(() => {
+                requestAnimationFrame(() => this.adjustBridgeLines());
+            });
+            this.resizeObserver.observe(this.elRef.nativeElement);
+            this.mutationObserver = new MutationObserver(() => {
+                this.adjustBridgeLines();
+            });
+            this.mutationObserver.observe(this.elRef.nativeElement, {
+                childList: true,
+                subtree: true
+            });
+        });
+        // First adjustment
+        requestAnimationFrame(() => this.adjustBridgeLines());
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+    }
+    adjustBridgeLines() {
+        const branchGroupEl = this.elRef.nativeElement;
+        const bridgeLines = branchGroupEl.querySelectorAll('.horizontal-bridge-line');
+        const topBridgeLineEl = bridgeLines[0];
+        const bottomBridgeLineEl = bridgeLines[1];
+        const branchColumnEls = Array.from(branchGroupEl.querySelectorAll(':scope > .branch-column'));
+        if (!topBridgeLineEl || !bottomBridgeLineEl || !branchColumnEls)
+            return;
+        this.bridgeLineService.adjustBridgeLines(this.elRef.nativeElement, topBridgeLineEl, bottomBridgeLineEl, branchColumnEls);
+        this.bridgeLinesAdjusted.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BridgeLineDirective, deps: [{ token: i0.ElementRef }, { token: BridgeLineService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: BridgeLineDirective, isStandalone: true, selector: "[bridgeLine]", outputs: { bridgeLinesAdjusted: "bridgeLinesAdjusted" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BridgeLineDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bridgeLine]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: BridgeLineService }, { type: i0.NgZone }], propDecorators: { bridgeLinesAdjusted: [{
+                type: Output
+            }] } });
+
+class WfNodeComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.stepGroup = []; // array that holds 'step'
+        this.isRootLevelStepGroup = false;
+        this.grandParentSteps = null; // The step array that owns the parent step of type ConditionalBranch
+        this.isInFallbackBranch = false;
+        //private observer!: MutationObserver;
+        this.enumType = EnumWorkflowStepType;
+        this.coreWorkflowService = inject(CoreWorkflowService);
+        this.renderer = inject(Renderer2);
+        this.bridgeLineService = inject(BridgeLineService);
+        this.stepNameEditMode = false;
+    }
+    onInputBlur() {
+        this.stepNameEditMode = false;
+    }
+    onStepNameChanged(newName) {
+        if (this.isRootLevelStepGroup) {
+            const cloned = structuredClone(this.coreWorkflowService.$currentSteps());
+            const stepInCloned = cloned.find(s => s.id === this.step.id);
+            if (stepInCloned) {
+                stepInCloned.name = newName;
+                this.coreWorkflowService.$currentSteps.set(cloned);
+            }
+        }
+    }
+    getBranchColumnElements() {
+        return this.branchColumnRefs?.map(ref => ref?.nativeElement);
+    }
+    setupClickOutsideListener() {
+        // Clean up any existing listener
+        if (this.listenerFn) {
+            this.listenerFn();
+            this.listenerFn = null;
+        }
+        // Delay to ensure DOM has rendered
+        setTimeout(() => {
+            this.listenerFn = this.renderer.listen('document', 'click', (event) => {
+                const clickedInside = this.branchHeader?.nativeElement.contains(event.target);
+                if (!clickedInside) {
+                    this.stepNameEditMode = false;
+                    this.removeClickOutsideListener(); // optional: remove after 1 toggle
+                }
+            });
+        });
+    }
+    removeClickOutsideListener() {
+        if (this.listenerFn) {
+            this.listenerFn();
+            this.listenerFn = null;
+        }
+    }
+    onLabelClicked() {
+        this.coreWorkflowService.$showStepConfig.set(true);
+    }
+    switchToNameEditMode() {
+        if (!!this.step.isPseudo && !!this.isInFallbackBranch)
+            return;
+        this.stepNameEditMode = true;
+        setTimeout(() => this.input?.nativeElement.focus());
+        this.setupClickOutsideListener();
+    }
+    adjustBridgeLines() {
+        setTimeout(() => {
+            if (!this.branchGroupRef || !this.topBridgeLineRef || !this.bottomBridgeLineRef) {
+                console.warn('[DEBUG] Some ref was null');
+                return;
+            }
+            console.log('[DEBUG] Triggering BridgeLineService');
+            this.bridgeLineService.adjustBridgeLines(this.branchGroupRef.nativeElement, this.topBridgeLineRef.nativeElement, this.bottomBridgeLineRef.nativeElement, this.branchColumnRefs.map(ref => ref.nativeElement));
+        }, 50);
+    }
+    /*
+    onDeleteBranch(branchId: string): void {
+  
+      if (!this.conditionalBranches) return;
+  
+      const index = this.conditionalBranches.findIndex(b => b.id === branchId);
+      if (index === -1) return;
+  
+      // ❌ Remove the selected branch
+      this.conditionalBranches.splice(index, 1);
+  
+      // ✅ Check if only fallback branch remains → delete the group step
+      if (this.conditionalBranches.length === 1 && this.conditionalBranches[0].isFallback) {
+  
+        if (!this.grandParentSteps) return;
+  
+        const indexInGrandParentSteps = this.grandParentSteps.findIndex(x => x.branches?.some(y => y.id === this.conditionalBranches[0].id));
+        if (indexInGrandParentSteps === -1) return;
+  
+        // 🧹 Remove the ConditionalBranch step (parent step)
+        this.grandParentSteps.splice(indexInGrandParentSteps, 1);
+  
+      } else {
+  
+        this.coreWorkflowService.autoReassignPriorities(this.conditionalBranches);
+  
+      }
+    }
+    */
+    /*
+    If the fallback deletion triggers parent step removal → check isRootLevelStepGroup to update signal.
+    Otherwise, it's safe to mutate grandParentSteps directly.
+    autoReassignPriorities() keeps branch execution order consistent.
+    */
+    /*
+     onDeleteBranch(branchId: string): void {
+       if (!this.conditionalBranches) return;
+   
+       const index = this.conditionalBranches.findIndex(b => b.id === branchId);
+       if (index === -1) return;
+   
+       // 🧹 Remove selected branch
+       this.conditionalBranches.splice(index, 1);
+   
+       // ✅ Case: only fallback remains → delete the entire ConditionalBranch step
+       const onlyFallbackLeft = this.conditionalBranches.length === 1 && this.conditionalBranches[0].isFallback;
+       if (onlyFallbackLeft) {
+         if (!this.grandParentSteps) return;
+   
+         const fallbackBranchId = this.conditionalBranches[0].id;
+         const stepIndex = this.grandParentSteps.findIndex(step =>
+           step.branches?.some(branch => branch.id === fallbackBranchId)
+         );
+         if (stepIndex === -1) return;
+   
+         if (this.isRootLevelStepGroup) {
+           // ✅ Must clone and reassign signal
+           const updated = [...this.grandParentSteps];
+           updated.splice(stepIndex, 1);
+           this.coreWorkflowService.$currentSteps.set(updated);
+         } else {
+           // ✅ In-place mutation is safe for non-root
+           this.grandParentSteps.splice(stepIndex, 1);
+         }
+   
+         return;
+       }
+   
+       // 🔁 Otherwise: re-prioritize branches
+       this.coreWorkflowService.autoReassignPriorities(this.conditionalBranches);
+     }
+   */
+    onDeleteBranch(branchId) {
+        if (!this.conditionalBranches)
+            return;
+        const index = this.conditionalBranches.findIndex(b => b.id === branchId);
+        if (index === -1)
+            return;
+        // ⚠️ Remove selected branch (in-place is okay, but needs re-signal)
+        this.conditionalBranches.splice(index, 1);
+        const onlyFallbackLeft = this.conditionalBranches.length === 1 && this.conditionalBranches[0].isFallback;
+        if (onlyFallbackLeft) {
+            if (!this.grandParentSteps)
+                return;
+            const fallbackBranchId = this.conditionalBranches[0].id;
+            const stepIndex = this.grandParentSteps.findIndex(step => step.branches?.some(branch => branch.id === fallbackBranchId));
+            if (stepIndex === -1)
+                return;
+            if (this.isRootLevelStepGroup) {
+                // ✅ Deep clone and reassign to trigger reactivity
+                const updated = structuredClone(this.grandParentSteps);
+                updated.splice(stepIndex, 1);
+                this.coreWorkflowService.$currentSteps.set(updated);
+            }
+            else {
+                // ✅ In-place mutation is fine for nested groups
+                this.grandParentSteps.splice(stepIndex, 1);
+                this.coreWorkflowService.$currentSteps.set(structuredClone(this.coreWorkflowService.$currentSteps()));
+            }
+            return;
+        }
+        // 🧠 Still re-trigger signal to reflect nested change in UI
+        this.coreWorkflowService.autoReassignPriorities(this.conditionalBranches);
+        this.coreWorkflowService.$currentSteps.set(structuredClone(this.coreWorkflowService.$currentSteps()));
+    }
+    /*onDeleteStep(): void {
+    
+      if (!this.stepGroup) return;
+  
+      const index = this.stepGroup.findIndex(s => s.id === this.step.id);
+      if (index === -1) return;
+    
+      // ❌ Remove the selected step
+      this.stepGroup.splice(index, 1);
+  
+    }*/
+    /*
+    For root-level steps, we must reassign the signal so Angular reacts to it.
+    For nested branch steps, direct mutation is acceptable because the signal still tracks the root array (which contains branches).
+    */
+    /*
+    onDeleteStep(): void {
+      if (!this.stepGroup) return;
+  
+      const index = this.stepGroup.findIndex(s => s.id === this.step.id);
+      if (index === -1) return;
+  
+      if (this.isRootLevelStepGroup) {
+        // ✅ Immutable update to signal
+        const updated = [...this.stepGroup];
+        updated.splice(index, 1);
+        this.coreWorkflowService.$currentSteps.set(updated);
+      } else {
+        // ✅ Safe mutation inside branch
+        this.stepGroup.splice(index, 1);
+      }
+    }
+    */
+    onDeleteStep() {
+        if (!this.stepGroup)
+            return;
+        const index = this.stepGroup.findIndex(s => s.id === this.step.id);
+        if (index === -1)
+            return;
+        if (this.isRootLevelStepGroup) {
+            this.coreWorkflowService.updateStepsSignalAfterNestedChange(this.coreWorkflowService.$currentSteps, draft => {
+                draft.splice(index, 1);
+            });
+        }
+        else {
+            this.stepGroup.splice(index, 1); // nested mutation still allowed (e.g., in branch)
+            this.coreWorkflowService.updateStepsSignalAfterNestedChange(this.coreWorkflowService.$currentSteps, _ => { }); // triggers reactivity
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+        });
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(x => x?.unsubscribe());
+    }
+    openConditionEditor() {
+        this.coreWorkflowService.$currentStep.set(this.step);
+        this.coreWorkflowService.$showStepConfig.set(true);
+    }
+    openNoneBranchRelatedEditor() {
+        this.coreWorkflowService.$currentStep.set(this.step);
+        this.coreWorkflowService.$showStepConfig.set(true);
+    }
+    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\">\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    @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                </div>\r\n    \r\n                <div class=\"step-delete pointer\" (click)=\"onDeleteStep()\">\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\">{{ step.label }}</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;cursor:default}.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: "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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-node', imports: [
+                        FormsModule,
+                        BridgeLineDirective,
+                        LowerCasePipe,
+                        WfBottomVInsertComponent,
+                        TooltipDirective,
+                    ], 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\">\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    @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                </div>\r\n    \r\n                <div class=\"step-delete pointer\" (click)=\"onDeleteStep()\">\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\">{{ step.label }}</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;cursor:default}.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"] }]
+        }], propDecorators: { branchId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], step: [{
+                type: Input,
+                args: [{ required: true }]
+            }], index: [{
+                type: Input,
+                args: [{ required: true }]
+            }], branchPriority: [{
+                type: Input,
+                args: [{ required: true }]
+            }], stepGroup: [{
+                type: Input,
+                args: [{ required: true }]
+            }], conditionalBranches: [{
+                type: Input
+            }], isRootLevelStepGroup: [{
+                type: Input
+            }], grandParentSteps: [{
+                type: Input
+            }], isInFallbackBranch: [{
+                type: Input
+            }], branchHeader: [{
+                type: ViewChild,
+                args: ['branchHeader']
+            }], branchName: [{
+                type: ViewChild,
+                args: ['branchName']
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], branchGroupRef: [{
+                type: ViewChild,
+                args: ['branchGroup']
+            }], topBridgeLineRef: [{
+                type: ViewChild,
+                args: ['topBridgeLine']
+            }], bottomBridgeLineRef: [{
+                type: ViewChild,
+                args: ['bottomBridgeLine']
+            }], branchColumnRefs: [{
+                type: ViewChildren,
+                args: ['branchColumn']
+            }] } });
+
+class WfStepsPreviewComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this.wfs = inject(CoreWorkflowService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfStepsPreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WfStepsPreviewComponent, isStandalone: true, selector: "wf-steps-preview", usesInheritance: true, ngImport: i0, template: "<div class=\"wf-steps-preview-container\">\r\n\r\n    @if (wfs.$stepsJsonPreview()) {\r\n        <div class=\"steps-tool\">\r\n            <button type=\"button\" class=\"btn-save-steps btn btn-secondary\" (click)=\"wfs.saveCurrentSteps()\">Save</button>\r\n        </div>\r\n        <pre class=\"json-preview\">{{ wfs.$stepsJsonPreview() }}</pre>\r\n    } @else {\r\n        <div class=\"empty-preview\">No steps to preview</div>\r\n    }\r\n\r\n</div>", styles: [".wf-steps-preview-container{padding:15px;box-shadow:var(--decoration-box-shadow)}.wf-steps-preview-container .steps-tool{margin-bottom:15px}.wf-steps-preview-container .steps-tool .btn-save-steps{border-radius:0;background-color:#000;color:#fff}.wf-steps-preview-container .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;font-family:Fira Code,monospace;font-size:.85rem;overflow-x:auto;line-height:1.5;width:100%;margin:0;white-space:pre-wrap;word-break:break-word}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfStepsPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-steps-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"wf-steps-preview-container\">\r\n\r\n    @if (wfs.$stepsJsonPreview()) {\r\n        <div class=\"steps-tool\">\r\n            <button type=\"button\" class=\"btn-save-steps btn btn-secondary\" (click)=\"wfs.saveCurrentSteps()\">Save</button>\r\n        </div>\r\n        <pre class=\"json-preview\">{{ wfs.$stepsJsonPreview() }}</pre>\r\n    } @else {\r\n        <div class=\"empty-preview\">No steps to preview</div>\r\n    }\r\n\r\n</div>", styles: [".wf-steps-preview-container{padding:15px;box-shadow:var(--decoration-box-shadow)}.wf-steps-preview-container .steps-tool{margin-bottom:15px}.wf-steps-preview-container .steps-tool .btn-save-steps{border-radius:0;background-color:#000;color:#fff}.wf-steps-preview-container .json-preview{background-color:#fff;color:#333;padding:1rem 1.5rem;font-family:Fira Code,monospace;font-size:.85rem;overflow-x:auto;line-height:1.5;width:100%;margin:0;white-space:pre-wrap;word-break:break-word}\n"] }]
+        }] });
+
+class WfWorkflowCanvasComponent extends BaseComponent {
+    constructor(mls) {
+        super(mls);
+        this.mls = mls;
+        this.$width = signal(0);
+        this.$height = signal(0);
+        this.$container = viewChild('container');
+        this.$printArea = viewChild('printArea');
+        this.$zoomTools = viewChild('zoomTools');
+        this.$parent = viewChild('parent');
+        this.hotKeys = ['F3', 'Escape'];
+        this.enumType = EnumWorkflowStepType;
+        this.ROOT_BRANCH_ID = ROOT_BRANCH_ID;
+        this.wfs = inject(CoreWorkflowService);
+        this.$steps = this.wfs.$currentSteps;
+        this.applicationHelpService = inject(ApplicationHelpService);
+        this.domService = inject(DomService);
+        this.insertIndex = null;
+        this.$previewZIndex = signal(this.domService.getMaxZIndex() + 1);
+        this.$scale = signal(1);
+        this.$scalePercent = computed(() => `${Math.round(this.$scale() * 100)}%`);
+        this.cdr = inject(ChangeDetectorRef);
+        this.$mouseDown = signal(false);
+        this.$isDragging = computed(() => this.$mouseDown());
+        this.$startX = signal(undefined);
+        this.$scrollLeft = signal(undefined);
+        this.$startY = signal(undefined);
+        this.$scrollTop = signal(undefined);
+        effect(() => {
+            this.$container()?.nativeElement.style.setProperty('--standard-connector-height', this.wfs.standardConnectorHeight + 'px');
+        });
+        this.subscriptions.push(this.applicationHelpService.activeKey$
+            .pipe(distinctUntilChanged())
+            .subscribe(x => {
+            console.log("x", x);
+            switch (x) {
+                case 'F3':
+                    this.wfs.$showCurrentStepsPreview.set(true);
+                    break;
+                case 'Escape':
+                    this.wfs.$currentStep.set(null);
+                    this.wfs.$showCurrentStepsPreview.set(false);
+                    this.wfs.$showStepConfig.set(false);
+                    break;
+            }
+        }));
+    }
+    startDragging(e, flag) {
+        this.$mouseDown.set(true);
+        this.$startX.set(e.pageX - this.$parent()?.nativeElement.offsetLeft);
+        this.$scrollLeft.set(this.$parent()?.nativeElement.scrollLeft);
+        this.$startY.set(e.pageY - this.$parent()?.nativeElement.offsetTop);
+        this.$scrollTop.set(this.$parent()?.nativeElement.scrollTop);
+    }
+    stopDragging(e, flag) {
+        this.$mouseDown.set(false);
+    }
+    moveEvent(e) {
+        e.preventDefault();
+        if (!this.$mouseDown()) {
+            return;
+        }
+        const x = e.pageX - this.$parent()?.nativeElement.offsetLeft;
+        const scrollX = x - this.$startX();
+        this.$parent().nativeElement.scrollLeft = this.$scrollLeft() - scrollX;
+        const y = e.pageY - this.$parent()?.nativeElement.offsetTop;
+        const scrollY = y - this.$startY();
+        this.$parent().nativeElement.scrollTop = this.$scrollTop() - scrollY;
+    }
+    ngAfterViewInit() {
+    }
+    findBranchById(branchId, steps = this.wfs.$currentSteps()) {
+        for (const step of steps) {
+            if (step.type === EnumWorkflowStepType.ConditionalBranch && step.branches) {
+                // ✅ step.branches is now just an array
+                const found = step.branches.find(b => b.id === branchId);
+                if (found)
+                    return found;
+                // 🔁 Recurse into steps of each branch
+                for (const branch of step.branches) {
+                    const deep = this.findBranchById(branchId, branch.steps);
+                    if (deep)
+                        return deep;
+                }
+            }
+        }
+        return undefined;
+    }
+    safeInsertStep(branchId, index, newStep) {
+        if (branchId === null || branchId === ROOT_BRANCH_ID) {
+            this.$steps.update(steps => {
+                const copy = [...steps];
+                copy.splice(index, 0, newStep);
+                return copy;
+            });
+            return;
+        }
+        const branch = this.findBranchById(branchId);
+        if (!branch) {
+            console.warn(`❗ Cannot insert: Branch with ID "${branchId}" not found.`);
+            return;
+        }
+        branch.steps.splice(index, 0, newStep);
+    }
+    insertStep(event) {
+        const { type, index, branchId } = event;
+        if (!branchId) {
+            console.error(`insertStep error: without branchId`);
+            return;
+        }
+        ;
+        let newStep;
+        switch (type) {
+            case EnumWorkflowStepType.Approval:
+                newStep = this.wfs.createStep(type, branchId, 'Set approver');
+                break;
+            case EnumWorkflowStepType.CC:
+                newStep = this.wfs.createStep(type, branchId, 'Set cc recipients');
+                break;
+            case EnumWorkflowStepType.Handle:
+                newStep = this.wfs.createStep(type, branchId, 'Set handler');
+                break;
+            case EnumWorkflowStepType.ConditionalBranch:
+                newStep = this.wfs.createConditionalBranchStep(branchId);
+                break;
+            default:
+                return;
+        }
+        this.safeInsertStep(branchId, index, newStep);
+        this.wfs.insertContext$.next(null);
+    }
+    showInsertInBranch(context) {
+        this.wfs.insertContext$.next(context);
+    }
+    insertIntoBranch(event) {
+        const { branchId, type, index } = event;
+        if (!branchId) {
+            console.error(`insertStep error: missing branchId`);
+            return;
+        }
+        // 🔍 Find the branch that matches the given ID
+        const branch = this.findBranchById(branchId);
+        if (!branch) {
+            console.warn(`Branch not found: ${branchId}`);
+            return;
+        }
+        let newStep;
+        switch (type) {
+            case EnumWorkflowStepType.Approval:
+                newStep = this.wfs.createStep(type, branchId, 'Set approver');
+                break;
+            case EnumWorkflowStepType.CC:
+                newStep = this.wfs.createStep(type, branchId, 'Set cc recipients');
+                break;
+            case EnumWorkflowStepType.Handle:
+                newStep = this.wfs.createStep(type, branchId, 'Set handler');
+                break;
+            case EnumWorkflowStepType.ConditionalBranch:
+                newStep = this.wfs.createConditionalBranchStep(branchId);
+                break;
+            default:
+                console.warn(`Unsupported step type: ${type}`);
+                return;
+        }
+        // ✅ Insert into the correct step list
+        branch.steps.splice(index, 0, newStep);
+        // 🧹 Clear insert state
+        this.wfs.insertContext$.next(null);
+    }
+    findStepRecursive(steps, targetId) {
+        for (const step of steps) {
+            if (step.id === targetId)
+                return step;
+            // ✅ New model: step.branches is directly an array
+            if (step.type === EnumWorkflowStepType.ConditionalBranch && step.branches) {
+                for (const branch of step.branches) {
+                    const found = this.findStepRecursive(branch.steps, targetId);
+                    if (found)
+                        return found;
+                }
+            }
+        }
+        return null;
+    }
+    addBranchToConditional(conditionalStepId) {
+        const conditional = this.findStepRecursive(this.wfs.$currentSteps(), conditionalStepId);
+        if (!conditional || conditional.type !== EnumWorkflowStepType.ConditionalBranch || !conditional.branches)
+            return;
+        const branches = conditional.branches;
+        const newBranchId = crypto.randomUUID();
+        const name = `Condition ${branches.length}`;
+        const newBranch = {
+            id: newBranchId,
+            name,
+            priority: branches.length + 1,
+            steps: [
+                {
+                    id: `pseudo-${newBranchId}`,
+                    name: `pseudo-${newBranchId}`,
+                    branchId: newBranchId,
+                    type: EnumWorkflowStepType.BranchCard,
+                    label: name,
+                    isPseudo: true
+                },
+                {
+                    id: crypto.randomUUID(),
+                    name: `default-approval-${branches.length + 1}`,
+                    branchId: newBranchId,
+                    type: EnumWorkflowStepType.Approval,
+                    label: `Approve ${branches.length + 1}`
+                }
+            ]
+        };
+        const fallbackIndex = branches.findIndex(b => b.isFallback);
+        if (fallbackIndex !== -1) {
+            branches.splice(fallbackIndex, 0, newBranch);
+        }
+        else {
+            branches.push(newBranch);
+        }
+        this.wfs.autoReassignPriorities(branches);
+    }
+    deleteBranchGroup(stepId) {
+        const step = this.wfs.$currentSteps().find(s => s.id === stepId);
+        if (step?.type === EnumWorkflowStepType.ConditionalBranch) {
+            const index = this.wfs.$currentSteps().indexOf(step);
+            if (index !== -1) {
+                this.$steps.update(steps => {
+                    const copy = [...steps];
+                    copy.splice(index, 1);
+                    return copy;
+                });
+            }
+        }
+    }
+    tempOnLabelClicked() {
+        this.wfs.$showStepConfig.set(true);
+    }
+    onInsert(event) {
+        // Delegate to CoreWorkflowService or your working tree logic
+        this.insertStep(event);
+        this.clearInsertContext(); // clean up
+    }
+    clearInsertContext() {
+        this.wfs.insertContext$.next(null);
+    }
+    showStepsJSON() {
+        this.wfs.$showCurrentStepsPreview.set(true);
+    }
+    zoonIn() {
+        this.$scale.set(this.$scale() * 1.1);
+        this.$container().nativeElement.style.setProperty('--print-area-scale', this.$scale());
+    }
+    zoonOut() {
+        this.$scale.set(this.$scale() / 1.1);
+        this.$container().nativeElement.style.setProperty('--print-area-scale', this.$scale());
+    }
+    zoonFeat() {
+        this.$scale.set(1);
+        this.$container().nativeElement.style.setProperty('--print-area-scale', this.$scale());
+    }
+    ngOnDestroy() {
+        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;cursor:default}.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfWorkflowCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-workflow-canvas', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AsyncPipe,
+                        NgStyle,
+                        HotKeysDirective,
+                        TooltipDirective,
+                        NgTemplateOutlet,
+                        LowerCasePipe,
+                        WfInsertMenuComponent,
+                        WfBottomVInsertComponent,
+                        WfInsertMenuComponent,
+                        WfStepConfigShellComponent,
+                        WfNodeComponent,
+                        WfStepsPreviewComponent
+                    ], 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;cursor:default}.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"] }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }] });
+
+class WfProcessDesignComponent extends BaseComponent {
+    constructor(mls, route) {
+        super(mls);
+        this.mls = mls;
+        this.route = route;
+        this.wfs = inject(CoreWorkflowService);
+        this.$loading = this.wfs.$loading;
+        const idDecrypted = this.route.snapshot.paramMap.get('id');
+        if (!!idDecrypted) {
+            this.id = atob(idDecrypted);
+        }
+        else {
+            this.id = null;
+        }
+    }
+    onCorePageHeaderButtonClicked(e) {
+        switch (e.code) {
+            case EnumCoreButtonVNSCode.HEADER_RESET:
+                this.wfs.$currentSteps.set(INITIAL_PROCESS_DEFINITION);
+                break;
+            case EnumCoreButtonVNSCode.HEADER_SAVE:
+                const currentFlow = this.wfs.$currentFlow();
+                if (!!currentFlow) {
+                    this.wfs.saveCurrentSteps();
+                }
+                break;
+        }
+    }
+    ngAfterViewInit() {
+        if (!!this.id) {
+            setTimeout(() => {
+                this.wfs.getById(this.id);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfProcessDesignComponent, deps: [{ token: MultiLanguageService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WfProcessDesignComponent, isStandalone: true, selector: "wf-process-design", usesInheritance: true, ngImport: i0, template: "<div class=\"wf-process-design-container\">\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_LIST\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n    @if (!!wfs.$currentFlow()) {\r\n    <p>{{ wfs.$currentFlow()!.name + ' > Process Design' }}</p>\r\n        <wf-workflow-canvas></wf-workflow-canvas>\r\n    }\r\n\r\n    @if ($loading()) {\r\n        <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n    }\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }, { kind: "component", type: WfWorkflowCanvasComponent, selector: "wf-workflow-canvas" }, { kind: "component", type: FullscreenModalLoaderComponent, selector: "app-fullscreen-modal-loader", inputs: ["content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfProcessDesignComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wf-process-design', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AsyncPipe,
+                        CorePageHeaderComponent,
+                        WfWorkflowCanvasComponent,
+                        FullscreenModalLoaderComponent
+                    ], template: "<div class=\"wf-process-design-container\">\r\n    <core-page-header title=\"UI.COMPONENT_TITLE.WORKFLOW_LIST\" (buttonClick)=\"onCorePageHeaderButtonClicked($event)\"></core-page-header>\r\n    @if (!!wfs.$currentFlow()) {\r\n    <p>{{ wfs.$currentFlow()!.name + ' > Process Design' }}</p>\r\n        <wf-workflow-canvas></wf-workflow-canvas>\r\n    }\r\n\r\n    @if ($loading()) {\r\n        <app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n    }\r\n</div>" }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: i1$1.ActivatedRoute }] });
+
+export { WfProcessDesignComponent };
+//# sourceMappingURL=ngx-histaff-alpha-wf-process-design.component-CQxxRCqC.mjs.map