ngx-histaff-alpha 5.2.2 → 5.2.3

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

@@ -1,1068 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, inject, ElementRef, ViewChild, Output, Component, Renderer2, Input, input, ChangeDetectionStrategy, output, signal, computed, effect, viewChild, ChangeDetectorRef, Injectable, Directive, ViewChildren } from '@angular/core';
-import { AsyncPipe, NgTemplateOutlet, LowerCasePipe } from '@angular/common';
-import { f as BaseComponent, w as CoreWorkflowService, z as EnumWorkflowStepType, M as MultiLanguageService, G 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, b as EnumCoreButtonVNSCode, c as CorePageHeaderComponent } from './ngx-histaff-alpha-ngx-histaff-alpha-DG1v69l1.mjs';
-import * as i1 from '@angular/forms';
-import { ReactiveFormsModule, FormGroup, FormArray, FormControl, FormsModule } from '@angular/forms';
-
-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;padding-top:50px;padding-bottom:50px;background-color:#f2f3f5}.wf-workflow-canvas-container .canvas{display:flex;flex-direction:column;align-items:center}.wf-workflow-canvas-container .step{text-align:center;position:relative}.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:\"\"}\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;padding-top:50px;padding-bottom:50px;background-color:#f2f3f5}.wf-workflow-canvas-container .canvas{display:flex;flex-direction:column;align-items:center}.wf-workflow-canvas-container .step{text-align:center;position:relative}.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:\"\"}\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),
-            type: new FormControl(null),
-            value: new FormControl(null),
-            relationalOperator: new FormControl('EQUAL'),
-            filters: new FormArray([])
-        });
-    }
-    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'),
-            filters: new FormArray([
-                this.trueLeaf()
-            ])
-        }));
-        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);
-        });
-        // Reaction effect: whenever form value changes
-        /*
-        effect(() => {
-          const formValue = this.$formValue();
-    
-          if (!formValue) return;
-    
-          const expr = this.getFilterString(formValue);
-          const json = JSON.stringify(this.$mainForm().getRawValue(), 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 '()';
-        if (filter.filters?.length === 1 && filter.filters[0]?.name === 'TRUE') {
-            return '(TRUE)';
-        }
-        // Special handling if only TRUE exists
-        if (filter.filters?.length === 1 && filter.filters[0].name === 'TRUE') {
-            return '(TRUE)';
-        }
-        let str = '(';
-        for (let i = 0; i < filter.filters?.length; i++) {
-            if (i > 0)
-                str += ` ${filter.logicalOperator} `;
-            if (filter.filters[i]?.filters?.length) {
-                str += this.getFilterString(filter.filters[i]);
-            }
-            else {
-                str += `${filter.filters[i].name} ${filter.filters[i].relationalOperator} ${filter.filters[i].value}`;
-            }
-        }
-        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) {
-            // Check if currently only TRUE node
-            if (filtersArray.length === 1 && filtersArray.at(0).value.name === 'TRUE') {
-                filtersArray.clear();
-            }
-            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) {
-            // switch (tryfind.controlType) {
-            //   case EnumFormBaseContolType.DATEPICKER:
-            //     tryfind.rangeLimit = {
-            //       minDate: new Date(1900, 0, 1),
-            //       maxDate: new Date(9999, 11, 31),
-            //     }
-            //     break;
-            // }
-        }
-        return tryfind;
-    }
-    trueLeaf() {
-        return new FormGroup({
-            name: new FormControl('TRUE'),
-            // type: new FormControl(null),
-            // value: new FormControl(null),
-            // relationalOperator: new FormControl('EQUAL'),
-            // filters: new FormArray([])
-        });
-    }
-    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;
-        });
-    }
-    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    <div class=\"dev-json-view\">\r\n        <pre class=\"json-preview\">{{ $rawValue() | 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    <div class=\"dev-json-view\">\r\n        <pre class=\"json-preview\">{{ $rawValue() | 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 }] });
-
-class WfStepConfigShellComponent {
-    constructor(coreWorkflowService, domService) {
-        this.coreWorkflowService = coreWorkflowService;
-        this.domService = domService;
-        this.$container = viewChild('container');
-        this.renderer = inject(Renderer2);
-        this.cdr = inject(ChangeDetectorRef);
-        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;
-            }
-        });
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.listenerFn = this.renderer.listen('window', 'click', (e) => {
-                const container = this.$container();
-                const target = e.target;
-                if (!!container &&
-                    !container.nativeElement.contains(target) &&
-                    !target.closest('.step-subtext')) {
-                    this.coreWorkflowService.$showStepConfig.set(false);
-                }
-                this.cdr.markForCheck();
-            });
-        });
-    }
-    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
-    }
-    ngOnDestroy() {
-        if (!!this.listenerFn)
-            this.listenerFn();
-    }
-    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      @if (!!$canRenderRuleTree()) {\r\n          <core-rule-tree \r\n            [$totalCols]=\"coreWorkflowService.$availableCols()\" \r\n            [$mainForm]=\"$stepFormGroup()\">\r\n          </core-rule-tree>        \r\n      } @else {\r\n        <div class=\"loading-placeholder\">\r\n          Loading Step Configuration...\r\n        </div>\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:16px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;font-weight:700;font-size:18px;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:16px;overflow-y:auto}.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"] }], 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,
-                        CoreDatePickerComponent
-                    ], 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      @if (!!$canRenderRuleTree()) {\r\n          <core-rule-tree \r\n            [$totalCols]=\"coreWorkflowService.$availableCols()\" \r\n            [$mainForm]=\"$stepFormGroup()\">\r\n          </core-rule-tree>        \r\n      } @else {\r\n        <div class=\"loading-placeholder\">\r\n          Loading Step Configuration...\r\n        </div>\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:16px;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;font-weight:700;font-size:18px;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:16px;overflow-y:auto}.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.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;
-    }
-    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) {
-        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);
-        }
-    }
-    onDeleteStep() {
-        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);
-    }
-    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", 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\" (blur)=\"onInputBlur()\" [(ngModel)]=\"step.name\" #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\" (blur)=\"onInputBlur()\" [(ngModel)]=\"step.name\" #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\" [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\r\n        <!-- <strong>{{ step.type }}</strong>\r\n        <div (click)=\"onLabelClicked()\">{{ step.label }}</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;padding-top:50px;padding-bottom:50px;background-color:#f2f3f5}.wf-workflow-canvas-container .canvas{display:flex;flex-direction:column;align-items:center}.wf-workflow-canvas-container .step{text-align:center;position:relative}.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:\"\"}\n", ""], dependencies: [{ kind: "component", type: WfNodeComponent, selector: "wf-node", inputs: ["branchId", "step", "index", "branchPriority", "stepGroup", "conditionalBranches", "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\" (blur)=\"onInputBlur()\" [(ngModel)]=\"step.name\" #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\" (blur)=\"onInputBlur()\" [(ngModel)]=\"step.name\" #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\" [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\r\n        <!-- <strong>{{ step.type }}</strong>\r\n        <div (click)=\"onLabelClicked()\">{{ step.label }}</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;padding-top:50px;padding-bottom:50px;background-color:#f2f3f5}.wf-workflow-canvas-container .canvas{display:flex;flex-direction:column;align-items:center}.wf-workflow-canvas-container .step{text-align:center;position:relative}.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:\"\"}\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
-            }], 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 WfWorkflowCanvasComponent extends BaseComponent {
-    constructor(mls) {
-        super(mls);
-        this.mls = mls;
-        this.$container = viewChild('container');
-        this.enumType = EnumWorkflowStepType;
-        this.ROOT_BRANCH_ID = ROOT_BRANCH_ID;
-        this.coreWorkflowService = inject(CoreWorkflowService);
-        this.$steps = signal([]);
-        this.insertIndex = null;
-        effect(() => {
-            this.$container()?.nativeElement.style.setProperty('--standard-connector-height', this.coreWorkflowService.standardConnectorHeight + 'px');
-        });
-        effect(() => {
-            this.$steps.set(this.coreWorkflowService.$currentSteps());
-        });
-    }
-    findBranchById(branchId, steps = this.$steps()) {
-        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 => {
-                steps.splice(index, 0, newStep);
-                return steps;
-            });
-            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.coreWorkflowService.createStep(type, branchId, 'Set approver');
-                break;
-            case EnumWorkflowStepType.CC:
-                newStep = this.coreWorkflowService.createStep(type, branchId, 'Set cc recipients');
-                break;
-            case EnumWorkflowStepType.Handle:
-                newStep = this.coreWorkflowService.createStep(type, branchId, 'Set handler');
-                break;
-            case EnumWorkflowStepType.ConditionalBranch:
-                newStep = this.coreWorkflowService.createConditionalBranchStep(branchId);
-                break;
-            default:
-                return;
-        }
-        this.safeInsertStep(branchId, index, newStep);
-        this.coreWorkflowService.insertContext$.next(null);
-    }
-    showInsertInBranch(context) {
-        this.coreWorkflowService.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.coreWorkflowService.createStep(type, branchId, 'Set approver');
-                break;
-            case EnumWorkflowStepType.CC:
-                newStep = this.coreWorkflowService.createStep(type, branchId, 'Set cc recipients');
-                break;
-            case EnumWorkflowStepType.Handle:
-                newStep = this.coreWorkflowService.createStep(type, branchId, 'Set handler');
-                break;
-            case EnumWorkflowStepType.ConditionalBranch:
-                newStep = this.coreWorkflowService.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.coreWorkflowService.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.$steps(), 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.coreWorkflowService.autoReassignPriorities(branches);
-    }
-    deleteBranchGroup(stepId) {
-        const step = this.$steps().find(s => s.id === stepId);
-        if (step?.type === EnumWorkflowStepType.ConditionalBranch) {
-            const index = this.$steps().indexOf(step);
-            if (index !== -1) {
-                this.$steps.update(steps => {
-                    steps.splice(index, 1);
-                    return steps;
-                });
-            }
-        }
-    }
-    tempOnLabelClicked() {
-        this.coreWorkflowService.$showStepConfig.set(true);
-    }
-    onInsert(event) {
-        // Delegate to CoreWorkflowService or your working tree logic
-        this.insertStep(event);
-        this.clearInsertContext(); // clean up
-    }
-    clearInsertContext() {
-        this.coreWorkflowService.insertContext$.next(null);
-    }
-    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 }], usesInheritance: true, ngImport: i0, template: "<div class=\"wf-workflow-canvas-container\" #container>\r\n\r\n  <div class=\"canvas\">\r\n\r\n    @for (step of $steps(); 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]=\"$steps()\"\r\n          [index]=\"i\"\r\n        ></wf-node>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  @if (!!(coreWorkflowService.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>\r\n\r\n\r\n<!-- <div class=\"wf-workflow-canvas-container\">\r\n\r\n  <div class=\"canvas\">\r\n\r\n    @for (step of coreWorkflowService.currentSteps$ | async; track $index; let i = $index) {\r\n    <div class=\"step\">\r\n\r\n      @if (step.type === enumType.ConditionalBranch && step.branches?.length) {\r\n        <div class=\"add-branch-inline\">\r\n          <button class=\"add-branch-btn\" (click)=\"addBranchToConditional(step.id)\">\r\n            \uFF0B Add New Branch\r\n          </button>\r\n        </div>\r\n\r\n        <wf-node\r\n          [branchId]=\"'root'\"\r\n          [branchPriority]=\"1\"\r\n          [step]=\"step\"\r\n          [index]=\"i\"\r\n        ></wf-node>\r\n\r\n      }\r\n      @else {\r\n        <wf-node\r\n          [branchId]=\"'root'\"\r\n          [branchPriority]=\"1\"\r\n          [step]=\"step\"\r\n          [index]=\"i\"\r\n        ></wf-node>\r\n      }\r\n\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  @if (!!(coreWorkflowService.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> -->\r\n", styles: [".wf-workflow-canvas-container{--standard-connector-height: 90px;padding-top:50px;padding-bottom:50px;background-color:#f2f3f5}.wf-workflow-canvas-container .canvas{display:flex;flex-direction:column;align-items:center}.wf-workflow-canvas-container .step{text-align:center;position:relative}.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:\"\"}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { 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", "grandParentSteps", "isInFallbackBranch"] }], 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,
-                        NgTemplateOutlet,
-                        LowerCasePipe,
-                        WfInsertMenuComponent,
-                        WfBottomVInsertComponent,
-                        WfInsertMenuComponent,
-                        WfStepConfigShellComponent,
-                        WfNodeComponent
-                    ], template: "<div class=\"wf-workflow-canvas-container\" #container>\r\n\r\n  <div class=\"canvas\">\r\n\r\n    @for (step of $steps(); 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]=\"$steps()\"\r\n          [index]=\"i\"\r\n        ></wf-node>\r\n      </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  @if (!!(coreWorkflowService.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>\r\n\r\n\r\n<!-- <div class=\"wf-workflow-canvas-container\">\r\n\r\n  <div class=\"canvas\">\r\n\r\n    @for (step of coreWorkflowService.currentSteps$ | async; track $index; let i = $index) {\r\n    <div class=\"step\">\r\n\r\n      @if (step.type === enumType.ConditionalBranch && step.branches?.length) {\r\n        <div class=\"add-branch-inline\">\r\n          <button class=\"add-branch-btn\" (click)=\"addBranchToConditional(step.id)\">\r\n            \uFF0B Add New Branch\r\n          </button>\r\n        </div>\r\n\r\n        <wf-node\r\n          [branchId]=\"'root'\"\r\n          [branchPriority]=\"1\"\r\n          [step]=\"step\"\r\n          [index]=\"i\"\r\n        ></wf-node>\r\n\r\n      }\r\n      @else {\r\n        <wf-node\r\n          [branchId]=\"'root'\"\r\n          [branchPriority]=\"1\"\r\n          [step]=\"step\"\r\n          [index]=\"i\"\r\n        ></wf-node>\r\n      }\r\n\r\n    </div>\r\n    }\r\n\r\n  </div>\r\n\r\n  @if (!!(coreWorkflowService.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> -->\r\n", styles: [".wf-workflow-canvas-container{--standard-connector-height: 90px;padding-top:50px;padding-bottom:50px;background-color:#f2f3f5}.wf-workflow-canvas-container .canvas{display:flex;flex-direction:column;align-items:center}.wf-workflow-canvas-container .step{text-align:center;position:relative}.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:\"\"}\n"] }]
-        }], ctorParameters: () => [{ type: MultiLanguageService }] });
-
-class WfProcessDesignComponent {
-    constructor(coreWorkflowService) {
-        this.coreWorkflowService = coreWorkflowService;
-    }
-    onCorePageHeaderButtonClicked(e) {
-        if (e.code === EnumCoreButtonVNSCode.HEADER_RESET) {
-            this.coreWorkflowService.$currentSteps.set([
-                {
-                    id: 'submit',
-                    name: 'submit',
-                    branchId: 'root',
-                    type: EnumWorkflowStepType.Submit,
-                    label: 'Submitted by: All members',
-                },
-                {
-                    id: 'brancher',
-                    name: 'brancher',
-                    branchId: 'root',
-                    type: EnumWorkflowStepType.ConditionalBranch,
-                    label: 'Set branch logic',
-                    branches: [
-                        {
-                            id: 'b1',
-                            name: 'Condition 1',
-                            priority: 1,
-                            steps: [
-                                {
-                                    id: 'pseudo-b1',
-                                    name: 'pseudo-b1',
-                                    branchId: 'b1',
-                                    type: EnumWorkflowStepType.BranchCard,
-                                    label: 'Condition 1',
-                                    isPseudo: true
-                                },
-                                {
-                                    id: 'a1',
-                                    name: 'a1',
-                                    branchId: 'b1',
-                                    type: EnumWorkflowStepType.Approval,
-                                    label: 'Approve A'
-                                }
-                            ]
-                        },
-                        {
-                            id: 'b2',
-                            isFallback: true,
-                            name: 'Fallback',
-                            priority: 2,
-                            steps: [
-                                {
-                                    id: 'pseudo-b2',
-                                    name: 'Fallback-b2',
-                                    branchId: 'b2',
-                                    type: EnumWorkflowStepType.BranchCard,
-                                    label: '[Fallback Branch]',
-                                    config: { isFallback: true },
-                                    isInFallbackBranch: true,
-                                    isPseudo: true
-                                },
-                                {
-                                    id: 'a2',
-                                    name: 'a2',
-                                    branchId: 'b2',
-                                    type: EnumWorkflowStepType.Approval,
-                                    label: 'Fallback Approver',
-                                    isInFallbackBranch: true
-                                }
-                            ]
-                        }
-                    ]
-                },
-                {
-                    id: 'end',
-                    name: 'end',
-                    branchId: 'root',
-                    type: EnumWorkflowStepType.End,
-                    label: 'Workflow completed',
-                }
-            ]);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WfProcessDesignComponent, deps: [{ token: CoreWorkflowService }], 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", 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 (!!coreWorkflowService.$currentFlow()) {\r\n    <p>{{ coreWorkflowService.$currentFlow()!.name + ' > Process Design' }}</p>\r\n        <wf-workflow-canvas></wf-workflow-canvas>\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" }], 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
-                    ], 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 (!!coreWorkflowService.$currentFlow()) {\r\n    <p>{{ coreWorkflowService.$currentFlow()!.name + ' > Process Design' }}</p>\r\n        <wf-workflow-canvas></wf-workflow-canvas>\r\n    }\r\n</div>" }]
-        }], ctorParameters: () => [{ type: CoreWorkflowService }] });
-
-export { WfProcessDesignComponent };
-//# sourceMappingURL=ngx-histaff-alpha-wf-process-design.component-D9Ba7Fkx.mjs.map