npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.181 → 0.0.182 - Mend

@tuki-io/tuki-widgets 0.0.181 → 0.0.182

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/fesm2020/tuki-io-tuki-widgets-contact-center.mjs CHANGED Viewed

@@ -1974,10 +1974,10 @@ class WxCCFlowchartComponent {
     }
 }
 WxCCFlowchartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartComponent, deps: [{ token: WxCC2GraphService }, { token: CytoscapeViewportService }, { token: i1$2.MatDialog }, { token: WxCCActivityCreationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-WxCCFlowchartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WxCCFlowchartComponent, selector: "wxcc-flowchart", inputs: { flowchart: "flowchart" }, viewQueries: [{ propertyName: "flowchartContainer", first: true, predicate: ["flowchartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wxcc-flowchart-container\">\r\n  <div #flowchartContainer class=\"flowchart-canvas\"></div>\r\n\r\n  <!-- Floating toolbar for viewport controls -->\r\n  <graph-floating-toolbar\r\n    [visibility]=\"{ export: false }\"\r\n    (resetViewChange)=\"resetView()\"\r\n    (zoomInChange)=\"zoomIn()\"\r\n    (zoomOutChange)=\"zoomOut()\">\r\n  </graph-floating-toolbar>\r\n\r\n  <!-- Graph Acts -->\r\n  <div class=\"graph-actions-wrapper\">\r\n    <button\r\n      class=\"add-node-btn\"\r\n      matTooltip=\"Search workflow\"\r\n      matTooltipPosition=\"above\"\r\n      (click)=\"toggleSearchPanel()\"\r\n    >\r\n      <img src=\"assets/wxcc/search.svg\" width=\"28\" height=\"28\" alt=\"\" />\r\n    </button>\r\n    <button\r\n      class=\"add-node-btn\"\r\n      matTooltip=\"Add New Node\"\r\n      matTooltipPosition=\"above\"\r\n      (click)=\"openAddNodeDialog()\"\r\n    >\r\n      <svg\r\n        width=\"28\"\r\n        height=\"28\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\r\n        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <button\r\n    *ngIf=\"selectedEdgeId && selectedEdgeDeleteButtonPosition\"\r\n    class=\"edge-delete-btn\"\r\n    matTooltip=\"Delete this edge\"\r\n    matTooltipPosition=\"above\"\r\n    [style.left.px]=\"selectedEdgeDeleteButtonPosition.x\"\r\n    [style.top.px]=\"selectedEdgeDeleteButtonPosition.y\"\r\n    (click)=\"onDeleteSelectedEdge()\"\r\n    type=\"button\"\r\n    aria-label=\"Delete selected edge\"\r\n  >\r\n    \u00D7\r\n  </button>\r\n\r\n  <node-search-panel\r\n    class=\"fade-in-search-panel\"\r\n    [class.visible]=\"isSearchPanelVisible\"\r\n    [nodes]=\"activities\"\r\n    (selectNodeChange)=\"onNodeSelectChange($event)\"\r\n    (searchChange)=\"openAddNodeDialog()\"\r\n  >\r\n  </node-search-panel>\r\n\r\n  <!-- Node action toolbar (floating near selected node) -->\r\n  <node-action-toolbar\r\n    [isVisible]=\"isNodeToolbarVisible\"\r\n    [position]=\"nodeToolbarPosition\"\r\n    (deleteNode)=\"onDeleteNode()\"\r\n    (linkNode)=\"onLinkNodeRequest()\"\r\n  >\r\n  </node-action-toolbar>\r\n\r\n  <!-- Node details sidebar -->\r\n  <node-details-sidebar\r\n    [isOpen]=\"isSidebarOpen\"\r\n    [nodeData]=\"selectedNodeData\"\r\n    (close)=\"onCloseSidebar()\"\r\n    (descriptionChange)=\"onDescriptionChange($event)\"\r\n    (activityTypeChange)=\"onActivityTypeChange($event)\"\r\n  >\r\n  </node-details-sidebar>\r\n</div>\r\n", styles: [".fade-in-search-panel{position:absolute;top:0;left:0;right:0;margin:0 auto;z-index:1000;opacity:0;pointer-events:none;transform:translateY(-40px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}.fade-in-search-panel.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.close-search-panel{position:absolute;top:10px;right:16px;background:transparent;border:none;font-size:2rem;color:#333;cursor:pointer;z-index:1100}:host ::ng-deep .node-content.highlighted{border-radius:10px;z-index:10}:host ::ng-deep .node-content.highlighted{position:relative;z-index:10}:host ::ng-deep .node-content.highlighted:after{content:\"\";position:absolute;inset:-14px;border:4px solid rgba(110,110,110,.4705882353);border-radius:13px;pointer-events:none;opacity:1}:host ::ng-deep .node-content:not(.highlighted):after{opacity:0}:host{display:block;overflow:hidden;width:100%;height:100%}.wxcc-flowchart-container{display:flex;flex-direction:column;position:relative;background-color:#f8f9fa;border-radius:.5rem;border:1px solid #e1e4e8;box-sizing:border-box;height:100%;min-height:600px}.wxcc-flowchart-container .flowchart-canvas{height:100%;background:linear-gradient(90deg,rgba(200,200,200,.1) 1px,transparent 1px),linear-gradient(rgba(200,200,200,.1) 1px,transparent 1px);background-size:20px 20px}.wxcc-flowchart-container .add-node-btn{outline:none;border:none;border-radius:.5rem;background-color:#f6f6f6;padding:.5rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;transition:all .2s ease}.wxcc-flowchart-container .add-node-btn:hover{background-color:#eefff8;transform:scale(1.05)}.wxcc-flowchart-container .add-node-btn:active{transform:scale(.95)}.edge-delete-btn{position:absolute;z-index:1100;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:1px solid #cc3d36;background:#fff;color:#cc3d36;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000002e}.edge-delete-btn:hover{background:#fff1f0;transform:translate(-50%,-50%) scale(1.08)}.edge-delete-btn:active{transform:translate(-50%,-50%) scale(.95)}:host ::ng-deep .node-content{cursor:pointer;display:flex;justify-content:center;flex-direction:column;gap:.5rem;padding:.5rem;background:white;border-radius:6px;border:1px solid #d8d8d8;border-left:4px solid;min-width:200px;transition:all .2s ease}:host ::ng-deep .node-content header{display:flex;align-items:center;gap:.5rem}:host ::ng-deep .node-content img{width:18px;height:18px}:host ::ng-deep .node-content .node-icon{font-size:24px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.5rem;flex-shrink:0}:host ::ng-deep .node-content .node-info{flex:1;min-width:0}:host ::ng-deep .node-content .node-info .node-label{font-size:16px;letter-spacing:.5px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-info .node-activity-name{font-size:12px;color:#99a5b1;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-details{font-size:12px;color:#000;padding:0 .25rem;display:flex;flex-direction:column;gap:.25rem}:host ::ng-deep .node-content .node-details .node-details-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}:host ::ng-deep .node-content .node-details .review-red{background-color:#ffe6e6;border-left-color:#f44336;color:#f44336;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-green{background-color:#e6ffe6;border-left-color:#4caf50;color:#4caf50;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-yellow{background-color:#fff9e6;border-left-color:#ff9800;color:#ff9800;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content.node-start{border-left-color:#4caf50}:host ::ng-deep .node-content.node-start .node-icon{background-color:#4caf501a;color:#4caf50}:host ::ng-deep .node-content.node-start .node-label{color:#4caf50}:host ::ng-deep .node-content.node-end{border-left-color:#f44336}:host ::ng-deep .node-content.node-end .node-icon{background-color:#f443361a;color:#f44336}:host ::ng-deep .node-content.node-end .node-label{color:#f44336}:host ::ng-deep .node-content.node-gateway{border-left-color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-icon{background-color:#ff98001a;color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-label{color:#ff9800}:host ::ng-deep .node-content.node-action{border-left-color:#9c27b0}:host ::ng-deep .node-content.node-action .node-icon{background-color:#9c27b01a;color:#9c27b0}:host ::ng-deep .node-content.node-action .node-label{color:#9c27b0}:host ::ng-deep .node-content.node-default{border-left-color:#607d8b}:host ::ng-deep .node-content.node-default .node-icon{background-color:#607d8b1a;color:#607d8b}:host ::ng-deep .node-content.node-default .node-label{color:#607d8b}.graph-actions-wrapper{position:absolute;right:1rem;top:1rem;display:flex;align-items:center;gap:.5rem;box-shadow:2px 4px 15px #0000002d;padding:8px;background-color:#ffffffac;border-radius:1rem;z-index:999}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FloatingToolBarComponent, selector: "graph-floating-toolbar", inputs: ["visibility"], outputs: ["resetViewChange", "zoomInChange", "zoomOutChange", "exportImageChange"] }, { kind: "component", type: NodeDetailsSidebarComponent, selector: "node-details-sidebar", inputs: ["isOpen", "nodeData"], outputs: ["close", "activityTypeChange", "descriptionChange"] }, { kind: "component", type: NodeActionToolbarComponent, selector: "node-action-toolbar", inputs: ["isVisible", "position"], outputs: ["deleteNode", "linkNode"] }, { kind: "component", type: NodeSearchPanelComponent, selector: "node-search-panel", inputs: ["nodes"], outputs: ["searchChange", "selectNodeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+WxCCFlowchartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WxCCFlowchartComponent, selector: "wxcc-flowchart", inputs: { flowchart: "flowchart" }, viewQueries: [{ propertyName: "flowchartContainer", first: true, predicate: ["flowchartContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"wxcc-flowchart-container\">\r\n  <div #flowchartContainer class=\"flowchart-canvas\"></div>\r\n\r\n  <!-- Floating toolbar for viewport controls -->\r\n  <graph-floating-toolbar\r\n    [visibility]=\"{ export: false }\"\r\n    (resetViewChange)=\"resetView()\"\r\n    (zoomInChange)=\"zoomIn()\"\r\n    (zoomOutChange)=\"zoomOut()\">\r\n  </graph-floating-toolbar>\r\n\r\n  <!-- Graph Acts -->\r\n  <div class=\"graph-actions-wrapper\">\r\n    <button\r\n      class=\"add-node-btn\"\r\n      matTooltip=\"Search workflow\"\r\n      matTooltipPosition=\"above\"\r\n      (click)=\"toggleSearchPanel()\"\r\n    >\r\n      <img src=\"assets/wxcc/search.svg\" width=\"28\" height=\"28\" alt=\"\" />\r\n    </button>\r\n    <button\r\n      class=\"add-node-btn\"\r\n      matTooltip=\"Add New Node\"\r\n      matTooltipPosition=\"above\"\r\n      (click)=\"openAddNodeDialog()\"\r\n    >\r\n      <svg\r\n        width=\"28\"\r\n        height=\"28\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\r\n        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <button\r\n    *ngIf=\"selectedEdgeId && selectedEdgeDeleteButtonPosition\"\r\n    class=\"edge-delete-btn\"\r\n    matTooltip=\"Delete this edge\"\r\n    matTooltipPosition=\"above\"\r\n    [style.left.px]=\"selectedEdgeDeleteButtonPosition.x\"\r\n    [style.top.px]=\"selectedEdgeDeleteButtonPosition.y\"\r\n    (click)=\"onDeleteSelectedEdge()\"\r\n    type=\"button\"\r\n    aria-label=\"Delete selected edge\"\r\n  >\r\n    \u00D7\r\n  </button>\r\n\r\n  <node-search-panel\r\n    class=\"fade-in-search-panel\"\r\n    [class.visible]=\"isSearchPanelVisible\"\r\n    [nodes]=\"activities\"\r\n    (selectNodeChange)=\"onNodeSelectChange($event)\"\r\n    (searchChange)=\"openAddNodeDialog()\"\r\n  >\r\n  </node-search-panel>\r\n\r\n  <!-- Node action toolbar (floating near selected node) -->\r\n  <node-action-toolbar\r\n    [isVisible]=\"isNodeToolbarVisible\"\r\n    [position]=\"nodeToolbarPosition\"\r\n    (deleteNode)=\"onDeleteNode()\"\r\n    (linkNode)=\"onLinkNodeRequest()\"\r\n  >\r\n  </node-action-toolbar>\r\n\r\n  <!-- Node details sidebar -->\r\n  <node-details-sidebar\r\n    [isOpen]=\"isSidebarOpen\"\r\n    [nodeData]=\"selectedNodeData\"\r\n    (close)=\"onCloseSidebar()\"\r\n    (descriptionChange)=\"onDescriptionChange($event)\"\r\n    (activityTypeChange)=\"onActivityTypeChange($event)\"\r\n  >\r\n  </node-details-sidebar>\r\n</div>\r\n", styles: [".fade-in-search-panel{position:absolute;top:0;left:0;right:0;margin:0 auto;z-index:1000;opacity:0;pointer-events:none;transform:translateY(-40px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}.fade-in-search-panel.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.close-search-panel{position:absolute;top:10px;right:16px;background:transparent;border:none;font-size:2rem;color:#333;cursor:pointer;z-index:1100}:host ::ng-deep .node-content.highlighted{border-radius:10px;z-index:10}:host ::ng-deep .node-content.highlighted{position:relative;z-index:10}:host ::ng-deep .node-content.highlighted:after{content:\"\";position:absolute;inset:-14px;border:4px solid rgba(110,110,110,.4705882353);border-radius:13px;pointer-events:none;opacity:1}:host ::ng-deep .node-content:not(.highlighted):after{opacity:0}:host{display:block;overflow:hidden;width:100%;height:100%}.wxcc-flowchart-container{display:flex;flex-direction:column;position:relative;background-color:#f8f9fa;border-radius:.5rem;border:1px solid #e1e4e8;box-sizing:border-box;height:100%;min-height:600px}.wxcc-flowchart-container .flowchart-canvas{height:100%;min-height:600px;background:linear-gradient(90deg,rgba(200,200,200,.1) 1px,transparent 1px),linear-gradient(rgba(200,200,200,.1) 1px,transparent 1px);background-size:20px 20px}.wxcc-flowchart-container .add-node-btn{outline:none;border:none;border-radius:.5rem;background-color:#f6f6f6;padding:.5rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;transition:all .2s ease}.wxcc-flowchart-container .add-node-btn:hover{background-color:#eefff8;transform:scale(1.05)}.wxcc-flowchart-container .add-node-btn:active{transform:scale(.95)}.edge-delete-btn{position:absolute;z-index:1100;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:1px solid #cc3d36;background:#fff;color:#cc3d36;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000002e}.edge-delete-btn:hover{background:#fff1f0;transform:translate(-50%,-50%) scale(1.08)}.edge-delete-btn:active{transform:translate(-50%,-50%) scale(.95)}:host ::ng-deep .node-content{cursor:pointer;display:flex;justify-content:center;flex-direction:column;gap:.5rem;padding:.5rem;background:white;border-radius:6px;border:1px solid #d8d8d8;border-left:4px solid;min-width:200px;transition:all .2s ease}:host ::ng-deep .node-content header{display:flex;align-items:center;gap:.5rem}:host ::ng-deep .node-content img{width:18px;height:18px}:host ::ng-deep .node-content .node-icon{font-size:24px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.5rem;flex-shrink:0}:host ::ng-deep .node-content .node-info{flex:1;min-width:0}:host ::ng-deep .node-content .node-info .node-label{font-size:16px;letter-spacing:.5px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-info .node-activity-name{font-size:12px;color:#99a5b1;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-details{font-size:12px;color:#000;padding:0 .25rem;display:flex;flex-direction:column;gap:.25rem}:host ::ng-deep .node-content .node-details .node-details-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}:host ::ng-deep .node-content .node-details .review-red{background-color:#ffe6e6;border-left-color:#f44336;color:#f44336;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-green{background-color:#e6ffe6;border-left-color:#4caf50;color:#4caf50;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-yellow{background-color:#fff9e6;border-left-color:#ff9800;color:#ff9800;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content.node-start{border-left-color:#4caf50}:host ::ng-deep .node-content.node-start .node-icon{background-color:#4caf501a;color:#4caf50}:host ::ng-deep .node-content.node-start .node-label{color:#4caf50}:host ::ng-deep .node-content.node-end{border-left-color:#f44336}:host ::ng-deep .node-content.node-end .node-icon{background-color:#f443361a;color:#f44336}:host ::ng-deep .node-content.node-end .node-label{color:#f44336}:host ::ng-deep .node-content.node-gateway{border-left-color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-icon{background-color:#ff98001a;color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-label{color:#ff9800}:host ::ng-deep .node-content.node-action{border-left-color:#9c27b0}:host ::ng-deep .node-content.node-action .node-icon{background-color:#9c27b01a;color:#9c27b0}:host ::ng-deep .node-content.node-action .node-label{color:#9c27b0}:host ::ng-deep .node-content.node-default{border-left-color:#607d8b}:host ::ng-deep .node-content.node-default .node-icon{background-color:#607d8b1a;color:#607d8b}:host ::ng-deep .node-content.node-default .node-label{color:#607d8b}.graph-actions-wrapper{position:absolute;right:1rem;top:1rem;display:flex;align-items:center;gap:.5rem;box-shadow:2px 4px 15px #0000002d;padding:8px;background-color:#ffffffac;border-radius:1rem;z-index:999}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FloatingToolBarComponent, selector: "graph-floating-toolbar", inputs: ["visibility"], outputs: ["resetViewChange", "zoomInChange", "zoomOutChange", "exportImageChange"] }, { kind: "component", type: NodeDetailsSidebarComponent, selector: "node-details-sidebar", inputs: ["isOpen", "nodeData"], outputs: ["close", "activityTypeChange", "descriptionChange"] }, { kind: "component", type: NodeActionToolbarComponent, selector: "node-action-toolbar", inputs: ["isVisible", "position"], outputs: ["deleteNode", "linkNode"] }, { kind: "component", type: NodeSearchPanelComponent, selector: "node-search-panel", inputs: ["nodes"], outputs: ["searchChange", "selectNodeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartComponent, decorators: [{
             type: Component,
-            args: [{ selector: "wxcc-flowchart", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wxcc-flowchart-container\">\r\n  <div #flowchartContainer class=\"flowchart-canvas\"></div>\r\n\r\n  <!-- Floating toolbar for viewport controls -->\r\n  <graph-floating-toolbar\r\n    [visibility]=\"{ export: false }\"\r\n    (resetViewChange)=\"resetView()\"\r\n    (zoomInChange)=\"zoomIn()\"\r\n    (zoomOutChange)=\"zoomOut()\">\r\n  </graph-floating-toolbar>\r\n\r\n  <!-- Graph Acts -->\r\n  <div class=\"graph-actions-wrapper\">\r\n    <button\r\n      class=\"add-node-btn\"\r\n      matTooltip=\"Search workflow\"\r\n      matTooltipPosition=\"above\"\r\n      (click)=\"toggleSearchPanel()\"\r\n    >\r\n      <img src=\"assets/wxcc/search.svg\" width=\"28\" height=\"28\" alt=\"\" />\r\n    </button>\r\n    <button\r\n      class=\"add-node-btn\"\r\n      matTooltip=\"Add New Node\"\r\n      matTooltipPosition=\"above\"\r\n      (click)=\"openAddNodeDialog()\"\r\n    >\r\n      <svg\r\n        width=\"28\"\r\n        height=\"28\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\r\n        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <button\r\n    *ngIf=\"selectedEdgeId && selectedEdgeDeleteButtonPosition\"\r\n    class=\"edge-delete-btn\"\r\n    matTooltip=\"Delete this edge\"\r\n    matTooltipPosition=\"above\"\r\n    [style.left.px]=\"selectedEdgeDeleteButtonPosition.x\"\r\n    [style.top.px]=\"selectedEdgeDeleteButtonPosition.y\"\r\n    (click)=\"onDeleteSelectedEdge()\"\r\n    type=\"button\"\r\n    aria-label=\"Delete selected edge\"\r\n  >\r\n    \u00D7\r\n  </button>\r\n\r\n  <node-search-panel\r\n    class=\"fade-in-search-panel\"\r\n    [class.visible]=\"isSearchPanelVisible\"\r\n    [nodes]=\"activities\"\r\n    (selectNodeChange)=\"onNodeSelectChange($event)\"\r\n    (searchChange)=\"openAddNodeDialog()\"\r\n  >\r\n  </node-search-panel>\r\n\r\n  <!-- Node action toolbar (floating near selected node) -->\r\n  <node-action-toolbar\r\n    [isVisible]=\"isNodeToolbarVisible\"\r\n    [position]=\"nodeToolbarPosition\"\r\n    (deleteNode)=\"onDeleteNode()\"\r\n    (linkNode)=\"onLinkNodeRequest()\"\r\n  >\r\n  </node-action-toolbar>\r\n\r\n  <!-- Node details sidebar -->\r\n  <node-details-sidebar\r\n    [isOpen]=\"isSidebarOpen\"\r\n    [nodeData]=\"selectedNodeData\"\r\n    (close)=\"onCloseSidebar()\"\r\n    (descriptionChange)=\"onDescriptionChange($event)\"\r\n    (activityTypeChange)=\"onActivityTypeChange($event)\"\r\n  >\r\n  </node-details-sidebar>\r\n</div>\r\n", styles: [".fade-in-search-panel{position:absolute;top:0;left:0;right:0;margin:0 auto;z-index:1000;opacity:0;pointer-events:none;transform:translateY(-40px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}.fade-in-search-panel.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.close-search-panel{position:absolute;top:10px;right:16px;background:transparent;border:none;font-size:2rem;color:#333;cursor:pointer;z-index:1100}:host ::ng-deep .node-content.highlighted{border-radius:10px;z-index:10}:host ::ng-deep .node-content.highlighted{position:relative;z-index:10}:host ::ng-deep .node-content.highlighted:after{content:\"\";position:absolute;inset:-14px;border:4px solid rgba(110,110,110,.4705882353);border-radius:13px;pointer-events:none;opacity:1}:host ::ng-deep .node-content:not(.highlighted):after{opacity:0}:host{display:block;overflow:hidden;width:100%;height:100%}.wxcc-flowchart-container{display:flex;flex-direction:column;position:relative;background-color:#f8f9fa;border-radius:.5rem;border:1px solid #e1e4e8;box-sizing:border-box;height:100%;min-height:600px}.wxcc-flowchart-container .flowchart-canvas{height:100%;background:linear-gradient(90deg,rgba(200,200,200,.1) 1px,transparent 1px),linear-gradient(rgba(200,200,200,.1) 1px,transparent 1px);background-size:20px 20px}.wxcc-flowchart-container .add-node-btn{outline:none;border:none;border-radius:.5rem;background-color:#f6f6f6;padding:.5rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;transition:all .2s ease}.wxcc-flowchart-container .add-node-btn:hover{background-color:#eefff8;transform:scale(1.05)}.wxcc-flowchart-container .add-node-btn:active{transform:scale(.95)}.edge-delete-btn{position:absolute;z-index:1100;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:1px solid #cc3d36;background:#fff;color:#cc3d36;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000002e}.edge-delete-btn:hover{background:#fff1f0;transform:translate(-50%,-50%) scale(1.08)}.edge-delete-btn:active{transform:translate(-50%,-50%) scale(.95)}:host ::ng-deep .node-content{cursor:pointer;display:flex;justify-content:center;flex-direction:column;gap:.5rem;padding:.5rem;background:white;border-radius:6px;border:1px solid #d8d8d8;border-left:4px solid;min-width:200px;transition:all .2s ease}:host ::ng-deep .node-content header{display:flex;align-items:center;gap:.5rem}:host ::ng-deep .node-content img{width:18px;height:18px}:host ::ng-deep .node-content .node-icon{font-size:24px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.5rem;flex-shrink:0}:host ::ng-deep .node-content .node-info{flex:1;min-width:0}:host ::ng-deep .node-content .node-info .node-label{font-size:16px;letter-spacing:.5px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-info .node-activity-name{font-size:12px;color:#99a5b1;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-details{font-size:12px;color:#000;padding:0 .25rem;display:flex;flex-direction:column;gap:.25rem}:host ::ng-deep .node-content .node-details .node-details-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}:host ::ng-deep .node-content .node-details .review-red{background-color:#ffe6e6;border-left-color:#f44336;color:#f44336;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-green{background-color:#e6ffe6;border-left-color:#4caf50;color:#4caf50;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-yellow{background-color:#fff9e6;border-left-color:#ff9800;color:#ff9800;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content.node-start{border-left-color:#4caf50}:host ::ng-deep .node-content.node-start .node-icon{background-color:#4caf501a;color:#4caf50}:host ::ng-deep .node-content.node-start .node-label{color:#4caf50}:host ::ng-deep .node-content.node-end{border-left-color:#f44336}:host ::ng-deep .node-content.node-end .node-icon{background-color:#f443361a;color:#f44336}:host ::ng-deep .node-content.node-end .node-label{color:#f44336}:host ::ng-deep .node-content.node-gateway{border-left-color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-icon{background-color:#ff98001a;color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-label{color:#ff9800}:host ::ng-deep .node-content.node-action{border-left-color:#9c27b0}:host ::ng-deep .node-content.node-action .node-icon{background-color:#9c27b01a;color:#9c27b0}:host ::ng-deep .node-content.node-action .node-label{color:#9c27b0}:host ::ng-deep .node-content.node-default{border-left-color:#607d8b}:host ::ng-deep .node-content.node-default .node-icon{background-color:#607d8b1a;color:#607d8b}:host ::ng-deep .node-content.node-default .node-label{color:#607d8b}.graph-actions-wrapper{position:absolute;right:1rem;top:1rem;display:flex;align-items:center;gap:.5rem;box-shadow:2px 4px 15px #0000002d;padding:8px;background-color:#ffffffac;border-radius:1rem;z-index:999}\n"] }]
+            args: [{ selector: "wxcc-flowchart", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wxcc-flowchart-container\">\r\n  <div #flowchartContainer class=\"flowchart-canvas\"></div>\r\n\r\n  <!-- Floating toolbar for viewport controls -->\r\n  <graph-floating-toolbar\r\n    [visibility]=\"{ export: false }\"\r\n    (resetViewChange)=\"resetView()\"\r\n    (zoomInChange)=\"zoomIn()\"\r\n    (zoomOutChange)=\"zoomOut()\">\r\n  </graph-floating-toolbar>\r\n\r\n  <!-- Graph Acts -->\r\n  <div class=\"graph-actions-wrapper\">\r\n    <button\r\n      class=\"add-node-btn\"\r\n      matTooltip=\"Search workflow\"\r\n      matTooltipPosition=\"above\"\r\n      (click)=\"toggleSearchPanel()\"\r\n    >\r\n      <img src=\"assets/wxcc/search.svg\" width=\"28\" height=\"28\" alt=\"\" />\r\n    </button>\r\n    <button\r\n      class=\"add-node-btn\"\r\n      matTooltip=\"Add New Node\"\r\n      matTooltipPosition=\"above\"\r\n      (click)=\"openAddNodeDialog()\"\r\n    >\r\n      <svg\r\n        width=\"28\"\r\n        height=\"28\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n      >\r\n        <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\r\n        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n\r\n  <button\r\n    *ngIf=\"selectedEdgeId && selectedEdgeDeleteButtonPosition\"\r\n    class=\"edge-delete-btn\"\r\n    matTooltip=\"Delete this edge\"\r\n    matTooltipPosition=\"above\"\r\n    [style.left.px]=\"selectedEdgeDeleteButtonPosition.x\"\r\n    [style.top.px]=\"selectedEdgeDeleteButtonPosition.y\"\r\n    (click)=\"onDeleteSelectedEdge()\"\r\n    type=\"button\"\r\n    aria-label=\"Delete selected edge\"\r\n  >\r\n    \u00D7\r\n  </button>\r\n\r\n  <node-search-panel\r\n    class=\"fade-in-search-panel\"\r\n    [class.visible]=\"isSearchPanelVisible\"\r\n    [nodes]=\"activities\"\r\n    (selectNodeChange)=\"onNodeSelectChange($event)\"\r\n    (searchChange)=\"openAddNodeDialog()\"\r\n  >\r\n  </node-search-panel>\r\n\r\n  <!-- Node action toolbar (floating near selected node) -->\r\n  <node-action-toolbar\r\n    [isVisible]=\"isNodeToolbarVisible\"\r\n    [position]=\"nodeToolbarPosition\"\r\n    (deleteNode)=\"onDeleteNode()\"\r\n    (linkNode)=\"onLinkNodeRequest()\"\r\n  >\r\n  </node-action-toolbar>\r\n\r\n  <!-- Node details sidebar -->\r\n  <node-details-sidebar\r\n    [isOpen]=\"isSidebarOpen\"\r\n    [nodeData]=\"selectedNodeData\"\r\n    (close)=\"onCloseSidebar()\"\r\n    (descriptionChange)=\"onDescriptionChange($event)\"\r\n    (activityTypeChange)=\"onActivityTypeChange($event)\"\r\n  >\r\n  </node-details-sidebar>\r\n</div>\r\n", styles: [".fade-in-search-panel{position:absolute;top:0;left:0;right:0;margin:0 auto;z-index:1000;opacity:0;pointer-events:none;transform:translateY(-40px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}.fade-in-search-panel.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.close-search-panel{position:absolute;top:10px;right:16px;background:transparent;border:none;font-size:2rem;color:#333;cursor:pointer;z-index:1100}:host ::ng-deep .node-content.highlighted{border-radius:10px;z-index:10}:host ::ng-deep .node-content.highlighted{position:relative;z-index:10}:host ::ng-deep .node-content.highlighted:after{content:\"\";position:absolute;inset:-14px;border:4px solid rgba(110,110,110,.4705882353);border-radius:13px;pointer-events:none;opacity:1}:host ::ng-deep .node-content:not(.highlighted):after{opacity:0}:host{display:block;overflow:hidden;width:100%;height:100%}.wxcc-flowchart-container{display:flex;flex-direction:column;position:relative;background-color:#f8f9fa;border-radius:.5rem;border:1px solid #e1e4e8;box-sizing:border-box;height:100%;min-height:600px}.wxcc-flowchart-container .flowchart-canvas{height:100%;min-height:600px;background:linear-gradient(90deg,rgba(200,200,200,.1) 1px,transparent 1px),linear-gradient(rgba(200,200,200,.1) 1px,transparent 1px);background-size:20px 20px}.wxcc-flowchart-container .add-node-btn{outline:none;border:none;border-radius:.5rem;background-color:#f6f6f6;padding:.5rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;transition:all .2s ease}.wxcc-flowchart-container .add-node-btn:hover{background-color:#eefff8;transform:scale(1.05)}.wxcc-flowchart-container .add-node-btn:active{transform:scale(.95)}.edge-delete-btn{position:absolute;z-index:1100;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:1px solid #cc3d36;background:#fff;color:#cc3d36;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000002e}.edge-delete-btn:hover{background:#fff1f0;transform:translate(-50%,-50%) scale(1.08)}.edge-delete-btn:active{transform:translate(-50%,-50%) scale(.95)}:host ::ng-deep .node-content{cursor:pointer;display:flex;justify-content:center;flex-direction:column;gap:.5rem;padding:.5rem;background:white;border-radius:6px;border:1px solid #d8d8d8;border-left:4px solid;min-width:200px;transition:all .2s ease}:host ::ng-deep .node-content header{display:flex;align-items:center;gap:.5rem}:host ::ng-deep .node-content img{width:18px;height:18px}:host ::ng-deep .node-content .node-icon{font-size:24px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.5rem;flex-shrink:0}:host ::ng-deep .node-content .node-info{flex:1;min-width:0}:host ::ng-deep .node-content .node-info .node-label{font-size:16px;letter-spacing:.5px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-info .node-activity-name{font-size:12px;color:#99a5b1;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}:host ::ng-deep .node-content .node-details{font-size:12px;color:#000;padding:0 .25rem;display:flex;flex-direction:column;gap:.25rem}:host ::ng-deep .node-content .node-details .node-details-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}:host ::ng-deep .node-content .node-details .review-red{background-color:#ffe6e6;border-left-color:#f44336;color:#f44336;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-green{background-color:#e6ffe6;border-left-color:#4caf50;color:#4caf50;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content .node-details .review-yellow{background-color:#fff9e6;border-left-color:#ff9800;color:#ff9800;padding:.1rem .25rem;border-radius:.25rem;font-size:10px}:host ::ng-deep .node-content.node-start{border-left-color:#4caf50}:host ::ng-deep .node-content.node-start .node-icon{background-color:#4caf501a;color:#4caf50}:host ::ng-deep .node-content.node-start .node-label{color:#4caf50}:host ::ng-deep .node-content.node-end{border-left-color:#f44336}:host ::ng-deep .node-content.node-end .node-icon{background-color:#f443361a;color:#f44336}:host ::ng-deep .node-content.node-end .node-label{color:#f44336}:host ::ng-deep .node-content.node-gateway{border-left-color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-icon{background-color:#ff98001a;color:#ff9800}:host ::ng-deep .node-content.node-gateway .node-label{color:#ff9800}:host ::ng-deep .node-content.node-action{border-left-color:#9c27b0}:host ::ng-deep .node-content.node-action .node-icon{background-color:#9c27b01a;color:#9c27b0}:host ::ng-deep .node-content.node-action .node-label{color:#9c27b0}:host ::ng-deep .node-content.node-default{border-left-color:#607d8b}:host ::ng-deep .node-content.node-default .node-icon{background-color:#607d8b1a;color:#607d8b}:host ::ng-deep .node-content.node-default .node-label{color:#607d8b}.graph-actions-wrapper{position:absolute;right:1rem;top:1rem;display:flex;align-items:center;gap:.5rem;box-shadow:2px 4px 15px #0000002d;padding:8px;background-color:#ffffffac;border-radius:1rem;z-index:999}\n"] }]
         }], ctorParameters: function () { return [{ type: WxCC2GraphService }, { type: CytoscapeViewportService }, { type: i1$2.MatDialog }, { type: WxCCActivityCreationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { flowchart: [{
                 type: Input
             }], flowchartContainer: [{