@tuki-io/tuki-widgets 0.0.219-dev.6 → 0.0.219-dev.60

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

@@ -1,40 +1,42 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, Component, Input, NgModule, ChangeDetectionStrategy, Inject, EventEmitter, Output, ViewChild } from '@angular/core';
+import { Injectable, inject, Component, Input, NgModule, ChangeDetectionStrategy, Inject, EventEmitter, Output, ViewChild, ViewEncapsulation } 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, Subject, forkJoin, throwError } from 'rxjs';
-import * as i2 from 'ng-apexcharts';
-import { NgApexchartsModule } from 'ng-apexcharts';
-import * as i3 from '@angular/material/select';
+import { map, catchError, of, finalize, Subject, forkJoin, throwError, delay, switchMap, Subscription } from 'rxjs';
+import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i4 from '@angular/material/core';
+import * as i3 from '@angular/material/core';
 import { MatOptionModule } from '@angular/material/core';
+import * as i5 from 'ng-apexcharts';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatTableModule } from '@angular/material/table';
+import * as i3$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 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 { MatIconModule } from '@angular/material/icon';
+import * as i2$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import * as i4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
 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 * 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 * as i2 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';
+import * as i2$2 from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
 
 class APIService {
     constructor(httpClient) {
@@ -45,10 +47,15 @@ class APIService {
         params = params || {};
         return this.httpClient.get(this.apiUrl + url, { params: this.prepareEncodedParams(params), headers });
     }
-    post(url, body, params = {}) {
+    post(url, body, params = {}, options = {}) {
         body = body || null;
         const headers = this.getHeaders();
-        return this.httpClient.post(this.apiUrl + url, body, { params: this.prepareEncodedParams(params), headers });
+        return this.httpClient.post(this.apiUrl + url, body, {
+            params: this.prepareEncodedParams(params),
+            headers,
+            // Some migration endpoints answer with a file rather than JSON.
+            responseType: (options.responseType || 'json')
+        });
     }
     // use when response extended data is necessary:
     postExtended(url, body = null, params = {}, headers = {}) {
@@ -117,6 +124,31 @@ const API = {
     READINESS: {
         UCCX_SERVER_ENTITY_STATS: (customerId) => `/api/uccx/migration/customer/${customerId}/entity-counts`,
         LICENSE_USAGE_SUMMARY: (customerId) => `/api/uccx/migration/customer/${customerId}/cc-license-stats`,
+    },
+    /**
+     * The application-centric UCCX migration endpoints, as used by webex-ops-client
+     * (`ContactCenterService` / `constants.json`). There is no dedicated
+     * "contact center" API - a contact center *is* a UCCX application, and its
+     * entities are reached through the e2emigration batches that carry it.
+     */
+    UCCX: {
+        /** Every UCCX application known for the customer. Served by the **dcp** host. */
+        APPLICATION_NAMES: (customerId) => `/api/cache/uccx/application/customer/${customerId}/getall`,
+        /** All UCCX batches for the customer, one per entity type. */
+        BATCHES: (customerId) => `/api/e2emigration/batch/${customerId}/UCCX`,
+        /**
+         * The entities of one batch.
+         *
+         * It also takes an `applicationName` param, but on dev2 that filter answers
+         * `[]` for every application - including ones whose items *do* carry a
+         * matching `applicationName` - so the widget reads the batch unfiltered and
+         * narrows on the item field itself.
+         */
+        BATCH_ITEMS: (customerId, batchId) => `/api/e2emigration/batch/${batchId}/customer/${customerId}/uccx/filter`,
+        /** Per-AEF-script migration state (NEW / MIGRATED / MIGRATION_FAILED / ...). */
+        CALL_FLOW_MIGRATION_STATUSES: (customerId) => `/api/uccx/migration/customer/${customerId}/callflow/getAll`,
+        /** Runs the UCCX -> Webex Contact Center migration. Responds with an XLSX tracker. */
+        MIGRATE: (customerId) => `/api/migration/webex/customer/${customerId}/uccx/migrate`,
     }
 };
 
@@ -153,15 +185,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+/**
+ * Standard contact-center panel chrome. Content goes into the `card-content` slot;
+ * `card-title-adornment` takes a small element rendered next to the title (info icon,
+ * badge).
+ */
 class CardComponent {
+    constructor() {
+        /** Tightens the padding and inner spacing for compact panels. */
+        this.dense = false;
+    }
 }
 CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "tk-card", inputs: { title: "title" }, ngImport: i0, template: "<article class=\"card\">\r\n    <header class=\"card__header\">\r\n        <h2>{{ title }}</h2>\r\n        <!--<div class=\"card__menu-button\">\r\n            <img width=\"18\" src=\"assets/icons/menu_icon.png\" alt=\"Menu Icon\">\r\n        </div>-->\r\n    </header>\r\n    <div class=\"card__content\">\r\n        <ng-content select=\"card-content\"></ng-content>\r\n    </div>\r\n</article>\r\n", 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{display:block;height:100%;box-sizing:border-box}.card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:2rem;border:1px solid hsla(0,0%,0%,.2);min-width:300px;max-width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:2.5rem}.card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.card__header h2{font-size:16px;margin:0}.card__header .card__menu-button{position:relative;display:flex;align-items:center}.card__content{display:flex;flex-direction:column;gap:2.5rem;flex-grow:1}\n"] });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "tk-card", inputs: { title: "title", dense: "dense" }, ngImport: i0, template: "<article class=\"card\" [class.card--dense]=\"dense\">\r\n    <header class=\"card__header\">\r\n        <div class=\"card__title-group\">\r\n            <h2>{{ title }}</h2>\r\n            <ng-content select=\"card-title-adornment\"></ng-content>\r\n        </div>\r\n        <!--<div class=\"card__menu-button\">\r\n            <img width=\"18\" src=\"assets/icons/menu_icon.png\" alt=\"Menu Icon\">\r\n        </div>-->\r\n    </header>\r\n    <div class=\"card__content\">\r\n        <ng-content select=\"card-content\"></ng-content>\r\n    </div>\r\n</article>\r\n", 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{display:block;height:100%;box-sizing:border-box}.card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:2rem;border:1px solid hsla(0,0%,0%,.2);min-width:300px;max-width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:2.5rem}.card--dense{border-radius:8px;padding:1.5rem;gap:1.25rem}.card--dense .card__content{gap:1.25rem}.card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.card__header h2{font-size:16px;margin:0}.card__header .card__menu-button{position:relative;display:flex;align-items:center}.card__title-group{display:flex;align-items:center;gap:.375rem}.card__content{display:flex;flex-direction:column;gap:2.5rem;flex-grow:1}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tk-card', template: "<article class=\"card\">\r\n    <header class=\"card__header\">\r\n        <h2>{{ title }}</h2>\r\n        <!--<div class=\"card__menu-button\">\r\n            <img width=\"18\" src=\"assets/icons/menu_icon.png\" alt=\"Menu Icon\">\r\n        </div>-->\r\n    </header>\r\n    <div class=\"card__content\">\r\n        <ng-content select=\"card-content\"></ng-content>\r\n    </div>\r\n</article>\r\n", 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{display:block;height:100%;box-sizing:border-box}.card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:2rem;border:1px solid hsla(0,0%,0%,.2);min-width:300px;max-width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:2.5rem}.card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.card__header h2{font-size:16px;margin:0}.card__header .card__menu-button{position:relative;display:flex;align-items:center}.card__content{display:flex;flex-direction:column;gap:2.5rem;flex-grow:1}\n"] }]
+            args: [{ selector: 'tk-card', template: "<article class=\"card\" [class.card--dense]=\"dense\">\r\n    <header class=\"card__header\">\r\n        <div class=\"card__title-group\">\r\n            <h2>{{ title }}</h2>\r\n            <ng-content select=\"card-title-adornment\"></ng-content>\r\n        </div>\r\n        <!--<div class=\"card__menu-button\">\r\n            <img width=\"18\" src=\"assets/icons/menu_icon.png\" alt=\"Menu Icon\">\r\n        </div>-->\r\n    </header>\r\n    <div class=\"card__content\">\r\n        <ng-content select=\"card-content\"></ng-content>\r\n    </div>\r\n</article>\r\n", 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{display:block;height:100%;box-sizing:border-box}.card{font-family:Inter,Inter,sans-serif;background-color:#fff;border-radius:1rem;padding:2rem;border:1px solid hsla(0,0%,0%,.2);min-width:300px;max-width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;gap:2.5rem}.card--dense{border-radius:8px;padding:1.5rem;gap:1.25rem}.card--dense .card__content{gap:1.25rem}.card__header{position:relative;display:flex;align-items:center;justify-content:space-between}.card__header h2{font-size:16px;margin:0}.card__header .card__menu-button{position:relative;display:flex;align-items:center}.card__title-group{display:flex;align-items:center;gap:.375rem}.card__content{display:flex;flex-direction:column;gap:2.5rem;flex-grow:1}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
+            }], dense: [{
+                type: Input
             }] } });
 
 const LEGEND_COLORS = {
@@ -337,7 +380,7 @@ class LicencesRequirementComponent {
     }
 }
 LicencesRequirementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LicencesRequirementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LicencesRequirementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LicencesRequirementComponent, selector: "cc-licenses-requirement", inputs: { customerId: "customerId", host: "host", token: "token" }, usesOnChanges: true, ngImport: i0, template: "<tk-card title=\"Licenses requirement\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div\r\n      class=\"widget-body\"\r\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\r\n    >\r\n      <div class=\"left-section\">\r\n        <mat-select\r\n          [(value)]=\"selectedSummaryIndex\"\r\n          (selectionChange)=\"onFilterChange($event.value)\"\r\n          class=\"filter-select\"\r\n        >\r\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\r\n            {{ option }}\r\n          </mat-option>\r\n        </mat-select>\r\n\r\n        <div class=\"chart-section\">\r\n          <div class=\"chart-wrapper\">\r\n            <apx-chart\r\n              [series]=\"viewModel.chartOptions.series\"\r\n              [chart]=\"viewModel.chartOptions.chart\"\r\n              [labels]=\"viewModel.chartOptions.labels\"\r\n              [colors]=\"viewModel.chartOptions.colors\"\r\n              [legend]=\"viewModel.chartOptions.legend\"\r\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\r\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\r\n              [tooltip]=\"viewModel.chartOptions.tooltip\"\r\n            >\r\n            </apx-chart>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\r\n              <span\r\n                class=\"legend-marker\"\r\n                [style.backgroundColor]=\"item.color\"\r\n              ></span>\r\n              <span class=\"legend-label\">{{ item.label }}</span>\r\n              <span class=\"legend-value\">{{ item.count | number }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"divider\" aria-hidden=\"true\"></div>\r\n\r\n      <div class=\"table-section\">\r\n        <div class=\"lic-table-header\">\r\n          <span>License</span>\r\n          <span>Required</span>\r\n        </div>\r\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\r\n          <span>{{ row.label }}</span>\r\n          <span>{{ row.value | number }}</span>\r\n        </div>\r\n        <div class=\"table-row total-row\">\r\n          <span>Total</span>\r\n          <span>{{ viewModel.totalRequired | number }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #widgetState>\r\n      <div class=\"state-message\" *ngIf=\"loading\">\r\n        Loading license requirements\u2026\r\n      </div>\r\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\r\n        Unable to load license requirements.\r\n      </div>\r\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\r\n        No license data available.\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</tk-card>\r\n", 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{display:block;width:100%;box-sizing:border-box}.filter-select{font-family:Inter,Inter,sans-serif;font-size:14px;min-width:140px;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;background-color:#fff}.filter-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select{border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}:host ::ng-deep .filter-select.mat-mdc-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select.mat-focused{border-color:#16a693}:host ::ng-deep .filter-select .mat-mdc-select-trigger{font-size:14px;padding:.5rem .75rem}:host ::ng-deep .filter-select .mat-mdc-select-value{color:#111827}:host ::ng-deep .filter-select .mat-mdc-select-arrow-wrapper{padding-left:.5rem}.widget-body{display:flex;gap:2.5rem;align-items:flex-start}.left-section{flex:2;display:flex;flex-direction:column;gap:1rem}.chart-section{display:flex;gap:1.5rem;align-items:center}.chart-wrapper{width:220px;min-height:220px;flex-shrink:0}.chart-wrapper apx-chart{width:220px!important;height:220px!important}.legend{display:flex;flex-direction:column;gap:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-family:Inter,Inter,sans-serif;font-size:14px}.legend-marker{width:14px;height:14px;border-radius:50%;display:inline-flex}.legend-label{color:#4b5563}.legend-value{margin-left:auto;font-weight:600;color:#111827}.divider{width:1px;min-height:200px;align-self:stretch;background:#e5e7eb}.table-section{flex:3;display:flex;flex-direction:column;gap:.75rem;font-family:Inter,Inter,sans-serif}.lic-table-header,.table-row{display:flex;justify-content:space-between;font-size:14px}.lic-table-header{font-weight:600;color:#6b7280;padding-bottom:.5rem;border-bottom:1px solid #e5e7eb}.table-row{color:#111827}.total-row{font-weight:700;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.state-message{font-family:Inter,Inter,sans-serif;font-size:14px;color:#6b7280}.state-message.error{color:#b91c1c}@media (max-width: 960px){.widget-body{flex-direction:column}.divider{display:none}.chart-section{justify-content:space-between}}:host ::ng-deep .apexcharts-legend{display:none!important}\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.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
+LicencesRequirementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LicencesRequirementComponent, selector: "cc-licenses-requirement", inputs: { customerId: "customerId", host: "host", token: "token" }, usesOnChanges: true, ngImport: i0, template: "<tk-card title=\"Licenses requirement\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div\r\n      class=\"widget-body\"\r\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\r\n    >\r\n      <div class=\"left-section\">\r\n        <mat-select\r\n          [(value)]=\"selectedSummaryIndex\"\r\n          (selectionChange)=\"onFilterChange($event.value)\"\r\n          class=\"filter-select\"\r\n        >\r\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\r\n            {{ option }}\r\n          </mat-option>\r\n        </mat-select>\r\n\r\n        <div class=\"chart-section\">\r\n          <div class=\"chart-wrapper\">\r\n            <apx-chart\r\n              [series]=\"viewModel.chartOptions.series\"\r\n              [chart]=\"viewModel.chartOptions.chart\"\r\n              [labels]=\"viewModel.chartOptions.labels\"\r\n              [colors]=\"viewModel.chartOptions.colors\"\r\n              [legend]=\"viewModel.chartOptions.legend\"\r\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\r\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\r\n              [tooltip]=\"viewModel.chartOptions.tooltip\"\r\n            >\r\n            </apx-chart>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\r\n              <span\r\n                class=\"legend-marker\"\r\n                [style.backgroundColor]=\"item.color\"\r\n              ></span>\r\n              <span class=\"legend-label\">{{ item.label }}</span>\r\n              <span class=\"legend-value\">{{ item.count | number }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"divider\" aria-hidden=\"true\"></div>\r\n\r\n      <div class=\"table-section\">\r\n        <div class=\"lic-table-header\">\r\n          <span>License</span>\r\n          <span>Required</span>\r\n        </div>\r\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\r\n          <span>{{ row.label }}</span>\r\n          <span>{{ row.value | number }}</span>\r\n        </div>\r\n        <div class=\"table-row total-row\">\r\n          <span>Total</span>\r\n          <span>{{ viewModel.totalRequired | number }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #widgetState>\r\n      <div class=\"state-message\" *ngIf=\"loading\">\r\n        Loading license requirements\u2026\r\n      </div>\r\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\r\n        Unable to load license requirements.\r\n      </div>\r\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\r\n        No license data available.\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</tk-card>\r\n", 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{display:block;width:100%;box-sizing:border-box}.filter-select{font-family:Inter,Inter,sans-serif;font-size:14px;min-width:140px;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;background-color:#fff}.filter-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select{border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}:host ::ng-deep .filter-select.mat-mdc-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select.mat-focused{border-color:#16a693}:host ::ng-deep .filter-select .mat-mdc-select-trigger{font-size:14px;padding:.5rem .75rem}:host ::ng-deep .filter-select .mat-mdc-select-value{color:#111827}:host ::ng-deep .filter-select .mat-mdc-select-arrow-wrapper{padding-left:.5rem}.widget-body{display:flex;gap:2.5rem;align-items:flex-start}.left-section{flex:2;display:flex;flex-direction:column;gap:1rem}.chart-section{display:flex;gap:1.5rem;align-items:center}.chart-wrapper{width:220px;min-height:220px;flex-shrink:0}.chart-wrapper apx-chart{width:220px!important;height:220px!important}.legend{display:flex;flex-direction:column;gap:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-family:Inter,Inter,sans-serif;font-size:14px}.legend-marker{width:14px;height:14px;border-radius:50%;display:inline-flex}.legend-label{color:#4b5563}.legend-value{margin-left:auto;font-weight:600;color:#111827}.divider{width:1px;min-height:200px;align-self:stretch;background:#e5e7eb}.table-section{flex:3;display:flex;flex-direction:column;gap:.75rem;font-family:Inter,Inter,sans-serif}.lic-table-header,.table-row{display:flex;justify-content:space-between;font-size:14px}.lic-table-header{font-weight:600;color:#6b7280;padding-bottom:.5rem;border-bottom:1px solid #e5e7eb}.table-row{color:#111827}.total-row{font-weight:700;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.state-message{font-family:Inter,Inter,sans-serif;font-size:14px;color:#6b7280}.state-message.error{color:#b91c1c}@media (max-width: 960px){.widget-body{flex-direction:column}.divider{display:none}.chart-section{justify-content:space-between}}:host ::ng-deep .apexcharts-legend{display:none!important}\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: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title", "dense"] }, { kind: "component", type: i5.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LicencesRequirementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cc-licenses-requirement', template: "<tk-card title=\"Licenses requirement\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div\r\n      class=\"widget-body\"\r\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\r\n    >\r\n      <div class=\"left-section\">\r\n        <mat-select\r\n          [(value)]=\"selectedSummaryIndex\"\r\n          (selectionChange)=\"onFilterChange($event.value)\"\r\n          class=\"filter-select\"\r\n        >\r\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\r\n            {{ option }}\r\n          </mat-option>\r\n        </mat-select>\r\n\r\n        <div class=\"chart-section\">\r\n          <div class=\"chart-wrapper\">\r\n            <apx-chart\r\n              [series]=\"viewModel.chartOptions.series\"\r\n              [chart]=\"viewModel.chartOptions.chart\"\r\n              [labels]=\"viewModel.chartOptions.labels\"\r\n              [colors]=\"viewModel.chartOptions.colors\"\r\n              [legend]=\"viewModel.chartOptions.legend\"\r\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\r\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\r\n              [tooltip]=\"viewModel.chartOptions.tooltip\"\r\n            >\r\n            </apx-chart>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\r\n              <span\r\n                class=\"legend-marker\"\r\n                [style.backgroundColor]=\"item.color\"\r\n              ></span>\r\n              <span class=\"legend-label\">{{ item.label }}</span>\r\n              <span class=\"legend-value\">{{ item.count | number }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"divider\" aria-hidden=\"true\"></div>\r\n\r\n      <div class=\"table-section\">\r\n        <div class=\"lic-table-header\">\r\n          <span>License</span>\r\n          <span>Required</span>\r\n        </div>\r\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\r\n          <span>{{ row.label }}</span>\r\n          <span>{{ row.value | number }}</span>\r\n        </div>\r\n        <div class=\"table-row total-row\">\r\n          <span>Total</span>\r\n          <span>{{ viewModel.totalRequired | number }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #widgetState>\r\n      <div class=\"state-message\" *ngIf=\"loading\">\r\n        Loading license requirements\u2026\r\n      </div>\r\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\r\n        Unable to load license requirements.\r\n      </div>\r\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\r\n        No license data available.\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</tk-card>\r\n", 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{display:block;width:100%;box-sizing:border-box}.filter-select{font-family:Inter,Inter,sans-serif;font-size:14px;min-width:140px;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;background-color:#fff}.filter-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select{border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}:host ::ng-deep .filter-select.mat-mdc-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select.mat-focused{border-color:#16a693}:host ::ng-deep .filter-select .mat-mdc-select-trigger{font-size:14px;padding:.5rem .75rem}:host ::ng-deep .filter-select .mat-mdc-select-value{color:#111827}:host ::ng-deep .filter-select .mat-mdc-select-arrow-wrapper{padding-left:.5rem}.widget-body{display:flex;gap:2.5rem;align-items:flex-start}.left-section{flex:2;display:flex;flex-direction:column;gap:1rem}.chart-section{display:flex;gap:1.5rem;align-items:center}.chart-wrapper{width:220px;min-height:220px;flex-shrink:0}.chart-wrapper apx-chart{width:220px!important;height:220px!important}.legend{display:flex;flex-direction:column;gap:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-family:Inter,Inter,sans-serif;font-size:14px}.legend-marker{width:14px;height:14px;border-radius:50%;display:inline-flex}.legend-label{color:#4b5563}.legend-value{margin-left:auto;font-weight:600;color:#111827}.divider{width:1px;min-height:200px;align-self:stretch;background:#e5e7eb}.table-section{flex:3;display:flex;flex-direction:column;gap:.75rem;font-family:Inter,Inter,sans-serif}.lic-table-header,.table-row{display:flex;justify-content:space-between;font-size:14px}.lic-table-header{font-weight:600;color:#6b7280;padding-bottom:.5rem;border-bottom:1px solid #e5e7eb}.table-row{color:#111827}.total-row{font-weight:700;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.state-message{font-family:Inter,Inter,sans-serif;font-size:14px;color:#6b7280}.state-message.error{color:#b91c1c}@media (max-width: 960px){.widget-body{flex-direction:column}.divider{display:none}.chart-section{justify-content:space-between}}:host ::ng-deep .apexcharts-legend{display:none!important}\n"] }]
@@ -381,7 +424,7 @@ class SummaryGridComponent {
     }
 }
 SummaryGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SummaryGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SummaryGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SummaryGridComponent, selector: "cc-summary-grid", inputs: { customerId: "customerId", host: "host", token: "token" }, ngImport: i0, template: "<ng-container *ngIf=\"data$ | async as data\">\r\n    <div *ngFor=\"let stats of data\">\r\n        <tk-card [title]=\"stats.uccxIp\">\r\n            <ng-container ngProjectAs=\"card-content\">\r\n                <div class=\"grid-wrapper\">\r\n                    <div class=\"grid-item\" *ngFor=\"let item of stats.counts\">\r\n                        <div class=\"item-top\">\r\n                            <span class=\"item-icon\">\r\n                                <img width=\"24\" height=\"24\" src=\"assets/icons/{{ item.name }}.svg\" alt=\"{{ item.name }} Icon\">\r\n                            </span>\r\n                            <span class=\"item-count\">{{ item.value }}</span>\r\n                        </div>\r\n                        <span class=\"item-label\">{{ ENTITY_CONFIG[item.name].label }}</span>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </tk-card>\r\n    </div>\r\n</ng-container>", styles: [".grid-wrapper{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;row-gap:2rem}.grid-item{display:flex;flex-direction:column;gap:.5rem}.item-top{display:flex;align-items:center;gap:inherit}.item-icon{display:flex;align-items:center;background-color:#f2f2f2;padding:.75rem;border-radius:.5rem}.item-count{font-size:30px}.item-label{font-size:14px;margin-left:.15rem}\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: CardComponent, selector: "tk-card", inputs: ["title"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+SummaryGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SummaryGridComponent, selector: "cc-summary-grid", inputs: { customerId: "customerId", host: "host", token: "token" }, ngImport: i0, template: "<ng-container *ngIf=\"data$ | async as data\">\r\n    <div *ngFor=\"let stats of data\">\r\n        <tk-card [title]=\"stats.uccxIp\">\r\n            <ng-container ngProjectAs=\"card-content\">\r\n                <div class=\"grid-wrapper\">\r\n                    <div class=\"grid-item\" *ngFor=\"let item of stats.counts\">\r\n                        <div class=\"item-top\">\r\n                            <span class=\"item-icon\">\r\n                                <img width=\"24\" height=\"24\" src=\"assets/icons/{{ item.name }}.svg\" alt=\"{{ item.name }} Icon\">\r\n                            </span>\r\n                            <span class=\"item-count\">{{ item.value }}</span>\r\n                        </div>\r\n                        <span class=\"item-label\">{{ ENTITY_CONFIG[item.name].label }}</span>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </tk-card>\r\n    </div>\r\n</ng-container>", styles: [".grid-wrapper{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;row-gap:2rem}.grid-item{display:flex;flex-direction:column;gap:.5rem}.item-top{display:flex;align-items:center;gap:inherit}.item-icon{display:flex;align-items:center;background-color:#f2f2f2;padding:.75rem;border-radius:.5rem}.item-count{font-size:30px}.item-label{font-size:14px;margin-left:.15rem}\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: CardComponent, selector: "tk-card", inputs: ["title", "dense"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SummaryGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cc-summary-grid', template: "<ng-container *ngIf=\"data$ | async as data\">\r\n    <div *ngFor=\"let stats of data\">\r\n        <tk-card [title]=\"stats.uccxIp\">\r\n            <ng-container ngProjectAs=\"card-content\">\r\n                <div class=\"grid-wrapper\">\r\n                    <div class=\"grid-item\" *ngFor=\"let item of stats.counts\">\r\n                        <div class=\"item-top\">\r\n                            <span class=\"item-icon\">\r\n                                <img width=\"24\" height=\"24\" src=\"assets/icons/{{ item.name }}.svg\" alt=\"{{ item.name }} Icon\">\r\n                            </span>\r\n                            <span class=\"item-count\">{{ item.value }}</span>\r\n                        </div>\r\n                        <span class=\"item-label\">{{ ENTITY_CONFIG[item.name].label }}</span>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </tk-card>\r\n    </div>\r\n</ng-container>", styles: [".grid-wrapper{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;row-gap:2rem}.grid-item{display:flex;flex-direction:column;gap:.5rem}.item-top{display:flex;align-items:center;gap:inherit}.item-icon{display:flex;align-items:center;background-color:#f2f2f2;padding:.75rem;border-radius:.5rem}.item-count{font-size:30px}.item-label{font-size:14px;margin-left:.15rem}\n"] }]
@@ -393,12 +436,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 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
+                    ]
+                }]
+        }] });
+
+/**
+ * Presentational building blocks shared by the contact-center widgets.
+ * Widget modules import this to pick up the standard card chrome plus the
+ * Material/Apex modules they all need.
+ */
+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, declarations: [CardComponent], imports: [CommonModule,
+        MaterialModule,
+        NgApexchartsModule,
+        HttpClientModule], exports: [MaterialModule,
+        CardComponent] });
+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: [
+                        CardComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MaterialModule,
+                        NgApexchartsModule,
+                        HttpClientModule
+                    ],
+                    exports: [
+                        MaterialModule,
+                        CardComponent
+                    ]
+                }]
+        }] });
+
 class CcReadinessModule {
 }
 CcReadinessModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CcReadinessModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 CcReadinessModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CcReadinessModule, declarations: [LicencesRequirementComponent,
-        SummaryGridComponent,
-        CardComponent], imports: [CommonModule,
+        SummaryGridComponent], imports: [CommonModule,
+        SharedModule,
         HttpClientModule,
         NgApexchartsModule,
         MatTableModule,
@@ -411,6 +558,7 @@ CcReadinessModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         MatSelectModule], exports: [LicencesRequirementComponent,
         SummaryGridComponent] });
 CcReadinessModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CcReadinessModule, imports: [CommonModule,
+        SharedModule,
         HttpClientModule,
         NgApexchartsModule,
         MatTableModule,
@@ -426,11 +574,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             args: [{
                     declarations: [
                         LicencesRequirementComponent,
-                        SummaryGridComponent,
-                        CardComponent
+                        SummaryGridComponent
                     ],
                     imports: [
                         CommonModule,
+                        SharedModule,
                         HttpClientModule,
                         NgApexchartsModule,
                         MatTableModule,
@@ -1454,7 +1602,7 @@ class NodeDetailsSidebarComponent {
     }
 }
 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 });
+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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵ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"] }]
@@ -2115,7 +2263,7 @@ class WxCCFileSelectionBarComponent {
     }
 }
 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 });
