npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.219-dev.56 → 0.0.219-dev.58 - Mend

@tuki-io/tuki-widgets 0.0.219-dev.56 → 0.0.219-dev.58

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

Files changed (246) hide show

package/fesm2015/tuki-io-tuki-widgets.mjs CHANGED Viewed

@@ -19,17 +19,17 @@ class WidgetsComponent {
     }
 }
 WidgetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WidgetsComponent, selector: "lib-widgets", ngImport: i0, template: `
-    <p>
-      widgets works!
-    </p>
+WidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WidgetsComponent, selector: "lib-widgets", ngImport: i0, template: `
+    <p>
+      widgets works!
+    </p>
   `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WidgetsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widgets', template: `
-    <p>
-      widgets works!
-    </p>
+            args: [{ selector: 'lib-widgets', template: `
+    <p>
+      widgets works!
+    </p>
   ` }]
         }], ctorParameters: function () { return []; } });

package/fesm2015/tuki-io-tuki-widgets.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tuki-io-tuki-widgets.mjs","sources":["../../../../projects/tuki/widgets/src/lib/widgets.service.ts","../../../../projects/tuki/widgets/src/lib/widgets.component.ts","../../../../projects/tuki/widgets/src/lib/widgets.module.ts","../../../../projects/tuki/widgets/src/public-api.ts","../../../../projects/tuki/widgets/src/tuki-io-tuki-widgets.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class WidgetsService {\n\n constructor() { }\n}\n","import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'lib-widgets',\n template: `\n <p>\n widgets works!\n </p>\n `,\n styles: [\n ]\n})\nexport class WidgetsComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { WidgetsComponent } from './widgets.component';\n\n\n\n@NgModule({\n declarations: [\n WidgetsComponent\n ],\n imports: [\n ],\n exports: [\n WidgetsComponent\n ]\n})\nexport class WidgetsModule { }\n","/\n Public API Surface of widgets\n /\n\nexport from './lib/widgets.service';\nexport * from './lib/widgets.component';\nexport * from './lib/widgets.module';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;MAKa,cAAc,CAAA;AAEzB,IAAA,WAAA,GAAA,GAAiB;;4GAFN,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAd,cAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,cAFb,MAAM,EAAA,CAAA,CAAA;4FAEP,cAAc,EAAA,UAAA,EAAA,CAAA;kBAH1B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;iBACnB,CAAA;;;MCQY,gBAAgB,CAAA;AAE3B,IAAA,WAAA,GAAA,GAAiB;IAEjB,QAAQ,GAAA;KACP;;8GALU,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EARjB,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;4FAIU,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAV5B,SAAS;YACE,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EACb,QAAA,EAAA,CAAA;;;;AAIT,EAAA,CAAA,EAAA,CAAA;;;MCOU,aAAa,CAAA;;2GAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;4GAAb,aAAa,EAAA,YAAA,EAAA,CARtB,gBAAgB,CAAA,EAAA,OAAA,EAAA,CAKhB,gBAAgB,CAAA,EAAA,CAAA,CAAA;4GAGP,aAAa,EAAA,CAAA,CAAA;4FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBAVzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ,gBAAgB;AACjB,qBAAA;AACD,oBAAA,OAAO,EAAE,EACR;AACD,oBAAA,OAAO,EAAE;wBACP,gBAAgB;AACjB,qBAAA;iBACF,CAAA;;;ACdD;;AAEG;;ACFH;;AAEG;;;;"}
1	+ {"version":3,"file":"tuki-io-tuki-widgets.mjs","sources":["../../../../projects/tuki/widgets/src/lib/widgets.service.ts","../../../../projects/tuki/widgets/src/lib/widgets.component.ts","../../../../projects/tuki/widgets/src/lib/widgets.module.ts","../../../../projects/tuki/widgets/src/public-api.ts","../../../../projects/tuki/widgets/src/tuki-io-tuki-widgets.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class WidgetsService {\r\n\r\n constructor() { }\r\n}\r\n","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'lib-widgets',\r\n template: `\r\n <p>\r\n widgets works!\r\n </p>\r\n `,\r\n styles: [\r\n ]\r\n})\r\nexport class WidgetsComponent implements OnInit {\r\n\r\n constructor() { }\r\n\r\n ngOnInit(): void {\r\n }\r\n\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { WidgetsComponent } from './widgets.component';\r\n\r\n\r\n\r\n@NgModule({\r\n declarations: [\r\n WidgetsComponent\r\n ],\r\n imports: [\r\n ],\r\n exports: [\r\n WidgetsComponent\r\n ]\r\n})\r\nexport class WidgetsModule { }\r\n","/\r\n Public API Surface of widgets\r\n /\r\n\r\nexport from './lib/widgets.service';\r\nexport * from './lib/widgets.component';\r\nexport * from './lib/widgets.module';\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;MAKa,cAAc,CAAA;AAEzB,IAAA,WAAA,GAAA,GAAiB;;4GAFN,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAd,cAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,cAFb,MAAM,EAAA,CAAA,CAAA;4FAEP,cAAc,EAAA,UAAA,EAAA,CAAA;kBAH1B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;iBACnB,CAAA;;;MCQY,gBAAgB,CAAA;AAE3B,IAAA,WAAA,GAAA,GAAiB;IAEjB,QAAQ,GAAA;KACP;;8GALU,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EARjB,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;4FAIU,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAV5B,SAAS;YACE,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EACb,QAAA,EAAA,CAAA;;;;AAIT,EAAA,CAAA,EAAA,CAAA;;;MCOU,aAAa,CAAA;;2GAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;4GAAb,aAAa,EAAA,YAAA,EAAA,CARtB,gBAAgB,CAAA,EAAA,OAAA,EAAA,CAKhB,gBAAgB,CAAA,EAAA,CAAA,CAAA;4GAGP,aAAa,EAAA,CAAA,CAAA;4FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBAVzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ,gBAAgB;AACjB,qBAAA;AACD,oBAAA,OAAO,EAAE,EACR;AACD,oBAAA,OAAO,EAAE;wBACP,gBAAgB;AACjB,qBAAA;iBACF,CAAA;;;ACdD;;AAEG;;ACFH;;AAEG;;;;"}

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

@@ -197,10 +197,10 @@ class CardComponent {
     }
 }
 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", dense: "dense" }, ngImport: i0, template: "<article class=\"card\" [class.card--dense]=\"dense\">\n    <header class=\"card__header\">\n        <div class=\"card__title-group\">\n            <h2>{{ title }}</h2>\n            <ng-content select=\"card-title-adornment\"></ng-content>\n        </div>\n        <!--<div class=\"card__menu-button\">\n            <img width=\"18\" src=\"assets/icons/menu_icon.png\" alt=\"Menu Icon\">\n        </div>-->\n    </header>\n    <div class=\"card__content\">\n        <ng-content select=\"card-content\"></ng-content>\n    </div>\n</article>\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"] });
