@tuki-io/tuki-widgets 0.0.177 → 0.0.179

package/fesm2015/tuki-io-tuki-widgets-contact-center.mjs

@@ -1,21 +1,41 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, Component, Input, NgModule } from '@angular/core';
+import { Injectable, inject, Component, Input, NgModule, ChangeDetectionStrategy, Inject, EventEmitter, Output, ViewChild } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpClientModule } from '@angular/common/http';
-import { map, catchError, of, finalize } from 'rxjs';
+import { map, catchError, of, finalize, Subject, forkJoin, throwError } from 'rxjs';
 import * as i2 from 'ng-apexcharts';
 import { NgApexchartsModule } from 'ng-apexcharts';
 import * as i3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i4 from '@angular/material/core';
 import { MatOptionModule } from '@angular/material/core';
+import * as i1$4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i4$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
+import cytoscape from 'cytoscape';
+import dagre from 'cytoscape-dagre';
+import nodeHtmlLabel from 'cytoscape-node-html-label';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { __rest } from 'tslib';
+import * as uuid from 'uuid';
+import * as i3$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i1$3 from '@angular/platform-browser';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { mergeMap, takeUntil, finalize as finalize$1, tap } from 'rxjs/operators';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 
 class APIService {
     constructor(httpClient) {
@@ -434,9 +454,2934 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+const StyleConfig = [
+    {
+        selector: 'node',
+        style: {
+            'background-color': 'transparent',
+            'background-opacity': 0,
+            'width': 220,
+            'height': 100,
+            'shape': 'roundrectangle',
+            'border-width': 0
+        }
+    },
+    {
+        selector: 'node:selected',
+        style: {
+            'background-color': 'transparent',
+            'background-opacity': 0
+        }
+    },
+    {
+        selector: 'edge',
+        style: {
+            'width': 1,
+            'line-color': '#d4d4d4',
+            // 'line-color': '#B0BEC5',
+            'target-arrow-color': '#d4d4d4',
+            'target-arrow-shape': 'triangle',
+            'curve-style': 'bezier',
+            'control-point-step-size': 40,
+            'label': 'data(label)',
+            'font-size': '9px',
+            'color': '#546E7A',
+            'text-background-color': '#fff',
+            'text-background-opacity': 1,
+            'text-background-padding': '4px',
+            'text-border-width': 1,
+            'text-border-color': '#E0E0E0',
+            'text-border-opacity': 0.8,
+            'text-margin-y': -10,
+            'z-index': 10
+        }
+    },
+    {
+        selector: 'edge[label="default"]',
+        style: {
+            'line-color': '#90A4AE',
+            'target-arrow-color': '#90A4AE'
+        }
+    },
+    {
+        selector: 'edge[label="queued"]',
+        style: {
+            'line-color': '#66BB6A',
+            'target-arrow-color': '#66BB6A'
+        }
+    },
+    {
+        selector: 'edge[label="failure"]',
+        style: {
+            'line-color': '#EF5350',
+            'target-arrow-color': '#EF5350'
+        }
+    },
+    {
+        selector: ':selected',
+        style: {
+            'line-color': '#FF6B6B',
+            'target-arrow-color': '#FF6B6B'
+        }
+    }
+];
+
+const CREATABLE_WXCC_ACTIVITY_TYPES = new Set([
+    'NewPhoneContact',
+    'play-message',
+    'play-music',
+    'ivr-menu',
+    'set-variable',
+    'blind-transfer',
+    'business-hours',
+]);
+/**
+ * Map of node icons based on display type or label
+ */
+const ICON_MAP = {
+    'condition-activity': 'assets/wxcc/if.svg',
+    'queue-contact': 'assets/wxcc/route.svg',
+    'ivr-menu': 'assets/wxcc/m1.svg',
+    'blind-transfer': 'assets/wxcc/terminate2.svg',
+    'wait-activity': 'assets/wxcc/delay.svg',
+    'newphonecontact': 'assets/wxcc/p1.svg',
+    'disconnect-contact': 'assets/wxcc/terminate2.svg',
+    'play-message': 'assets/wxcc/s1.svg',
+    'play-music': 'assets/wxcc/delay.svg',
+    'unmapped': 'assets/wxcc/unmapped.svg',
+    'business-hours': 'assets/wxcc/c2.svg',
+    'set-variable': 'assets/wxcc/variable.svg',
+    'end': 'assets/wxcc/close1.svg'
+};
+/**
+ * Map of node color classes based on group
+ */
+const COLOR_CLASS_MAP = {
+    'start': 'node-start',
+    'end': 'node-end',
+    'terminating-action': 'node-end',
+    'set-variable': 'node-action',
+    'unmapped': 'node-default',
+    'enum-gateway': 'node-gateway',
+    'action': 'node-action'
+};
+/**
+ * Map of activity type labels based on group
+ */
+const ACTIVITY_TYPE_LABELS = {
+    'start': 'Start',
+    'end': 'End',
+    'terminating-action': 'Terminate',
+    'enum-gateway': 'Menu',
+    'action': 'Action',
+    'unmapped': 'Unmapped'
+};
+/**
+ * All available activity display types for node configuration
+ * Values match ICON_MAP keys exactly
+ */
+const ACTIVITY_DISPLAY_TYPES = [
+    { activityName: 'NewPhoneContact', value: 'newphonecontact', label: 'Start', icon: ICON_MAP['newphonecontact'], group: 'start' },
+    { activityName: 'end', value: 'end', label: 'End', icon: ICON_MAP['end'], group: 'end' },
+    { activityName: 'play-message', value: 'play-message', label: 'Play Message', icon: ICON_MAP['play-message'], group: 'action' },
+    { activityName: 'ivr-menu', value: 'ivr-menu', label: 'Menu', icon: ICON_MAP['ivr-menu'], group: 'enum-gateway' },
+    { activityName: 'queue-contact', value: 'queue-contact', label: 'Queue Contact', icon: ICON_MAP['queue-contact'], group: 'action' },
+    { activityName: 'set-variable', value: 'set-variable', label: 'Set Variable', icon: ICON_MAP['set-variable'], group: 'set-variable' },
+    { activityName: 'condition-activity', value: 'condition-activity', label: 'Condition', icon: ICON_MAP['condition-activity'], group: 'enum-gateway' },
+    { activityName: 'business-hours', value: 'business-hours', label: 'Business Hours', icon: ICON_MAP['business-hours'], group: 'enum-gateway' },
+    { activityName: 'wait-activity', value: 'wait-activity', label: 'Wait', icon: ICON_MAP['wait-activity'], group: 'action' },
+    { activityName: 'play-music', value: 'play-music', label: 'Play Music', icon: ICON_MAP['play-music'], group: 'action' },
+    { activityName: 'blind-transfer', value: 'blind-transfer', label: 'Blind Transfer', icon: ICON_MAP['blind-transfer'], group: 'action' },
+    { activityName: 'disconnect-contact', value: 'disconnect-contact', label: 'Disconnect', icon: ICON_MAP['disconnect-contact'], group: 'terminating-action' },
+    { activityName: 'unmapped', value: 'unmapped', label: 'Unmapped', icon: ICON_MAP['unmapped'], group: 'unmapped' }
+];
+const CREATABLE_ACTIVITY_DISPLAY_TYPES = ACTIVITY_DISPLAY_TYPES
+    .filter(type => CREATABLE_WXCC_ACTIVITY_TYPES.has(type.activityName));
+/**
+ * Get node icon information based on name or display type
+ * @param name - The node name or display type
+ * @returns Icon information with src and alt text
+ */
+function getNodeIcon(name) {
+    const key = name.toLowerCase();
+    const iconSrc = ICON_MAP[key] || ICON_MAP['unmapped'];
+    return { iconSrc, alt: key };
+}
+/**
+ * Get node color class based on group
+ * @param group - The node group
+ * @returns CSS class name for node coloring
+ */
+function getNodeColorClass(group) {
+    return COLOR_CLASS_MAP[group] || 'node-default';
+}
+/**
+ * Get activity type label based on group
+ * @param group - The node group
+ * @returns Human-readable activity type label
+ */
+function getActivityTypeLabel(group) {
+    return ACTIVITY_TYPE_LABELS[group] || 'Activity';
+}
+/**
+ * Find activity display type by value
+ * @param value - The display type value
+ * @returns Display type or unmapped if not found
+ */
+function getActivityDisplayTypeByValue(value) {
+    return ACTIVITY_DISPLAY_TYPES.find(dt => dt.value === value) || ACTIVITY_DISPLAY_TYPES[ACTIVITY_DISPLAY_TYPES.length - 1];
+}
+function getCreatableActivityDisplayTypeByValue(value) {
+    return CREATABLE_ACTIVITY_DISPLAY_TYPES.find(type => type.value === value) || CREATABLE_ACTIVITY_DISPLAY_TYPES[0];
+}
+
+function escapeHtml(text) {
+    if (!text)
+        return '';
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+function getTranformedActivityName(name) {
+    return name
+        .split('-')
+        .map(s => s.charAt(0).toLocaleUpperCase() + s.slice(1))
+        .join(' ');
+}
+function getReviewElement(review) {
+    if (!review)
+        return `No review is available`;
+    const reviewColor = review.color;
+    const reviewColorLabel = `${reviewColor.charAt(0).toUpperCase()}${reviewColor.slice(1)}`;
+    const reviewLevelLabel = review.level.replace('_', ' ');
+    return `
+        <span class="review-${reviewColor}">
+            ${reviewColorLabel} (${reviewLevelLabel})
+        </span>
+    `;
+}
+function getNodeHtmlTemplate(data) {
+    const group = data.wxccGroup || 'unknown';
+    const colorClass = getNodeColorClass(group);
+    const typeLabel = getActivityTypeLabel(group);
+    const name = data.name ? data.name.split('\n')[0] : '';
+    const detailsHeading = (data.suggestedProperties && data.suggestedProperties.uccxDescription
+        ? data.suggestedProperties.uccxDescription
+        : '').trim();
+    const activityName = data.wxccActivityName || 'unmapped';
+    const iconInfo = data.iconUrl ?
+        { iconSrc: data.iconUrl, alt: data.iconUrl } :
+        getNodeIcon(typeLabel === 'Unmapped' ? typeLabel : activityName);
+    const { iconSrc, alt } = iconInfo;
+    const transformedActivityName = getTranformedActivityName(activityName);
+    const extraDetails = {
+        Review: getReviewElement(data.review)
+    };
+    // Allow highlight class to be toggled by data.highlighted property
+    const highlightClass = data.highlighted ? 'highlighted' : '';
+    return `
+        <div class="node-content ${colorClass} ${highlightClass}">
+            <header>
+                <div class="node-icon">
+                    <img
+                        src="${iconSrc}"
+                        alt="${alt}"
+                        title="${typeLabel}"
+                    />
+                </div>
+                <div class="node-info">
+                    <div class="node-label" title="${escapeHtml(name)}">${name}</div>
+                    <div class="node-activity-name" title="${escapeHtml(transformedActivityName)}">
+                        ${transformedActivityName}
+                    </div>
+                </div>
+            </header>
+            <div class="node-details">
+                <div class="node-details-item" title="${escapeHtml(detailsHeading)}">${detailsHeading}</div>
+                    ${Object.entries(extraDetails).map(([key, value]) => {
+        const fullText = `${key}: ${value}`;
+        return `<div>${fullText}</div>`;
+    })}
+            </div>
+        </div>
+    `;
+}
+
+class AddNodeDialogComponent {
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        this.activityDisplayTypes = CREATABLE_ACTIVITY_DISPLAY_TYPES;
+        this.selectedActivityType = CREATABLE_ACTIVITY_DISPLAY_TYPES[0];
+        this.nodeName = '';
+        this.selectedParentIds = [];
+        this.selectedChildIds = [];
+        this.availableNodes = [];
+    }
+    ngOnInit() {
+        this.availableNodes = this.data.availableNodes;
+    }
+    resetForm() {
+        this.selectedActivityType = CREATABLE_ACTIVITY_DISPLAY_TYPES[0];
+        this.nodeName = '';
+        this.selectedParentIds = [];
+        this.selectedChildIds = [];
+    }
+    onActivityTypeChange(value) {
+        this.selectedActivityType = getCreatableActivityDisplayTypeByValue(value);
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    onSubmit() {
+        if (!this.nodeName.trim()) {
+            return;
+        }
+        const newNodeData = {
+            activityTypeName: this.selectedActivityType.activityName,
+            name: this.nodeName.trim(),
+            parentNodeIds: this.selectedParentIds,
+            childNodeIds: this.selectedChildIds
+        };
+        this.dialogRef.close(newNodeData);
+    }
+    trackByValue(index, type) {
+        return type.value;
+    }
+    trackByNodeId(index, node) {
+        return node.id;
+    }
+}
+AddNodeDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddNodeDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+AddNodeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AddNodeDialogComponent, selector: "add-node-dialog", ngImport: i0, template: "", styles: [".form-group{margin-bottom:1.25rem}.form-group:last-child{margin-bottom:0}.form-group .form-label{display:block;font-size:.75rem;font-weight:600;color:#24292e;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.form-group .form-control{width:100%;padding:.625rem .875rem;font-size:.875rem;border:1px solid #d1d5da;border-radius:6px;background:white;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-group .form-control:focus{outline:none;border-color:#0366d6;box-shadow:0 0 0 3px #0366d61a}.form-group .form-control::placeholder{color:#959da5}.form-group textarea.form-control{resize:vertical;min-height:80px}.form-group .display-type-preview{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#f6f8fa;border-radius:6px;margin-bottom:.5rem}.form-group .display-type-preview .type-icon{width:20px;height:20px}.form-group .display-type-preview .type-label{font-size:.875rem;font-weight:500;color:#24292e}.form-group .node-selection-list{max-height:150px;overflow-y:auto;border:1px solid #d1d5da;border-radius:6px;background:#fafbfc}.form-group .node-selection-list .node-selection-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background .15s;border-bottom:1px solid #e1e4e8}.form-group .node-selection-list .node-selection-item:last-child{border-bottom:none}.form-group .node-selection-list .node-selection-item:hover{background:#f0f3f6}.form-group .node-selection-list .node-selection-item.selected{background:rgba(3,102,214,.08)}.form-group .node-selection-list .node-selection-item .node-name{font-size:.8125rem;color:#24292e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-group .node-selection-list .empty-list{padding:1rem;text-align:center;color:#586069;font-size:.8125rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddNodeDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'add-node-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "", styles: [".form-group{margin-bottom:1.25rem}.form-group:last-child{margin-bottom:0}.form-group .form-label{display:block;font-size:.75rem;font-weight:600;color:#24292e;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.form-group .form-control{width:100%;padding:.625rem .875rem;font-size:.875rem;border:1px solid #d1d5da;border-radius:6px;background:white;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-group .form-control:focus{outline:none;border-color:#0366d6;box-shadow:0 0 0 3px #0366d61a}.form-group .form-control::placeholder{color:#959da5}.form-group textarea.form-control{resize:vertical;min-height:80px}.form-group .display-type-preview{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#f6f8fa;border-radius:6px;margin-bottom:.5rem}.form-group .display-type-preview .type-icon{width:20px;height:20px}.form-group .display-type-preview .type-label{font-size:.875rem;font-weight:500;color:#24292e}.form-group .node-selection-list{max-height:150px;overflow-y:auto;border:1px solid #d1d5da;border-radius:6px;background:#fafbfc}.form-group .node-selection-list .node-selection-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background .15s;border-bottom:1px solid #e1e4e8}.form-group .node-selection-list .node-selection-item:last-child{border-bottom:none}.form-group .node-selection-list .node-selection-item:hover{background:#f0f3f6}.form-group .node-selection-list .node-selection-item.selected{background:rgba(3,102,214,.08)}.form-group .node-selection-list .node-selection-item .node-name{font-size:.8125rem;color:#24292e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-group .node-selection-list .empty-list{padding:1rem;text-align:center;color:#586069;font-size:.8125rem}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }, { type: i1$2.MatDialogRef }];
+    } });
+
+class LinkNodeDialogComponent {
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        // @Input() isOpen = false;
+        // @Input() sourceNode: ActivityData | null = null;
+        this.availableNodes = [];
+        this.close = new EventEmitter();
+        this.linkNodes = new EventEmitter();
+        this.selectedTargetId = null;
+        this.linkLabel = '';
+        this.searchQuery = '';
+    }
+    ngOnInit() {
+        this.availableNodes = this.data.availableNodes;
+        this.sourceNode = this.data.sourceNode;
+    }
+    get filteredNodes() {
+        if (!this.sourceNode) {
+            return [];
+        }
+        if (!this.searchQuery.trim()) {
+            return this.availableNodes.filter(n => n && n.id !== this.sourceNode.id);
+        }
+        const query = this.searchQuery.toLowerCase();
+        return this.availableNodes.filter(n => n && n.id !== this.sourceNode.id &&
+            ((n.name && n.name.toLowerCase().includes(query)) ||
+                (n.wxccActivityName && n.wxccActivityName.toLowerCase().includes(query))));
+    }
+    ngOnChanges(changes) {
+        // if (changes['isOpen'] && this.isOpen) {
+        //     this.resetForm();
+        // }
+    }
+    resetForm() {
+        this.selectedTargetId = null;
+        this.linkLabel = '';
+        this.searchQuery = '';
+    }
+    selectNode(nodeId) {
+        this.selectedTargetId = nodeId;
+    }
+    isSelected(nodeId) {
+        return this.selectedTargetId === nodeId;
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    onSubmit() {
+        if (!this.sourceNode || !this.selectedTargetId) {
+            return;
+        }
+        const linkData = {
+            sourceNodeId: this.sourceNode.id,
+            targetNodeId: this.selectedTargetId,
+            label: this.linkLabel.trim() || undefined
+        };
+        this.dialogRef.close(linkData);
+        // this.linkNodes.emit(linkData);
+        // this.onClose();
+    }
+    trackByNodeId(index, node) {
+        return node.id;
+    }
+}
+LinkNodeDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LinkNodeDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+LinkNodeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LinkNodeDialogComponent, selector: "link-node-dialog", outputs: { close: "close", linkNodes: "linkNodes" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.source-node-info{margin-bottom:1.25rem}.source-node-info .node-preview{display:flex;flex-direction:column;gap:.25rem;padding:.75rem 1rem;background:#f0f3f6;border-radius:6px}.source-node-info .node-preview .node-name{font-size:.875rem;font-weight:600;color:#24292e}.source-node-info .node-preview .node-type{font-size:.75rem;color:#586069}.form-group{margin-bottom:1.25rem}.form-group:last-child{margin-bottom:0}.form-group .form-label{display:block;font-size:.75rem;font-weight:600;color:#24292e;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.form-group .form-control{width:100%;padding:.625rem .875rem;font-size:.875rem;border:1px solid #d1d5da;border-radius:6px;background:white;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-group .form-control:focus{outline:none;border-color:#0985a0;box-shadow:0 0 0 3px #0366d61a}.form-group .form-control::placeholder{color:#959da5}.form-group .search-input{margin-bottom:.75rem}.form-group .node-selection-list{max-height:200px;overflow-y:auto;border:1px solid #d1d5da;border-radius:6px;background:#fafbfc}.form-group .node-selection-list .node-selection-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background .15s;border-bottom:1px solid #e1e4e8}.form-group .node-selection-list .node-selection-item:last-child{border-bottom:none}.form-group .node-selection-list .node-selection-item:hover{background:#f0f3f6}.form-group .node-selection-list .node-selection-item.selected{background:rgba(0,155,183,.08)}.form-group .node-selection-list .node-selection-item.selected .node-radio{border-color:#0985a0}.form-group .node-selection-list .node-selection-item.selected .node-radio .radio-inner{background:#0985A0}.form-group .node-selection-list .node-selection-item .node-radio{width:18px;height:18px;border:2px solid #d1d5da;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s}.form-group .node-selection-list .node-selection-item .node-radio .radio-inner{width:10px;height:10px;border-radius:50%}.form-group .node-selection-list .node-selection-item .node-details{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1}.form-group .node-selection-list .node-selection-item .node-details .node-name{font-size:.8125rem;font-weight:500;color:#24292e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-group .node-selection-list .node-selection-item .node-details .node-type{font-size:.6875rem;color:#586569}.form-group .node-selection-list .empty-list{padding:1.5rem;text-align:center;color:#586569;font-size:.8125rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LinkNodeDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'link-node-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";.source-node-info{margin-bottom:1.25rem}.source-node-info .node-preview{display:flex;flex-direction:column;gap:.25rem;padding:.75rem 1rem;background:#f0f3f6;border-radius:6px}.source-node-info .node-preview .node-name{font-size:.875rem;font-weight:600;color:#24292e}.source-node-info .node-preview .node-type{font-size:.75rem;color:#586069}.form-group{margin-bottom:1.25rem}.form-group:last-child{margin-bottom:0}.form-group .form-label{display:block;font-size:.75rem;font-weight:600;color:#24292e;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.form-group .form-control{width:100%;padding:.625rem .875rem;font-size:.875rem;border:1px solid #d1d5da;border-radius:6px;background:white;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-group .form-control:focus{outline:none;border-color:#0985a0;box-shadow:0 0 0 3px #0366d61a}.form-group .form-control::placeholder{color:#959da5}.form-group .search-input{margin-bottom:.75rem}.form-group .node-selection-list{max-height:200px;overflow-y:auto;border:1px solid #d1d5da;border-radius:6px;background:#fafbfc}.form-group .node-selection-list .node-selection-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background .15s;border-bottom:1px solid #e1e4e8}.form-group .node-selection-list .node-selection-item:last-child{border-bottom:none}.form-group .node-selection-list .node-selection-item:hover{background:#f0f3f6}.form-group .node-selection-list .node-selection-item.selected{background:rgba(0,155,183,.08)}.form-group .node-selection-list .node-selection-item.selected .node-radio{border-color:#0985a0}.form-group .node-selection-list .node-selection-item.selected .node-radio .radio-inner{background:#0985A0}.form-group .node-selection-list .node-selection-item .node-radio{width:18px;height:18px;border:2px solid #d1d5da;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s}.form-group .node-selection-list .node-selection-item .node-radio .radio-inner{width:10px;height:10px;border-radius:50%}.form-group .node-selection-list .node-selection-item .node-details{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1}.form-group .node-selection-list .node-selection-item .node-details .node-name{font-size:.8125rem;font-weight:500;color:#24292e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-group .node-selection-list .node-selection-item .node-details .node-type{font-size:.6875rem;color:#586569}.form-group .node-selection-list .empty-list{padding:1.5rem;text-align:center;color:#586569;font-size:.8125rem}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }, { type: i1$2.MatDialogRef }];
+    }, propDecorators: { close: [{
+                type: Output
+            }], linkNodes: [{
+                type: Output
+            }] } });
+
+class WxCC2GraphService {
+    parseWxCC(wxcc, nonIr) {
+        this.wxccJSON = wxcc;
+        if (nonIr) {
+            this.wxccNonIRJSON = nonIr;
+        }
+        const nodes = [];
+        const edges = [];
+        wxcc.activities.forEach(activity => nodes.push(this.toWxCCNode(activity)));
+        wxcc.links.forEach(link => edges.push(this.toWxCCEdge(link)));
+        return {
+            flowId: wxcc.generatedAt,
+            flowName: wxcc.prefix,
+            nodes: nodes,
+            edges: edges
+        };
+    }
+    setSourceDocuments(ir, nonIr) {
+        this.wxccJSON = ir;
+        this.wxccNonIRJSON = nonIr;
+    }
+    updateActivityData(data) {
+        const { iconUrl } = data, dataWithoutIcon = __rest(data, ["iconUrl"]);
+        const wxccActivityData = this.getActivityById(data.id);
+        if (!wxccActivityData) {
+            console.error(`Activity with id ${data.id} not found`);
+            return false;
+        }
+        const source = dataWithoutIcon;
+        const target = wxccActivityData;
+        Object.keys(source).forEach(key => {
+            if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
+                // For nested objects, merge them recursively
+                target[key] = Object.assign(Object.assign({}, target[key]), source[key]);
+            }
+            else {
+                // For primitives and arrays, assign directly
+                target[key] = source[key];
+            }
+        });
+        return true;
+    }
+    /**
+     * Add a new activity to the graph
+     */
+    addActivity(activity) {
+        // Add to internal JSON structure
+        this.wxccJSON.activities.push(activity);
+        return this.toWxCCNode(activity);
+    }
+    /**
+     * Remove an activity and all its connected links
+     */
+    removeActivity(activityId) {
+        // Remove the activity
+        const activityIndex = this.wxccJSON.activities.findIndex(a => a.id === activityId);
+        if (activityIndex !== -1) {
+            this.wxccJSON.activities.splice(activityIndex, 1);
+        }
+        // Find and remove all links connected to this activity
+        const removedLinkIds = [];
+        const linksToRemove = this.wxccJSON.links.filter(link => link.sourceActivityId === activityId || link.targetActivityId === activityId);
+        linksToRemove.forEach(link => {
+            removedLinkIds.push(link.id);
+            const linkIndex = this.wxccJSON.links.findIndex(l => l.id === link.id);
+            if (linkIndex !== -1) {
+                this.wxccJSON.links.splice(linkIndex, 1);
+            }
+        });
+        return { removedLinkIds };
+    }
+    /**
+     * Add a new link between two activities
+     */
+    addLink(sourceActivityId, targetActivityId, label) {
+        const linkId = this.generateId();
+        const link = {
+            id: linkId,
+            sourceActivityId,
+            targetActivityId,
+            uccxLabel: label || ''
+        };
+        this.wxccJSON.links.push(link);
+        return this.toWxCCEdge(link);
+    }
+    /**
+     * Remove a link by its id
+     */
+    removeLink(linkId) {
+        const linkIndex = this.wxccJSON.links.findIndex(l => l.id === linkId);
+        if (linkIndex !== -1) {
+            this.wxccJSON.links.splice(linkIndex, 1);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Check if a link already exists between two nodes
+     */
+    linkExists(sourceActivityId, targetActivityId) {
+        return this.wxccJSON.links.some(link => link.sourceActivityId === sourceActivityId && link.targetActivityId === targetActivityId);
+    }
+    /**
+     * Get all activities for selection purposes
+     */
+    getAllActivities() {
+        return [...this.wxccJSON.activities];
+    }
+    getActivityById(id) {
+        return this.wxccJSON.activities.find(a => a.id === id);
+    }
+    generateId() {
+        return uuid.v4();
+    }
+    toWxCCNode(activity) {
+        const label = activity.name || activity.wxccActivityName || 'Activity';
+        return {
+            data: Object.assign(Object.assign({}, activity), { label: label })
+        };
+    }
+    toWxCCEdge(link) {
+        const label = link.uccxLabel || link.conditionExpr || '';
+        return {
+            data: Object.assign(Object.assign({}, link), { source: link.sourceActivityId, target: link.targetActivityId, label: label })
+        };
+    }
+}
+WxCC2GraphService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCC2GraphService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+WxCC2GraphService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCC2GraphService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCC2GraphService, decorators: [{
+            type: Injectable
+        }] });
+
+class WxCCActivityManageService {
+    constructor() {
+        this.ACTIVITY_TEMPLATES = {
+            NewPhoneContact: {
+                id: '',
+                type: 'NewPhoneContact',
+                group: 'start',
+                name: 'NewPhoneContact',
+                properties: {
+                    name: 'NewPhoneContact',
+                    event: 'NewPhoneContact',
+                    flowType: {
+                        eventSourceName: 'WebexContactCenter',
+                        eventSpecificationName: 'ContactStartWorkflow',
+                        eventClassificationId: '',
+                        eventClassificationName: '',
+                        eventSpecificationId: '',
+                        eventSourceId: ''
+                    },
+                    activityName: 'NewPhoneContact',
+                    _renderRequestTimestamp: Date.now(),
+                    activityId: 'start'
+                }
+            },
+            "blind-transfer": {
+                id: '',
+                type: 'blind-transfer',
+                group: 'terminating-action',
+                name: 'BlindTransfer',
+                properties: {
+                    name: 'BlindTransfer',
+                    activityName: 'blind-transfer',
+                    _renderRequestTimestamp: Date.now(),
+                    transfertodn: '',
+                    activityId: '',
+                    transfertodn_radioName: 'dn',
+                    'transfertodn:radioName': 'dn',
+                    customAttributes: {},
+                    flowDecryptAccess: false,
+                }
+            },
+            "ivr-menu": {
+                id: '',
+                type: 'ivr-menu',
+                group: 'enum-gateway',
+                name: 'Menu',
+                properties: {
+                    connector_name: null,
+                    name: 'Menu',
+                    menuLinks: [],
+                    toggle: false,
+                    activityName: 'ivr-menu',
+                    prompts: [],
+                    _renderRequestTimestamp: Date.now(),
+                    'connector:name': null,
+                    activityId: '',
+                    'menuLinks:input': [],
+                    entryTimeout: 3,
+                    volumeGainDb: 0,
+                    menuLinks_input: [],
+                    voiceLanguage_name: null,
+                    promptsTts: null,
+                    interruptible: false,
+                    connector: null,
+                    speakingRate: 1,
+                    toggleLanguage: null,
+                    voiceLanguage: null,
+                    flowDecryptAccess: false,
+                    'voiceLanguage:name': null
+                }
+            },
+            "play-message": {
+                id: '',
+                type: 'play-message',
+                group: 'action',
+                name: 'PlayMessage',
+                properties: {
+                    connector_name: null,
+                    name: 'PlayMessage',
+                    toggle: false,
+                    activityName: 'play-message',
+                    prompts: [],
+                    _renderRequestTimestamp: Date.now(),
+                    'connector:name': null,
+                    activityId: '',
+                    volumeGainDb: 0,
+                    voiceLanguage_name: null,
+                    promptsTts: null,
+                    connector: null,
+                    speakingRate: 1,
+                    toggleLanguage: null,
+                    voiceLanguage: null,
+                    flowDecryptAccess: false,
+                    'voiceLanguage:name': null
+                }
+            },
+            "play-music": {
+                id: '',
+                type: 'play-music',
+                group: 'action',
+                name: 'PlayPrompt',
+                properties: {
+                    connector_name: null,
+                    name: 'PlayPrompt',
+                    toggle: false,
+                    activityName: 'play-music',
+                    prompts: [],
+                    _renderRequestTimestamp: Date.now(),
+                    'connector:name': null,
+                    activityId: '',
+                    volumeGainDb: 0,
+                    voiceLanguage_name: null,
+                    promptsTts: null,
+                    connector: null,
+                    speakingRate: 1,
+                    toggleLanguage: null,
+                    voiceLanguage: null,
+                    flowDecryptAccess: false,
+                    'voiceLanguage:name': null
+                }
+            },
+            "set-variable": {
+                id: '',
+                type: 'set-variable',
+                group: 'set-variable',
+                name: 'SetVariable',
+                properties: {
+                    setTo: 'set-to-literal',
+                    name: 'SetVariable',
+                    literal_invalid_error: false,
+                    activityName: 'set-variable',
+                    _renderRequestTimestamp: Date.now(),
+                    activityId: 'set-variable',
+                    setVariablesArray: [],
+                    flowDecryptAccess: false
+                }
+            },
+            "business-hours": {
+                id: '',
+                type: 'business-hours',
+                name: '',
+                group: '',
+                properties: {
+                    activityName: 'business-hours',
+                    _renderRequestTimestamp: Date.now(),
+                    activityId: ''
+                }
+            }
+        };
+    }
+    create(type) {
+        return JSON.parse(JSON.stringify(this.ACTIVITY_TEMPLATES[type]));
+    }
+}
+WxCCActivityManageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCActivityManageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+WxCCActivityManageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCActivityManageService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCActivityManageService, decorators: [{
+            type: Injectable
+        }] });
+
+class WxCCActivityCreationService {
+    constructor(wxcc2graph, wxccActivityTemplateService) {
+        this.wxcc2graph = wxcc2graph;
+        this.wxccActivityTemplateService = wxccActivityTemplateService;
+    }
+    createAndSync(request) {
+        const newActivityId = this.wxcc2graph.generateId();
+        const activityTemplate = this.buildTemplatedActivity(request, newActivityId);
+        this.seedNonIrActivity(activityTemplate, newActivityId);
+        const activityData = this.buildExtendedActivity(request, activityTemplate, newActivityId);
+        const node = this.wxcc2graph.addActivity(activityData);
+        return node;
+    }
+    buildTemplatedActivity(request, newActivityId) {
+        const activityTemplate = this.wxccActivityTemplateService.create(request.activityTypeName);
+        const templateProperties = activityTemplate.properties;
+        const displayType = ACTIVITY_DISPLAY_TYPES.find((type) => type.activityName === request.activityTypeName);
+        activityTemplate.id = newActivityId;
+        activityTemplate.name = request.name;
+        activityTemplate.group = activityTemplate.group || (displayType === null || displayType === void 0 ? void 0 : displayType.group) || "unmapped";
+        activityTemplate.properties.activityId = newActivityId;
+        activityTemplate.properties._renderRequestTimestamp = Date.now();
+        // @ts-ignore
+        templateProperties.name = request.name;
+        return activityTemplate;
+    }
+    seedNonIrActivity(activityTemplate, newActivityId) {
+        const nonIrActivities = this.getNonIrActivitiesMap();
+        if (!nonIrActivities) {
+            return;
+        }
+        nonIrActivities[newActivityId] = {
+            id: newActivityId,
+            group: activityTemplate.group,
+            name: activityTemplate.name,
+            properties: Object.assign({}, activityTemplate.properties),
+        };
+    }
+    getNonIrActivitiesMap() {
+        const nonIrDoc = this.wxcc2graph.wxccNonIRJSON;
+        if (!nonIrDoc) {
+            return null;
+        }
+        const process = nonIrDoc.process;
+        if (!process) {
+            return null;
+        }
+        const activities = process.activities;
+        if (!activities) {
+            return null;
+        }
+        return activities;
+    }
+    buildExtendedActivity(request, activityTemplate, newActivityId) {
+        const displayType = ACTIVITY_DISPLAY_TYPES.find((type) => type.activityName === request.activityTypeName);
+        return {
+            id: newActivityId,
+            name: request.name,
+            wxccActivityName: activityTemplate.type,
+            wxccGroup: activityTemplate.group,
+            wxccActivityId: activityTemplate.properties.activityId,
+            // @ts-ignore
+            iconUrl: displayType.icon || "assets/wxcc/unmapped.svg",
+            suggestedProperties: {
+                uccxDescription: "",
+            },
+        };
+    }
+}
+WxCCActivityCreationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCActivityCreationService, deps: [{ token: WxCC2GraphService }, { token: WxCCActivityManageService }], target: i0.ɵɵFactoryTarget.Injectable });
+WxCCActivityCreationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCActivityCreationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCActivityCreationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: WxCC2GraphService }, { type: WxCCActivityManageService }]; } });
+
+const DEFAULT_VISIBILITY = {
+    resetView: true,
+    zoomIn: true,
+    zoomOut: true,
+    export: true
+};
+class FloatingToolBarComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.visibility = DEFAULT_VISIBILITY;
+        this.resetViewChange = new EventEmitter();
+        this.zoomInChange = new EventEmitter();
+        this.zoomOutChange = new EventEmitter();
+        this.exportImageChange = new EventEmitter();
+    }
+    ngOnInit() {
+        const mergedVisibility = Object.assign(Object.assign({}, DEFAULT_VISIBILITY), this.visibility);
+        const allItems = [
+            {
+                id: 'reset-view',
+                visibilityKey: 'resetView',
+                label: 'UCCX.BUTTONS.RESET_VIEW',
+                svg: this.sanitizer.bypassSecurityTrustHtml(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
+                        <path d="M21 3v5h-5"></path>
+                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
+                        <path d="M3 21v-5h5"></path>
+                    </svg>`),
+                action: () => this.resetView()
+            },
+            {
+                id: 'zoom-in',
+                visibilityKey: 'zoomIn',
+                label: 'UCCX.BUTTONS.ZOOM_IN',
+                svg: this.sanitizer.bypassSecurityTrustHtml(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <path d="m21 21-4.35-4.35"></path>
+                        <path d="M11 8v6M8 11h6"></path>
+                    </svg>`),
+                action: () => this.zoomIn()
+            },
+            {
+                id: 'zoom-out',
+                visibilityKey: 'zoomOut',
+                label: 'UCCX.BUTTONS.ZOOM_OUT',
+                svg: this.sanitizer.bypassSecurityTrustHtml(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <path d="m21 21-4.35-4.35"></path>
+                        <path d="M8 11h6"></path>
+                    </svg>`),
+                action: () => this.zoomOut()
+            },
+            {
+                id: 'export',
+                visibilityKey: 'export',
+                label: 'UCCX.BUTTONS.EXPORT',
+                svg: this.sanitizer.bypassSecurityTrustHtml(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>`),
+                action: () => this.exportImage()
+            }
+        ];
+        this.toolbarConfig = allItems.filter(item => mergedVisibility[item.visibilityKey] !== false);
+    }
+    resetView() {
+        this.resetViewChange.emit();
+    }
+    zoomIn() {
+        this.zoomInChange.emit();
+    }
+    zoomOut() {
+        this.zoomOutChange.emit();
+    }
+    exportImage() {
+        this.exportImageChange.emit();
+    }
+    trackById(index, item) {
+        return item.id;
+    }
+}
+FloatingToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingToolBarComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+FloatingToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FloatingToolBarComponent, selector: "graph-floating-toolbar", inputs: { visibility: "visibility" }, outputs: { resetViewChange: "resetViewChange", zoomInChange: "zoomInChange", zoomOutChange: "zoomOutChange", exportImageChange: "exportImageChange" }, ngImport: i0, template: "<div class=\"toolbar-wrapper\" role=\"toolbar\">\r\n    <ng-container *ngFor=\"let item of toolbarConfig; trackBy: trackById\">\r\n        <button\r\n            type=\"button\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [matTooltip]=\"item.label\"\r\n            matTooltipPosition=\"left\"\r\n            class=\"toolbar-button\"\r\n            (click)=\"item.action()\">\r\n            <div [innerHTML]=\"item.svg\"></div>\r\n        </button>\r\n    </ng-container>\r\n</div>", styles: [".toolbar-wrapper{background-color:#ffffffac;position:absolute;display:flex;flex-direction:column;gap:.5rem;bottom:0;right:0;padding:.5rem;width:-moz-fit-content;width:fit-content;margin:1rem;border-radius:1rem;box-shadow:2px 4px 15px #0000002d;z-index:999}.toolbar-wrapper button{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}.toolbar-wrapper button:hover{background-color:#eefff8;transform:scale(1.05)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingToolBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'graph-floating-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toolbar-wrapper\" role=\"toolbar\">\r\n    <ng-container *ngFor=\"let item of toolbarConfig; trackBy: trackById\">\r\n        <button\r\n            type=\"button\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [matTooltip]=\"item.label\"\r\n            matTooltipPosition=\"left\"\r\n            class=\"toolbar-button\"\r\n            (click)=\"item.action()\">\r\n            <div [innerHTML]=\"item.svg\"></div>\r\n        </button>\r\n    </ng-container>\r\n</div>", styles: [".toolbar-wrapper{background-color:#ffffffac;position:absolute;display:flex;flex-direction:column;gap:.5rem;bottom:0;right:0;padding:.5rem;width:-moz-fit-content;width:fit-content;margin:1rem;border-radius:1rem;box-shadow:2px 4px 15px #0000002d;z-index:999}.toolbar-wrapper button{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}.toolbar-wrapper button:hover{background-color:#eefff8;transform:scale(1.05)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; }, propDecorators: { visibility: [{
+                type: Input
+            }], resetViewChange: [{
+                type: Output
+            }], zoomInChange: [{
+                type: Output
+            }], zoomOutChange: [{
+                type: Output
+            }], exportImageChange: [{
+                type: Output
+            }] } });
+
+class NodeDetailsSidebarComponent {
+    constructor() {
+        this.isOpen = false;
+        this.nodeData = null;
+        this.close = new EventEmitter();
+        this.activityTypeChange = new EventEmitter();
+        this.descriptionChange = new EventEmitter();
+        this.activityDisplayTypes = ACTIVITY_DISPLAY_TYPES;
+        this.selectedActivityType = null;
+    }
+    ngOnChanges(changes) {
+        if (changes['nodeData'] && this.nodeData) {
+            this.initializeActivityType();
+        }
+    }
+    initializeActivityType() {
+        const activityName = this.nodeData && this.nodeData.wxccActivityName;
+        this.selectedActivityType = getActivityDisplayTypeByValue((activityName || 'unmapped').toLocaleLowerCase());
+        this.transformedActivityName = getTranformedActivityName(activityName || 'unmapped');
+    }
+    onDescriptionChange(event) {
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        const description = target.value.trim();
+        if (!description)
+            return;
+        this.descriptionChange.emit(description);
+    }
+    onActivityTypeChange(type) {
+        this.selectedActivityType = type;
+        this.activityTypeChange.emit(type);
+    }
+    onActivityTypeSelectChange(event) {
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        const value = target.value;
+        const type = getActivityDisplayTypeByValue(value);
+        this.onActivityTypeChange(type);
+    }
+    onClose() {
+        this.close.emit();
+    }
+    getNodeIcon() {
+        return (this.selectedActivityType && this.selectedActivityType.icon) || ICON_MAP['unmapped'];
+    }
+    getNodeColorClass() {
+        const group = (this.selectedActivityType && this.selectedActivityType.group) || 'unmapped';
+        return getNodeColorClass(group);
+    }
+    getReviewColor() {
+        const color = (this.nodeData && this.nodeData.review && this.nodeData.review.color) ||
+            'green';
+        const colors = {
+            'green': '#4CAF50',
+            'yellow': '#FF9800',
+            'red': '#F44336'
+        };
+        return colors[color] || colors['green'];
+    }
+    getReviewLabel() {
+        const color = (this.nodeData && this.nodeData.review && this.nodeData.review.color) ||
+            'green';
+        const level = (this.nodeData && this.nodeData.review && this.nodeData.review.level) ||
+            'confident';
+        return `${color.charAt(0).toUpperCase() + color.slice(1)} (${level.replace('_', ' ')})`;
+    }
+    trackByValue(index, type) {
+        return type.value;
+    }
+}
+NodeDetailsSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NodeDetailsSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodeDetailsSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NodeDetailsSidebarComponent, selector: "node-details-sidebar", inputs: { isOpen: "isOpen", nodeData: "nodeData" }, outputs: { close: "close", activityTypeChange: "activityTypeChange", descriptionChange: "descriptionChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"sidebar-overlay\" *ngIf=\"isOpen\" (click)=\"onClose()\"></div> -->\r\n\r\n<div class=\"node-details-sidebar\" [class.open]=\"isOpen\">\r\n  <div class=\"sidebar-header\">\r\n    <h3>Node Details</h3>\r\n    <button class=\"close-btn\" (click)=\"onClose()\">\r\n      <span>&times;</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sidebar-content\" *ngIf=\"nodeData\">\r\n    <!-- Node Preview -->\r\n    <div class=\"node-preview\">\r\n      <div class=\"node-preview-card\" [ngClass]=\"getNodeColorClass()\">\r\n        <div class=\"node-icon\">\r\n          <img [src]=\"getNodeIcon()\" alt=\"Node Icon\" />\r\n        </div>\r\n        <div class=\"node-info\">\r\n          <div class=\"node-label\">{{ nodeData?.name?.split(\"\\n\")?.[0] }}</div>\r\n          <div class=\"node-type\">{{ transformedActivityName }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Activity Type Selector -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Activity Type</label>\r\n      <div class=\"display-type-selector\">\r\n        <select\r\n          class=\"form-control\"\r\n          title=\"Select activity type\"\r\n          [value]=\"selectedActivityType?.value\"\r\n          (change)=\"onActivityTypeSelectChange($event)\"\r\n        >\r\n          <option\r\n            *ngFor=\"let type of activityDisplayTypes; trackBy: trackByValue\"\r\n            [value]=\"type.value\"\r\n          >\r\n            {{ type.label }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Description</label>\r\n      <div class=\"display-type-selector\">\r\n        <textarea\r\n          class=\"form-control\"\r\n          aria-label=\"property-description\"\r\n          (input)=\"onDescriptionChange($event)\"\r\n          [value]=\"nodeData.suggestedProperties?.uccxDescription\"\r\n          rows=\"3\"\r\n        ></textarea>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Node Information -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Information</label>\r\n      <div class=\"info-grid\">\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">UCCX Type:</span>\r\n          <span class=\"info-value\" [title]=\"nodeData.uccxTypeName\">{{\r\n            nodeData.uccxTypeName\r\n          }}</span>\r\n        </div>\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">WxCC Activity Name:</span>\r\n          <span class=\"info-value\" [title]=\"transformedActivityName\">{{\r\n            transformedActivityName\r\n          }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Status -->\r\n    <div class=\"section\" *ngIf=\"nodeData.review\">\r\n      <label class=\"section-label\">Review Status</label>\r\n      <div class=\"review-status\">\r\n        <div class=\"review-badge\" [style.background-color]=\"getReviewColor()\">\r\n          {{ getReviewLabel() }}\r\n        </div>\r\n        <div\r\n          class=\"review-reasons\"\r\n          *ngIf=\"nodeData.review.reasons && nodeData.review.reasons.length > 0\"\r\n        >\r\n          <div class=\"reason\" *ngFor=\"let reason of nodeData.review.reasons\">\r\n            <span class=\"reason-icon\">\u26A0</span>\r\n            <span>{{ reason }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Suggested Properties -->\r\n    <div class=\"section\" *ngIf=\"nodeData.suggestedProperties\">\r\n      <label class=\"section-label\">Migration Information</label>\r\n      <div class=\"migration-info\">\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.closestWxccActivity\"\r\n        >\r\n          <div class=\"card-label\">Closest WXCC Activity</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.closestWxccActivity }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.mappingNotes\"\r\n        >\r\n          <div class=\"card-label\">Mapping Notes</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.mappingNotes }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.migrationInstructions\"\r\n        >\r\n          <div class=\"card-label\">Migration Instructions</div>\r\n          <div class=\"card-value instructions\">\r\n            {{ nodeData.suggestedProperties.migrationInstructions }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.node-details-sidebar{position:fixed;top:0;right:-420px;width:420px;height:100%;background:#ffffff;box-shadow:-2px 0 8px #00000026;z-index:1000;transition:right .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}.node-details-sidebar.open{right:0}.node-details-sidebar .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e1e4e8;background:#f8f9fa}.node-details-sidebar .sidebar-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#24292e}.node-details-sidebar .sidebar-header .close-btn{background:none;border:none;font-size:2rem;line-height:1;cursor:pointer;color:#586069;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.node-details-sidebar .sidebar-header .close-btn:hover{background:rgba(0,0,0,.05);color:#24292e}.node-details-sidebar .sidebar-content{flex:1;overflow-y:auto;padding:1.5rem}.node-details-sidebar .sidebar-content .node-preview{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .node-preview .node-preview-card{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:8px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;flex-shrink:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon img{width:24px;height:24px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info{flex:1;min-width:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-label{font-size:1rem;font-weight:600;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-type{font-size:.875rem;color:#586069}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start{background-color:#4caf500d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-icon{background-color:#4caf501a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-label{color:#4caf50}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end{background-color:#f443360d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-icon{background-color:#f443361a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-label{color:#f44336}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway{background-color:#ff98000d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-icon{background-color:#ff98001a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-label{color:#ff9800}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action{background-color:#9c27b00d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-icon{background-color:#9c27b01a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-label{color:#9c27b0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default{background-color:#607d8b0d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-icon{background-color:#607d8b1a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-label{color:#607d8b}.node-details-sidebar .sidebar-content .section{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .section .section-label{display:block;font-size:.65rem;font-weight:600;color:#24292e;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control{width:100%;padding:.625rem .875rem;font-size:.875rem;border:1px solid #d1d5da;border-radius:6px;background:white;transition:border-color .2s;box-sizing:border-box;resize:vertical}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control:focus{outline:none;border-color:#0366d6;box-shadow:0 0 0 3px #0366d61a}.node-details-sidebar .sidebar-content .section .info-grid{display:flex;flex-direction:column;gap:.75rem}.node-details-sidebar .sidebar-content .section .info-grid .info-item{display:flex;justify-content:space-between;align-items:flex-start;padding:.75rem;background:#f6f8fa;border-radius:6px}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-label{font-size:.8125rem;color:#586069;font-weight:500}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-value{font-size:.8125rem;color:#24292e;font-weight:600;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .section .review-status .review-badge{display:inline-block;padding:.5rem 1rem;border-radius:20px;color:#fff;font-size:.8125rem;font-weight:600;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#fff3cd;border-radius:4px;margin-bottom:.5rem;font-size:.8125rem;color:#856404}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason .reason-icon{flex-shrink:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card{padding:1rem;background:#f6f8fa;border-radius:6px;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card:last-child{margin-bottom:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-label{font-size:.75rem;font-weight:600;color:#586069;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value{font-size:.875rem;color:#24292e;line-height:1.5}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value.instructions{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NodeDetailsSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'node-details-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div class=\"sidebar-overlay\" *ngIf=\"isOpen\" (click)=\"onClose()\"></div> -->\r\n\r\n<div class=\"node-details-sidebar\" [class.open]=\"isOpen\">\r\n  <div class=\"sidebar-header\">\r\n    <h3>Node Details</h3>\r\n    <button class=\"close-btn\" (click)=\"onClose()\">\r\n      <span>&times;</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sidebar-content\" *ngIf=\"nodeData\">\r\n    <!-- Node Preview -->\r\n    <div class=\"node-preview\">\r\n      <div class=\"node-preview-card\" [ngClass]=\"getNodeColorClass()\">\r\n        <div class=\"node-icon\">\r\n          <img [src]=\"getNodeIcon()\" alt=\"Node Icon\" />\r\n        </div>\r\n        <div class=\"node-info\">\r\n          <div class=\"node-label\">{{ nodeData?.name?.split(\"\\n\")?.[0] }}</div>\r\n          <div class=\"node-type\">{{ transformedActivityName }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Activity Type Selector -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Activity Type</label>\r\n      <div class=\"display-type-selector\">\r\n        <select\r\n          class=\"form-control\"\r\n          title=\"Select activity type\"\r\n          [value]=\"selectedActivityType?.value\"\r\n          (change)=\"onActivityTypeSelectChange($event)\"\r\n        >\r\n          <option\r\n            *ngFor=\"let type of activityDisplayTypes; trackBy: trackByValue\"\r\n            [value]=\"type.value\"\r\n          >\r\n            {{ type.label }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Description</label>\r\n      <div class=\"display-type-selector\">\r\n        <textarea\r\n          class=\"form-control\"\r\n          aria-label=\"property-description\"\r\n          (input)=\"onDescriptionChange($event)\"\r\n          [value]=\"nodeData.suggestedProperties?.uccxDescription\"\r\n          rows=\"3\"\r\n        ></textarea>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Node Information -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Information</label>\r\n      <div class=\"info-grid\">\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">UCCX Type:</span>\r\n          <span class=\"info-value\" [title]=\"nodeData.uccxTypeName\">{{\r\n            nodeData.uccxTypeName\r\n          }}</span>\r\n        </div>\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">WxCC Activity Name:</span>\r\n          <span class=\"info-value\" [title]=\"transformedActivityName\">{{\r\n            transformedActivityName\r\n          }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Status -->\r\n    <div class=\"section\" *ngIf=\"nodeData.review\">\r\n      <label class=\"section-label\">Review Status</label>\r\n      <div class=\"review-status\">\r\n        <div class=\"review-badge\" [style.background-color]=\"getReviewColor()\">\r\n          {{ getReviewLabel() }}\r\n        </div>\r\n        <div\r\n          class=\"review-reasons\"\r\n          *ngIf=\"nodeData.review.reasons && nodeData.review.reasons.length > 0\"\r\n        >\r\n          <div class=\"reason\" *ngFor=\"let reason of nodeData.review.reasons\">\r\n            <span class=\"reason-icon\">\u26A0</span>\r\n            <span>{{ reason }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Suggested Properties -->\r\n    <div class=\"section\" *ngIf=\"nodeData.suggestedProperties\">\r\n      <label class=\"section-label\">Migration Information</label>\r\n      <div class=\"migration-info\">\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.closestWxccActivity\"\r\n        >\r\n          <div class=\"card-label\">Closest WXCC Activity</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.closestWxccActivity }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.mappingNotes\"\r\n        >\r\n          <div class=\"card-label\">Mapping Notes</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.mappingNotes }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.migrationInstructions\"\r\n        >\r\n          <div class=\"card-label\">Migration Instructions</div>\r\n          <div class=\"card-value instructions\">\r\n            {{ nodeData.suggestedProperties.migrationInstructions }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.node-details-sidebar{position:fixed;top:0;right:-420px;width:420px;height:100%;background:#ffffff;box-shadow:-2px 0 8px #00000026;z-index:1000;transition:right .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}.node-details-sidebar.open{right:0}.node-details-sidebar .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e1e4e8;background:#f8f9fa}.node-details-sidebar .sidebar-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#24292e}.node-details-sidebar .sidebar-header .close-btn{background:none;border:none;font-size:2rem;line-height:1;cursor:pointer;color:#586069;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.node-details-sidebar .sidebar-header .close-btn:hover{background:rgba(0,0,0,.05);color:#24292e}.node-details-sidebar .sidebar-content{flex:1;overflow-y:auto;padding:1.5rem}.node-details-sidebar .sidebar-content .node-preview{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .node-preview .node-preview-card{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:8px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;flex-shrink:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon img{width:24px;height:24px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info{flex:1;min-width:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-label{font-size:1rem;font-weight:600;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-type{font-size:.875rem;color:#586069}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start{background-color:#4caf500d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-icon{background-color:#4caf501a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-label{color:#4caf50}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end{background-color:#f443360d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-icon{background-color:#f443361a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-label{color:#f44336}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway{background-color:#ff98000d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-icon{background-color:#ff98001a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-label{color:#ff9800}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action{background-color:#9c27b00d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-icon{background-color:#9c27b01a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-label{color:#9c27b0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default{background-color:#607d8b0d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-icon{background-color:#607d8b1a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-label{color:#607d8b}.node-details-sidebar .sidebar-content .section{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .section .section-label{display:block;font-size:.65rem;font-weight:600;color:#24292e;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control{width:100%;padding:.625rem .875rem;font-size:.875rem;border:1px solid #d1d5da;border-radius:6px;background:white;transition:border-color .2s;box-sizing:border-box;resize:vertical}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control:focus{outline:none;border-color:#0366d6;box-shadow:0 0 0 3px #0366d61a}.node-details-sidebar .sidebar-content .section .info-grid{display:flex;flex-direction:column;gap:.75rem}.node-details-sidebar .sidebar-content .section .info-grid .info-item{display:flex;justify-content:space-between;align-items:flex-start;padding:.75rem;background:#f6f8fa;border-radius:6px}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-label{font-size:.8125rem;color:#586069;font-weight:500}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-value{font-size:.8125rem;color:#24292e;font-weight:600;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .section .review-status .review-badge{display:inline-block;padding:.5rem 1rem;border-radius:20px;color:#fff;font-size:.8125rem;font-weight:600;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#fff3cd;border-radius:4px;margin-bottom:.5rem;font-size:.8125rem;color:#856404}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason .reason-icon{flex-shrink:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card{padding:1rem;background:#f6f8fa;border-radius:6px;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card:last-child{margin-bottom:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-label{font-size:.75rem;font-weight:600;color:#586069;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value{font-size:.875rem;color:#24292e;line-height:1.5}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value.instructions{white-space:pre-wrap}\n"] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], nodeData: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], activityTypeChange: [{
+                type: Output
+            }], descriptionChange: [{
+                type: Output
+            }] } });
+
+class NodeActionToolbarComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.isVisible = false;
+        this.position = { x: 0, y: 0 };
+        this.deleteNode = new EventEmitter();
+        this.linkNode = new EventEmitter();
+        this.toolbarActions = [
+            {
+                id: 'link',
+                label: 'Link to Node',
+                svg: this.sanitizer.bypassSecurityTrustHtml(`
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                    </svg>
+                `),
+                action: () => this.onLinkNode()
+            },
+            {
+                id: 'delete',
+                label: 'Delete Node',
+                svg: this.sanitizer.bypassSecurityTrustHtml(`
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M3 6h18"></path>
+                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
+                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
+                        <line x1="10" y1="11" x2="10" y2="17"></line>
+                        <line x1="14" y1="11" x2="14" y2="17"></line>
+                    </svg>
+                `),
+                action: () => this.onDeleteNode()
+            }
+        ];
+    }
+    onDeleteNode() {
+        this.deleteNode.emit();
+    }
+    onLinkNode() {
+        this.linkNode.emit();
+    }
+    trackById(index, item) {
+        return item.id;
+    }
+}
+NodeActionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NodeActionToolbarComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+NodeActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NodeActionToolbarComponent, selector: "node-action-toolbar", inputs: { isVisible: "isVisible", position: "position" }, outputs: { deleteNode: "deleteNode", linkNode: "linkNode" }, ngImport: i0, template: "<div \r\n    class=\"node-action-toolbar\" \r\n    [class.visible]=\"isVisible\"\r\n    [style.left.px]=\"position.x\"\r\n    [style.top.px]=\"position.y\">\r\n    <ng-container *ngFor=\"let action of toolbarActions; trackBy: trackById\">\r\n        <button\r\n            type=\"button\"\r\n            class=\"toolbar-action-btn\"\r\n            [class.delete-btn]=\"action.id === 'delete'\"\r\n            [attr.aria-label]=\"action.label\"\r\n            [matTooltip]=\"action.label\"\r\n            matTooltipPosition=\"above\"\r\n            (click)=\"action.action()\">\r\n            <div [innerHTML]=\"action.svg\"></div>\r\n        </button>\r\n    </ng-container>\r\n</div>\r\n", styles: [".node-action-toolbar{position:absolute;display:flex;flex-direction:row;gap:.25rem;padding:.35rem;background:white;border-radius:6px;box-shadow:0 2px 8px #0000001a;border:1px solid #d8d8d8;z-index:1000;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .2s ease;pointer-events:none}.node-action-toolbar.visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.node-action-toolbar .toolbar-action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:4px;background:#f6f8fa;color:#586069;cursor:pointer;transition:all .15s ease}.node-action-toolbar .toolbar-action-btn:hover{background:#e1e4e8;color:#24292e;transform:scale(1.05)}.node-action-toolbar .toolbar-action-btn:active{transform:scale(.95)}.node-action-toolbar .toolbar-action-btn.delete-btn:hover{background:rgba(244,67,54,.1);color:#f44336}.node-action-toolbar .toolbar-action-btn div{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NodeActionToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'node-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n    class=\"node-action-toolbar\" \r\n    [class.visible]=\"isVisible\"\r\n    [style.left.px]=\"position.x\"\r\n    [style.top.px]=\"position.y\">\r\n    <ng-container *ngFor=\"let action of toolbarActions; trackBy: trackById\">\r\n        <button\r\n            type=\"button\"\r\n            class=\"toolbar-action-btn\"\r\n            [class.delete-btn]=\"action.id === 'delete'\"\r\n            [attr.aria-label]=\"action.label\"\r\n            [matTooltip]=\"action.label\"\r\n            matTooltipPosition=\"above\"\r\n            (click)=\"action.action()\">\r\n            <div [innerHTML]=\"action.svg\"></div>\r\n        </button>\r\n    </ng-container>\r\n</div>\r\n", styles: [".node-action-toolbar{position:absolute;display:flex;flex-direction:row;gap:.25rem;padding:.35rem;background:white;border-radius:6px;box-shadow:0 2px 8px #0000001a;border:1px solid #d8d8d8;z-index:1000;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .2s ease;pointer-events:none}.node-action-toolbar.visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.node-action-toolbar .toolbar-action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:4px;background:#f6f8fa;color:#586069;cursor:pointer;transition:all .15s ease}.node-action-toolbar .toolbar-action-btn:hover{background:#e1e4e8;color:#24292e;transform:scale(1.05)}.node-action-toolbar .toolbar-action-btn:active{transform:scale(.95)}.node-action-toolbar .toolbar-action-btn.delete-btn:hover{background:rgba(244,67,54,.1);color:#f44336}.node-action-toolbar .toolbar-action-btn div{display:flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; }, propDecorators: { isVisible: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], deleteNode: [{
+                type: Output
+            }], linkNode: [{
+                type: Output
+            }] } });
+
+class NodeSearchPanelComponent {
+    constructor() {
+        this.searchChange = new EventEmitter();
+        this.selectNodeChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.filteredNodes = this.nodes;
+    }
+    onSearchChange(event) {
+        const value = event.target.value.trim().toLowerCase();
+        if (!value) {
+            this.filteredNodes = this.nodes.slice();
+            return;
+        }
+        this.filteredNodes = this.nodes
+            .filter(node => {
+            var _a, _b, _c, _d, _e;
+            return ((_a = node.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(value)) ||
+                ((_b = node.wxccActivityName) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(value)) ||
+                ((_c = node.uccxTypeName) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(value)) ||
+                ((_d = node.wxccGroup) === null || _d === void 0 ? void 0 : _d.toLowerCase().includes(value)) ||
+                ((_e = node.uccxDisplayType) === null || _e === void 0 ? void 0 : _e.toLowerCase().includes(value));
+        });
+    }
+    onSelectNodeChange(event) {
+        const target = event.target;
+        const id = target.id;
+        this.selectNodeChange.emit(id);
+    }
+}
+NodeSearchPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NodeSearchPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NodeSearchPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NodeSearchPanelComponent, selector: "node-search-panel", inputs: { nodes: "nodes" }, outputs: { searchChange: "searchChange", selectNodeChange: "selectNodeChange" }, ngImport: i0, template: "<div class=\"search-panel\">\r\n    <div class=\"search-input-wrapper\">\r\n        <div class=\"search-icon\">\r\n            <img src=\"assets/icons/search.svg\" />\r\n        </div>\r\n        <input (input)=\"onSearchChange($event)\" type=\"text\" name=\"\" id=\"\" placeholder=\"Search nodes by name, type, variables...\" class=\"search-input\">\r\n    </div>\r\n    <div class=\"search-results-wrapper\" (click)=\"onSelectNodeChange($event)\">\r\n        <div class=\"activity-result-wrapper\" *ngFor=\"let act of filteredNodes\" id=\"{{ act.id }}\">\r\n            {{ act.wxccActivityName || act.name }}\r\n        </div>\r\n    </div>\r\n</div>", styles: [".search-panel{position:absolute;min-width:400px;min-height:400px;max-height:500px;top:1rem;left:1rem;display:flex;flex-direction:column;border-radius:1rem;background-color:#fff}.search-input-wrapper{padding:1rem;position:relative;display:flex;align-items:center;justify-content:center}.search-results-wrapper{padding:1rem;display:flex;flex-direction:column;gap:.25rem;overflow-y:auto}.search-icon{position:absolute;left:1.5rem;display:flex}.search-icon img{width:32px;height:32px}.search-input{border-radius:.5rem;padding:.75rem .75rem .75rem 2.5rem;width:100%}.activity-result-wrapper{padding:1rem;cursor:pointer;background-color:#f1f1f180;border-radius:.5rem}.activity-result-wrapper:hover{background-color:#cbe3ecac}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NodeSearchPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'node-search-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"search-panel\">\r\n    <div class=\"search-input-wrapper\">\r\n        <div class=\"search-icon\">\r\n            <img src=\"assets/icons/search.svg\" />\r\n        </div>\r\n        <input (input)=\"onSearchChange($event)\" type=\"text\" name=\"\" id=\"\" placeholder=\"Search nodes by name, type, variables...\" class=\"search-input\">\r\n    </div>\r\n    <div class=\"search-results-wrapper\" (click)=\"onSelectNodeChange($event)\">\r\n        <div class=\"activity-result-wrapper\" *ngFor=\"let act of filteredNodes\" id=\"{{ act.id }}\">\r\n            {{ act.wxccActivityName || act.name }}\r\n        </div>\r\n    </div>\r\n</div>", styles: [".search-panel{position:absolute;min-width:400px;min-height:400px;max-height:500px;top:1rem;left:1rem;display:flex;flex-direction:column;border-radius:1rem;background-color:#fff}.search-input-wrapper{padding:1rem;position:relative;display:flex;align-items:center;justify-content:center}.search-results-wrapper{padding:1rem;display:flex;flex-direction:column;gap:.25rem;overflow-y:auto}.search-icon{position:absolute;left:1.5rem;display:flex}.search-icon img{width:32px;height:32px}.search-input{border-radius:.5rem;padding:.75rem .75rem .75rem 2.5rem;width:100%}.activity-result-wrapper{padding:1rem;cursor:pointer;background-color:#f1f1f180;border-radius:.5rem}.activity-result-wrapper:hover{background-color:#cbe3ecac}\n"] }]
+        }], propDecorators: { nodes: [{
+                type: Input
+            }], searchChange: [{
+                type: Output
+            }], selectNodeChange: [{
+                type: Output
+            }] } });
+
+cytoscape.use(dagre);
+cytoscape.use(nodeHtmlLabel);
+class WxCCFlowchartComponent {
+    constructor(wxcc2graph, 
+    // private readonly cytoscapeViewportService: CytoscapeViewportService,
+    dialog, wxccActivityCreationService, cdr) {
+        this.wxcc2graph = wxcc2graph;
+        this.dialog = dialog;
+        this.wxccActivityCreationService = wxccActivityCreationService;
+        this.cdr = cdr;
+        this.viewReady = false;
+        this.layoutOptions = {
+            name: "dagre",
+            rankDir: "LR",
+            nodeSep: 180,
+            edgeSep: 60,
+            rankSep: 150,
+            animate: true,
+            animationDuration: 500,
+            fit: true
+        };
+        // Sidebar state
+        this.isSidebarOpen = false;
+        this.selectedNodeData = null;
+        // Search panel state
+        this.isSearchPanelVisible = false;
+        this.searchPanelVisible = false;
+        // Node action toolbar state
+        this.isNodeToolbarVisible = false;
+        this.nodeToolbarPosition = { x: 0, y: 0 };
+        // Add node dialog state
+        this.availableNodes = [];
+        // Link node dialog state
+        this.isLinkDialogOpen = false;
+        this.selectedEdgeId = null;
+        this.selectedEdgeDeleteButtonPosition = null;
+    }
+    ngAfterViewInit() {
+        this.viewReady = true;
+        this.tryInit();
+    }
+    ngOnChanges(changes) {
+        if (changes["flowchart"]) {
+            this.tryInit();
+        }
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.cy) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.cy = undefined;
+    }
+    tryInit() {
+        if (!this.viewReady || !this.flowchartContainer || !this.flowchart) {
+            return;
+        }
+        this.init();
+    }
+    init() {
+        var _a, _b;
+        const container = this.flowchartContainer.nativeElement;
+        (_a = this.cy) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.cy = undefined;
+        const elements = [
+            ...this.flowchart.nodes,
+            ...this.flowchart.edges,
+        ];
+        this.cy = cytoscape({
+            container: container,
+            elements: elements,
+            style: this.getStylesheet(),
+        });
+        this.cy.nodeHtmlLabel([
+            {
+                query: "node",
+                halign: "center",
+                valign: "center",
+                halignBox: "center",
+                valignBox: "center",
+                tpl: (data) => getNodeHtmlTemplate(data),
+            },
+        ]);
+        const layout = (_b = this.cy) === null || _b === void 0 ? void 0 : _b.layout(Object.assign({}, this.layoutOptions)).run();
+        layout.on("layoutstop", () => {
+            // this.cytoscapeViewportService.resetView(this.cy, this.cy?.elements());
+        });
+        this.setupEventListeners();
+    }
+    get activities() { return this.wxcc2graph.getAllActivities(); }
+    // Toggle search panel visibility
+    toggleSearchPanel() {
+        this.isSearchPanelVisible = !this.isSearchPanelVisible;
+        this.cdr.markForCheck();
+    }
+    setupEventListeners() {
+        var _a, _b, _c, _d, _e, _f;
+        // Single tap on node - show only the toolbar (quick actions)
+        (_a = this.cy) === null || _a === void 0 ? void 0 : _a.on("mouseover", "node", (event) => {
+            const node = event.target;
+            this.selectedNodeData = node.data();
+            // Calculate toolbar position relative to the container
+            this.updateToolbarPosition(node);
+            this.isNodeToolbarVisible = true;
+            this.cdr.detectChanges();
+        });
+        (_b = this.cy) === null || _b === void 0 ? void 0 : _b.on("tap", "node", (event) => {
+            const node = event.target;
+            this.clearSelectedEdge();
+            this.selectedNodeData = node.data();
+            this.isSidebarOpen = true;
+            // Hide toolbar when sidebar opens
+            this.isNodeToolbarVisible = false;
+            this.cdr.detectChanges();
+        });
+        (_c = this.cy) === null || _c === void 0 ? void 0 : _c.on("mousemove", "node", (event) => {
+            const node = event.target;
+            this.updateToolbarPosition(node);
+            this.cdr.detectChanges();
+        });
+        // Edge tap - select edge for explicit deletion action
+        (_d = this.cy) === null || _d === void 0 ? void 0 : _d.on("tap", "edge", (event) => {
+            const edge = event.target;
+            this.isSidebarOpen = false;
+            this.hideNodeToolbar();
+            this.selectedNodeData = null;
+            this.selectedEdgeId = edge.id();
+            edge.select();
+            this.updateSelectedEdgeDeleteButtonPosition();
+            this.cdr.detectChanges();
+        });
+        // Canvas tap - hide toolbar and deselect
+        (_e = this.cy) === null || _e === void 0 ? void 0 : _e.on("tap", (event) => {
+            if (event.target === this.cy) {
+                this.clearSelectedEdge();
+                this.isSidebarOpen = false;
+                this.hideNodeToolbar();
+                this.selectedNodeData = null;
+            }
+        });
+        // Pan/zoom events - update toolbar position
+        (_f = this.cy) === null || _f === void 0 ? void 0 : _f.on("pan zoom", () => {
+            var _a;
+            if (this.isNodeToolbarVisible && this.selectedNodeData) {
+                const node = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(this.selectedNodeData.id);
+                if (node === null || node === void 0 ? void 0 : node.length) {
+                    this.updateToolbarPosition(node);
+                }
+            }
+            if (this.selectedEdgeId) {
+                this.updateSelectedEdgeDeleteButtonPosition();
+            }
+            this.cdr.detectChanges();
+        });
+    }
+    updateToolbarPosition(node) {
+        const renderedPosition = node.renderedPosition();
+        const renderedWidth = node.renderedWidth();
+        const renderedHeight = node.renderedHeight();
+        // Position toolbar above the node, centered
+        this.nodeToolbarPosition = {
+            x: renderedPosition.x - 30,
+            y: renderedPosition.y - renderedHeight / 2 - 40, // Above the node
+        };
+    }
+    hideNodeToolbar() {
+        this.isNodeToolbarVisible = false;
+        this.cdr.detectChanges();
+    }
+    getStylesheet() {
+        return StyleConfig;
+    }
+    // ==================== Sidebar Events ====================
+    onCloseSidebar() {
+        this.isSidebarOpen = false;
+        this.hideNodeToolbar();
+        this.selectedNodeData = null;
+        // this.cdr.detectChanges();
+    }
+    onDescriptionChange(description) {
+        var _a;
+        if (!this.selectedNodeData || !this.cy)
+            return;
+        const node = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(this.selectedNodeData.id);
+        if (node) {
+            const updatedData = Object.assign(Object.assign({}, this.selectedNodeData), { suggestedProperties: Object.assign(Object.assign({}, this.selectedNodeData.suggestedProperties), { uccxDescription: description }) });
+            this.wxcc2graph.updateActivityData(updatedData);
+            node.data(updatedData);
+            this.selectedNodeData = updatedData;
+        }
+    }
+    onActivityTypeChange(activityType) {
+        var _a;
+        if (!this.selectedNodeData || !this.cy)
+            return;
+        const node = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(this.selectedNodeData.id);
+        if (node) {
+            const updatedData = Object.assign(Object.assign({}, this.selectedNodeData), { wxccActivityName: activityType.activityName, wxccGroup: activityType.group, iconUrl: activityType.icon });
+            this.wxcc2graph.updateActivityData(updatedData);
+            node.data(updatedData);
+            this.selectedNodeData = updatedData;
+        }
+    }
+    // ==================== Node Toolbar Events ====================
+    onDeleteNode() {
+        var _a;
+        if (!this.selectedNodeData || !this.cy)
+            return;
+        const nodeId = this.selectedNodeData.id;
+        // Remove from service and get affected link IDs
+        const { removedLinkIds } = this.wxcc2graph.removeActivity(nodeId);
+        // Remove edges from cytoscape
+        removedLinkIds.forEach((linkId) => {
+            var _a;
+            (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(linkId).remove();
+        });
+        // Remove node from cytoscape
+        (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(nodeId).remove();
+        // Close sidebar and toolbar
+        this.onCloseSidebar();
+        // Re-run layout
+        this.runLayout();
+    }
+    onDeleteSelectedEdge() {
+        var _a;
+        if (!this.selectedEdgeId || !this.cy)
+            return;
+        const edgeId = this.selectedEdgeId;
+        const removed = this.wxcc2graph.removeLink(edgeId);
+        if (!removed)
+            return;
+        (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(edgeId).remove();
+        this.selectedEdgeId = null;
+        this.selectedEdgeDeleteButtonPosition = null;
+        this.cdr.detectChanges();
+    }
+    onLinkNodeRequest() {
+        var _a;
+        if (!this.selectedNodeData || !this.cy)
+            return;
+        const sourceNode = this.selectedNodeData;
+        if (!this.canCreateOutgoingLink(sourceNode.id)) {
+            return;
+        }
+        // Get the cytoscape node to inspect existing connections
+        const cyNode = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(sourceNode.id);
+        // Collect IDs of nodes already connected as targets from this source
+        const existingTargetIds = new Set(cyNode.outgoers('node').map((n) => n.id()));
+        // Build the filtered list of linkable targets:
+        //  - Never allow the start node (NewPhoneContact) as a target
+        //  - Exclude the source node itself
+        //  - Exclude nodes already linked as targets from this source
+        this.availableNodes = this.wxcc2graph.getAllActivities().filter(act => act.id !== sourceNode.id &&
+            act.wxccActivityName !== 'NewPhoneContact' &&
+            !existingTargetIds.has(act.id));
+        const dialogRef = this.dialog.open(LinkNodeDialogComponent, {
+            panelClass: "no-padding-modal",
+            width: "550px",
+            data: {
+                availableNodes: this.availableNodes,
+                sourceNode: this.selectedNodeData,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.onLinkNodes(result);
+            }
+        });
+    }
+    // ==================== Link Dialog Events ====================
+    onLinkNodes(linkData) {
+        var _a;
+        if (!this.cy)
+            return;
+        if (!this.canCreateOutgoingLink(linkData.sourceNodeId)) {
+            return;
+        }
+        if (this.wxcc2graph.linkExists(linkData.sourceNodeId, linkData.targetNodeId)) {
+            console.warn("Link already exists between these nodes");
+            return;
+        }
+        const edge = this.wxcc2graph.addLink(linkData.sourceNodeId, linkData.targetNodeId, linkData.label);
+        (_a = this.cy) === null || _a === void 0 ? void 0 : _a.add(edge);
+        this.runLayout();
+    }
+    // ==================== Add Node Dialog Events ====================
+    openAddNodeDialog() {
+        this.availableNodes = this.wxcc2graph.getAllActivities();
+        const dialogRef = this.dialog.open(AddNodeDialogComponent, {
+            panelClass: "no-padding-modal",
+            width: '450px',
+            data: {
+                availableNodes: this.availableNodes,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.addActivity(result);
+            }
+        });
+    }
+    addActivity(newNodeData) {
+        var _a;
+        if (!this.cy)
+            return;
+        const node = this.wxccActivityCreationService.createAndSync({
+            activityTypeName: newNodeData.activityTypeName,
+            name: newNodeData.name
+        });
+        // Add node to cytoscape
+        (_a = this.cy) === null || _a === void 0 ? void 0 : _a.add({
+            group: "nodes",
+            data: node.data
+        });
+        // Re-run layout to position the new node
+        this.runLayout();
+    }
+    onNodeSelectChange(id) {
+        var _a, _b;
+        const node = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(id);
+        if (node) {
+            (_b = this.cy) === null || _b === void 0 ? void 0 : _b.center(node);
+            // Set highlighted property in node data
+            const originalData = node.data();
+            node.data(Object.assign(Object.assign({}, originalData), { highlighted: true }));
+            node.emit('data');
+            // Remove highlight after 1s
+            setTimeout(() => {
+                const currentData = node.data();
+                if (currentData.highlighted) {
+                    // Remove the property completely
+                    delete currentData.highlighted;
+                    node.data(currentData);
+                    node.emit('data');
+                }
+            }, 1000);
+        }
+    }
+    zoomIn() {
+        // this.cytoscapeViewportService.zoomIn(this.cy);
+    }
+    zoomOut() {
+        // this.cytoscapeViewportService.zoomOut(this.cy);
+    }
+    resetView() {
+        // this.cytoscapeViewportService.resetView(this.cy, this.cy?.elements());
+    }
+    runLayout() {
+        var _a;
+        if (!this.cy)
+            return;
+        const layout = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.layout(Object.assign({}, this.layoutOptions)).run();
+        layout.on("layoutstop", () => {
+            // this.cytoscapeViewportService.resetView(this.cy, this.cy?.elements());
+        });
+    }
+    canCreateOutgoingLink(sourceNodeId) {
+        var _a;
+        if (!this.cy)
+            return false;
+        const cyNode = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(sourceNodeId);
+        if (!cyNode || cyNode.length === 0)
+            return false;
+        const sourceActivity = cyNode.data().wxccActivityName;
+        const outgoingEdgeCount = cyNode.outgoers('edge').length;
+        // End-type nodes cannot have outgoing links.
+        const END_NODE_TYPES = ['end', 'disconnect-contact', 'blind-transfer'];
+        if (END_NODE_TYPES.includes(sourceActivity))
+            return false;
+        // Start node can only have one output.
+        if (sourceActivity === 'NewPhoneContact' && outgoingEdgeCount >= 1)
+            return false;
+        // Condition node can only have true/false outputs.
+        if (sourceActivity === 'condition-activity' && outgoingEdgeCount >= 2)
+            return false;
+        return true;
+    }
+    clearSelectedEdge() {
+        var _a;
+        if (!this.selectedEdgeId || !this.cy)
+            return;
+        const edge = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(this.selectedEdgeId);
+        if (edge && edge.length) {
+            edge.unselect();
+        }
+        this.selectedEdgeId = null;
+        this.selectedEdgeDeleteButtonPosition = null;
+        this.cdr.detectChanges();
+    }
+    updateSelectedEdgeDeleteButtonPosition() {
+        var _a;
+        if (!this.cy || !this.selectedEdgeId) {
+            this.selectedEdgeDeleteButtonPosition = null;
+            return;
+        }
+        const edge = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.getElementById(this.selectedEdgeId);
+        if (!edge || edge.length === 0) {
+            this.selectedEdgeDeleteButtonPosition = null;
+            return;
+        }
+        const midpoint = edge.renderedMidpoint();
+        // Slight offset so the icon does not sit exactly on top of the edge line.
+        this.selectedEdgeDeleteButtonPosition = {
+            x: midpoint.x + 12,
+            y: midpoint.y - 12,
+        };
+    }
+}
+WxCCFlowchartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartComponent, deps: [{ token: WxCC2GraphService }, { 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%}.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 });
+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%}.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"] }]
+        }], ctorParameters: function () { return [{ type: WxCC2GraphService }, { type: i1$2.MatDialog }, { type: WxCCActivityCreationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { flowchart: [{
+                type: Input
+            }], flowchartContainer: [{
+                type: ViewChild,
+                args: ["flowchartContainer"]
+            }] } });
+
+const BASE = '/api/uccx/migration';
+function buildUrl(customerId, uccxIp, fileName, action, state, format) {
+    return `${BASE}/customer/${customerId}/uccx/${uccxIp}/filename/${fileName}/${action}/type/${state}/wxcc${format ? '/ir' : ''}/json`;
+}
+/**
+ * Any WxCC flowchart api endpoint should go here
+ */
+const WXCC_FLOWCHART_API = {
+    GET_DATA: (params, state = 'ORIG', format) => buildUrl(params.customerId, params.uccxIp, params.fileName, 'get', state, format),
+    SAVE_DRAFT: (params, format) => buildUrl(params.customerId, params.uccxIp, params.fileName, 'save', 'DRAFT', format),
+    RESET_DRAFT: (params, format) => `${BASE}/customer/${params.customerId}/uccx/${params.uccxIp}/filename/${params.fileName}${format ? '' : '/wxcc'}/reset/draft`,
+    COMPLETE_FLOW: (params, format) => buildUrl(params.customerId, params.uccxIp, params.fileName, 'save', 'COMPLETED', format)
+};
+
+class WxCCAPIService {
+    constructor(api) {
+        this.api = api;
+    }
+    /**
+     * Fetch original WXCC flow data
+     */
+    fetchWxCCFlowData(params, state = 'ORIG') {
+        const url = WXCC_FLOWCHART_API.GET_DATA(params, state);
+        // @ts-ignore
+        return this.api.fetch(url);
+    }
+    /**
+     * Fetch original WXCC flow data as IR format
+     */
+    fetchWxCCFlowDataIR(params, state = 'ORIG') {
+        const url = WXCC_FLOWCHART_API.GET_DATA(params, state, 'ir');
+        // @ts-ignore
+        return this.api.fetch(url);
+    }
+    /**
+     * Save WXCC flow data as DRAFT
+     */
+    saveWxCCFlowData(params, data) {
+        const url = WXCC_FLOWCHART_API.SAVE_DRAFT(params);
+        // @ts-ignore
+        return this.api.post(url, data);
+    }
+    /**
+     * Save WXCC flow data as DRAFT in IR format
+     */
+    saveWxCCFlowDataIR(params, data) {
+        const url = WXCC_FLOWCHART_API.SAVE_DRAFT(params, 'ir');
+        // @ts-ignore
+        return this.api.post(url, data);
+    }
+    /**
+     * Reset to original WXCC flow data
+     */
+    resetWxCCFlowData(params) {
+        const url = WXCC_FLOWCHART_API.RESET_DRAFT(params);
+        // @ts-ignore
+        return this.api.post(url);
+    }
+    /**
+     * Reset to original WXCC flow data in IR format
+     */
+    resetWxCCFlowDataIR(params) {
+        const url = WXCC_FLOWCHART_API.RESET_DRAFT(params, 'ir');
+        // @ts-ignore
+        return this.api.post(url);
+    }
+    /**
+     * Save WXCC flow data as COMPLETED
+     */
+    completeWxCCFlowData(params, data) {
+        const url = WXCC_FLOWCHART_API.COMPLETE_FLOW(params);
+        // @ts-ignore
+        return this.api.post(url, data);
+    }
+    /**
+     * Save WXCC flow data as COMPLETED in IR format
+     */
+    completeWxCCFlowDataIR(params, data) {
+        const url = WXCC_FLOWCHART_API.COMPLETE_FLOW(params, 'ir');
+        // @ts-ignore
+        return this.api.post(url, data);
+    }
+}
+WxCCAPIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCAPIService, deps: [{ token: APIService }], target: i0.ɵɵFactoryTarget.Injectable });
+WxCCAPIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCAPIService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCAPIService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: APIService }]; } });
+
+class WxCCFileSelectionBarComponent {
+    constructor() {
+        this.fileNameSelectionChange = new EventEmitter();
+        this.hostFileNames = new Map();
+    }
+    ngOnInit() {
+        this.fileNames.forEach(({ fileName, host }) => {
+            var _a;
+            if (!this.hostFileNames.has(host)) {
+                this.hostFileNames.set(host, []);
+            }
+            (_a = this.hostFileNames.get(host)) === null || _a === void 0 ? void 0 : _a.push(fileName);
+        });
+    }
+    get fileNamesByHost() {
+        return this.hostFileNames.get(this.selectedHost);
+    }
+    get hosts() {
+        if (!this.fileNames.length) {
+            return null;
+        }
+        const hostsSet = new Set(this.fileNames.map((file) => file.host));
+        return Array.from(hostsSet).filter(host => host);
+    }
+    onFileSelectionChange(fileName) {
+        this.fileNameSelectionChange.emit({ fileName: fileName, host: this.selectedHost });
+    }
+    onHostSelectionChange(host) {
+        this.selectedHost = host;
+        this.fileNameSelectionChange.emit({
+            host: host,
+            fileName: this.fileNamesByHost[0]
+        });
+    }
+    trackByFileName(_index, fileName) {
+        return fileName;
+    }
+    trackByHost(_index, host) {
+        return host;
+    }
+}
+WxCCFileSelectionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFileSelectionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WxCCFileSelectionBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WxCCFileSelectionBarComponent, selector: "wxcc-file-selection-bar", inputs: { fileNames: "fileNames", selectedFileName: "selectedFileName", selectedHost: "selectedHost" }, outputs: { fileNameSelectionChange: "fileNameSelectionChange" }, ngImport: i0, template: "<div class=\"file-selection-bar\">\r\n    <mat-form-field appearance=\"outline\" class=\"host-selection\" *ngIf=\"hosts?.length\">\r\n        <!-- <mat-label>Host</mat-label> -->\r\n        <mat-select\r\n            [value]=\"selectedHost\"\r\n            (selectionChange)=\"onHostSelectionChange($event.value)\">\r\n            <mat-option\r\n                *ngFor=\"let host of hosts; trackBy: trackByHost\"\r\n                title=\"{{ host }}\"\r\n                [value]=\"host\">\r\n                {{ host }}\r\n            </mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n\r\n    <mat-form-field appearance=\"outline\" class=\"file-selection\">\r\n        <!-- <mat-label>Script file</mat-label> -->\r\n        <mat-select\r\n            [value]=\"selectedFileName\"\r\n            (selectionChange)=\"onFileSelectionChange($event.value)\">\r\n            <mat-option\r\n                *ngFor=\"let name of fileNamesByHost; trackBy: trackByFileName\"\r\n                title=\"{{ name }}\"\r\n                [value]=\"name\">\r\n                {{ name }}\r\n            </mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{padding:.25rem 0 .5rem}:host ::ng-deep .mat-select-trigger{display:block}:host ::ng-deep .mat-select-trigger .mat-select-arrow-wrapper{transform:none}.file-selection-bar{display:flex;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFileSelectionBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wxcc-file-selection-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"file-selection-bar\">\r\n    <mat-form-field appearance=\"outline\" class=\"host-selection\" *ngIf=\"hosts?.length\">\r\n        <!-- <mat-label>Host</mat-label> -->\r\n        <mat-select\r\n            [value]=\"selectedHost\"\r\n            (selectionChange)=\"onHostSelectionChange($event.value)\">\r\n            <mat-option\r\n                *ngFor=\"let host of hosts; trackBy: trackByHost\"\r\n                title=\"{{ host }}\"\r\n                [value]=\"host\">\r\n                {{ host }}\r\n            </mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n\r\n    <mat-form-field appearance=\"outline\" class=\"file-selection\">\r\n        <!-- <mat-label>Script file</mat-label> -->\r\n        <mat-select\r\n            [value]=\"selectedFileName\"\r\n            (selectionChange)=\"onFileSelectionChange($event.value)\">\r\n            <mat-option\r\n                *ngFor=\"let name of fileNamesByHost; trackBy: trackByFileName\"\r\n                title=\"{{ name }}\"\r\n                [value]=\"name\">\r\n                {{ name }}\r\n            </mat-option>\r\n        </mat-select>\r\n    </mat-form-field>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{padding:.25rem 0 .5rem}:host ::ng-deep .mat-select-trigger{display:block}:host ::ng-deep .mat-select-trigger .mat-select-arrow-wrapper{transform:none}.file-selection-bar{display:flex;gap:1rem}\n"] }]
+        }], propDecorators: { fileNames: [{
+                type: Input
+            }], selectedFileName: [{
+                type: Input
+            }], selectedHost: [{
+                type: Input
+            }], fileNameSelectionChange: [{
+                type: Output
+            }] } });
+
+class WxCCActionsBarComponent {
+    constructor() {
+        this.save = new EventEmitter();
+        this.reset = new EventEmitter();
+        this.complete = new EventEmitter();
+        this.exportNonIr = new EventEmitter();
+    }
+    ngOnInit() { }
+}
+WxCCActionsBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCActionsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WxCCActionsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WxCCActionsBarComponent, selector: "wxcc-actions-bar", outputs: { save: "save", reset: "reset", complete: "complete", exportNonIr: "exportNonIr" }, ngImport: i0, template: "<div class=\"actions-wrapper\">\r\n    <button\r\n        type=\"button\"\r\n        mat-button\r\n        class=\"outline-button\"\r\n        (click)=\"exportNonIr.emit()\">\r\n        Export JSON\r\n    </button>\r\n    <button\r\n        type=\"button\"\r\n        mat-button\r\n        class=\"outline-button\"\r\n        (click)=\"reset.emit()\">\r\n        Reset\r\n    </button>\r\n    <button\r\n        type=\"button\"\r\n        mat-button\r\n        class=\"outline-button\"\r\n        (click)=\"save.emit()\">\r\n        Save\r\n    </button>\r\n    <button\r\n        type=\"button\"\r\n        mat-button\r\n        color=\"primary\"\r\n        (click)=\"complete.emit()\">\r\n        Complete\r\n    </button>\r\n</div>", styles: [".actions-wrapper{display:flex;align-items:center;gap:.5rem}.actions-wrapper button.outline-button{border:none!important}\n"], dependencies: [{ kind: "component", type: i1$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCActionsBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wxcc-actions-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"actions-wrapper\">\r\n    <button\r\n        type=\"button\"\r\n        mat-button\r\n        class=\"outline-button\"\r\n        (click)=\"exportNonIr.emit()\">\r\n        Export JSON\r\n    </button>\r\n    <button\r\n        type=\"button\"\r\n        mat-button\r\n        class=\"outline-button\"\r\n        (click)=\"reset.emit()\">\r\n        Reset\r\n    </button>\r\n    <button\r\n        type=\"button\"\r\n        mat-button\r\n        class=\"outline-button\"\r\n        (click)=\"save.emit()\">\r\n        Save\r\n    </button>\r\n    <button\r\n        type=\"button\"\r\n        mat-button\r\n        color=\"primary\"\r\n        (click)=\"complete.emit()\">\r\n        Complete\r\n    </button>\r\n</div>", styles: [".actions-wrapper{display:flex;align-items:center;gap:.5rem}.actions-wrapper button.outline-button{border:none!important}\n"] }]
+        }], propDecorators: { save: [{
+                type: Output
+            }], reset: [{
+                type: Output
+            }], complete: [{
+                type: Output
+            }], exportNonIr: [{
+                type: Output
+            }] } });
+
+var activities = [
+    {
+        id: "8c89c876-e556-3c8c-a1be-77b8cfbd3800",
+        name: "Start_0\nStart",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Start",
+            uccxComment: "Simple Queuing With Calendar Template",
+            closestWxccActivity: "Start Flow",
+            mappingNotes: "In UCCX voice scripts, callers typically hear ringing until an explicit Accept step executes; in WxCC, the Start Flow event fires when the contact arrives at the Entry Point.",
+            migrationInstructions: "The Start Flow activity appears on the Main Flow canvas by default. You cannot delete the Start Flow activity.\n\nNote: There are certain Output Variables associated with the Start Flow activity depend on the selected Flow Trigger Event. These variables store data that is captured at the moment the flow is triggered.",
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Start",
+        uccxTypeName: "Start",
+        uccxWfId: 0,
+        unmappedReason: null,
+        wxccActivityId: "start",
+        wxccActivityName: "NewPhoneContact",
+        wxccGroup: "start"
+    },
+    {
+        id: "c535b5fd-5ab9-323f-b1ac-667f4590d801",
+        name: "End_12\nEnd",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "End",
+            closestWxccActivity: "End Flow",
+            mappingNotes: "UCCX commonly uses Terminate + End; in Flow Designer, Disconnect Contact + End Flow is the typical pattern.",
+            migrationInstructions: "* Drag and drop the \"End Flow\" Activity to the flow canvas\n* Analyze the UCCX call flow, identify and connect the existing Acvities output branch to the End Flow input.\n\nNote: There is no Output Branch for the End Flow Activity and we can add Multiple End Flow Activity to help with readability of the flow when the flow becomes super big",
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "End",
+        uccxTypeName: "End",
+        uccxWfId: 12,
+        unmappedReason: null,
+        wxccActivityId: "end",
+        wxccActivityName: "end",
+        wxccGroup: "end"
+    },
+    {
+        id: "78c3dea1-172e-3de9-9c99-3ce92fb4b12e",
+        name: "Play Prompt_16\nPlay Prompt (--Triggering Contact--, WelcomePrompt)",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Play Prompt (--Triggering Contact--, WelcomePrompt)",
+            prompt: "WelcomePrompt",
+            closestWxccActivity: "Play Message",
+            mappingNotes: "Flow Designer Play Message supports mixing audio files and TTS in a single activity; UCCX often builds composite prompts using Prompt steps.",
+            migrationInstructions: "* Drag and drop the Play Message Activity to the Canvas\n* Click the \"Play Message\" Activity to update its property\n* We shall either use Text-to-Speech or Choose play using an Audio Prompt(.WAV)\n* For TTS, Toggle the \"Enable Text-to-Speech\" to utilize TTS, if not, Select the Audio File from the dropdown menu.\n* Optionally, we can also create Local Variables to store the Audio File name if we do not want to point the WAV file directly\n\nNote: When using TTS, the TTS Message field accepts two types of input: raw text (plaintext) or SSML-formatted data. You can use variables also as part of the message to read the dynamic content\n\nNote: If customer would like to utilize the existing Prompts from the UCCX, we can go with selecting Auio files or if the customer would like to go with TTS, then we can turn on the TTS but the we have to input the Text that should be converted to Speech.\n\nFor supported SSML tags for Cisco Cloud Text-to-Speech, see the link: https://help.webex.com/en-us/article/ntkjqhw/Text-to-Speech-(TTS)-in-Webex-Contact-Center#reference-template_b6eff334-4963-4685-b1dc-17184aaaa308",
+            uccxKeyFields: [
+                "promptDTMFExpr",
+                "bargeIn",
+                "continueOnPromptErrors",
+                "flushInputBufferFlag"
+            ],
+            uccxKeyFieldExamples: {
+                flushInputBufferFlag: "true",
+                promptDTMFExpr: "P[1161.wav]",
+                bargeIn: "true",
+                continueOnPromptErrors: "true"
+            },
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Play Prompt",
+        uccxTypeName: "Play Prompt",
+        uccxWfId: 16,
+        unmappedReason: null,
+        wxccActivityId: "5f114466ef5cfc454fbbf131",
+        wxccActivityName: "play-message",
+        wxccGroup: "action"
+    },
+    {
+        id: "94eb01a7-71de-3b5b-96b5-02c38e29f58f",
+        name: "Accept_43\nAccept (--Triggering Contact--)",
+        review: {
+            color: "red",
+            level: "must_review",
+            reasons: [
+                "Mapper mappingQuality=red (missing WxCC activity identification)",
+                "IR marked activity as unmapped: No mapper entry or missing activityName"
+            ]
+        },
+        suggestedProperties: {
+            uccxDescription: "Accept (--Triggering Contact--)",
+            closestWxccActivity: "Start Flow (implicit accept)",
+            mappingNotes: "When migrating, ensure any UCCX logic that occurs *before Accept* is still valid; in WxCC, the IVR flow starts upon entry point invocation.",
+            migrationInstructions: "The Start Flow activity appears on the Main Flow canvas by default. You cannot delete the Start Flow activity.\n\nNote: There are certain Output Variables associated with the Start Flow activity depend on the selected Flow Trigger Event. These variables store data that is captured at the moment the flow is triggered.",
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Accept",
+        uccxTypeName: "Accept",
+        uccxWfId: 43,
+        unmappedReason: "No mapper entry or missing activityName",
+        wxccActivityId: null,
+        wxccActivityName: "unmapped",
+        wxccGroup: "unmapped"
+    },
+    {
+        id: "95c0b5ba-20a8-3062-995f-d01036660cdc",
+        name: "Calendar_54\nCalendar (cal)",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Calendar (cal)",
+            calendarVarName: "cal",
+            calendarExpr: "cal",
+            closestWxccActivity: "Business Hours",
+            mappingNotes: "We should create the Business Hours first in the WebEx CC Control Hub so that it can be refferenced inside the Business Hours Activity in Flow Designer.\n\nWe need to ensure the \"\"outConnections\"\" of the Calendar Step in UCCX maps correctly in the \"links\" section of the WxCC JSON to connect to the proper Activities.",
+            migrationInstructions: "* Drag and drop the \"Business Hours\" Activity in the Canvas\n* Click the \"Business Hours\" Activity to update its properties\n* Select the configured Busines Hours schedule in the drop down menu under Schedule Details\n* Connect the below output branches to the appropriate Activity in the flow canvas based on the the call flow\n\n • Key UCCX JSON fields to map with WxCC Activites under the \"link\" to ensure the call flow logic follws the UCCX scorrectly\n\n          \"Business Hours\" > workingHours\n          \"Holidays\", > holidays\n          \"The Rest\", > default\n          \"Failure\" > error",
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Calendar",
+        uccxTypeName: "Calendar",
+        uccxWfId: 54,
+        unmappedReason: null,
+        wxccActivityId: "business-hours",
+        wxccActivityName: "business-hours",
+        wxccGroup: "enum-gateway"
+    },
+    {
+        id: "30eea40d-78b7-32e3-83c6-94738320acab",
+        name: "Play Prompt_87\nPlay Prompt (--Triggering Contact--, FailurePrompt)",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Play Prompt (--Triggering Contact--, FailurePrompt)",
+            prompt: "FailurePrompt",
+            closestWxccActivity: "Play Message",
+            mappingNotes: "Flow Designer Play Message supports mixing audio files and TTS in a single activity; UCCX often builds composite prompts using Prompt steps.",
+            migrationInstructions: "* Drag and drop the Play Message Activity to the Canvas\n* Click the \"Play Message\" Activity to update its property\n* We shall either use Text-to-Speech or Choose play using an Audio Prompt(.WAV)\n* For TTS, Toggle the \"Enable Text-to-Speech\" to utilize TTS, if not, Select the Audio File from the dropdown menu.\n* Optionally, we can also create Local Variables to store the Audio File name if we do not want to point the WAV file directly\n\nNote: When using TTS, the TTS Message field accepts two types of input: raw text (plaintext) or SSML-formatted data. You can use variables also as part of the message to read the dynamic content\n\nNote: If customer would like to utilize the existing Prompts from the UCCX, we can go with selecting Auio files or if the customer would like to go with TTS, then we can turn on the TTS but the we have to input the Text that should be converted to Speech.\n\nFor supported SSML tags for Cisco Cloud Text-to-Speech, see the link: https://help.webex.com/en-us/article/ntkjqhw/Text-to-Speech-(TTS)-in-Webex-Contact-Center#reference-template_b6eff334-4963-4685-b1dc-17184aaaa308",
+            uccxKeyFields: [
+                "promptDTMFExpr",
+                "bargeIn",
+                "continueOnPromptErrors",
+                "flushInputBufferFlag"
+            ],
+            uccxKeyFieldExamples: {
+                flushInputBufferFlag: "true",
+                promptDTMFExpr: "P[1161.wav]",
+                bargeIn: "true",
+                continueOnPromptErrors: "true"
+            },
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Play Prompt",
+        uccxTypeName: "Play Prompt",
+        uccxWfId: 87,
+        unmappedReason: null,
+        wxccActivityId: "5f114466ef5cfc454fbbf131",
+        wxccActivityName: "play-message",
+        wxccGroup: "action"
+    },
+    {
+        id: "824f0d8a-01d5-3f21-9563-590427002c86",
+        name: "Play Prompt_107\nPlay Prompt (--Triggering Contact--, NonBusinessHourPrompt)",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Play Prompt (--Triggering Contact--, NonBusinessHourPrompt)",
+            prompt: "NonBusinessHourPrompt",
+            closestWxccActivity: "Play Message",
+            mappingNotes: "Flow Designer Play Message supports mixing audio files and TTS in a single activity; UCCX often builds composite prompts using Prompt steps.",
+            migrationInstructions: "* Drag and drop the Play Message Activity to the Canvas\n* Click the \"Play Message\" Activity to update its property\n* We shall either use Text-to-Speech or Choose play using an Audio Prompt(.WAV)\n* For TTS, Toggle the \"Enable Text-to-Speech\" to utilize TTS, if not, Select the Audio File from the dropdown menu.\n* Optionally, we can also create Local Variables to store the Audio File name if we do not want to point the WAV file directly\n\nNote: When using TTS, the TTS Message field accepts two types of input: raw text (plaintext) or SSML-formatted data. You can use variables also as part of the message to read the dynamic content\n\nNote: If customer would like to utilize the existing Prompts from the UCCX, we can go with selecting Auio files or if the customer would like to go with TTS, then we can turn on the TTS but the we have to input the Text that should be converted to Speech.\n\nFor supported SSML tags for Cisco Cloud Text-to-Speech, see the link: https://help.webex.com/en-us/article/ntkjqhw/Text-to-Speech-(TTS)-in-Webex-Contact-Center#reference-template_b6eff334-4963-4685-b1dc-17184aaaa308",
+            uccxKeyFields: [
+                "promptDTMFExpr",
+                "bargeIn",
+                "continueOnPromptErrors",
+                "flushInputBufferFlag"
+            ],
+            uccxKeyFieldExamples: {
+                flushInputBufferFlag: "true",
+                promptDTMFExpr: "P[1161.wav]",
+                bargeIn: "true",
+                continueOnPromptErrors: "true"
+            },
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Play Prompt",
+        uccxTypeName: "Play Prompt",
+        uccxWfId: 107,
+        unmappedReason: null,
+        wxccActivityId: "5f114466ef5cfc454fbbf131",
+        wxccActivityName: "play-message",
+        wxccGroup: "action"
+    },
+    {
+        id: "eb11f7cf-18d7-31aa-936f-68df91fc9c6f",
+        name: "Select Resource_123\nSelect Resource (--Triggering Contact-- from HolidayCSQ)",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Select Resource (--Triggering Contact-- from HolidayCSQ)",
+            queuingExpr: "HolidayCSQ",
+            ringTimeExpr: "12",
+            routingTypeStr: "Contact Service Queue",
+            toQueue: true,
+            toConnect: true,
+            closestWxccActivity: "Queue Contact (agent selection is built-in) or Queue To Agent",
+            mappingNotes: "Avoid reproducing UCCX resource-selection logic step-by-step unless absolutely required; leverage WxCC routing features where possible.",
+            migrationInstructions: "* Drag and drop the \"Queue Contact\" Activity to the canvas\n* Click the added \"Queue Contact\" activity to update its property\n* Select the \"Static Queue\" name if all contacts should go to a single queue or select the \"Variable Queue\" if the queue should change based on the certain parameters or choosen menu options, etc.\n* If we selected the Static Queue whick routes based on Skill then we have to Configure the Skill Requirements or if we choosen Dynamic Queue, we should also choose the reuqired Skill either through static or dynamic.\n\n* We should also select the Fallback Queue. \n\nNote: The Fallback Queue always honors Longest Available Agent routing. If the selected queue uses Skills Based Routing, skills cannot be configured.\n\nNote: Queue should be already created in the WebEx CC Control Hub to be available inside the flow designer to select. Depends on the type of the Queue, we select, there may be additional options to choose from the properties.\n\nNote: UCCX Select Resource does not give any information about the Queue itself like wheather its group or Skill based and manual intervention is required after the flow is created and certain settings shall need to be updated directly on the Flow Designer.",
+            uccxKeyFields: [
+                "queuingExpr",
+                "toQueue",
+                "toConnect",
+                "ringTimeExpr"
+            ],
+            uccxKeyFieldExamples: {
+                ringTimeExpr: "10",
+                toQueue: "true",
+                toConnect: "true",
+                queuingExpr: "\"CSQ_SalesStars\""
+            },
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Select Resource",
+        uccxTypeName: "Select Resource",
+        uccxWfId: 123,
+        unmappedReason: null,
+        wxccActivityId: "5f114550ef5cfc454fbbf133",
+        wxccActivityName: "queue-contact",
+        wxccGroup: "action"
+    },
+    {
+        id: "ddb6c20e-1574-3485-8151-f23052f6f6e7",
+        name: "Play Prompt_125\nPlay Prompt (--Triggering Contact--, QueuePrompt)",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Play Prompt (--Triggering Contact--, QueuePrompt)",
+            prompt: "QueuePrompt",
+            closestWxccActivity: "Play Message",
+            mappingNotes: "Flow Designer Play Message supports mixing audio files and TTS in a single activity; UCCX often builds composite prompts using Prompt steps.",
+            migrationInstructions: "* Drag and drop the Play Message Activity to the Canvas\n* Click the \"Play Message\" Activity to update its property\n* We shall either use Text-to-Speech or Choose play using an Audio Prompt(.WAV)\n* For TTS, Toggle the \"Enable Text-to-Speech\" to utilize TTS, if not, Select the Audio File from the dropdown menu.\n* Optionally, we can also create Local Variables to store the Audio File name if we do not want to point the WAV file directly\n\nNote: When using TTS, the TTS Message field accepts two types of input: raw text (plaintext) or SSML-formatted data. You can use variables also as part of the message to read the dynamic content\n\nNote: If customer would like to utilize the existing Prompts from the UCCX, we can go with selecting Auio files or if the customer would like to go with TTS, then we can turn on the TTS but the we have to input the Text that should be converted to Speech.\n\nFor supported SSML tags for Cisco Cloud Text-to-Speech, see the link: https://help.webex.com/en-us/article/ntkjqhw/Text-to-Speech-(TTS)-in-Webex-Contact-Center#reference-template_b6eff334-4963-4685-b1dc-17184aaaa308",
+            uccxKeyFields: [
+                "promptDTMFExpr",
+                "bargeIn",
+                "continueOnPromptErrors",
+                "flushInputBufferFlag"
+            ],
+            uccxKeyFieldExamples: {
+                flushInputBufferFlag: "true",
+                promptDTMFExpr: "P[1161.wav]",
+                bargeIn: "true",
+                continueOnPromptErrors: "true"
+            },
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Play Prompt",
+        uccxTypeName: "Play Prompt",
+        uccxWfId: 125,
+        unmappedReason: null,
+        wxccActivityId: "5f114466ef5cfc454fbbf131",
+        wxccActivityName: "play-message",
+        wxccGroup: "action"
+    },
+    {
+        id: "9e093dc4-866c-32ca-bebf-624ae3dcfd62",
+        name: "Delay_126\nDelay DelayWhileQueued sec",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Delay DelayWhileQueued sec",
+            delayExpression: "DelayWhileQueued",
+            expression: "DelayWhileQueued",
+            interruptible: true,
+            closestWxccActivity: "Wait",
+            mappingNotes: "The practical outcome of these two steps is functionally equivalent: they introduce a time-based pause in the call flow\n\nAlthought the Wait Activity is the equivalent of Delay but we don't recommend usage of the Wait activity when an IVR session is active as it may cause the IVR session to time out. In such cases, contact will experience dead air resulting in call failures. We strongly recommend flow designers to use the Wait activity in the CallbackFailed event and specify the wait period.",
+            migrationInstructions: "* Drag and drop the \"wait\" Activity into the canvas\n* Click the Wait Activity to update its properties\n* Enter duration between 00:00:05 - 72:00:00\n\nNote: No Input or Output Variables are applicable on this activity\n\nTypically, in UCCX, Delay Step uses either Variable or it shall be statically configured through Delay Step property",
+            uccxKeyFields: [
+                "delayExpression",
+                "interruptible"
+            ],
+            uccxKeyFieldExamples: {
+                delayExpression: "DelayWhileQueued",
+                interruptible: "true"
+            },
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Delay",
+        uccxTypeName: "Delay",
+        uccxWfId: 126,
+        unmappedReason: null,
+        wxccActivityId: "wait-activity",
+        wxccActivityName: "wait-activity",
+        wxccGroup: "action"
+    },
+    {
+        id: "8dd88674-9b03-39f0-803e-1a06ecc32970",
+        name: "Select Resource_133\nSelect Resource (--Triggering Contact-- from BusinessHourCSQ)",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Select Resource (--Triggering Contact-- from BusinessHourCSQ)",
+            queuingExpr: "BusinessHourCSQ",
+            ringTimeExpr: "12",
+            routingTypeStr: "Contact Service Queue",
+            toQueue: true,
+            toConnect: true,
+            closestWxccActivity: "Queue Contact (agent selection is built-in) or Queue To Agent",
+            mappingNotes: "Avoid reproducing UCCX resource-selection logic step-by-step unless absolutely required; leverage WxCC routing features where possible.",
+            migrationInstructions: "* Drag and drop the \"Queue Contact\" Activity to the canvas\n* Click the added \"Queue Contact\" activity to update its property\n* Select the \"Static Queue\" name if all contacts should go to a single queue or select the \"Variable Queue\" if the queue should change based on the certain parameters or choosen menu options, etc.\n* If we selected the Static Queue whick routes based on Skill then we have to Configure the Skill Requirements or if we choosen Dynamic Queue, we should also choose the reuqired Skill either through static or dynamic.\n\n* We should also select the Fallback Queue. \n\nNote: The Fallback Queue always honors Longest Available Agent routing. If the selected queue uses Skills Based Routing, skills cannot be configured.\n\nNote: Queue should be already created in the WebEx CC Control Hub to be available inside the flow designer to select. Depends on the type of the Queue, we select, there may be additional options to choose from the properties.\n\nNote: UCCX Select Resource does not give any information about the Queue itself like wheather its group or Skill based and manual intervention is required after the flow is created and certain settings shall need to be updated directly on the Flow Designer.",
+            uccxKeyFields: [
+                "queuingExpr",
+                "toQueue",
+                "toConnect",
+                "ringTimeExpr"
+            ],
+            uccxKeyFieldExamples: {
+                ringTimeExpr: "10",
+                toQueue: "true",
+                toConnect: "true",
+                queuingExpr: "\"CSQ_SalesStars\""
+            },
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Select Resource",
+        uccxTypeName: "Select Resource",
+        uccxWfId: 133,
+        unmappedReason: null,
+        wxccActivityId: "5f114550ef5cfc454fbbf133",
+        wxccActivityName: "queue-contact",
+        wxccGroup: "action"
+    },
+    {
+        id: "7b61caf6-ba3f-3a44-84bb-3dacdbde8b60",
+        name: "Play Prompt_135\nPlay Prompt (--Triggering Contact--, QueuePrompt)",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Play Prompt (--Triggering Contact--, QueuePrompt)",
+            prompt: "QueuePrompt",
+            closestWxccActivity: "Play Message",
+            mappingNotes: "Flow Designer Play Message supports mixing audio files and TTS in a single activity; UCCX often builds composite prompts using Prompt steps.",
+            migrationInstructions: "* Drag and drop the Play Message Activity to the Canvas\n* Click the \"Play Message\" Activity to update its property\n* We shall either use Text-to-Speech or Choose play using an Audio Prompt(.WAV)\n* For TTS, Toggle the \"Enable Text-to-Speech\" to utilize TTS, if not, Select the Audio File from the dropdown menu.\n* Optionally, we can also create Local Variables to store the Audio File name if we do not want to point the WAV file directly\n\nNote: When using TTS, the TTS Message field accepts two types of input: raw text (plaintext) or SSML-formatted data. You can use variables also as part of the message to read the dynamic content\n\nNote: If customer would like to utilize the existing Prompts from the UCCX, we can go with selecting Auio files or if the customer would like to go with TTS, then we can turn on the TTS but the we have to input the Text that should be converted to Speech.\n\nFor supported SSML tags for Cisco Cloud Text-to-Speech, see the link: https://help.webex.com/en-us/article/ntkjqhw/Text-to-Speech-(TTS)-in-Webex-Contact-Center#reference-template_b6eff334-4963-4685-b1dc-17184aaaa308",
+            uccxKeyFields: [
+                "promptDTMFExpr",
+                "bargeIn",
+                "continueOnPromptErrors",
+                "flushInputBufferFlag"
+            ],
+            uccxKeyFieldExamples: {
+                flushInputBufferFlag: "true",
+                promptDTMFExpr: "P[1161.wav]",
+                bargeIn: "true",
+                continueOnPromptErrors: "true"
+            },
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Play Prompt",
+        uccxTypeName: "Play Prompt",
+        uccxWfId: 135,
+        unmappedReason: null,
+        wxccActivityId: "5f114466ef5cfc454fbbf131",
+        wxccActivityName: "play-message",
+        wxccGroup: "action"
+    },
+    {
+        id: "f64571d2-a862-3c35-9098-abae0f54b985",
+        name: "Delay_136\nDelay DelayWhileQueued sec",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        suggestedProperties: {
+            uccxDescription: "Delay DelayWhileQueued sec",
+            delayExpression: "DelayWhileQueued",
+            expression: "DelayWhileQueued",
+            interruptible: true,
+            closestWxccActivity: "Wait",
+            mappingNotes: "The practical outcome of these two steps is functionally equivalent: they introduce a time-based pause in the call flow\n\nAlthought the Wait Activity is the equivalent of Delay but we don't recommend usage of the Wait activity when an IVR session is active as it may cause the IVR session to time out. In such cases, contact will experience dead air resulting in call failures. We strongly recommend flow designers to use the Wait activity in the CallbackFailed event and specify the wait period.",
+            migrationInstructions: "* Drag and drop the \"wait\" Activity into the canvas\n* Click the Wait Activity to update its properties\n* Enter duration between 00:00:05 - 72:00:00\n\nNote: No Input or Output Variables are applicable on this activity\n\nTypically, in UCCX, Delay Step uses either Variable or it shall be statically configured through Delay Step property",
+            uccxKeyFields: [
+                "delayExpression",
+                "interruptible"
+            ],
+            uccxKeyFieldExamples: {
+                delayExpression: "DelayWhileQueued",
+                interruptible: "true"
+            },
+            allAudioFilesInFlow: [
+                "ICD\\ICDQueue.wav",
+                "ICD\\ICDWelcome.wav",
+                "ICDQueue.wav",
+                "ICDWelcome.wav"
+            ]
+        },
+        uccxDisplayType: "Delay",
+        uccxTypeName: "Delay",
+        uccxWfId: 136,
+        unmappedReason: null,
+        wxccActivityId: "wait-activity",
+        wxccActivityName: "wait-activity",
+        wxccGroup: "action"
+    }
+];
+var aefFile = "C:\\Windows\\TEMP\\upload-3096504673883630384.aef";
+var generatedAt = "2026-05-11T11:31:14.143682200Z";
+var links = [
+    {
+        conditionExpr: "out",
+        id: "fe58c236-9a37-318c-8d4c-0cf6650fdb9d",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "8c89c876-e556-3c8c-a1be-77b8cfbd3800",
+        targetActivityId: "94eb01a7-71de-3b5b-96b5-02c38e29f58f",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 0,
+        uccxLabel: "",
+        uccxToWfId: 43
+    },
+    {
+        conditionExpr: "default",
+        id: "15d60d2d-a2a7-32b7-9ecd-bc7815f49c24",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "78c3dea1-172e-3de9-9c99-3ce92fb4b12e",
+        targetActivityId: "95c0b5ba-20a8-3062-995f-d01036660cdc",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 16,
+        uccxLabel: "",
+        uccxToWfId: 54
+    },
+    {
+        conditionExpr: "default",
+        id: "d2257d15-c592-303e-8995-532bc5c5cf83",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "94eb01a7-71de-3b5b-96b5-02c38e29f58f",
+        targetActivityId: "78c3dea1-172e-3de9-9c99-3ce92fb4b12e",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 43,
+        uccxLabel: "",
+        uccxToWfId: 16
+    },
+    {
+        conditionExpr: "business_hours",
+        id: "3d56441f-0b08-3559-b3a1-9808180504f3",
+        review: {
+            color: "yellow",
+            level: "low_confidence",
+            reasons: [
+                "Non-standard conditionExpr (likely needs manual port selection in Flow Designer)"
+            ]
+        },
+        sourceActivityId: "95c0b5ba-20a8-3062-995f-d01036660cdc",
+        targetActivityId: "8dd88674-9b03-39f0-803e-1a06ecc32970",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 54,
+        uccxLabel: "Business Hours",
+        uccxToWfId: 133
+    },
+    {
+        conditionExpr: "holidays",
+        id: "2bb98772-9225-3fdf-9646-a3854f1884fd",
+        review: {
+            color: "yellow",
+            level: "low_confidence",
+            reasons: [
+                "Non-standard conditionExpr (likely needs manual port selection in Flow Designer)"
+            ]
+        },
+        sourceActivityId: "95c0b5ba-20a8-3062-995f-d01036660cdc",
+        targetActivityId: "eb11f7cf-18d7-31aa-936f-68df91fc9c6f",
+        uccxEdgeIndex: 1,
+        uccxFromWfId: 54,
+        uccxLabel: "Holidays",
+        uccxToWfId: 123
+    },
+    {
+        conditionExpr: "the_rest",
+        id: "4bf84735-5161-32e2-b94f-3b848390a1ac",
+        review: {
+            color: "yellow",
+            level: "low_confidence",
+            reasons: [
+                "Non-standard conditionExpr (likely needs manual port selection in Flow Designer)"
+            ]
+        },
+        sourceActivityId: "95c0b5ba-20a8-3062-995f-d01036660cdc",
+        targetActivityId: "824f0d8a-01d5-3f21-9563-590427002c86",
+        uccxEdgeIndex: 2,
+        uccxFromWfId: 54,
+        uccxLabel: "The Rest",
+        uccxToWfId: 107
+    },
+    {
+        conditionExpr: "failure",
+        id: "43c91f09-d081-3524-ad2a-7ddf5d0bd3de",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "95c0b5ba-20a8-3062-995f-d01036660cdc",
+        targetActivityId: "30eea40d-78b7-32e3-83c6-94738320acab",
+        uccxEdgeIndex: 3,
+        uccxFromWfId: 54,
+        uccxLabel: "Failure",
+        uccxToWfId: 87
+    },
+    {
+        conditionExpr: "default",
+        id: "3cec80e0-81ac-302c-9ff5-57ff85ecaf2d",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "30eea40d-78b7-32e3-83c6-94738320acab",
+        targetActivityId: "c535b5fd-5ab9-323f-b1ac-667f4590d801",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 87,
+        uccxLabel: "",
+        uccxToWfId: 12
+    },
+    {
+        conditionExpr: "default",
+        id: "d4d3a905-3b1a-32fe-a90d-43ac44ff2e94",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "824f0d8a-01d5-3f21-9563-590427002c86",
+        targetActivityId: "c535b5fd-5ab9-323f-b1ac-667f4590d801",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 107,
+        uccxLabel: "",
+        uccxToWfId: 12
+    },
+    {
+        conditionExpr: "default",
+        id: "e9259722-948e-36f0-b292-1cdcbf2fc63c",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "eb11f7cf-18d7-31aa-936f-68df91fc9c6f",
+        targetActivityId: "c535b5fd-5ab9-323f-b1ac-667f4590d801",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 123,
+        uccxLabel: "Connected",
+        uccxToWfId: 12
+    },
+    {
+        conditionExpr: "queued",
+        id: "1e964ee4-d8d5-3607-9bfb-cae54e07f2cb",
+        review: {
+            color: "yellow",
+            level: "low_confidence",
+            reasons: [
+                "Non-standard conditionExpr (likely needs manual port selection in Flow Designer)"
+            ]
+        },
+        sourceActivityId: "eb11f7cf-18d7-31aa-936f-68df91fc9c6f",
+        targetActivityId: "ddb6c20e-1574-3485-8151-f23052f6f6e7",
+        uccxEdgeIndex: 1,
+        uccxFromWfId: 123,
+        uccxLabel: "Queued",
+        uccxToWfId: 125
+    },
+    {
+        conditionExpr: "default",
+        id: "81f3a025-70c9-3d05-a2a5-de4a981c0715",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "ddb6c20e-1574-3485-8151-f23052f6f6e7",
+        targetActivityId: "9e093dc4-866c-32ca-bebf-624ae3dcfd62",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 125,
+        uccxLabel: "",
+        uccxToWfId: 126
+    },
+    {
+        conditionExpr: "default",
+        id: "36d5e8cf-ce9d-3acd-bf49-04c1c3d9f69d",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "9e093dc4-866c-32ca-bebf-624ae3dcfd62",
+        targetActivityId: "ddb6c20e-1574-3485-8151-f23052f6f6e7",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 126,
+        uccxLabel: "",
+        uccxToWfId: 125
+    },
+    {
+        conditionExpr: "default",
+        id: "74d24ec3-31a8-3aef-9359-1eb79b92077c",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "8dd88674-9b03-39f0-803e-1a06ecc32970",
+        targetActivityId: "c535b5fd-5ab9-323f-b1ac-667f4590d801",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 133,
+        uccxLabel: "Connected",
+        uccxToWfId: 12
+    },
+    {
+        conditionExpr: "queued",
+        id: "d96a9238-fc21-3a9d-a90a-e2af7698d36a",
+        review: {
+            color: "yellow",
+            level: "low_confidence",
+            reasons: [
+                "Non-standard conditionExpr (likely needs manual port selection in Flow Designer)"
+            ]
+        },
+        sourceActivityId: "8dd88674-9b03-39f0-803e-1a06ecc32970",
+        targetActivityId: "7b61caf6-ba3f-3a44-84bb-3dacdbde8b60",
+        uccxEdgeIndex: 1,
+        uccxFromWfId: 133,
+        uccxLabel: "Queued",
+        uccxToWfId: 135
+    },
+    {
+        conditionExpr: "default",
+        id: "4fec8261-a460-3a2b-8a84-934592a62734",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "7b61caf6-ba3f-3a44-84bb-3dacdbde8b60",
+        targetActivityId: "f64571d2-a862-3c35-9098-abae0f54b985",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 135,
+        uccxLabel: "",
+        uccxToWfId: 136
+    },
+    {
+        conditionExpr: "default",
+        id: "27e9f7a7-875f-34f1-97d7-a277d48035ac",
+        review: {
+            color: "green",
+            level: "confident",
+            reasons: []
+        },
+        sourceActivityId: "f64571d2-a862-3c35-9098-abae0f54b985",
+        targetActivityId: "7b61caf6-ba3f-3a44-84bb-3dacdbde8b60",
+        uccxEdgeIndex: 0,
+        uccxFromWfId: 136,
+        uccxLabel: "",
+        uccxToWfId: 135
+    }
+];
+var prefix = "QueuingWithCalendar_uccx.aef";
+var resources = {
+    aefFile: "C:\\Windows\\TEMP\\upload-3096504673883630384.aef",
+    audioFiles: [
+        "ICDQueue.wav",
+        "ICDWelcome.wav",
+        "ICD\\ICDQueue.wav",
+        "ICD\\ICDWelcome.wav"
+    ],
+    audioFilesCount: 4,
+    generatedAt: "2026-05-11T11:31:14.128113200Z",
+    variableCount: 10,
+    variables: [
+        {
+            hints: [
+                "default_from_uccx",
+                "prompt"
+            ],
+            isParameter: false,
+            metaAttributes: null,
+            name: "WelcomePrompt",
+            type: "STRING",
+            usedByWfIds: [
+                16
+            ],
+            value: "ICDWelcome.wav"
+        },
+        {
+            hints: [
+                "calendar",
+                "calendar_expr"
+            ],
+            isParameter: false,
+            metaAttributes: null,
+            name: "cal",
+            type: "STRING",
+            usedByWfIds: [
+                54
+            ],
+            value: null
+        },
+        {
+            hints: [
+                "prompt"
+            ],
+            isParameter: false,
+            metaAttributes: null,
+            name: "FailurePrompt",
+            type: "STRING",
+            usedByWfIds: [
+                87
+            ],
+            value: null
+        },
+        {
+            hints: [
+                "prompt"
+            ],
+            isParameter: false,
+            metaAttributes: null,
+            name: "NonBusinessHourPrompt",
+            type: "STRING",
+            usedByWfIds: [
+                107
+            ],
+            value: null
+        },
+        {
+            hints: [
+                "csq"
+            ],
+            isParameter: false,
+            metaAttributes: null,
+            name: "HolidayCSQ",
+            type: "STRING",
+            usedByWfIds: [
+                123
+            ],
+            value: null
+        },
+        {
+            hints: [
+                "default_from_uccx",
+                "prompt"
+            ],
+            isParameter: false,
+            metaAttributes: null,
+            name: "QueuePrompt",
+            type: "STRING",
+            usedByWfIds: [
+                125,
+                135
+            ],
+            value: "ICDQueue.wav"
+        },
+        {
+            hints: [
+                "csq"
+            ],
+            isParameter: false,
+            metaAttributes: null,
+            name: "BusinessHourCSQ",
+            type: "STRING",
+            usedByWfIds: [
+                133
+            ],
+            value: null
+        },
+        {
+            hints: [
+                "default_only"
+            ],
+            isParameter: false,
+            metaAttributes: null,
+            name: "resourceID",
+            type: "STRING",
+            usedByWfIds: [],
+            value: null
+        },
+        {
+            hints: [
+                "default_from_uccx",
+                "default_only"
+            ],
+            isParameter: false,
+            metaAttributes: null,
+            name: "DelayWhileQueued",
+            type: "STRING",
+            usedByWfIds: [],
+            value: "30"
+        },
+        {
+            hints: [
+                "default_only"
+            ],
+            isParameter: false,
+            metaAttributes: null,
+            name: "SRS_TempResourceSelectedVar2",
+            type: "STRING",
+            usedByWfIds: [],
+            value: null
+        }
+    ]
+};
+var schema = "uccx2wxcc-ir/v1";
+var warnings = [
+    "Unmapped step: wfId=43 typeName=Accept displayType=Accept"
+];
+var irData = {
+    activities: activities,
+    aefFile: aefFile,
+    generatedAt: generatedAt,
+    links: links,
+    prefix: prefix,
+    resources: resources,
+    schema: schema,
+    warnings: warnings
+};
+
+class WxCCFlowchartPageComponent {
+    constructor(api, wxcc2graph) {
+        this.api = api;
+        this.wxcc2graph = wxcc2graph;
+        this.customerId = 0;
+        this.host = "";
+        this.token = "";
+        this.destroy$ = new Subject();
+        this.state = {
+            loading: true
+        };
+    }
+    ngOnInit() {
+        this.subscribeToCustomerChanges();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    init() {
+        this.loadMockFlowchart();
+    }
+    subscribeToCustomerChanges() {
+        // if (!this.customer) {
+        // this.customersService.customer$
+        //     .pipe(takeUntil(this.destroy$))
+        //     .subscribe((customer) => {
+        //         if (customer) {
+        this.init();
+        // }
+        // });
+        // } else {
+        //     this.init();
+        // }
+    }
+    loadMockFlowchart() {
+        const irDoc = irData;
+        this.state.irDoc = irDoc;
+        this.state.flowchart = this.wxcc2graph.parseWxCC(irDoc);
+        this.setLoading(false);
+    }
+    loadFileNames() {
+        // forkJoin([
+        //     this.uccxWorkflowApi.fetchFileNames(this.customerId)
+        //         .pipe(filter(fileNames => fileNames && fileNames.length > 0)),
+        //     this.contactCenterService.getCallFlowMigrationStatuses()
+        // ]).pipe(takeUntil(this.destroy$))
+        //     .subscribe(([fileNames, statuses]) => {
+        //         this.state.fileNames = fileNames;
+        //         this.state.uccxIp = fileNames[0].host;
+        //         this.state.selectedFileName = fileNames[0].fileName;
+        //         this.state.statuses = statuses.filter(status => status.uccxIp === this.state.uccxIp);
+        //         this.state.selectedFileStatus = this.getStatus(this.state.selectedFileName, this.state.uccxIp);
+        //         this.loadWxCCFlowData();
+        //     });
+    }
+    loadWxCCFlowData() {
+        forkJoin([
+            this.api.fetchWxCCFlowData(this.baseParams, this.state.selectedFileStatus),
+            this.api.fetchWxCCFlowDataIR(this.baseParams, this.state.selectedFileStatus),
+        ]).pipe(mergeMap(([nonIrDoc, irDoc]) => irDoc !== null ?
+            of({ nonIrDoc, irDoc }) :
+            throwError(() => new Error('No wxcc flow diagram available for this script'))), takeUntil(this.destroy$), finalize$1(() => this.setLoading(false))).subscribe({
+            next: ({ nonIrDoc, irDoc }) => {
+                this.wxcc2graph.setSourceDocuments(irDoc, nonIrDoc);
+                this.state.irDoc = irDoc;
+                this.state.nonIrDoc = nonIrDoc;
+                this.state.flowchart = this.wxcc2graph.parseWxCC(irDoc, nonIrDoc);
+            },
+            error: (error) => {
+                this.state.flowchart = null;
+                this.setError('No wxcc flow diagram available for this script');
+            }
+        });
+    }
+    onSave() {
+        this.setLoading(true);
+        forkJoin([
+            this.api.saveWxCCFlowData(this.baseParams, this.wxcc2graph.wxccNonIRJSON),
+            this.api.saveWxCCFlowDataIR(this.baseParams, this.wxcc2graph.wxccJSON)
+        ]).pipe(takeUntil(this.destroy$), finalize$1(() => this.setLoading(false)), tap(() => {
+            this.state.flowchart = this.wxcc2graph.parseWxCC(this.wxcc2graph.wxccJSON, this.wxcc2graph.wxccNonIRJSON);
+        })).subscribe({
+            next: ([regularResponse, irResponse]) => console.log('Flow data saved as DRAFT', regularResponse, irResponse),
+            error: (error) => console.error('Error while saving wxcc data: ', error)
+        });
+    }
+    onExportNonIr() {
+        if (!this.wxcc2graph.wxccNonIRJSON) {
+            console.error('Non-IR wxcc document is not loaded');
+            return;
+        }
+        const fileStem = (this.state.selectedFileName || 'wxcc-flow').replace(/\.[^/.]+$/, '');
+        const fileName = fileStem + '-non-ir.json';
+        const jsonContent = JSON.stringify(this.wxcc2graph.wxccNonIRJSON, null, 2);
+        const blob = new Blob([jsonContent], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = fileName;
+        document.body.appendChild(anchor);
+        anchor.click();
+        document.body.removeChild(anchor);
+        window.URL.revokeObjectURL(url);
+    }
+    onReset() {
+        this.setLoading(true);
+        forkJoin([
+            this.api.resetWxCCFlowData(this.baseParams),
+            this.api.resetWxCCFlowDataIR(this.baseParams)
+        ]).pipe(takeUntil(this.destroy$), finalize$1(() => this.setLoading(false))).subscribe({
+            next: ([nonIrDoc, irDoc]) => {
+                this.wxcc2graph.setSourceDocuments(irDoc, nonIrDoc);
+                this.state.irDoc = irDoc;
+                this.state.nonIrDoc = nonIrDoc;
+                this.state.flowchart = this.wxcc2graph.parseWxCC(irDoc, nonIrDoc);
+                console.log('Flow data reset to original');
+            },
+            error: (error) => {
+                console.error('Error while resetting wxcc data: ', error);
+            }
+        });
+    }
+    onComplete() {
+        this.setLoading(true);
+        forkJoin([
+            this.api.completeWxCCFlowData(this.baseParams, this.wxcc2graph.wxccNonIRJSON),
+            this.api.completeWxCCFlowDataIR(this.baseParams, this.wxcc2graph.wxccJSON)
+        ]).pipe(takeUntil(this.destroy$), finalize$1(() => this.setLoading(false))).subscribe({
+            next: ([regularResponse, irResponse]) => {
+                console.log('Flow data saved as COMPLETED', regularResponse, irResponse);
+            },
+            error: (error) => {
+                console.error('Error while completing wxcc data: ', error);
+            }
+        });
+    }
+    onFileNameSelectionChange(item) {
+        const { fileName, host } = item;
+        this.state.selectedFileName = fileName;
+        this.state.uccxIp = host;
+        this.state.selectedFileStatus = this.getStatus(fileName, this.state.uccxIp);
+        this.setLoading(true);
+        this.loadWxCCFlowData();
+    }
+    getStatus(fileName, uccxIp) {
+        if (!this.state.statuses) {
+            throw Error('File status array is undefined');
+        }
+        const callFlowMigrationStatus = this.state.statuses.find(status => status.uccxIp === uccxIp && status.scriptName === fileName);
+        // if (callFlowMigrationStatus && callFlowMigrationStatus.status) {
+        //     return CALL_FLOW_MIGRATION_STATUSES_TO_SCRIPT_STATUS[callFlowMigrationStatus.status];
+        // }
+    }
+    setLoading(loading) {
+        this.state.loading = loading;
+    }
+    setError(error) {
+        this.state.errorMessage = error;
+    }
+    get baseParams() {
+        return {
+            customerId: this.customerId,
+            uccxIp: this.state.uccxIp || '',
+            fileName: this.state.selectedFileName || ''
+        };
+    }
+}
+WxCCFlowchartPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartPageComponent, deps: [{ token: WxCCAPIService }, { token: WxCC2GraphService }], target: i0.ɵɵFactoryTarget.Component });
+WxCCFlowchartPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WxCCFlowchartPageComponent, selector: "cc-script-editor", inputs: { customerId: "customerId", host: "host", token: "token" }, ngImport: i0, template: "<div class=\"wxcc-flowchart-wrapper\">\r\n    <main class=\"content-box\">\r\n        <div class=\"wxcc-flowchart-main\">\r\n            <header class=\"wxcc-flowchart-header\">\r\n                <wxcc-file-selection-bar\r\n                    *ngIf=\"state.fileNames && state.fileNames.length\"\r\n                    [fileNames]=\"state.fileNames\"\r\n                    [selectedHost]=\"state.uccxIp\"\r\n                    [selectedFileName]=\"state.selectedFileName\"\r\n                    (fileNameSelectionChange)=\"onFileNameSelectionChange($event)\">\r\n                </wxcc-file-selection-bar>\r\n                <wxcc-actions-bar\r\n                    *ngIf=\"state.flowchart\"\r\n                    (save)=\"onSave()\"\r\n                    (reset)=\"onReset()\"\r\n                    (exportNonIr)=\"onExportNonIr()\"\r\n                    (complete)=\"onComplete()\">\r\n                </wxcc-actions-bar>\r\n            </header>\r\n            <ng-container *ngIf=\"!state.loading; else loadingTemplate\">\r\n                <wxcc-flowchart\r\n                    *ngIf=\"state.flowchart; else errorTemplate\"\r\n                    [flowchart]=\"state.flowchart\">\r\n                </wxcc-flowchart>\r\n            </ng-container>\r\n        </div>\r\n    </main>\r\n</div>\r\n\r\n<ng-template #loadingTemplate>\r\n    <div class=\"placeholder-wrapper\">\r\n        <mat-spinner diameter=\"40\"></mat-spinner>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #errorTemplate>\r\n    <div class=\"placeholder-wrapper\">\r\n        Error loading script\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}.wxcc-flowchart-wrapper{width:100%;height:100%;display:flex;flex-direction:column}.wxcc-flowchart-wrapper .content-box{flex:1;display:flex;flex-direction:column;overflow:hidden}.wxcc-flowchart-wrapper .wxcc-flowchart-main{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow:hidden}.wxcc-flowchart-wrapper .wxcc-flowchart-main .wxcc-flowchart-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.wxcc-flowchart-wrapper .wxcc-flowchart-main .placeholder-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: WxCCFlowchartComponent, selector: "wxcc-flowchart", inputs: ["flowchart"] }, { kind: "component", type: WxCCFileSelectionBarComponent, selector: "wxcc-file-selection-bar", inputs: ["fileNames", "selectedFileName", "selectedHost"], outputs: ["fileNameSelectionChange"] }, { kind: "component", type: WxCCActionsBarComponent, selector: "wxcc-actions-bar", outputs: ["save", "reset", "complete", "exportNonIr"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cc-script-editor', template: "<div class=\"wxcc-flowchart-wrapper\">\r\n    <main class=\"content-box\">\r\n        <div class=\"wxcc-flowchart-main\">\r\n            <header class=\"wxcc-flowchart-header\">\r\n                <wxcc-file-selection-bar\r\n                    *ngIf=\"state.fileNames && state.fileNames.length\"\r\n                    [fileNames]=\"state.fileNames\"\r\n                    [selectedHost]=\"state.uccxIp\"\r\n                    [selectedFileName]=\"state.selectedFileName\"\r\n                    (fileNameSelectionChange)=\"onFileNameSelectionChange($event)\">\r\n                </wxcc-file-selection-bar>\r\n                <wxcc-actions-bar\r\n                    *ngIf=\"state.flowchart\"\r\n                    (save)=\"onSave()\"\r\n                    (reset)=\"onReset()\"\r\n                    (exportNonIr)=\"onExportNonIr()\"\r\n                    (complete)=\"onComplete()\">\r\n                </wxcc-actions-bar>\r\n            </header>\r\n            <ng-container *ngIf=\"!state.loading; else loadingTemplate\">\r\n                <wxcc-flowchart\r\n                    *ngIf=\"state.flowchart; else errorTemplate\"\r\n                    [flowchart]=\"state.flowchart\">\r\n                </wxcc-flowchart>\r\n            </ng-container>\r\n        </div>\r\n    </main>\r\n</div>\r\n\r\n<ng-template #loadingTemplate>\r\n    <div class=\"placeholder-wrapper\">\r\n        <mat-spinner diameter=\"40\"></mat-spinner>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #errorTemplate>\r\n    <div class=\"placeholder-wrapper\">\r\n        Error loading script\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}.wxcc-flowchart-wrapper{width:100%;height:100%;display:flex;flex-direction:column}.wxcc-flowchart-wrapper .content-box{flex:1;display:flex;flex-direction:column;overflow:hidden}.wxcc-flowchart-wrapper .wxcc-flowchart-main{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow:hidden}.wxcc-flowchart-wrapper .wxcc-flowchart-main .wxcc-flowchart-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.wxcc-flowchart-wrapper .wxcc-flowchart-main .placeholder-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: WxCCAPIService }, { type: WxCC2GraphService }]; }, propDecorators: { customerId: [{
+                type: Input
+            }], host: [{
+                type: Input
+            }], token: [{
+                type: Input
+            }] } });
+
+class MaterialModule {
+}
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule], exports: [MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatProgressSpinnerModule] });
+MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, imports: [MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule, MatProgressBarModule,
+        MatTooltipModule,
+        MatTableModule,
+        MatCheckboxModule,
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatProgressSpinnerModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        MatTableModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule
+                    ],
+                    exports: [
+                        MatProgressBarModule,
+                        MatTooltipModule,
+                        MatTableModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatProgressSpinnerModule
+                    ]
+                }]
+        }] });
+
+class SharedModule {
+}
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
+        MaterialModule,
+        NgApexchartsModule,
+        HttpClientModule], exports: [MaterialModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
+        MaterialModule,
+        NgApexchartsModule,
+        HttpClientModule, MaterialModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        MaterialModule,
+                        NgApexchartsModule,
+                        HttpClientModule
+                    ],
+                    exports: [
+                        MaterialModule
+                    ]
+                }]
+        }] });
+
+class FloatingToolbarModule {
+}
+FloatingToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FloatingToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FloatingToolbarModule, declarations: [FloatingToolBarComponent], imports: [CommonModule,
+        MatTooltipModule], exports: [FloatingToolBarComponent] });
+FloatingToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingToolbarModule, imports: [CommonModule,
+        MatTooltipModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingToolbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FloatingToolBarComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatTooltipModule
+                    ],
+                    exports: [
+                        FloatingToolBarComponent
+                    ]
+                }]
+        }] });
+
+class WxCCFlowchartModule {
+}
+WxCCFlowchartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WxCCFlowchartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartModule, declarations: [WxCCFlowchartPageComponent,
+        WxCCFlowchartComponent,
+        NodeDetailsSidebarComponent,
+        NodeActionToolbarComponent,
+        LinkNodeDialogComponent,
+        WxCCFileSelectionBarComponent,
+        AddNodeDialogComponent,
+        WxCCActionsBarComponent,
+        NodeSearchPanelComponent], imports: [CommonModule,
+        FormsModule,
+        SharedModule,
+        MaterialModule,
+        FloatingToolbarModule], exports: [WxCCFlowchartPageComponent] });
+WxCCFlowchartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartModule, providers: [
+        WxCCAPIService,
+        WxCC2GraphService,
+        WxCCActivityManageService,
+        WxCCActivityCreationService
+    ], imports: [CommonModule,
+        FormsModule,
+        SharedModule,
+        MaterialModule,
+        FloatingToolbarModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WxCCFlowchartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        WxCCFlowchartPageComponent,
+                        WxCCFlowchartComponent,
+                        NodeDetailsSidebarComponent,
+                        NodeActionToolbarComponent,
+                        LinkNodeDialogComponent,
+                        WxCCFileSelectionBarComponent,
+                        AddNodeDialogComponent,
+                        WxCCActionsBarComponent,
+                        NodeSearchPanelComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        SharedModule,
+                        MaterialModule,
+                        FloatingToolbarModule
+                    ],
+                    exports: [
+                        WxCCFlowchartPageComponent
+                    ],
+                    providers: [
+                        WxCCAPIService,
+                        WxCC2GraphService,
+                        WxCCActivityManageService,
+                        WxCCActivityCreationService
+                    ],
+                    entryComponents: [
+                        AddNodeDialogComponent,
+                        LinkNodeDialogComponent
+                    ]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CcReadinessModule, LicencesRequirementComponent, SummaryGridComponent };
+export { CcReadinessModule, LicencesRequirementComponent, SummaryGridComponent, WxCCFlowchartModule, WxCCFlowchartPageComponent };
 //# sourceMappingURL=tuki-io-tuki-widgets-contact-center.mjs.map