+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$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i3.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"] }]
@@ -3270,7 +3418,7 @@ class WxCCFlowchartPageComponent {
     }
 }
 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    <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\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;gap:.5rem;flex-direction:column}.wxcc-flowchart-wrapper .wxcc-flowchart-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.wxcc-flowchart-wrapper .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"] }] });
+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    <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\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;gap:.5rem;flex-direction:column}.wxcc-flowchart-wrapper .wxcc-flowchart-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.wxcc-flowchart-wrapper .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.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    <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\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;gap:.5rem;flex-direction:column}.wxcc-flowchart-wrapper .wxcc-flowchart-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.wxcc-flowchart-wrapper .placeholder-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
@@ -3282,101 +3430,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 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 });
@@ -3463,9 +3516,818 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
+/**
+ * Same contract as {@link APIService}, pointed at the **dcp** host instead of the
+ * main API host. A handful of UCCX endpoints (application names, file downloads,
+ * dependency analysis) are only served there - webex-ops-client does the same thing
+ * with its `ContactCenterService.customUrl`.
+ *
+ * Registered separately from `APIService` so each keeps its own `apiUrl`/`token`.
+ */
+class DcpApiService extends APIService {
+    constructor() {
+        super(...arguments);
+        this.apiUrl = window.location.protocol + '//' + window.location.hostname + '/dcp';
+    }
+}
+DcpApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DcpApiService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+DcpApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DcpApiService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DcpApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * The UCCX migration payloads as the backend returns them, mirroring
+ * webex-ops-client's `pages/contact-center/interfaces/uccx-batch.interface.ts`.
+ * Only the fields this widget reads are declared.
+ */
+/** The `type` values a {@link UccxItem} can carry. */
+const UCCX_ITEM_TYPE = {
+    RESOURCE_GROUP: 'Resource Group',
+    TRIGGER: 'Trigger',
+    SCRIPT: 'Script',
+    APPLICATION: 'Application',
+    CSQ: 'CSQ',
+    DOCUMENT: 'Document',
+    PHONE_BOOK: 'Phone Book',
+    PROMPT: 'Prompt',
+    REASON_CODE: 'Reason Code',
+    RESOURCE: 'Resource',
+    SKILL: 'Skill',
+    TEAM: 'Team',
+    WRAP_UP_CODE: 'Wrap Up Code'
+};
+/** The only call-flow state that counts as imported. */
+const CALL_FLOW_MIGRATED = 'MIGRATED';
+
+const CHART_COLORS = {
+    customerAssist: '#177A5C',
+    webexContactCenter: '#D0D0D0',
+    requiresReview: '#1268E3'
+};
+/** Compatibility score thresholds, per the ticket's scoring table. */
+const COMPATIBILITY_THRESHOLDS = {
+    /** 80-100 - migrates to Customer Assist with no functional loss. */
+    migratable: 80,
+    /** 60-79 - migrates to Customer Assist, minor unsupported steps dropped. */
+    requiresReview: 60
+};
+/**
+ * Slices of the panel's pie chart, in order: the recommended destination for every
+ * contact center detected in the connected UCCX environment.
+ *
+ * The panel is slice-driven, so re-cutting the chart when the design changes means
+ * editing this array - no component change.
+ */
+const IMPORT_PANEL_SLICES = [
+    {
+        label: 'To Customer Assist',
+        color: CHART_COLORS.customerAssist,
+        tooltip: 'Fully supported by Customer Assist.',
+        match: contactCenter => contactCenter.compatibilityStatus === 'migratable'
+    },
+    {
+        label: 'Requires Review',
+        color: CHART_COLORS.requiresReview,
+        tooltip: 'Supported by Customer Assist, but a few unsupported steps would change. '
+            + 'Can also go to Webex Contact Center for full feature coverage.',
+        match: contactCenter => contactCenter.compatibilityStatus === 'requires-review'
+    },
+    {
+        label: 'To Webex Contact Center',
+        color: CHART_COLORS.webexContactCenter,
+        tooltip: 'Not supported by Customer Assist - migrate to Webex Contact Center.',
+        match: contactCenter => contactCenter.compatibilityStatus === 'unsupported'
+    }
+];
+/**
+ * How UCCX entity types roll up into the groups the Overview step shows, in display
+ * order. Types not listed here get a group of their own under their raw type name,
+ * so nothing the backend returns is silently dropped.
+ */
+const OVERVIEW_ENTITY_GROUPS = [
+    { label: 'Channel', types: [UCCX_ITEM_TYPE.TRIGGER] },
+    { label: 'Queues', types: [UCCX_ITEM_TYPE.CSQ] },
+    { label: 'Audio files', types: [UCCX_ITEM_TYPE.PROMPT, UCCX_ITEM_TYPE.DOCUMENT] },
+    { label: 'Flows', types: [UCCX_ITEM_TYPE.SCRIPT] },
+    { label: 'Skill', types: [UCCX_ITEM_TYPE.SKILL] },
+    { label: 'Contact center users', types: [UCCX_ITEM_TYPE.RESOURCE] }
+];
+const IMPORT_PANEL_TITLE = 'Import Contact center';
+const IMPORT_PANEL_TOOLTIP = 'Contact centers detected in the connected UCCX environment, and where each one can migrate to.';
+const IMPORT_WIZARD_TITLE = 'Contact Center';
+/** Shown once a "requires review" contact center is picked. Dismissible. */
+const CUSTOMER_ASSIST_NOTICE = 'This contact center may also be supported by Customer Assist. Check compatibility before continuing.';
+/** Tooltip on the marker the picker puts next to those same contact centers. */
+const CUSTOMER_ASSIST_MARKER_TOOLTIP = 'May also be supported by Customer Assist.';
+
+/**
+ * Stand-in data used when `CcImportService.useMockData` is on.
+ *
+ * Shapes here mirror exactly what `CcImportService` produces from the real backend,
+ * so switching over is a matter of flipping `useMockData` to false.
+ */
+const APPLICATION_NAMES = [
+    'Operations', 'Sales', 'Support', 'Billing', 'Reception', 'Helpdesk', 'Retention',
+    'Onboarding', 'Escalations', 'Emergency', 'Pharmacy', 'Appointments', 'Claims',
+    'Collections', 'Dispatch', 'Front Desk', 'IT Service Desk', 'Loyalty', 'Orders', 'Returns'
+];
+/** One tab per group on the wizard's Overview step, in the order they are shown. */
+const ENTITY_GROUP_TEMPLATE = [
+    { label: 'Channel', suffixes: ['_CC'] },
+    { label: 'Queues', suffixes: ['_Queue'] },
+    { label: 'Audio files', suffixes: [' Welcome', ' Music On Hold', ' Closed Message'] },
+    { label: 'Flows', suffixes: ['_Flow'] },
+    { label: 'Skill', suffixes: ['_Skill'] },
+    { label: 'Contact center users', suffixes: [' Supervisor', ' Agent 1', ' Agent 2'] }
+];
+/**
+ * The ten contact centers that still need a decision - the only ones the wizard
+ * offers, so these are exactly the rows the picker shows, in this order. The flagged
+ * three are "requires review" and carry the marker plus the advisory notice.
+ */
+const REVIEW_CONTACT_CENTERS = [
+    { name: 'Operations', requiresReview: true },
+    { name: 'Sales_inquiry' },
+    { name: 'Tech Support' },
+    { name: 'Tech_Info' },
+    { name: 'Finance', requiresReview: true },
+    { name: 'Innovation', requiresReview: true },
+    { name: 'Marketing' },
+    { name: 'Gen_Support' },
+    { name: 'Legal' },
+    { name: 'Sales Support' }
+];
+/** 100 contact centers: 70 migratable, 20 unsupported, 10 still to be imported. */
+function mockContactCenters() {
+    const contactCenters = [];
+    // 90 already-imported ones, split across the two destinations.
+    for (let i = 0; i < 90; i++) {
+        const name = `${APPLICATION_NAMES[i % APPLICATION_NAMES.length]}_${Math.floor(i / APPLICATION_NAMES.length) + 1}`;
+        const compatibilityStatus = i < 70 ? 'migratable' : 'unsupported';
+        contactCenters.push({
+            applicationId: `app-${i + 1}`,
+            applicationName: name,
+            scriptName: `${name}_AA_Queue.aef`,
+            compatibilityStatus,
+            compatibilityScore: compatibilityStatus === 'migratable' ? 92 : 41,
+            migrationState: 'migrated'
+        });
+    }
+    REVIEW_CONTACT_CENTERS.forEach((contactCenter, i) => {
+        const compatibilityStatus = contactCenter.requiresReview ? 'requires-review' : 'unsupported';
+        contactCenters.push({
+            applicationId: `app-${91 + i}`,
+            applicationName: contactCenter.name,
+            scriptName: `${contactCenter.name}_AA_Queue.aef`,
+            compatibilityStatus,
+            compatibilityScore: contactCenter.requiresReview ? 68 : 44,
+            migrationState: 'not-migrated',
+            customerAssistCapable: compatibilityStatus === 'requires-review'
+        });
+    });
+    return contactCenters;
+}
+function mockContactCenterEntities(contactCenter) {
+    const base = contactCenter.applicationName;
+    return {
+        applicationId: contactCenter.applicationId,
+        groups: ENTITY_GROUP_TEMPLATE.map(group => ({
+            label: group.label,
+            items: group.suffixes.map(suffix => `${base}${suffix}`)
+        }))
+    };
+}
+
+/** Simulated network latency for the mock responses, so loading states are exercised. */
+const MOCK_LATENCY_MS = 300;
+class CcImportService {
+    constructor() {
+        this.api = inject(APIService);
+        this.dcpApi = inject(DcpApiService);
+        /**
+         * Answer everything from `mock/cc-import.mock.ts` instead of calling the backend.
+         *
+         * Note this is all-or-nothing: with it off, the contact-center list, the entity
+         * overview and the import all hit real endpoints. Compatibility scoring is the
+         * exception - see {@link resolveCompatibility}.
+         */
+        this.useMockData = true;
+    }
+    setToken(token) {
+        this.api.token = token;
+        this.dcpApi.token = token;
+    }
+    setHost(host) {
+        this.api.apiUrl = host;
+    }
+    /** Base URL of the dcp host, which serves the UCCX application list. */
+    setDcpHost(dcpHost) {
+        this.dcpApi.apiUrl = dcpHost;
+    }
+    /**
+     * Every UCCX contact center Tuki can import.
+     *
+     * A "contact center" is a UCCX application. The list comes from the dcp
+     * application cache; whether each one has already been imported is joined on from
+     * the per-AEF-script call-flow migration states.
+     */
+    fetchContactCenters(customerId) {
+        if (this.useMockData) {
+            return of(mockContactCenters()).pipe(delay(MOCK_LATENCY_MS));
+        }
+        return forkJoin({
+            applications: this.dcpApi.fetch(API.UCCX.APPLICATION_NAMES(customerId)),
+            callFlows: this.api.fetch(API.UCCX.CALL_FLOW_MIGRATION_STATUSES(customerId))
+        }).pipe(map(({ applications, callFlows }) => this.toContactCenters(this.asArray(applications), this.asArray(callFlows))));
+    }
+    /**
+     * Application-centric entity breakdown: everything Tuki will create on import.
+     *
+     * Note this only ever returns entities the backend has actually linked to the
+     * application. Where that linkage is missing the groups come back empty rather
+     * than padded with unrelated entities of the right type.
+     */
+    fetchContactCenterEntities(customerId, contactCenter) {
+        if (this.useMockData) {
+            return of(mockContactCenterEntities(contactCenter)).pipe(delay(MOCK_LATENCY_MS));
+        }
+        return this.fetchApplicationItems(customerId, contactCenter.applicationName).pipe(map(items => ({
+            applicationId: contactCenter.applicationId,
+            groups: this.groupEntities(items)
+        })));
+    }
+    /**
+     * Kicks off the UCCX -> Webex Contact Center import of one contact center, as a
+     * single migration unit: every entity of the application goes in one request.
+     *
+     * The endpoint is synchronous and answers with an XLSX tracker rather than a job
+     * id - execution and progress tracking are defined in a separate ticket.
+     *
+     * @param siteId     required by the backend when a Resource Group is in scope.
+     * @param locationId required by the backend when a Trigger is in scope.
+     */
+    importContactCenter(customerId, applicationId, siteId, locationId) {
+        if (this.useMockData) {
+            return of({ applicationId, accepted: true }).pipe(delay(MOCK_LATENCY_MS));
+        }
+        return this.fetchApplicationItems(customerId, applicationId).pipe(switchMap(items => {
+            const payload = {
+                uccxItemsList: items.length ? [items.map(item => ({ ...item, migrate: true }))] : []
+            };
+            return this.api.post(API.UCCX.MIGRATE(customerId), payload, { siteId, locationId }, { responseType: 'blob' });
+        }), map((report) => ({
+            applicationId,
+            accepted: true,
+            report: report instanceof Blob ? report : undefined
+        })));
+    }
+    /**
+     * Every UCCX entity belonging to one application, gathered across the batches.
+     *
+     * UCCX batches hold one entity type each, so this reads them all and keeps the
+     * items whose `applicationName` matches. The narrowing is done here rather than
+     * through the endpoint's own `applicationName` param because that param answers
+     * `[]` on dev2 even for items that plainly carry the name.
+     */
+    fetchApplicationItems(customerId, applicationName) {
+        return this.api.fetch(API.UCCX.BATCHES(customerId)).pipe(switchMap(response => {
+            const batches = this.asArray(response);
+            if (!batches.length) {
+                return of([]);
+            }
+            return forkJoin(batches.map(batch => this.api.fetch(API.UCCX.BATCH_ITEMS(customerId, batch.id))
+                .pipe(map((wrapper) => this.flattenItems(wrapper))))).pipe(map(perBatch => this.dedupeItems(perBatch.flat().filter(item => item.applicationName === applicationName))));
+        }));
+    }
+    /** The items endpoint nests items one level; older responses come back flat. */
+    flattenItems(wrapper) {
+        const items = wrapper?.uccxItemsList ?? [];
+        const flattened = Array.isArray(items[0])
+            ? items.flat()
+            : items;
+        return flattened.filter(Boolean);
+    }
+    /** The same entity can be carried by more than one batch. */
+    dedupeItems(items) {
+        const seen = new Set();
+        return items.filter(item => {
+            const key = `${item.type}::${item.name}::${item.sourceUCCXIp}`;
+            if (seen.has(key)) {
+                return false;
+            }
+            seen.add(key);
+            return true;
+        });
+    }
+    groupEntities(items) {
+        const remaining = new Map();
+        items.forEach(item => {
+            const names = remaining.get(item.type) ?? [];
+            names.push(item.name);
+            remaining.set(item.type, names);
+        });
+        const groups = OVERVIEW_ENTITY_GROUPS.map(group => {
+            const collected = [];
+            group.types.forEach(type => {
+                collected.push(...(remaining.get(type) ?? []));
+                remaining.delete(type);
+            });
+            return { label: group.label, items: collected };
+        });
+        // Anything the backend returned that has no group of its own keeps its raw
+        // type as a label, rather than being dropped from the overview.
+        remaining.forEach((names, type) => groups.push({ label: type, items: names }));
+        return groups;
+    }
+    toContactCenters(applications, callFlows) {
+        return applications
+            .filter(application => !!application?.name)
+            .map(application => {
+            const uccxIp = application.uccx?.host;
+            const scriptName = this.toScriptName(application);
+            const compatibilityStatus = this.resolveCompatibility(application);
+            const contactCenter = {
+                // UCCX identifies an application by name - it is what the entity
+                // records link back to - so it doubles as the widget's key.
+                applicationId: application.name,
+                applicationName: application.name,
+                scriptName,
+                uccxIp,
+                compatibilityStatus,
+                migrationState: this.resolveMigrationState(application, scriptName, uccxIp, callFlows),
+                // Per the ticket, "requires review" is exactly the set that can go
+                // to either destination.
+                customerAssistCapable: compatibilityStatus === 'requires-review'
+            };
+            return contactCenter;
+        });
+    }
+    /** UCCX wraps the backing script as `SCRIPT[Foo.aef]`; the widget shows `Foo.aef`. */
+    toScriptName(application) {
+        const raw = application.scriptName ?? application.aefFiles?.[0] ?? '';
+        return raw.replace(/^SCRIPT\[(.*)\]$/, '$1');
+    }
+    /**
+     * Whether Tuki has already imported this contact center.
+     *
+     * The application record carries its own `migrationStatus`, but it is null
+     * throughout dev2, so this falls back to the per-AEF-script call-flow state.
+     */
+    resolveMigrationState(application, scriptName, uccxIp, callFlows) {
+        if (application.migrationStatus) {
+            return application.migrationStatus === CALL_FLOW_MIGRATED ? 'migrated' : 'not-migrated';
+        }
+        const callFlow = callFlows.find(flow => flow.scriptName === scriptName && (!uccxIp || flow.uccxIp === uccxIp));
+        return callFlow?.status === CALL_FLOW_MIGRATED ? 'migrated' : 'not-migrated';
+    }
+    /**
+     * Turns an AEF compatibility score into a status.
+     *
+     * The scoring API does not exist yet - the AEF step mapping is still a pending
+     * input on the ticket - so when the backend sends no score every contact center
+     * falls back to "requires review": the status that offers both destinations and
+     * claims nothing about compatibility we have not actually measured.
+     *
+     * Once the backend returns `compatibilityScore`, the thresholds below take over
+     * with no further change here.
+     */
+    resolveCompatibility(application) {
+        const score = application.compatibilityScore;
+        if (typeof score !== 'number') {
+            return 'requires-review';
+        }
+        if (score >= COMPATIBILITY_THRESHOLDS.migratable) {
+            return 'migratable';
+        }
+        if (score >= COMPATIBILITY_THRESHOLDS.requiresReview) {
+            return 'requires-review';
+        }
+        return 'unsupported';
+    }
+    asArray(value) {
+        return Array.isArray(value) ? value : [];
+    }
+}
+CcImportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CcImportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CcImportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CcImportService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CcImportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * "Import Contact center" panel: how many UCCX contact centers were detected, how many
+ * have been imported, and an Import button that asks the host to open the import wizard.
+ */
+class ImportContactCenterPanelComponent {
+    constructor() {
+        /** Serve mock data instead of calling the UCCX migration API. */
+        this.useMockData = true;
+        /**
+         * Asked for the import wizard, carrying the contact centers already loaded here so
+         * the wizard opens without refetching them. The host renders
+         * `cc-import-contact-center-wizard` as a page in response.
+         */
+        this.importRequested = new EventEmitter();
+        this.ccImportService = inject(CcImportService);
+        this.title = IMPORT_PANEL_TITLE;
+        this.tooltip = IMPORT_PANEL_TOOLTIP;
+        this.segments = [];
+        this.total = 0;
+        this.loading = false;
+        this.error = false;
+        this.contactCenters = [];
+    }
+    ngOnInit() {
+        // Render an empty donut up front so the template never reads unset chart options,
+        // including when load() bails out because the widget has no credentials yet.
+        this.buildViewModel();
+        this.load();
+    }
+    ngOnChanges(changes) {
+        const reloadTriggers = ['customerId', 'host', 'dcpHost', 'token', 'useMockData'];
+        if (reloadTriggers.some(input => changes[input] && !changes[input].firstChange)) {
+            this.load();
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    onImport() {
+        this.importRequested.emit(this.contactCenters);
+    }
+    /** Call after an import has run so the donut picks up the new counts. */
+    refresh() {
+        this.load();
+    }
+    load() {
+        const customerId = Number(this.customerId);
+        this.ccImportService.useMockData = this.useMockData;
+        if (!this.useMockData && (!customerId || !this.token)) {
+            return;
+        }
+        if (this.host) {
+            this.ccImportService.setHost(this.host);
+        }
+        if (this.dcpHost) {
+            this.ccImportService.setDcpHost(this.dcpHost);
+        }
+        if (this.token) {
+            this.ccImportService.setToken(this.token);
+        }
+        this.subscription?.unsubscribe();
+        this.loading = true;
+        this.error = false;
+        this.subscription = this.ccImportService.fetchContactCenters(customerId)
+            .pipe(catchError(error => {
+            console.error('Unable to load the contact centers', error);
+            this.error = true;
+            return of([]);
+        }), finalize(() => this.loading = false))
+            .subscribe(contactCenters => {
+            this.contactCenters = contactCenters;
+            this.buildViewModel();
+        });
+    }
+    buildViewModel() {
+        this.total = this.contactCenters.length;
+        this.segments = IMPORT_PANEL_SLICES.map(slice => {
+            const count = this.contactCenters.filter(slice.match).length;
+            return {
+                label: slice.label,
+                color: slice.color,
+                tooltip: slice.tooltip,
+                count,
+                percentage: this.total > 0 ? Math.round((count / this.total) * 100) : 0
+            };
+        });
+        this.chartOptions = this.buildChartOptions();
+    }
+    buildChartOptions() {
+        const charted = this.segments.filter(segment => segment.count > 0);
+        const isEmpty = charted.length === 0;
+        return {
+            series: isEmpty ? [1] : charted.map(segment => segment.count),
+            labels: isEmpty ? ['No contact centers'] : charted.map(segment => segment.label),
+            colors: isEmpty ? [CHART_COLORS.webexContactCenter] : charted.map(segment => segment.color),
+            chart: {
+                type: 'donut',
+                height: 150,
+                width: 150,
+                sparkline: { enabled: true }
+            },
+            legend: { show: false },
+            plotOptions: {
+                pie: {
+                    expandOnClick: false,
+                    donut: { size: '72%' }
+                }
+            },
+            dataLabels: { enabled: false },
+            tooltip: { enabled: !isEmpty },
+            states: {
+                active: { filter: { type: 'none', value: 0 } }
+            }
+        };
+    }
+}
+ImportContactCenterPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ImportContactCenterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ImportContactCenterPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ImportContactCenterPanelComponent, selector: "cc-import-contact-center-panel", inputs: { customerId: "customerId", host: "host", dcpHost: "dcpHost", token: "token", useMockData: "useMockData" }, outputs: { importRequested: "importRequested" }, usesOnChanges: true, ngImport: i0, template: "<tk-card [title]=\"title\" [dense]=\"true\">\r\n  <ng-container ngProjectAs=\"card-title-adornment\">\r\n    <span class=\"cc-import-panel__info\" [matTooltip]=\"tooltip\">\r\n      <ng-container *ngTemplateOutlet=\"infoIcon\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"cc-import-panel__body\" *ngIf=\"!loading && !error; else panelState\">\r\n      <div class=\"cc-import-panel__chart\">\r\n        <apx-chart\r\n          [series]=\"chartOptions.series\"\r\n          [chart]=\"chartOptions.chart\"\r\n          [labels]=\"chartOptions.labels\"\r\n          [colors]=\"chartOptions.colors\"\r\n          [legend]=\"chartOptions.legend\"\r\n          [plotOptions]=\"chartOptions.plotOptions\"\r\n          [dataLabels]=\"chartOptions.dataLabels\"\r\n          [tooltip]=\"chartOptions.tooltip\"\r\n          [states]=\"chartOptions.states\"\r\n        ></apx-chart>\r\n        <div class=\"cc-import-panel__chart-center\">\r\n          <span class=\"cc-import-panel__chart-total\">{{ total | number }}</span>\r\n          <span class=\"cc-import-panel__chart-caption\">Contact Center</span>\r\n        </div>\r\n      </div>\r\n\r\n      <ul class=\"cc-import-panel__legend\">\r\n        <li class=\"cc-import-panel__legend-item\" *ngFor=\"let segment of segments\">\r\n          <span class=\"cc-import-panel__legend-marker\" [style.backgroundColor]=\"segment.color\"></span>\r\n          <span class=\"cc-import-panel__legend-label\">{{ segment.label }}</span>\r\n          <span class=\"cc-import-panel__info\" [matTooltip]=\"segment.tooltip\">\r\n            <ng-container *ngTemplateOutlet=\"infoIcon\"></ng-container>\r\n          </span>\r\n          <span class=\"cc-import-panel__legend-value\">{{ segment.count | number }} ({{ segment.percentage }}%)</span>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n\r\n    <ng-template #panelState>\r\n      <div class=\"cc-import-panel__state\" *ngIf=\"loading\">Loading contact centers\u2026</div>\r\n      <div class=\"cc-import-panel__state cc-import-panel__state--error\" *ngIf=\"!loading && error\">\r\n        Unable to load contact centers.\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"cc-import-panel__actions\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"cc-import-panel__button\"\r\n        [disabled]=\"loading || error\"\r\n        (click)=\"onImport()\"\r\n      >\r\n        Import\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n</tk-card>\r\n\r\n<ng-template #infoIcon>\r\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n    <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\r\n    <path d=\"M8 7.2v4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\r\n    <circle cx=\"8\" cy=\"5\" r=\"0.85\" fill=\"currentColor\" />\r\n  </svg>\r\n</ng-template>\r\n", 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{display:block;box-sizing:border-box;font-family:Inter,Inter,sans-serif}.cc-import-panel__info{display:inline-flex;align-items:center;color:#636363;cursor:help}.cc-import-panel__body{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;width:100%}.cc-import-panel__chart{position:relative;width:150px;height:150px;flex-shrink:0}.cc-import-panel__chart-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.cc-import-panel__chart-total{font-size:1.625rem;line-height:1.1;color:#252525}.cc-import-panel__chart-caption{font-size:.6875rem;color:#636363}.cc-import-panel__legend{display:flex;flex-direction:column;gap:.625rem;margin:0;padding:0;list-style:none;min-width:17.5rem;flex:1}.cc-import-panel__legend-item{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#636363}.cc-import-panel__legend-marker{width:10px;height:10px;border-radius:2px;flex-shrink:0}.cc-import-panel__legend-label{color:#252525}.cc-import-panel__legend-value{margin-left:auto;white-space:nowrap}.cc-import-panel__state{font-size:.875rem;color:#636363}.cc-import-panel__state--error{color:#bc1e1b}.cc-import-panel__actions{display:flex;margin-top:auto}.cc-import-panel__button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;color:#000000f2;cursor:pointer;white-space:nowrap}.cc-import-panel__button:hover:not(:disabled){background:#ededed}.cc-import-panel__button:disabled{color:#babcc5;border-color:#dfe3e7;cursor:not-allowed}@media (max-width: 560px){.cc-import-panel__legend{min-width:0}}\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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title", "dense"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ImportContactCenterPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cc-import-contact-center-panel', template: "<tk-card [title]=\"title\" [dense]=\"true\">\r\n  <ng-container ngProjectAs=\"card-title-adornment\">\r\n    <span class=\"cc-import-panel__info\" [matTooltip]=\"tooltip\">\r\n      <ng-container *ngTemplateOutlet=\"infoIcon\"></ng-container>\r\n    </span>\r\n  </ng-container>\r\n\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div class=\"cc-import-panel__body\" *ngIf=\"!loading && !error; else panelState\">\r\n      <div class=\"cc-import-panel__chart\">\r\n        <apx-chart\r\n          [series]=\"chartOptions.series\"\r\n          [chart]=\"chartOptions.chart\"\r\n          [labels]=\"chartOptions.labels\"\r\n          [colors]=\"chartOptions.colors\"\r\n          [legend]=\"chartOptions.legend\"\r\n          [plotOptions]=\"chartOptions.plotOptions\"\r\n          [dataLabels]=\"chartOptions.dataLabels\"\r\n          [tooltip]=\"chartOptions.tooltip\"\r\n          [states]=\"chartOptions.states\"\r\n        ></apx-chart>\r\n        <div class=\"cc-import-panel__chart-center\">\r\n          <span class=\"cc-import-panel__chart-total\">{{ total | number }}</span>\r\n          <span class=\"cc-import-panel__chart-caption\">Contact Center</span>\r\n        </div>\r\n      </div>\r\n\r\n      <ul class=\"cc-import-panel__legend\">\r\n        <li class=\"cc-import-panel__legend-item\" *ngFor=\"let segment of segments\">\r\n          <span class=\"cc-import-panel__legend-marker\" [style.backgroundColor]=\"segment.color\"></span>\r\n          <span class=\"cc-import-panel__legend-label\">{{ segment.label }}</span>\r\n          <span class=\"cc-import-panel__info\" [matTooltip]=\"segment.tooltip\">\r\n            <ng-container *ngTemplateOutlet=\"infoIcon\"></ng-container>\r\n          </span>\r\n          <span class=\"cc-import-panel__legend-value\">{{ segment.count | number }} ({{ segment.percentage }}%)</span>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n\r\n    <ng-template #panelState>\r\n      <div class=\"cc-import-panel__state\" *ngIf=\"loading\">Loading contact centers\u2026</div>\r\n      <div class=\"cc-import-panel__state cc-import-panel__state--error\" *ngIf=\"!loading && error\">\r\n        Unable to load contact centers.\r\n      </div>\r\n    </ng-template>\r\n\r\n    <div class=\"cc-import-panel__actions\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"cc-import-panel__button\"\r\n        [disabled]=\"loading || error\"\r\n        (click)=\"onImport()\"\r\n      >\r\n        Import\r\n      </button>\r\n    </div>\r\n  </ng-container>\r\n</tk-card>\r\n\r\n<ng-template #infoIcon>\r\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n    <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\r\n    <path d=\"M8 7.2v4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\r\n    <circle cx=\"8\" cy=\"5\" r=\"0.85\" fill=\"currentColor\" />\r\n  </svg>\r\n</ng-template>\r\n", 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{display:block;box-sizing:border-box;font-family:Inter,Inter,sans-serif}.cc-import-panel__info{display:inline-flex;align-items:center;color:#636363;cursor:help}.cc-import-panel__body{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;width:100%}.cc-import-panel__chart{position:relative;width:150px;height:150px;flex-shrink:0}.cc-import-panel__chart-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.cc-import-panel__chart-total{font-size:1.625rem;line-height:1.1;color:#252525}.cc-import-panel__chart-caption{font-size:.6875rem;color:#636363}.cc-import-panel__legend{display:flex;flex-direction:column;gap:.625rem;margin:0;padding:0;list-style:none;min-width:17.5rem;flex:1}.cc-import-panel__legend-item{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#636363}.cc-import-panel__legend-marker{width:10px;height:10px;border-radius:2px;flex-shrink:0}.cc-import-panel__legend-label{color:#252525}.cc-import-panel__legend-value{margin-left:auto;white-space:nowrap}.cc-import-panel__state{font-size:.875rem;color:#636363}.cc-import-panel__state--error{color:#bc1e1b}.cc-import-panel__actions{display:flex;margin-top:auto}.cc-import-panel__button{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;background:#fff;border:1px solid rgba(0,0,0,.5019607843);border-radius:6.25rem;font-family:inherit;font-size:.875rem;font-weight:500;color:#000000f2;cursor:pointer;white-space:nowrap}.cc-import-panel__button:hover:not(:disabled){background:#ededed}.cc-import-panel__button:disabled{color:#babcc5;border-color:#dfe3e7;cursor:not-allowed}@media (max-width: 560px){.cc-import-panel__legend{min-width:0}}\n"] }]
+        }], propDecorators: { customerId: [{
+                type: Input
+            }], host: [{
+                type: Input
+            }], dcpHost: [{
+                type: Input
+            }], token: [{
+                type: Input
+            }], useMockData: [{
+                type: Input
+            }], importRequested: [{
+                type: Output
+            }] } });
+
+/** The wizard's steps, in order. Index-aligned with the `mat-stepper` steps. */
+const IMPORT_WIZARD_STEPS = ['select', 'overview'];
+
+/**
+ * Full-page "Import contact center" wizard: pick a UCCX contact center, review the
+ * entities Tuki will create for it, then start the import.
+ *
+ * Rendered as a page by the host app (like `tk-user-creation-wizard`), not as a dialog -
+ * the host swaps it in when the panel's Import button is pressed and swaps it back out
+ * on `cancel` / `imported`.
+ */
+class ImportContactCenterWizardComponent {
+    constructor() {
+        this.title = IMPORT_WIZARD_TITLE;
+        /** Serve mock data instead of calling the UCCX migration API. */
+        this.useMockData = true;
+        /**
+         * Contact centers the caller has already loaded (the panel has them), so the wizard
+         * opens without a second round trip. Left unset, the wizard fetches them itself.
+         */
+        this.contactCenters = null;
+        this.cancel = new EventEmitter();
+        this.imported = new EventEmitter();
+        this.ccImportService = inject(CcImportService);
+        this.subscriptions = new Subscription();
+        this.customerAssistNotice = CUSTOMER_ASSIST_NOTICE;
+        this.customerAssistMarkerTooltip = CUSTOMER_ASSIST_MARKER_TOOLTIP;
+        this.selectedIndex = 0;
+        /** Contact centers awaiting review - the ones there is something to import. */
+        this.options = [];
+        /** `options` narrowed by the picker's search box. */
+        this.filteredOptions = [];
+        this.searchTerm = '';
+        this.selected = null;
+        this.noticeDismissed = false;
+        this.loading = false;
+        this.error = false;
+        this.entityGroups = [];
+        /** Which entity group the Overview step's tab bar is showing. */
+        this.activeGroupIndex = 0;
+        this.entitiesLoading = false;
+        this.entitiesError = false;
+        this.importing = false;
+        this.importError = false;
+    }
+    ngOnInit() {
+        this.load();
+    }
+    ngOnChanges(changes) {
+        const reloadTriggers = ['customerId', 'host', 'dcpHost', 'token', 'useMockData', 'contactCenters'];
+        if (reloadTriggers.some(input => changes[input] && !changes[input].firstChange)) {
+            this.load();
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    get canGoNext() {
+        return !!this.selected;
+    }
+    /** The Customer Assist advisory, until the user dismisses it or picks something else. */
+    get showCustomerAssistNotice() {
+        return !!this.selected?.customerAssistCapable && !this.noticeDismissed;
+    }
+    get canImport() {
+        return !!this.selected && !this.importing && !this.entitiesLoading && !this.entitiesError;
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    onSelect(applicationId) {
+        const selected = this.options.find(option => option.applicationId === applicationId) ?? null;
+        if (selected === this.selected) {
+            return;
+        }
+        this.selected = selected;
+        this.noticeDismissed = false;
+        // Entities belong to the previously selected contact center - drop them so the
+        // overview step refetches for the new one.
+        this.entityGroups = [];
+        this.activeGroupIndex = 0;
+        this.entitiesError = false;
+    }
+    get activeGroup() {
+        return this.entityGroups[this.activeGroupIndex];
+    }
+    selectGroup(index) {
+        this.activeGroupIndex = index;
+    }
+    dismissNotice() {
+        this.noticeDismissed = true;
+    }
+    onSearch(event) {
+        this.searchTerm = event.target.value;
+        this.filter();
+    }
+    /** Resets the search box each time the picker's panel is closed. */
+    onPanelToggle(opened) {
+        if (!opened && this.searchTerm) {
+            this.searchTerm = '';
+            this.filter();
+        }
+    }
+    onStepSelectionChange(event) {
+        this.selectedIndex = event.selectedIndex;
+        if (this.stepIdAt(event.selectedIndex) === 'overview') {
+            this.loadEntities();
+        }
+    }
+    onNext(stepper) {
+        if (this.canGoNext) {
+            stepper.next();
+        }
+    }
+    onPrevious(stepper) {
+        stepper.previous();
+    }
+    runImport() {
+        if (!this.selected || this.importing) {
+            return;
+        }
+        this.importing = true;
+        this.importError = false;
+        this.subscriptions.add(this.ccImportService.importContactCenter(Number(this.customerId), this.selected.applicationId)
+            .pipe(catchError(error => {
+            console.error('Unable to start the contact-center import', error);
+            this.importError = true;
+            return of(null);
+        }), finalize(() => this.importing = false))
+            .subscribe(result => {
+            if (result) {
+                this.imported.emit(result);
+            }
+        }));
+    }
+    stepIdAt(index) {
+        return IMPORT_WIZARD_STEPS[index];
+    }
+    load() {
+        this.ccImportService.useMockData = this.useMockData;
+        if (this.host) {
+            this.ccImportService.setHost(this.host);
+        }
+        if (this.dcpHost) {
+            this.ccImportService.setDcpHost(this.dcpHost);
+        }
+        if (this.token) {
+            this.ccImportService.setToken(this.token);
+        }
+        if (this.contactCenters) {
+            this.setOptions(this.contactCenters);
+            return;
+        }
+        const customerId = Number(this.customerId);
+        if (!this.useMockData && (!customerId || !this.token)) {
+            return;
+        }
+        this.loading = true;
+        this.error = false;
+        this.subscriptions.add(this.ccImportService.fetchContactCenters(customerId)
+            .pipe(catchError(error => {
+            console.error('Unable to load the contact centers', error);
+            this.error = true;
+            return of([]);
+        }), finalize(() => this.loading = false))
+            .subscribe(contactCenters => this.setOptions(contactCenters)));
+    }
+    setOptions(contactCenters) {
+        // Left in source order on purpose - the picker shows them the way the backend
+        // (and the mock) hands them over, not alphabetically.
+        //
+        // Eligible for a Webex Contact Center import: not imported yet, and either
+        // unsupported on Customer Assist or reviewable for full feature coverage.
+        this.options = contactCenters.filter(contactCenter => contactCenter.migrationState !== 'migrated'
+            && (contactCenter.compatibilityStatus === 'unsupported'
+                || contactCenter.compatibilityStatus === 'requires-review'));
+        // A contact center selected before a reload may no longer be importable.
+        if (this.selected && !this.options.some(option => option.applicationId === this.selected?.applicationId)) {
+            this.selected = null;
+            this.entityGroups = [];
+            this.activeGroupIndex = 0;
+        }
+        this.filter();
+    }
+    filter() {
+        const needle = this.searchTerm.trim().toLowerCase();
+        this.filteredOptions = needle
+            ? this.options.filter(option => option.applicationName.toLowerCase().includes(needle))
+            : this.options;
+    }
+    loadEntities() {
+        if (!this.selected || this.entityGroups.length || this.entitiesLoading) {
+            return;
+        }
+        this.entitiesLoading = true;
+        this.entitiesError = false;
+        this.subscriptions.add(this.ccImportService.fetchContactCenterEntities(Number(this.customerId), this.selected)
+            .pipe(catchError(error => {
+            console.error('Unable to load the contact-center entities', error);
+            this.entitiesError = true;
+            return of(null);
+        }), finalize(() => this.entitiesLoading = false))
+            .subscribe(entities => {
+            this.entityGroups = entities ? entities.groups : [];
+            this.activeGroupIndex = 0;
+        }));
+    }
+}
+ImportContactCenterWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ImportContactCenterWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ImportContactCenterWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ImportContactCenterWizardComponent, selector: "cc-import-contact-center-wizard", inputs: { title: "title", customerId: "customerId", host: "host", dcpHost: "dcpHost", token: "token", useMockData: "useMockData", contactCenters: "contactCenters" }, outputs: { cancel: "cancel", imported: "imported" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"importing\">\r\n  <header class=\"move-user-header\">\r\n    <div class=\"move-user-header__title\">{{ title }}</div>\r\n    <div class=\"move-user-header__close\">\r\n      <span class=\"app-icon cc-import-close-icon\" (click)=\"onCancel()\" role=\"button\" aria-label=\"Close\">\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n          <path d=\"M5 5L19 19M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" />\r\n        </svg>\r\n      </span>\r\n    </div>\r\n  </header>\r\n\r\n  <div id=\"cc-import-stepper\">\r\n    <mat-stepper\r\n      #stepper\r\n      [linear]=\"true\"\r\n      labelPosition=\"bottom\"\r\n      [selectedIndex]=\"selectedIndex\"\r\n      (selectionChange)=\"onStepSelectionChange($event)\"\r\n    >\r\n\r\n      <!-- Step 1: pick the UCCX contact center -->\r\n      <mat-step [completed]=\"canGoNext\">\r\n        <ng-template matStepLabel>Select</ng-template>\r\n\r\n        <div class=\"cc-import-notice\" *ngIf=\"showCustomerAssistNotice\" role=\"status\">\r\n          <span class=\"cc-import-notice__icon\" aria-hidden=\"true\">\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n              <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"currentColor\" />\r\n              <path d=\"M8 7.1v4.2\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\r\n              <circle cx=\"8\" cy=\"4.8\" r=\"0.9\" fill=\"#fff\" />\r\n            </svg>\r\n          </span>\r\n          <span class=\"cc-import-notice__text\">{{ customerAssistNotice }}</span>\r\n          <button type=\"button\" class=\"cc-import-notice__close\" aria-label=\"Dismiss\" (click)=\"dismissNotice()\">\r\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n              <path d=\"M5 5L19 19M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"step-title\">Step 1: Select contact center</div>\r\n\r\n        <div class=\"move-user-tab-content-box\">\r\n          <div class=\"cc-import-state\" *ngIf=\"loading\">Loading contact centers&hellip;</div>\r\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"!loading && error\">\r\n            Unable to load contact centers.\r\n          </div>\r\n\r\n          <section class=\"cc-import-step-content\" *ngIf=\"!loading && !error\">\r\n            <div class=\"cc-import-field\">\r\n              <label class=\"cc-import-label\" for=\"cc-import-contact-center\">Contact center</label>\r\n\r\n              <mat-form-field class=\"cc-import-select\" appearance=\"outline\">\r\n                <mat-select\r\n                  id=\"cc-import-contact-center\"\r\n                  panelClass=\"cc-import-select-panel\"\r\n                  placeholder=\"Select contact center\"\r\n                  [disableOptionCentering]=\"true\"\r\n                  [value]=\"selected?.applicationId ?? null\"\r\n                  (selectionChange)=\"onSelect($event.value)\"\r\n                  (openedChange)=\"onPanelToggle($event)\"\r\n                >\r\n                  <mat-select-trigger>{{ selected?.applicationName }}</mat-select-trigger>\r\n\r\n                  <!-- Search box pinned above the options. Keystrokes are stopped here so\r\n                       mat-select's own typeahead does not steal them. -->\r\n                  <div class=\"cc-import-select-search\" (click)=\"$event.stopPropagation()\">\r\n                    <span class=\"cc-import-select-search__icon\" aria-hidden=\"true\">\r\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <circle cx=\"7\" cy=\"7\" r=\"4.6\" stroke=\"currentColor\" stroke-width=\"1.4\" />\r\n                        <path d=\"M10.6 10.6L14 14\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\r\n                      </svg>\r\n                    </span>\r\n                    <input\r\n                      class=\"cc-import-select-search__input\"\r\n                      type=\"text\"\r\n                      autocomplete=\"off\"\r\n                      placeholder=\"Search\"\r\n                      aria-label=\"Search contact centers\"\r\n                      [value]=\"searchTerm\"\r\n                      (input)=\"onSearch($event)\"\r\n                      (keydown)=\"$event.stopPropagation()\"\r\n                    />\r\n                  </div>\r\n\r\n                  <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.applicationId\">\r\n                    <div class=\"option-row\">\r\n                      <span class=\"name\">{{ option.applicationName }}</span>\r\n                      <span\r\n                        class=\"cc-import-option-marker\"\r\n                        *ngIf=\"option.customerAssistCapable\"\r\n                        [matTooltip]=\"customerAssistMarkerTooltip\"\r\n                        aria-hidden=\"true\"\r\n                      >\r\n                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                          <path d=\"M8 2.2 14.6 13.4H1.4L8 2.2Z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\" />\r\n                          <path d=\"M8 6.5v3\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" />\r\n                          <circle cx=\"8\" cy=\"11.3\" r=\"0.7\" fill=\"currentColor\" />\r\n                        </svg>\r\n                      </span>\r\n                    </div>\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n\r\n              <p class=\"cc-import-empty\" *ngIf=\"!options.length\">\r\n                Every detected contact center has already been imported.\r\n              </p>\r\n            </div>\r\n          </section>\r\n        </div>\r\n      </mat-step>\r\n\r\n      <!-- Step 2: the entities Tuki will create for it -->\r\n      <mat-step>\r\n        <ng-template matStepLabel>Overview</ng-template>\r\n\r\n        <div class=\"step-title\">Overview</div>\r\n\r\n        <div class=\"move-user-tab-content-box\">\r\n          <h3 class=\"cc-import-card-title\">Review Contact Center Settings</h3>\r\n          <p class=\"cc-import-card-text\">\r\n            Review the settings for your new Contact center to make sure everything is correct.<br />\r\n            You can make changes at any time by clicking on the name of the contact center on the dedicated page.\r\n          </p>\r\n\r\n          <div class=\"cc-import-state\" *ngIf=\"entitiesLoading\">Loading entities&hellip;</div>\r\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"entitiesError\">\r\n            Unable to load the related entities.\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"!entitiesLoading && !entitiesError && entityGroups.length\">\r\n            <div class=\"cc-import-tabs\" role=\"tablist\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"cc-import-tab\"\r\n                *ngFor=\"let group of entityGroups; index as i\"\r\n                role=\"tab\"\r\n                [attr.aria-selected]=\"i === activeGroupIndex\"\r\n                [class.cc-import-tab--active]=\"i === activeGroupIndex\"\r\n                (click)=\"selectGroup(i)\"\r\n              >\r\n                {{ group.label }}\r\n              </button>\r\n            </div>\r\n\r\n            <ul class=\"cc-import-items\" role=\"tabpanel\">\r\n              <li class=\"cc-import-item\" *ngFor=\"let item of activeGroup?.items\">{{ item }}</li>\r\n              <li class=\"cc-import-item cc-import-item--empty\" *ngIf=\"!activeGroup?.items?.length\">\r\n                Nothing to create for {{ activeGroup?.label }}.\r\n              </li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"importError\">\r\n            Unable to start the import. Please try again.\r\n          </div>\r\n        </div>\r\n      </mat-step>\r\n    </mat-stepper>\r\n\r\n    <div class=\"wizard-actions\">\r\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\r\n        <ng-container *ngSwitchCase=\"0\">\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-primary\"\r\n            type=\"button\"\r\n            [disabled]=\"!canGoNext\"\r\n            (click)=\"onNext(stepper)\"\r\n          >\r\n            Next\r\n          </button>\r\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\r\n            Cancel\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"1\">\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-primary\"\r\n            type=\"button\"\r\n            [disabled]=\"!canImport\"\r\n            (click)=\"runImport()\"\r\n          >\r\n            <span class=\"uc-btn__inline-content\">\r\n              <span class=\"uc-btn__spinner\" *ngIf=\"importing\" aria-hidden=\"true\"></span>\r\n              <span>{{ importing ? 'Importing...' : 'Import' }}</span>\r\n            </span>\r\n          </button>\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-secondary\"\r\n            type=\"button\"\r\n            [disabled]=\"importing\"\r\n            (click)=\"onPrevious(stepper)\"\r\n          >\r\n            Previous\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"importing\" aria-hidden=\"true\"></div>\r\n</div>\r\n", styles: ["cc-import-contact-center-wizard{display:block;width:100%;min-height:100vh}.move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden;box-sizing:border-box;min-height:100vh;display:flex;flex-direction:column}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.app-icon{height:20px;width:20px;display:block;cursor:pointer}.cc-import-close-icon{color:#fffffff2}#cc-import-stepper{display:flex;flex-direction:column;width:100%;flex:1 1 auto;min-height:0}#cc-import-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}#cc-import-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#cc-import-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#cc-import-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#cc-import-stepper .mat-step-icon-state-number{background-color:#fff}#cc-import-stepper .mat-step-icon-state-edit,#cc-import-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#cc-import-stepper .mat-step-icon-content{display:none}#cc-import-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#cc-import-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#cc-import-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#cc-import-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#cc-import-stepper .mat-horizontal-stepper-header:before,#cc-import-stepper .mat-horizontal-stepper-header:after,#cc-import-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#cc-import-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#cc-import-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#cc-import-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#cc-import-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#cc-import-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.wizard-actions .uc-btn-primary.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important;opacity:.3}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #c3c1c1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.cc-import-notice{width:70%;margin:0 auto 1rem;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:4px;background-color:#e8f2fc;color:#2a2f3b;font-size:13px;line-height:1.4}.cc-import-notice__icon{display:flex;color:#1170cf;line-height:0}.cc-import-notice__text{flex:1}.cc-import-notice__close{background:none;border:none;padding:0;cursor:pointer;display:flex;color:#5a6172;line-height:0}.cc-import-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.cc-import-field{display:flex;flex-direction:column;gap:10px}.cc-import-label{font-size:14px;font-weight:400;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.cc-import-select{width:100%;max-width:333px}.cc-import-empty{margin:0;font-size:13px;color:#5a6172}.cc-import-state{font-size:14px;color:#5a6172}.cc-import-state--error{color:#c0392b}.cc-import-card-title{margin:0 0 8px;font-size:15px;font-weight:700;color:#2a2f3b}.cc-import-card-text{margin:0 0 22px;font-size:14px;line-height:1.6;color:#2a2f3b}.cc-import-tabs{display:flex;flex-wrap:wrap;gap:20px}.cc-import-tab{background:none;border:none;border-bottom:2px solid transparent;padding:0 0 8px;font:inherit;font-size:14px;color:#5a6172;cursor:pointer}.cc-import-tab--active{color:#000;font-weight:600;border-bottom-color:#000}.cc-import-items{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}.cc-import-item{font-size:14px;color:#2a2f3b}.cc-import-item--empty{color:#5a6172;font-style:italic}.cc-import-select .mat-form-field-wrapper{padding-bottom:0}.cc-import-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}.cc-import-select .mat-form-field-outline,.cc-import-select .mat-form-field-outline-start,.cc-import-select .mat-form-field-outline-end,.cc-import-select .mat-form-field-outline-gap{display:none}.cc-import-select .mat-form-field-infix{width:100%;border-top:0;padding:0}.cc-import-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}.cc-import-select-panel .option-row{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px}.cc-import-select-panel .cc-import-option-marker{display:flex;color:#b26a00;line-height:0}.cc-import-select-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;margin:4px 8px 8px;padding:0 10px;height:30px;border:1px solid #c3c1c1;border-radius:50px;background-color:#fff}.cc-import-select-search__icon{display:flex;color:#5a6172;line-height:0}.cc-import-select-search__input{flex:1;border:none;outline:none;font:inherit;font-size:13px;color:#2a2f3b;background:transparent}\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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { 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"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ImportContactCenterWizardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cc-import-contact-center-wizard', encapsulation: ViewEncapsulation.None, template: "<div class=\"move-user-stepper-container\" [attr.aria-busy]=\"importing\">\r\n  <header class=\"move-user-header\">\r\n    <div class=\"move-user-header__title\">{{ title }}</div>\r\n    <div class=\"move-user-header__close\">\r\n      <span class=\"app-icon cc-import-close-icon\" (click)=\"onCancel()\" role=\"button\" aria-label=\"Close\">\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n          <path d=\"M5 5L19 19M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" />\r\n        </svg>\r\n      </span>\r\n    </div>\r\n  </header>\r\n\r\n  <div id=\"cc-import-stepper\">\r\n    <mat-stepper\r\n      #stepper\r\n      [linear]=\"true\"\r\n      labelPosition=\"bottom\"\r\n      [selectedIndex]=\"selectedIndex\"\r\n      (selectionChange)=\"onStepSelectionChange($event)\"\r\n    >\r\n\r\n      <!-- Step 1: pick the UCCX contact center -->\r\n      <mat-step [completed]=\"canGoNext\">\r\n        <ng-template matStepLabel>Select</ng-template>\r\n\r\n        <div class=\"cc-import-notice\" *ngIf=\"showCustomerAssistNotice\" role=\"status\">\r\n          <span class=\"cc-import-notice__icon\" aria-hidden=\"true\">\r\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n              <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"currentColor\" />\r\n              <path d=\"M8 7.1v4.2\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\r\n              <circle cx=\"8\" cy=\"4.8\" r=\"0.9\" fill=\"#fff\" />\r\n            </svg>\r\n          </span>\r\n          <span class=\"cc-import-notice__text\">{{ customerAssistNotice }}</span>\r\n          <button type=\"button\" class=\"cc-import-notice__close\" aria-label=\"Dismiss\" (click)=\"dismissNotice()\">\r\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n              <path d=\"M5 5L19 19M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"step-title\">Step 1: Select contact center</div>\r\n\r\n        <div class=\"move-user-tab-content-box\">\r\n          <div class=\"cc-import-state\" *ngIf=\"loading\">Loading contact centers&hellip;</div>\r\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"!loading && error\">\r\n            Unable to load contact centers.\r\n          </div>\r\n\r\n          <section class=\"cc-import-step-content\" *ngIf=\"!loading && !error\">\r\n            <div class=\"cc-import-field\">\r\n              <label class=\"cc-import-label\" for=\"cc-import-contact-center\">Contact center</label>\r\n\r\n              <mat-form-field class=\"cc-import-select\" appearance=\"outline\">\r\n                <mat-select\r\n                  id=\"cc-import-contact-center\"\r\n                  panelClass=\"cc-import-select-panel\"\r\n                  placeholder=\"Select contact center\"\r\n                  [disableOptionCentering]=\"true\"\r\n                  [value]=\"selected?.applicationId ?? null\"\r\n                  (selectionChange)=\"onSelect($event.value)\"\r\n                  (openedChange)=\"onPanelToggle($event)\"\r\n                >\r\n                  <mat-select-trigger>{{ selected?.applicationName }}</mat-select-trigger>\r\n\r\n                  <!-- Search box pinned above the options. Keystrokes are stopped here so\r\n                       mat-select's own typeahead does not steal them. -->\r\n                  <div class=\"cc-import-select-search\" (click)=\"$event.stopPropagation()\">\r\n                    <span class=\"cc-import-select-search__icon\" aria-hidden=\"true\">\r\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <circle cx=\"7\" cy=\"7\" r=\"4.6\" stroke=\"currentColor\" stroke-width=\"1.4\" />\r\n                        <path d=\"M10.6 10.6L14 14\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\r\n                      </svg>\r\n                    </span>\r\n                    <input\r\n                      class=\"cc-import-select-search__input\"\r\n                      type=\"text\"\r\n                      autocomplete=\"off\"\r\n                      placeholder=\"Search\"\r\n                      aria-label=\"Search contact centers\"\r\n                      [value]=\"searchTerm\"\r\n                      (input)=\"onSearch($event)\"\r\n                      (keydown)=\"$event.stopPropagation()\"\r\n                    />\r\n                  </div>\r\n\r\n                  <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.applicationId\">\r\n                    <div class=\"option-row\">\r\n                      <span class=\"name\">{{ option.applicationName }}</span>\r\n                      <span\r\n                        class=\"cc-import-option-marker\"\r\n                        *ngIf=\"option.customerAssistCapable\"\r\n                        [matTooltip]=\"customerAssistMarkerTooltip\"\r\n                        aria-hidden=\"true\"\r\n                      >\r\n                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                          <path d=\"M8 2.2 14.6 13.4H1.4L8 2.2Z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\" />\r\n                          <path d=\"M8 6.5v3\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" />\r\n                          <circle cx=\"8\" cy=\"11.3\" r=\"0.7\" fill=\"currentColor\" />\r\n                        </svg>\r\n                      </span>\r\n                    </div>\r\n                  </mat-option>\r\n                </mat-select>\r\n              </mat-form-field>\r\n\r\n              <p class=\"cc-import-empty\" *ngIf=\"!options.length\">\r\n                Every detected contact center has already been imported.\r\n              </p>\r\n            </div>\r\n          </section>\r\n        </div>\r\n      </mat-step>\r\n\r\n      <!-- Step 2: the entities Tuki will create for it -->\r\n      <mat-step>\r\n        <ng-template matStepLabel>Overview</ng-template>\r\n\r\n        <div class=\"step-title\">Overview</div>\r\n\r\n        <div class=\"move-user-tab-content-box\">\r\n          <h3 class=\"cc-import-card-title\">Review Contact Center Settings</h3>\r\n          <p class=\"cc-import-card-text\">\r\n            Review the settings for your new Contact center to make sure everything is correct.<br />\r\n            You can make changes at any time by clicking on the name of the contact center on the dedicated page.\r\n          </p>\r\n\r\n          <div class=\"cc-import-state\" *ngIf=\"entitiesLoading\">Loading entities&hellip;</div>\r\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"entitiesError\">\r\n            Unable to load the related entities.\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"!entitiesLoading && !entitiesError && entityGroups.length\">\r\n            <div class=\"cc-import-tabs\" role=\"tablist\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"cc-import-tab\"\r\n                *ngFor=\"let group of entityGroups; index as i\"\r\n                role=\"tab\"\r\n                [attr.aria-selected]=\"i === activeGroupIndex\"\r\n                [class.cc-import-tab--active]=\"i === activeGroupIndex\"\r\n                (click)=\"selectGroup(i)\"\r\n              >\r\n                {{ group.label }}\r\n              </button>\r\n            </div>\r\n\r\n            <ul class=\"cc-import-items\" role=\"tabpanel\">\r\n              <li class=\"cc-import-item\" *ngFor=\"let item of activeGroup?.items\">{{ item }}</li>\r\n              <li class=\"cc-import-item cc-import-item--empty\" *ngIf=\"!activeGroup?.items?.length\">\r\n                Nothing to create for {{ activeGroup?.label }}.\r\n              </li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"importError\">\r\n            Unable to start the import. Please try again.\r\n          </div>\r\n        </div>\r\n      </mat-step>\r\n    </mat-stepper>\r\n\r\n    <div class=\"wizard-actions\">\r\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\r\n        <ng-container *ngSwitchCase=\"0\">\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-primary\"\r\n            type=\"button\"\r\n            [disabled]=\"!canGoNext\"\r\n            (click)=\"onNext(stepper)\"\r\n          >\r\n            Next\r\n          </button>\r\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\r\n            Cancel\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"1\">\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-primary\"\r\n            type=\"button\"\r\n            [disabled]=\"!canImport\"\r\n            (click)=\"runImport()\"\r\n          >\r\n            <span class=\"uc-btn__inline-content\">\r\n              <span class=\"uc-btn__spinner\" *ngIf=\"importing\" aria-hidden=\"true\"></span>\r\n              <span>{{ importing ? 'Importing...' : 'Import' }}</span>\r\n            </span>\r\n          </button>\r\n          <button\r\n            mat-button\r\n            class=\"uc-btn uc-btn-secondary\"\r\n            type=\"button\"\r\n            [disabled]=\"importing\"\r\n            (click)=\"onPrevious(stepper)\"\r\n          >\r\n            Previous\r\n          </button>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"importing\" aria-hidden=\"true\"></div>\r\n</div>\r\n", styles: ["cc-import-contact-center-wizard{display:block;width:100%;min-height:100vh}.move-user-stepper-container{background-color:#f3f3f3;padding:0 0 16px;position:relative;overflow:hidden;box-sizing:border-box;min-height:100vh;display:flex;flex-direction:column}.move-user-header{background-color:#1170cf;height:45px;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:500}.move-user-header__close{cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:0}.app-icon{height:20px;width:20px;display:block;cursor:pointer}.cc-import-close-icon{color:#fffffff2}#cc-import-stepper{display:flex;flex-direction:column;width:100%;flex:1 1 auto;min-height:0}#cc-import-stepper .mat-stepper-horizontal{margin:0 auto;width:100%;background-color:transparent;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}#cc-import-stepper .mat-horizontal-stepper-header-container{margin:0 auto;width:800px}#cc-import-stepper .mat-step-icon{width:28px;height:28px;border:3px solid hsl(0,0%,50.2%)}#cc-import-stepper .mat-step-icon-selected{background-color:#c6c6c6!important;border-color:#19487d}#cc-import-stepper .mat-step-icon-state-number{background-color:#fff}#cc-import-stepper .mat-step-icon-state-edit,#cc-import-stepper .mat-step-header .mat-step-icon-state-done{background-color:#1170cf;border-color:#1170cf}#cc-import-stepper .mat-step-icon-content{display:none}#cc-import-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):before,#cc-import-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):before,#cc-import-stepper .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child):after,#cc-import-stepper [dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child):after{border-top-width:3px!important}#cc-import-stepper .mat-horizontal-stepper-header:before,#cc-import-stepper .mat-horizontal-stepper-header:after,#cc-import-stepper .mat-stepper-horizontal-line{border-top-color:#1170cf!important;border-top-width:3px!important;border-top-style:solid!important}#cc-import-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-stepper-horizontal-line,#cc-import-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:before,#cc-import-stepper .mat-horizontal-stepper-header[aria-selected=true]~.mat-horizontal-stepper-header:after{border-top-width:3px!important;background-color:#7b7b7b!important;border-top-color:#7b7b7b!important}#cc-import-stepper .mat-horizontal-content-container{padding:0!important;margin-top:3rem}#cc-import-stepper .mat-horizontal-stepper-content[aria-expanded=true]{padding-bottom:0}.step-title{font-size:26px;font-weight:500;width:70%;margin:0 auto 1rem;min-height:32px;display:flex;align-items:center}.wizard-actions{display:flex;flex-flow:row-reverse;justify-content:flex-start;align-items:center;margin:16px 16px 0 0;align-self:flex-end;gap:1rem;position:relative;z-index:30}.uc-btn{border-radius:50px!important;padding:8px 16px!important;min-width:80px!important;line-height:normal!important;cursor:pointer}.uc-btn__inline-content{display:inline-flex;align-items:center;gap:8px}.uc-btn__spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:uc-btn-spin .7s linear infinite}@keyframes uc-btn-spin{to{transform:rotate(360deg)}}.uc-btn-primary{background-color:#000!important;color:#fff!important;border:1px solid black!important}.uc-btn-secondary{background-color:#fff!important;color:#000!important;border:1px solid black!important}.wizard-actions .uc-btn-primary.mat-button-disabled{background-color:#bbb;color:#fff;border:1px solid grey;cursor:default!important;opacity:.3}.move-user-tab-content-box{width:70%;margin:0 auto;background-color:#fff;min-height:350px;border:1px solid #c3c1c1;border-radius:8px;box-sizing:border-box;padding:25px}.wizard-loading-overlay{position:absolute;inset:0;background:rgba(243,243,243,.72);backdrop-filter:blur(1px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:20}.wizard-loading-overlay--visible{opacity:1;pointer-events:auto}.cc-import-notice{width:70%;margin:0 auto 1rem;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:4px;background-color:#e8f2fc;color:#2a2f3b;font-size:13px;line-height:1.4}.cc-import-notice__icon{display:flex;color:#1170cf;line-height:0}.cc-import-notice__text{flex:1}.cc-import-notice__close{background:none;border:none;padding:0;cursor:pointer;display:flex;color:#5a6172;line-height:0}.cc-import-step-content{display:flex;flex-direction:column;gap:20px;max-width:420px}.cc-import-field{display:flex;flex-direction:column;gap:10px}.cc-import-label{font-size:14px;font-weight:400;line-height:100%;letter-spacing:.1px;color:#2a2f3b}.cc-import-select{width:100%;max-width:333px}.cc-import-empty{margin:0;font-size:13px;color:#5a6172}.cc-import-state{font-size:14px;color:#5a6172}.cc-import-state--error{color:#c0392b}.cc-import-card-title{margin:0 0 8px;font-size:15px;font-weight:700;color:#2a2f3b}.cc-import-card-text{margin:0 0 22px;font-size:14px;line-height:1.6;color:#2a2f3b}.cc-import-tabs{display:flex;flex-wrap:wrap;gap:20px}.cc-import-tab{background:none;border:none;border-bottom:2px solid transparent;padding:0 0 8px;font:inherit;font-size:14px;color:#5a6172;cursor:pointer}.cc-import-tab--active{color:#000;font-weight:600;border-bottom-color:#000}.cc-import-items{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}.cc-import-item{font-size:14px;color:#2a2f3b}.cc-import-item--empty{color:#5a6172;font-style:italic}.cc-import-select .mat-form-field-wrapper{padding-bottom:0}.cc-import-select .mat-form-field-flex{align-items:center;height:32px;border:1px solid #767676;border-radius:6px;padding:0 12px}.cc-import-select .mat-form-field-outline,.cc-import-select .mat-form-field-outline-start,.cc-import-select .mat-form-field-outline-end,.cc-import-select .mat-form-field-outline-gap{display:none}.cc-import-select .mat-form-field-infix{width:100%;border-top:0;padding:0}.cc-import-select .mat-select-trigger{display:flex;align-items:center;justify-content:space-between;height:100%}.cc-import-select-panel .option-row{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px}.cc-import-select-panel .cc-import-option-marker{display:flex;color:#b26a00;line-height:0}.cc-import-select-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;margin:4px 8px 8px;padding:0 10px;height:30px;border:1px solid #c3c1c1;border-radius:50px;background-color:#fff}.cc-import-select-search__icon{display:flex;color:#5a6172;line-height:0}.cc-import-select-search__input{flex:1;border:none;outline:none;font:inherit;font-size:13px;color:#2a2f3b;background:transparent}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], customerId: [{
+                type: Input
+            }], host: [{
+                type: Input
+            }], dcpHost: [{
+                type: Input
+            }], token: [{
+                type: Input
+            }], useMockData: [{
+                type: Input
+            }], contactCenters: [{
+                type: Input
+            }], cancel: [{
+                type: Output
+            }], imported: [{
+                type: Output
+            }] } });
+
+class CcImportModule {
+}
+CcImportModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CcImportModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CcImportModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CcImportModule, declarations: [ImportContactCenterPanelComponent,
+        ImportContactCenterWizardComponent], imports: [CommonModule,
+        HttpClientModule,
+        NgApexchartsModule,
+        MatStepperModule,
+        SharedModule], exports: [ImportContactCenterPanelComponent,
+        ImportContactCenterWizardComponent] });
+CcImportModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CcImportModule, imports: [CommonModule,
+        HttpClientModule,
+        NgApexchartsModule,
+        MatStepperModule,
+        SharedModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CcImportModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ImportContactCenterPanelComponent,
+                        ImportContactCenterWizardComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        NgApexchartsModule,
+                        MatStepperModule,
+                        SharedModule
+                    ],
+                    exports: [
+                        ImportContactCenterPanelComponent,
+                        ImportContactCenterWizardComponent
+                    ]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CcReadinessModule, LicencesRequirementComponent, SummaryGridComponent, WxCCFlowchartModule, WxCCFlowchartPageComponent };
+export { CALL_FLOW_MIGRATED, CHART_COLORS, COMPATIBILITY_THRESHOLDS, CUSTOMER_ASSIST_MARKER_TOOLTIP, CUSTOMER_ASSIST_NOTICE, CcImportModule, CcImportService, CcReadinessModule, IMPORT_PANEL_SLICES, IMPORT_PANEL_TITLE, IMPORT_PANEL_TOOLTIP, IMPORT_WIZARD_STEPS, IMPORT_WIZARD_TITLE, ImportContactCenterPanelComponent, ImportContactCenterWizardComponent, LicencesRequirementComponent, OVERVIEW_ENTITY_GROUPS, SummaryGridComponent, UCCX_ITEM_TYPE, WxCCFlowchartModule, WxCCFlowchartPageComponent };
 //# sourceMappingURL=tuki-io-tuki-widgets-contact-center.mjs.map