+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\" [class.card--dense]=\"dense\">\n    <header class=\"card__header\">\n        <div class=\"card__title-group\">\n            <h2>{{ title }}</h2>\n            <ng-content select=\"card-title-adornment\"></ng-content>\n        </div>\n        <!--<div class=\"card__menu-button\">\n            <img width=\"18\" src=\"assets/icons/menu_icon.png\" alt=\"Menu Icon\">\n        </div>-->\n    </header>\n    <div class=\"card__content\">\n        <ng-content select=\"card-content\"></ng-content>\n    </div>\n</article>\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"] }]
+            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: [{
@@ -380,10 +380,10 @@ 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\">\n  <ng-container ngProjectAs=\"card-content\">\n    <div\n      class=\"widget-body\"\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\n    >\n      <div class=\"left-section\">\n        <mat-select\n          [(value)]=\"selectedSummaryIndex\"\n          (selectionChange)=\"onFilterChange($event.value)\"\n          class=\"filter-select\"\n        >\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\n            {{ option }}\n          </mat-option>\n        </mat-select>\n\n        <div class=\"chart-section\">\n          <div class=\"chart-wrapper\">\n            <apx-chart\n              [series]=\"viewModel.chartOptions.series\"\n              [chart]=\"viewModel.chartOptions.chart\"\n              [labels]=\"viewModel.chartOptions.labels\"\n              [colors]=\"viewModel.chartOptions.colors\"\n              [legend]=\"viewModel.chartOptions.legend\"\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\n              [tooltip]=\"viewModel.chartOptions.tooltip\"\n            >\n            </apx-chart>\n          </div>\n          <div class=\"legend\">\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\n              <span\n                class=\"legend-marker\"\n                [style.backgroundColor]=\"item.color\"\n              ></span>\n              <span class=\"legend-label\">{{ item.label }}</span>\n              <span class=\"legend-value\">{{ item.count | number }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"divider\" aria-hidden=\"true\"></div>\n\n      <div class=\"table-section\">\n        <div class=\"lic-table-header\">\n          <span>License</span>\n          <span>Required</span>\n        </div>\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\n          <span>{{ row.label }}</span>\n          <span>{{ row.value | number }}</span>\n        </div>\n        <div class=\"table-row total-row\">\n          <span>Total</span>\n          <span>{{ viewModel.totalRequired | number }}</span>\n        </div>\n      </div>\n    </div>\n\n    <ng-template #widgetState>\n      <div class=\"state-message\" *ngIf=\"loading\">\n        Loading license requirements\u2026\n      </div>\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\n        Unable to load license requirements.\n      </div>\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\n        No license data available.\n      </div>\n    </ng-template>\n  </ng-container>\n</tk-card>\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" }] });
+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\">\n  <ng-container ngProjectAs=\"card-content\">\n    <div\n      class=\"widget-body\"\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\n    >\n      <div class=\"left-section\">\n        <mat-select\n          [(value)]=\"selectedSummaryIndex\"\n          (selectionChange)=\"onFilterChange($event.value)\"\n          class=\"filter-select\"\n        >\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\n            {{ option }}\n          </mat-option>\n        </mat-select>\n\n        <div class=\"chart-section\">\n          <div class=\"chart-wrapper\">\n            <apx-chart\n              [series]=\"viewModel.chartOptions.series\"\n              [chart]=\"viewModel.chartOptions.chart\"\n              [labels]=\"viewModel.chartOptions.labels\"\n              [colors]=\"viewModel.chartOptions.colors\"\n              [legend]=\"viewModel.chartOptions.legend\"\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\n              [tooltip]=\"viewModel.chartOptions.tooltip\"\n            >\n            </apx-chart>\n          </div>\n          <div class=\"legend\">\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\n              <span\n                class=\"legend-marker\"\n                [style.backgroundColor]=\"item.color\"\n              ></span>\n              <span class=\"legend-label\">{{ item.label }}</span>\n              <span class=\"legend-value\">{{ item.count | number }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"divider\" aria-hidden=\"true\"></div>\n\n      <div class=\"table-section\">\n        <div class=\"lic-table-header\">\n          <span>License</span>\n          <span>Required</span>\n        </div>\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\n          <span>{{ row.label }}</span>\n          <span>{{ row.value | number }}</span>\n        </div>\n        <div class=\"table-row total-row\">\n          <span>Total</span>\n          <span>{{ viewModel.totalRequired | number }}</span>\n        </div>\n      </div>\n    </div>\n\n    <ng-template #widgetState>\n      <div class=\"state-message\" *ngIf=\"loading\">\n        Loading license requirements\u2026\n      </div>\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\n        Unable to load license requirements.\n      </div>\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\n        No license data available.\n      </div>\n    </ng-template>\n  </ng-container>\n</tk-card>\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"] }]
+            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"] }]
         }], propDecorators: { customerId: [{
                 type: Input
             }], host: [{
@@ -4038,10 +4038,10 @@ class ImportContactCenterPanelComponent {
     }
 }
 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\">\n  <ng-container ngProjectAs=\"card-title-adornment\">\n    <span class=\"cc-import-panel__info\" [matTooltip]=\"tooltip\">\n      <ng-container *ngTemplateOutlet=\"infoIcon\"></ng-container>\n    </span>\n  </ng-container>\n\n  <ng-container ngProjectAs=\"card-content\">\n    <div class=\"cc-import-panel__body\" *ngIf=\"!loading && !error; else panelState\">\n      <div class=\"cc-import-panel__chart\">\n        <apx-chart\n          [series]=\"chartOptions.series\"\n          [chart]=\"chartOptions.chart\"\n          [labels]=\"chartOptions.labels\"\n          [colors]=\"chartOptions.colors\"\n          [legend]=\"chartOptions.legend\"\n          [plotOptions]=\"chartOptions.plotOptions\"\n          [dataLabels]=\"chartOptions.dataLabels\"\n          [tooltip]=\"chartOptions.tooltip\"\n          [states]=\"chartOptions.states\"\n        ></apx-chart>\n        <div class=\"cc-import-panel__chart-center\">\n          <span class=\"cc-import-panel__chart-total\">{{ total | number }}</span>\n          <span class=\"cc-import-panel__chart-caption\">Contact Center</span>\n        </div>\n      </div>\n\n      <ul class=\"cc-import-panel__legend\">\n        <li class=\"cc-import-panel__legend-item\" *ngFor=\"let segment of segments\">\n          <span class=\"cc-import-panel__legend-marker\" [style.backgroundColor]=\"segment.color\"></span>\n          <span class=\"cc-import-panel__legend-label\">{{ segment.label }}</span>\n          <span class=\"cc-import-panel__info\" [matTooltip]=\"segment.tooltip\">\n            <ng-container *ngTemplateOutlet=\"infoIcon\"></ng-container>\n          </span>\n          <span class=\"cc-import-panel__legend-value\">{{ segment.count | number }} ({{ segment.percentage }}%)</span>\n        </li>\n      </ul>\n    </div>\n\n    <ng-template #panelState>\n      <div class=\"cc-import-panel__state\" *ngIf=\"loading\">Loading contact centers\u2026</div>\n      <div class=\"cc-import-panel__state cc-import-panel__state--error\" *ngIf=\"!loading && error\">\n        Unable to load contact centers.\n      </div>\n    </ng-template>\n\n    <div class=\"cc-import-panel__actions\">\n      <button\n        type=\"button\"\n        class=\"cc-import-panel__button\"\n        [disabled]=\"loading || error\"\n        (click)=\"onImport()\"\n      >\n        Import\n      </button>\n    </div>\n  </ng-container>\n</tk-card>\n\n<ng-template #infoIcon>\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n    <path d=\"M8 7.2v4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n    <circle cx=\"8\" cy=\"5\" r=\"0.85\" fill=\"currentColor\" />\n  </svg>\n</ng-template>\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" }] });
+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\">\n  <ng-container ngProjectAs=\"card-title-adornment\">\n    <span class=\"cc-import-panel__info\" [matTooltip]=\"tooltip\">\n      <ng-container *ngTemplateOutlet=\"infoIcon\"></ng-container>\n    </span>\n  </ng-container>\n\n  <ng-container ngProjectAs=\"card-content\">\n    <div class=\"cc-import-panel__body\" *ngIf=\"!loading && !error; else panelState\">\n      <div class=\"cc-import-panel__chart\">\n        <apx-chart\n          [series]=\"chartOptions.series\"\n          [chart]=\"chartOptions.chart\"\n          [labels]=\"chartOptions.labels\"\n          [colors]=\"chartOptions.colors\"\n          [legend]=\"chartOptions.legend\"\n          [plotOptions]=\"chartOptions.plotOptions\"\n          [dataLabels]=\"chartOptions.dataLabels\"\n          [tooltip]=\"chartOptions.tooltip\"\n          [states]=\"chartOptions.states\"\n        ></apx-chart>\n        <div class=\"cc-import-panel__chart-center\">\n          <span class=\"cc-import-panel__chart-total\">{{ total | number }}</span>\n          <span class=\"cc-import-panel__chart-caption\">Contact Center</span>\n        </div>\n      </div>\n\n      <ul class=\"cc-import-panel__legend\">\n        <li class=\"cc-import-panel__legend-item\" *ngFor=\"let segment of segments\">\n          <span class=\"cc-import-panel__legend-marker\" [style.backgroundColor]=\"segment.color\"></span>\n          <span class=\"cc-import-panel__legend-label\">{{ segment.label }}</span>\n          <span class=\"cc-import-panel__info\" [matTooltip]=\"segment.tooltip\">\n            <ng-container *ngTemplateOutlet=\"infoIcon\"></ng-container>\n          </span>\n          <span class=\"cc-import-panel__legend-value\">{{ segment.count | number }} ({{ segment.percentage }}%)</span>\n        </li>\n      </ul>\n    </div>\n\n    <ng-template #panelState>\n      <div class=\"cc-import-panel__state\" *ngIf=\"loading\">Loading contact centers\u2026</div>\n      <div class=\"cc-import-panel__state cc-import-panel__state--error\" *ngIf=\"!loading && error\">\n        Unable to load contact centers.\n      </div>\n    </ng-template>\n\n    <div class=\"cc-import-panel__actions\">\n      <button\n        type=\"button\"\n        class=\"cc-import-panel__button\"\n        [disabled]=\"loading || error\"\n        (click)=\"onImport()\"\n      >\n        Import\n      </button>\n    </div>\n  </ng-container>\n</tk-card>\n\n<ng-template #infoIcon>\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n    <path d=\"M8 7.2v4\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n    <circle cx=\"8\" cy=\"5\" r=\"0.85\" fill=\"currentColor\" />\n  </svg>\n</ng-template>\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"] }]
+            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: [{
@@ -4265,10 +4265,10 @@ class ImportContactCenterWizardComponent {
     }
 }
 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\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon cc-import-close-icon\" (click)=\"onCancel()\" role=\"button\" aria-label=\"Close\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M5 5L19 19M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" />\n        </svg>\n      </span>\n    </div>\n  </header>\n\n  <div id=\"cc-import-stepper\">\n    <mat-stepper\n      #stepper\n      [linear]=\"true\"\n      labelPosition=\"bottom\"\n      [selectedIndex]=\"selectedIndex\"\n      (selectionChange)=\"onStepSelectionChange($event)\"\n    >\n\n      <!-- Step 1: pick the UCCX contact center -->\n      <mat-step [completed]=\"canGoNext\">\n        <ng-template matStepLabel>Select</ng-template>\n\n        <div class=\"cc-import-notice\" *ngIf=\"showCustomerAssistNotice\" role=\"status\">\n          <span class=\"cc-import-notice__icon\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"currentColor\" />\n              <path d=\"M8 7.1v4.2\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n              <circle cx=\"8\" cy=\"4.8\" r=\"0.9\" fill=\"#fff\" />\n            </svg>\n          </span>\n          <span class=\"cc-import-notice__text\">{{ customerAssistNotice }}</span>\n          <button type=\"button\" class=\"cc-import-notice__close\" aria-label=\"Dismiss\" (click)=\"dismissNotice()\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M5 5L19 19M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n            </svg>\n          </button>\n        </div>\n\n        <div class=\"step-title\">Step 1: Select contact center</div>\n\n        <div class=\"move-user-tab-content-box\">\n          <div class=\"cc-import-state\" *ngIf=\"loading\">Loading contact centers&hellip;</div>\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"!loading && error\">\n            Unable to load contact centers.\n          </div>\n\n          <section class=\"cc-import-step-content\" *ngIf=\"!loading && !error\">\n            <div class=\"cc-import-field\">\n              <label class=\"cc-import-label\" for=\"cc-import-contact-center\">Contact center</label>\n\n              <mat-form-field class=\"cc-import-select\" appearance=\"outline\">\n                <mat-select\n                  id=\"cc-import-contact-center\"\n                  panelClass=\"cc-import-select-panel\"\n                  placeholder=\"Select contact center\"\n                  [disableOptionCentering]=\"true\"\n                  [value]=\"selected?.applicationId ?? null\"\n                  (selectionChange)=\"onSelect($event.value)\"\n                  (openedChange)=\"onPanelToggle($event)\"\n                >\n                  <mat-select-trigger>{{ selected?.applicationName }}</mat-select-trigger>\n\n                  <!-- Search box pinned above the options. Keystrokes are stopped here so\n                       mat-select's own typeahead does not steal them. -->\n                  <div class=\"cc-import-select-search\" (click)=\"$event.stopPropagation()\">\n                    <span class=\"cc-import-select-search__icon\" aria-hidden=\"true\">\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                        <circle cx=\"7\" cy=\"7\" r=\"4.6\" stroke=\"currentColor\" stroke-width=\"1.4\" />\n                        <path d=\"M10.6 10.6L14 14\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n                      </svg>\n                    </span>\n                    <input\n                      class=\"cc-import-select-search__input\"\n                      type=\"text\"\n                      autocomplete=\"off\"\n                      placeholder=\"Search\"\n                      aria-label=\"Search contact centers\"\n                      [value]=\"searchTerm\"\n                      (input)=\"onSearch($event)\"\n                      (keydown)=\"$event.stopPropagation()\"\n                    />\n                  </div>\n\n                  <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.applicationId\">\n                    <div class=\"option-row\">\n                      <span class=\"name\">{{ option.applicationName }}</span>\n                      <span\n                        class=\"cc-import-option-marker\"\n                        *ngIf=\"option.customerAssistCapable\"\n                        [matTooltip]=\"customerAssistMarkerTooltip\"\n                        aria-hidden=\"true\"\n                      >\n                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n                          <path d=\"M8 2.2 14.6 13.4H1.4L8 2.2Z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\" />\n                          <path d=\"M8 6.5v3\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" />\n                          <circle cx=\"8\" cy=\"11.3\" r=\"0.7\" fill=\"currentColor\" />\n                        </svg>\n                      </span>\n                    </div>\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n\n              <p class=\"cc-import-empty\" *ngIf=\"!options.length\">\n                Every detected contact center has already been imported.\n              </p>\n            </div>\n          </section>\n        </div>\n      </mat-step>\n\n      <!-- Step 2: the entities Tuki will create for it -->\n      <mat-step>\n        <ng-template matStepLabel>Overview</ng-template>\n\n        <div class=\"step-title\">Overview</div>\n\n        <div class=\"move-user-tab-content-box\">\n          <h3 class=\"cc-import-card-title\">Review Contact Center Settings</h3>\n          <p class=\"cc-import-card-text\">\n            Review the settings for your new Contact center to make sure everything is correct.<br />\n            You can make changes at any time by clicking on the name of the contact center on the dedicated page.\n          </p>\n\n          <div class=\"cc-import-state\" *ngIf=\"entitiesLoading\">Loading entities&hellip;</div>\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"entitiesError\">\n            Unable to load the related entities.\n          </div>\n\n          <ng-container *ngIf=\"!entitiesLoading && !entitiesError && entityGroups.length\">\n            <div class=\"cc-import-tabs\" role=\"tablist\">\n              <button\n                type=\"button\"\n                class=\"cc-import-tab\"\n                *ngFor=\"let group of entityGroups; index as i\"\n                role=\"tab\"\n                [attr.aria-selected]=\"i === activeGroupIndex\"\n                [class.cc-import-tab--active]=\"i === activeGroupIndex\"\n                (click)=\"selectGroup(i)\"\n              >\n                {{ group.label }}\n              </button>\n            </div>\n\n            <ul class=\"cc-import-items\" role=\"tabpanel\">\n              <li class=\"cc-import-item\" *ngFor=\"let item of activeGroup?.items\">{{ item }}</li>\n              <li class=\"cc-import-item cc-import-item--empty\" *ngIf=\"!activeGroup?.items?.length\">\n                Nothing to create for {{ activeGroup?.label }}.\n              </li>\n            </ul>\n          </ng-container>\n\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"importError\">\n            Unable to start the import. Please try again.\n          </div>\n        </div>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!canGoNext\"\n            (click)=\"onNext(stepper)\"\n          >\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!canImport\"\n            (click)=\"runImport()\"\n          >\n            <span class=\"uc-btn__inline-content\">\n              <span class=\"uc-btn__spinner\" *ngIf=\"importing\" aria-hidden=\"true\"></span>\n              <span>{{ importing ? 'Importing...' : 'Import' }}</span>\n            </span>\n          </button>\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-secondary\"\n            type=\"button\"\n            [disabled]=\"importing\"\n            (click)=\"onPrevious(stepper)\"\n          >\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"importing\" aria-hidden=\"true\"></div>\n</div>\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 });
+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\">\n  <header class=\"move-user-header\">\n    <div class=\"move-user-header__title\">{{ title }}</div>\n    <div class=\"move-user-header__close\">\n      <span class=\"app-icon cc-import-close-icon\" (click)=\"onCancel()\" role=\"button\" aria-label=\"Close\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M5 5L19 19M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" />\n        </svg>\n      </span>\n    </div>\n  </header>\n\n  <div id=\"cc-import-stepper\">\n    <mat-stepper\n      #stepper\n      [linear]=\"true\"\n      labelPosition=\"bottom\"\n      [selectedIndex]=\"selectedIndex\"\n      (selectionChange)=\"onStepSelectionChange($event)\"\n    >\n\n      <!-- Step 1: pick the UCCX contact center -->\n      <mat-step [completed]=\"canGoNext\">\n        <ng-template matStepLabel>Select</ng-template>\n\n        <div class=\"cc-import-notice\" *ngIf=\"showCustomerAssistNotice\" role=\"status\">\n          <span class=\"cc-import-notice__icon\" aria-hidden=\"true\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n              <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"currentColor\" />\n              <path d=\"M8 7.1v4.2\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n              <circle cx=\"8\" cy=\"4.8\" r=\"0.9\" fill=\"#fff\" />\n            </svg>\n          </span>\n          <span class=\"cc-import-notice__text\">{{ customerAssistNotice }}</span>\n          <button type=\"button\" class=\"cc-import-notice__close\" aria-label=\"Dismiss\" (click)=\"dismissNotice()\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M5 5L19 19M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n            </svg>\n          </button>\n        </div>\n\n        <div class=\"step-title\">Step 1: Select contact center</div>\n\n        <div class=\"move-user-tab-content-box\">\n          <div class=\"cc-import-state\" *ngIf=\"loading\">Loading contact centers&hellip;</div>\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"!loading && error\">\n            Unable to load contact centers.\n          </div>\n\n          <section class=\"cc-import-step-content\" *ngIf=\"!loading && !error\">\n            <div class=\"cc-import-field\">\n              <label class=\"cc-import-label\" for=\"cc-import-contact-center\">Contact center</label>\n\n              <mat-form-field class=\"cc-import-select\" appearance=\"outline\">\n                <mat-select\n                  id=\"cc-import-contact-center\"\n                  panelClass=\"cc-import-select-panel\"\n                  placeholder=\"Select contact center\"\n                  [disableOptionCentering]=\"true\"\n                  [value]=\"selected?.applicationId ?? null\"\n                  (selectionChange)=\"onSelect($event.value)\"\n                  (openedChange)=\"onPanelToggle($event)\"\n                >\n                  <mat-select-trigger>{{ selected?.applicationName }}</mat-select-trigger>\n\n                  <!-- Search box pinned above the options. Keystrokes are stopped here so\n                       mat-select's own typeahead does not steal them. -->\n                  <div class=\"cc-import-select-search\" (click)=\"$event.stopPropagation()\">\n                    <span class=\"cc-import-select-search__icon\" aria-hidden=\"true\">\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                        <circle cx=\"7\" cy=\"7\" r=\"4.6\" stroke=\"currentColor\" stroke-width=\"1.4\" />\n                        <path d=\"M10.6 10.6L14 14\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n                      </svg>\n                    </span>\n                    <input\n                      class=\"cc-import-select-search__input\"\n                      type=\"text\"\n                      autocomplete=\"off\"\n                      placeholder=\"Search\"\n                      aria-label=\"Search contact centers\"\n                      [value]=\"searchTerm\"\n                      (input)=\"onSearch($event)\"\n                      (keydown)=\"$event.stopPropagation()\"\n                    />\n                  </div>\n\n                  <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option.applicationId\">\n                    <div class=\"option-row\">\n                      <span class=\"name\">{{ option.applicationName }}</span>\n                      <span\n                        class=\"cc-import-option-marker\"\n                        *ngIf=\"option.customerAssistCapable\"\n                        [matTooltip]=\"customerAssistMarkerTooltip\"\n                        aria-hidden=\"true\"\n                      >\n                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n                          <path d=\"M8 2.2 14.6 13.4H1.4L8 2.2Z\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\" />\n                          <path d=\"M8 6.5v3\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" />\n                          <circle cx=\"8\" cy=\"11.3\" r=\"0.7\" fill=\"currentColor\" />\n                        </svg>\n                      </span>\n                    </div>\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n\n              <p class=\"cc-import-empty\" *ngIf=\"!options.length\">\n                Every detected contact center has already been imported.\n              </p>\n            </div>\n          </section>\n        </div>\n      </mat-step>\n\n      <!-- Step 2: the entities Tuki will create for it -->\n      <mat-step>\n        <ng-template matStepLabel>Overview</ng-template>\n\n        <div class=\"step-title\">Overview</div>\n\n        <div class=\"move-user-tab-content-box\">\n          <h3 class=\"cc-import-card-title\">Review Contact Center Settings</h3>\n          <p class=\"cc-import-card-text\">\n            Review the settings for your new Contact center to make sure everything is correct.<br />\n            You can make changes at any time by clicking on the name of the contact center on the dedicated page.\n          </p>\n\n          <div class=\"cc-import-state\" *ngIf=\"entitiesLoading\">Loading entities&hellip;</div>\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"entitiesError\">\n            Unable to load the related entities.\n          </div>\n\n          <ng-container *ngIf=\"!entitiesLoading && !entitiesError && entityGroups.length\">\n            <div class=\"cc-import-tabs\" role=\"tablist\">\n              <button\n                type=\"button\"\n                class=\"cc-import-tab\"\n                *ngFor=\"let group of entityGroups; index as i\"\n                role=\"tab\"\n                [attr.aria-selected]=\"i === activeGroupIndex\"\n                [class.cc-import-tab--active]=\"i === activeGroupIndex\"\n                (click)=\"selectGroup(i)\"\n              >\n                {{ group.label }}\n              </button>\n            </div>\n\n            <ul class=\"cc-import-items\" role=\"tabpanel\">\n              <li class=\"cc-import-item\" *ngFor=\"let item of activeGroup?.items\">{{ item }}</li>\n              <li class=\"cc-import-item cc-import-item--empty\" *ngIf=\"!activeGroup?.items?.length\">\n                Nothing to create for {{ activeGroup?.label }}.\n              </li>\n            </ul>\n          </ng-container>\n\n          <div class=\"cc-import-state cc-import-state--error\" *ngIf=\"importError\">\n            Unable to start the import. Please try again.\n          </div>\n        </div>\n      </mat-step>\n    </mat-stepper>\n\n    <div class=\"wizard-actions\">\n      <ng-container [ngSwitch]=\"stepper.selectedIndex\">\n        <ng-container *ngSwitchCase=\"0\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!canGoNext\"\n            (click)=\"onNext(stepper)\"\n          >\n            Next\n          </button>\n          <button mat-button class=\"uc-btn uc-btn-secondary\" type=\"button\" (click)=\"onCancel()\">\n            Cancel\n          </button>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"1\">\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-primary\"\n            type=\"button\"\n            [disabled]=\"!canImport\"\n            (click)=\"runImport()\"\n          >\n            <span class=\"uc-btn__inline-content\">\n              <span class=\"uc-btn__spinner\" *ngIf=\"importing\" aria-hidden=\"true\"></span>\n              <span>{{ importing ? 'Importing...' : 'Import' }}</span>\n            </span>\n          </button>\n          <button\n            mat-button\n            class=\"uc-btn uc-btn-secondary\"\n            type=\"button\"\n            [disabled]=\"importing\"\n            (click)=\"onPrevious(stepper)\"\n          >\n            Previous\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n\n  <div class=\"wizard-loading-overlay\" [class.wizard-loading-overlay--visible]=\"importing\" aria-hidden=\"true\"></div>\n</div>\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"] }]
+            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: [{