npm - @tuki-io/tuki-widgets - Versions diffs - 0.0.204 → 0.0.206 - Mend

@tuki-io/tuki-widgets 0.0.204 → 0.0.206

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 (169) 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';\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;;;;"}
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;;;;"}

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

@@ -337,10 +337,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\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div\r\n      class=\"widget-body\"\r\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\r\n    >\r\n      <div class=\"left-section\">\r\n        <mat-select\r\n          [(value)]=\"selectedSummaryIndex\"\r\n          (selectionChange)=\"onFilterChange($event.value)\"\r\n          class=\"filter-select\"\r\n        >\r\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\r\n            {{ option }}\r\n          </mat-option>\r\n        </mat-select>\r\n\r\n        <div class=\"chart-section\">\r\n          <div class=\"chart-wrapper\">\r\n            <apx-chart\r\n              [series]=\"viewModel.chartOptions.series\"\r\n              [chart]=\"viewModel.chartOptions.chart\"\r\n              [labels]=\"viewModel.chartOptions.labels\"\r\n              [colors]=\"viewModel.chartOptions.colors\"\r\n              [legend]=\"viewModel.chartOptions.legend\"\r\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\r\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\r\n              [tooltip]=\"viewModel.chartOptions.tooltip\"\r\n            >\r\n            </apx-chart>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\r\n              <span\r\n                class=\"legend-marker\"\r\n                [style.backgroundColor]=\"item.color\"\r\n              ></span>\r\n              <span class=\"legend-label\">{{ item.label }}</span>\r\n              <span class=\"legend-value\">{{ item.count | number }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"divider\" aria-hidden=\"true\"></div>\r\n\r\n      <div class=\"table-section\">\r\n        <div class=\"lic-table-header\">\r\n          <span>License</span>\r\n          <span>Required</span>\r\n        </div>\r\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\r\n          <span>{{ row.label }}</span>\r\n          <span>{{ row.value | number }}</span>\r\n        </div>\r\n        <div class=\"table-row total-row\">\r\n          <span>Total</span>\r\n          <span>{{ viewModel.totalRequired | number }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #widgetState>\r\n      <div class=\"state-message\" *ngIf=\"loading\">\r\n        Loading license requirements\u2026\r\n      </div>\r\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\r\n        Unable to load license requirements.\r\n      </div>\r\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\r\n        No license data available.\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</tk-card>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;width:100%;box-sizing:border-box}.filter-select{font-family:Inter,Inter,sans-serif;font-size:14px;min-width:140px;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;background-color:#fff}.filter-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select{border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}:host ::ng-deep .filter-select.mat-mdc-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select.mat-focused{border-color:#16a693}:host ::ng-deep .filter-select .mat-mdc-select-trigger{font-size:14px;padding:.5rem .75rem}:host ::ng-deep .filter-select .mat-mdc-select-value{color:#111827}:host ::ng-deep .filter-select .mat-mdc-select-arrow-wrapper{padding-left:.5rem}.widget-body{display:flex;gap:2.5rem;align-items:flex-start}.left-section{flex:2;display:flex;flex-direction:column;gap:1rem}.chart-section{display:flex;gap:1.5rem;align-items:center}.chart-wrapper{width:220px;min-height:220px;flex-shrink:0}.chart-wrapper apx-chart{width:220px!important;height:220px!important}.legend{display:flex;flex-direction:column;gap:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-family:Inter,Inter,sans-serif;font-size:14px}.legend-marker{width:14px;height:14px;border-radius:50%;display:inline-flex}.legend-label{color:#4b5563}.legend-value{margin-left:auto;font-weight:600;color:#111827}.divider{width:1px;min-height:200px;align-self:stretch;background:#e5e7eb}.table-section{flex:3;display:flex;flex-direction:column;gap:.75rem;font-family:Inter,Inter,sans-serif}.lic-table-header,.table-row{display:flex;justify-content:space-between;font-size:14px}.lic-table-header{font-weight:600;color:#6b7280;padding-bottom:.5rem;border-bottom:1px solid #e5e7eb}.table-row{color:#111827}.total-row{font-weight:700;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.state-message{font-family:Inter,Inter,sans-serif;font-size:14px;color:#6b7280}.state-message.error{color:#b91c1c}@media (max-width: 960px){.widget-body{flex-direction:column}.divider{display:none}.chart-section{justify-content:space-between}}:host ::ng-deep .apexcharts-legend{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
+LicencesRequirementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LicencesRequirementComponent, selector: "cc-licenses-requirement", inputs: { customerId: "customerId", host: "host", token: "token" }, usesOnChanges: true, ngImport: i0, template: "<tk-card title=\"Licenses requirement\">\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: i2.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: CardComponent, selector: "tk-card", inputs: ["title"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LicencesRequirementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cc-licenses-requirement', template: "<tk-card title=\"Licenses requirement\">\r\n  <ng-container ngProjectAs=\"card-content\">\r\n    <div\r\n      class=\"widget-body\"\r\n      *ngIf=\"!loading && !error && viewModel; else widgetState\"\r\n    >\r\n      <div class=\"left-section\">\r\n        <mat-select\r\n          [(value)]=\"selectedSummaryIndex\"\r\n          (selectionChange)=\"onFilterChange($event.value)\"\r\n          class=\"filter-select\"\r\n        >\r\n          <mat-option *ngFor=\"let option of filters; index as i\" [value]=\"i\">\r\n            {{ option }}\r\n          </mat-option>\r\n        </mat-select>\r\n\r\n        <div class=\"chart-section\">\r\n          <div class=\"chart-wrapper\">\r\n            <apx-chart\r\n              [series]=\"viewModel.chartOptions.series\"\r\n              [chart]=\"viewModel.chartOptions.chart\"\r\n              [labels]=\"viewModel.chartOptions.labels\"\r\n              [colors]=\"viewModel.chartOptions.colors\"\r\n              [legend]=\"viewModel.chartOptions.legend\"\r\n              [plotOptions]=\"viewModel.chartOptions.plotOptions\"\r\n              [dataLabels]=\"viewModel.chartOptions.dataLabels\"\r\n              [tooltip]=\"viewModel.chartOptions.tooltip\"\r\n            >\r\n            </apx-chart>\r\n          </div>\r\n          <div class=\"legend\">\r\n            <div class=\"legend-item\" *ngFor=\"let item of viewModel.legendItems\">\r\n              <span\r\n                class=\"legend-marker\"\r\n                [style.backgroundColor]=\"item.color\"\r\n              ></span>\r\n              <span class=\"legend-label\">{{ item.label }}</span>\r\n              <span class=\"legend-value\">{{ item.count | number }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"divider\" aria-hidden=\"true\"></div>\r\n\r\n      <div class=\"table-section\">\r\n        <div class=\"lic-table-header\">\r\n          <span>License</span>\r\n          <span>Required</span>\r\n        </div>\r\n        <div class=\"table-row\" *ngFor=\"let row of viewModel.rows\">\r\n          <span>{{ row.label }}</span>\r\n          <span>{{ row.value | number }}</span>\r\n        </div>\r\n        <div class=\"table-row total-row\">\r\n          <span>Total</span>\r\n          <span>{{ viewModel.totalRequired | number }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-template #widgetState>\r\n      <div class=\"state-message\" *ngIf=\"loading\">\r\n        Loading license requirements\u2026\r\n      </div>\r\n      <div class=\"state-message error\" *ngIf=\"!loading && error\">\r\n        Unable to load license requirements.\r\n      </div>\r\n      <div class=\"state-message\" *ngIf=\"!loading && !error && !viewModel\">\r\n        No license data available.\r\n      </div>\r\n    </ng-template>\r\n  </ng-container>\r\n</tk-card>\r\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap\";:host{display:block;width:100%;box-sizing:border-box}.filter-select{font-family:Inter,Inter,sans-serif;font-size:14px;min-width:140px;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem .75rem;background-color:#fff}.filter-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select{border:1px solid #e5e7eb;border-radius:.5rem;background-color:#fff}:host ::ng-deep .filter-select.mat-mdc-select:hover{border-color:#d1d5db}:host ::ng-deep .filter-select.mat-mdc-select.mat-focused{border-color:#16a693}:host ::ng-deep .filter-select .mat-mdc-select-trigger{font-size:14px;padding:.5rem .75rem}:host ::ng-deep .filter-select .mat-mdc-select-value{color:#111827}:host ::ng-deep .filter-select .mat-mdc-select-arrow-wrapper{padding-left:.5rem}.widget-body{display:flex;gap:2.5rem;align-items:flex-start}.left-section{flex:2;display:flex;flex-direction:column;gap:1rem}.chart-section{display:flex;gap:1.5rem;align-items:center}.chart-wrapper{width:220px;min-height:220px;flex-shrink:0}.chart-wrapper apx-chart{width:220px!important;height:220px!important}.legend{display:flex;flex-direction:column;gap:.75rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-family:Inter,Inter,sans-serif;font-size:14px}.legend-marker{width:14px;height:14px;border-radius:50%;display:inline-flex}.legend-label{color:#4b5563}.legend-value{margin-left:auto;font-weight:600;color:#111827}.divider{width:1px;min-height:200px;align-self:stretch;background:#e5e7eb}.table-section{flex:3;display:flex;flex-direction:column;gap:.75rem;font-family:Inter,Inter,sans-serif}.lic-table-header,.table-row{display:flex;justify-content:space-between;font-size:14px}.lic-table-header{font-weight:600;color:#6b7280;padding-bottom:.5rem;border-bottom:1px solid #e5e7eb}.table-row{color:#111827}.total-row{font-weight:700;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #e5e7eb}.state-message{font-family:Inter,Inter,sans-serif;font-size:14px;color:#6b7280}.state-message.error{color:#b91c1c}@media (max-width: 960px){.widget-body{flex-direction:column}.divider{display:none}.chart-section{justify-content:space-between}}:host ::ng-deep .apexcharts-legend{display:none!important}\n"] }]
+            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"] }]
         }], propDecorators: { customerId: [{
                 type: Input
             }], host: [{
@@ -1454,10 +1454,10 @@ class NodeDetailsSidebarComponent {
     }
 }
 NodeDetailsSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NodeDetailsSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NodeDetailsSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NodeDetailsSidebarComponent, selector: "node-details-sidebar", inputs: { isOpen: "isOpen", nodeData: "nodeData" }, outputs: { close: "close", activityTypeChange: "activityTypeChange", descriptionChange: "descriptionChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"sidebar-overlay\" *ngIf=\"isOpen\" (click)=\"onClose()\"></div> -->\r\n\r\n<div class=\"node-details-sidebar\" [class.open]=\"isOpen\">\r\n  <div class=\"sidebar-header\">\r\n    <h3>Node Details</h3>\r\n    <button class=\"close-btn\" (click)=\"onClose()\">\r\n      <span>&times;</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sidebar-content\" *ngIf=\"nodeData\">\r\n    <!-- Node Preview -->\r\n    <div class=\"node-preview\">\r\n      <div class=\"node-preview-card\" [ngClass]=\"getNodeColorClass()\">\r\n        <div class=\"node-icon\">\r\n          <img [src]=\"getNodeIcon()\" alt=\"Node Icon\" />\r\n        </div>\r\n        <div class=\"node-info\">\r\n          <div class=\"node-label\">{{ nodeData?.name?.split(\"\\n\")?.[0] }}</div>\r\n          <div class=\"node-type\">{{ transformedActivityName }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Activity Type Selector -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Activity Type</label>\r\n      <div class=\"display-type-selector\">\r\n        <select\r\n          class=\"form-control\"\r\n          title=\"Select activity type\"\r\n          [value]=\"selectedActivityType?.value\"\r\n          (change)=\"onActivityTypeSelectChange($event)\"\r\n        >\r\n          <option\r\n            *ngFor=\"let type of activityDisplayTypes; trackBy: trackByValue\"\r\n            [value]=\"type.value\"\r\n          >\r\n            {{ type.label }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Description</label>\r\n      <div class=\"display-type-selector\">\r\n        <textarea\r\n          class=\"form-control\"\r\n          aria-label=\"property-description\"\r\n          (input)=\"onDescriptionChange($event)\"\r\n          [value]=\"nodeData.suggestedProperties?.uccxDescription\"\r\n          rows=\"3\"\r\n        ></textarea>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Node Information -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Information</label>\r\n      <div class=\"info-grid\">\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">UCCX Type:</span>\r\n          <span class=\"info-value\" [title]=\"nodeData.uccxTypeName\">{{\r\n            nodeData.uccxTypeName\r\n          }}</span>\r\n        </div>\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">WxCC Activity Name:</span>\r\n          <span class=\"info-value\" [title]=\"transformedActivityName\">{{\r\n            transformedActivityName\r\n          }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Status -->\r\n    <div class=\"section\" *ngIf=\"nodeData.review\">\r\n      <label class=\"section-label\">Review Status</label>\r\n      <div class=\"review-status\">\r\n        <div class=\"review-badge\" [style.background-color]=\"getReviewColor()\">\r\n          {{ getReviewLabel() }}\r\n        </div>\r\n        <div\r\n          class=\"review-reasons\"\r\n          *ngIf=\"nodeData.review.reasons && nodeData.review.reasons.length > 0\"\r\n        >\r\n          <div class=\"reason\" *ngFor=\"let reason of nodeData.review.reasons\">\r\n            <span class=\"reason-icon\">\u26A0</span>\r\n            <span>{{ reason }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Suggested Properties -->\r\n    <div class=\"section\" *ngIf=\"nodeData.suggestedProperties\">\r\n      <label class=\"section-label\">Migration Information</label>\r\n      <div class=\"migration-info\">\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.closestWxccActivity\"\r\n        >\r\n          <div class=\"card-label\">Closest WXCC Activity</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.closestWxccActivity }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.mappingNotes\"\r\n        >\r\n          <div class=\"card-label\">Mapping Notes</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.mappingNotes }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.migrationInstructions\"\r\n        >\r\n          <div class=\"card-label\">Migration Instructions</div>\r\n          <div class=\"card-value instructions\">\r\n            {{ nodeData.suggestedProperties.migrationInstructions }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.node-details-sidebar{position:fixed;top:0;right:-420px;width:420px;height:100%;background:#ffffff;box-shadow:-2px 0 8px #00000026;z-index:1000;transition:right .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}.node-details-sidebar.open{right:0}.node-details-sidebar .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e1e4e8;background:#f8f9fa}.node-details-sidebar .sidebar-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#24292e}.node-details-sidebar .sidebar-header .close-btn{background:none;border:none;font-size:2rem;line-height:1;cursor:pointer;color:#586069;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.node-details-sidebar .sidebar-header .close-btn:hover{background:rgba(0,0,0,.05);color:#24292e}.node-details-sidebar .sidebar-content{flex:1;overflow-y:auto;padding:1.5rem}.node-details-sidebar .sidebar-content .node-preview{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .node-preview .node-preview-card{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:8px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;flex-shrink:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon img{width:24px;height:24px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info{flex:1;min-width:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-label{font-size:1rem;font-weight:600;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-type{font-size:.875rem;color:#586069}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start{background-color:#4caf500d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-icon{background-color:#4caf501a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-label{color:#4caf50}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end{background-color:#f443360d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-icon{background-color:#f443361a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-label{color:#f44336}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway{background-color:#ff98000d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-icon{background-color:#ff98001a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-label{color:#ff9800}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action{background-color:#9c27b00d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-icon{background-color:#9c27b01a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-label{color:#9c27b0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default{background-color:#607d8b0d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-icon{background-color:#607d8b1a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-label{color:#607d8b}.node-details-sidebar .sidebar-content .section{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .section .section-label{display:block;font-size:.65rem;font-weight:600;color:#24292e;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control{width:100%;padding:.625rem .875rem;font-size:.875rem;border:1px solid #d1d5da;border-radius:6px;background:white;transition:border-color .2s;box-sizing:border-box;resize:vertical}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control:focus{outline:none;border-color:#0366d6;box-shadow:0 0 0 3px #0366d61a}.node-details-sidebar .sidebar-content .section .info-grid{display:flex;flex-direction:column;gap:.75rem}.node-details-sidebar .sidebar-content .section .info-grid .info-item{display:flex;justify-content:space-between;align-items:flex-start;padding:.75rem;background:#f6f8fa;border-radius:6px}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-label{font-size:.8125rem;color:#586069;font-weight:500}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-value{font-size:.8125rem;color:#24292e;font-weight:600;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .section .review-status .review-badge{display:inline-block;padding:.5rem 1rem;border-radius:20px;color:#fff;font-size:.8125rem;font-weight:600;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#fff3cd;border-radius:4px;margin-bottom:.5rem;font-size:.8125rem;color:#856404}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason .reason-icon{flex-shrink:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card{padding:1rem;background:#f6f8fa;border-radius:6px;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card:last-child{margin-bottom:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-label{font-size:.75rem;font-weight:600;color:#586069;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value{font-size:.875rem;color:#24292e;line-height:1.5}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value.instructions{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NodeDetailsSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NodeDetailsSidebarComponent, selector: "node-details-sidebar", inputs: { isOpen: "isOpen", nodeData: "nodeData" }, outputs: { close: "close", activityTypeChange: "activityTypeChange", descriptionChange: "descriptionChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- <div class=\"sidebar-overlay\" *ngIf=\"isOpen\" (click)=\"onClose()\"></div> -->\r\n\r\n<div class=\"node-details-sidebar\" [class.open]=\"isOpen\">\r\n  <div class=\"sidebar-header\">\r\n    <h3>Node Details</h3>\r\n    <button class=\"close-btn\" (click)=\"onClose()\">\r\n      <span>&times;</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sidebar-content\" *ngIf=\"nodeData\">\r\n    <!-- Node Preview -->\r\n    <div class=\"node-preview\">\r\n      <div class=\"node-preview-card\" [ngClass]=\"getNodeColorClass()\">\r\n        <div class=\"node-icon\">\r\n          <img [src]=\"getNodeIcon()\" alt=\"Node Icon\" />\r\n        </div>\r\n        <div class=\"node-info\">\r\n          <div class=\"node-label\">{{ nodeData.name?.split(\"\\n\")?.[0] }}</div>\r\n          <div class=\"node-type\">{{ transformedActivityName }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Activity Type Selector -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Activity Type</label>\r\n      <div class=\"display-type-selector\">\r\n        <select\r\n          class=\"form-control\"\r\n          title=\"Select activity type\"\r\n          [value]=\"selectedActivityType?.value\"\r\n          (change)=\"onActivityTypeSelectChange($event)\"\r\n        >\r\n          <option\r\n            *ngFor=\"let type of activityDisplayTypes; trackBy: trackByValue\"\r\n            [value]=\"type.value\"\r\n          >\r\n            {{ type.label }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Description</label>\r\n      <div class=\"display-type-selector\">\r\n        <textarea\r\n          class=\"form-control\"\r\n          aria-label=\"property-description\"\r\n          (input)=\"onDescriptionChange($event)\"\r\n          [value]=\"nodeData.suggestedProperties?.uccxDescription\"\r\n          rows=\"3\"\r\n        ></textarea>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Node Information -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Information</label>\r\n      <div class=\"info-grid\">\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">UCCX Type:</span>\r\n          <span class=\"info-value\" [title]=\"nodeData.uccxTypeName\">{{\r\n            nodeData.uccxTypeName\r\n          }}</span>\r\n        </div>\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">WxCC Activity Name:</span>\r\n          <span class=\"info-value\" [title]=\"transformedActivityName\">{{\r\n            transformedActivityName\r\n          }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Status -->\r\n    <div class=\"section\" *ngIf=\"nodeData.review\">\r\n      <label class=\"section-label\">Review Status</label>\r\n      <div class=\"review-status\">\r\n        <div class=\"review-badge\" [style.background-color]=\"getReviewColor()\">\r\n          {{ getReviewLabel() }}\r\n        </div>\r\n        <div\r\n          class=\"review-reasons\"\r\n          *ngIf=\"nodeData.review.reasons && nodeData.review.reasons.length > 0\"\r\n        >\r\n          <div class=\"reason\" *ngFor=\"let reason of nodeData.review.reasons\">\r\n            <span class=\"reason-icon\">\u26A0</span>\r\n            <span>{{ reason }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Suggested Properties -->\r\n    <div class=\"section\" *ngIf=\"nodeData.suggestedProperties\">\r\n      <label class=\"section-label\">Migration Information</label>\r\n      <div class=\"migration-info\">\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.closestWxccActivity\"\r\n        >\r\n          <div class=\"card-label\">Closest WXCC Activity</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.closestWxccActivity }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.mappingNotes\"\r\n        >\r\n          <div class=\"card-label\">Mapping Notes</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.mappingNotes }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.migrationInstructions\"\r\n        >\r\n          <div class=\"card-label\">Migration Instructions</div>\r\n          <div class=\"card-value instructions\">\r\n            {{ nodeData.suggestedProperties.migrationInstructions }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.node-details-sidebar{position:fixed;top:0;right:-420px;width:420px;height:100%;background:#ffffff;box-shadow:-2px 0 8px #00000026;z-index:1000;transition:right .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}.node-details-sidebar.open{right:0}.node-details-sidebar .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e1e4e8;background:#f8f9fa}.node-details-sidebar .sidebar-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#24292e}.node-details-sidebar .sidebar-header .close-btn{background:none;border:none;font-size:2rem;line-height:1;cursor:pointer;color:#586069;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.node-details-sidebar .sidebar-header .close-btn:hover{background:rgba(0,0,0,.05);color:#24292e}.node-details-sidebar .sidebar-content{flex:1;overflow-y:auto;padding:1.5rem}.node-details-sidebar .sidebar-content .node-preview{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .node-preview .node-preview-card{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:8px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;flex-shrink:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon img{width:24px;height:24px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info{flex:1;min-width:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-label{font-size:1rem;font-weight:600;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-type{font-size:.875rem;color:#586069}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start{background-color:#4caf500d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-icon{background-color:#4caf501a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-label{color:#4caf50}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end{background-color:#f443360d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-icon{background-color:#f443361a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-label{color:#f44336}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway{background-color:#ff98000d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-icon{background-color:#ff98001a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-label{color:#ff9800}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action{background-color:#9c27b00d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-icon{background-color:#9c27b01a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-label{color:#9c27b0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default{background-color:#607d8b0d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-icon{background-color:#607d8b1a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-label{color:#607d8b}.node-details-sidebar .sidebar-content .section{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .section .section-label{display:block;font-size:.65rem;font-weight:600;color:#24292e;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control{width:100%;padding:.625rem .875rem;font-size:.875rem;border:1px solid #d1d5da;border-radius:6px;background:white;transition:border-color .2s;box-sizing:border-box;resize:vertical}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control:focus{outline:none;border-color:#0366d6;box-shadow:0 0 0 3px #0366d61a}.node-details-sidebar .sidebar-content .section .info-grid{display:flex;flex-direction:column;gap:.75rem}.node-details-sidebar .sidebar-content .section .info-grid .info-item{display:flex;justify-content:space-between;align-items:flex-start;padding:.75rem;background:#f6f8fa;border-radius:6px}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-label{font-size:.8125rem;color:#586069;font-weight:500}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-value{font-size:.8125rem;color:#24292e;font-weight:600;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .section .review-status .review-badge{display:inline-block;padding:.5rem 1rem;border-radius:20px;color:#fff;font-size:.8125rem;font-weight:600;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#fff3cd;border-radius:4px;margin-bottom:.5rem;font-size:.8125rem;color:#856404}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason .reason-icon{flex-shrink:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card{padding:1rem;background:#f6f8fa;border-radius:6px;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card:last-child{margin-bottom:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-label{font-size:.75rem;font-weight:600;color:#586069;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value{font-size:.875rem;color:#24292e;line-height:1.5}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value.instructions{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NodeDetailsSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'node-details-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div class=\"sidebar-overlay\" *ngIf=\"isOpen\" (click)=\"onClose()\"></div> -->\r\n\r\n<div class=\"node-details-sidebar\" [class.open]=\"isOpen\">\r\n  <div class=\"sidebar-header\">\r\n    <h3>Node Details</h3>\r\n    <button class=\"close-btn\" (click)=\"onClose()\">\r\n      <span>&times;</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sidebar-content\" *ngIf=\"nodeData\">\r\n    <!-- Node Preview -->\r\n    <div class=\"node-preview\">\r\n      <div class=\"node-preview-card\" [ngClass]=\"getNodeColorClass()\">\r\n        <div class=\"node-icon\">\r\n          <img [src]=\"getNodeIcon()\" alt=\"Node Icon\" />\r\n        </div>\r\n        <div class=\"node-info\">\r\n          <div class=\"node-label\">{{ nodeData?.name?.split(\"\\n\")?.[0] }}</div>\r\n          <div class=\"node-type\">{{ transformedActivityName }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Activity Type Selector -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Activity Type</label>\r\n      <div class=\"display-type-selector\">\r\n        <select\r\n          class=\"form-control\"\r\n          title=\"Select activity type\"\r\n          [value]=\"selectedActivityType?.value\"\r\n          (change)=\"onActivityTypeSelectChange($event)\"\r\n        >\r\n          <option\r\n            *ngFor=\"let type of activityDisplayTypes; trackBy: trackByValue\"\r\n            [value]=\"type.value\"\r\n          >\r\n            {{ type.label }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Description</label>\r\n      <div class=\"display-type-selector\">\r\n        <textarea\r\n          class=\"form-control\"\r\n          aria-label=\"property-description\"\r\n          (input)=\"onDescriptionChange($event)\"\r\n          [value]=\"nodeData.suggestedProperties?.uccxDescription\"\r\n          rows=\"3\"\r\n        ></textarea>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Node Information -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Information</label>\r\n      <div class=\"info-grid\">\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">UCCX Type:</span>\r\n          <span class=\"info-value\" [title]=\"nodeData.uccxTypeName\">{{\r\n            nodeData.uccxTypeName\r\n          }}</span>\r\n        </div>\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">WxCC Activity Name:</span>\r\n          <span class=\"info-value\" [title]=\"transformedActivityName\">{{\r\n            transformedActivityName\r\n          }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Status -->\r\n    <div class=\"section\" *ngIf=\"nodeData.review\">\r\n      <label class=\"section-label\">Review Status</label>\r\n      <div class=\"review-status\">\r\n        <div class=\"review-badge\" [style.background-color]=\"getReviewColor()\">\r\n          {{ getReviewLabel() }}\r\n        </div>\r\n        <div\r\n          class=\"review-reasons\"\r\n          *ngIf=\"nodeData.review.reasons && nodeData.review.reasons.length > 0\"\r\n        >\r\n          <div class=\"reason\" *ngFor=\"let reason of nodeData.review.reasons\">\r\n            <span class=\"reason-icon\">\u26A0</span>\r\n            <span>{{ reason }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Suggested Properties -->\r\n    <div class=\"section\" *ngIf=\"nodeData.suggestedProperties\">\r\n      <label class=\"section-label\">Migration Information</label>\r\n      <div class=\"migration-info\">\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.closestWxccActivity\"\r\n        >\r\n          <div class=\"card-label\">Closest WXCC Activity</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.closestWxccActivity }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.mappingNotes\"\r\n        >\r\n          <div class=\"card-label\">Mapping Notes</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.mappingNotes }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.migrationInstructions\"\r\n        >\r\n          <div class=\"card-label\">Migration Instructions</div>\r\n          <div class=\"card-value instructions\">\r\n            {{ nodeData.suggestedProperties.migrationInstructions }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.node-details-sidebar{position:fixed;top:0;right:-420px;width:420px;height:100%;background:#ffffff;box-shadow:-2px 0 8px #00000026;z-index:1000;transition:right .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}.node-details-sidebar.open{right:0}.node-details-sidebar .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e1e4e8;background:#f8f9fa}.node-details-sidebar .sidebar-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#24292e}.node-details-sidebar .sidebar-header .close-btn{background:none;border:none;font-size:2rem;line-height:1;cursor:pointer;color:#586069;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.node-details-sidebar .sidebar-header .close-btn:hover{background:rgba(0,0,0,.05);color:#24292e}.node-details-sidebar .sidebar-content{flex:1;overflow-y:auto;padding:1.5rem}.node-details-sidebar .sidebar-content .node-preview{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .node-preview .node-preview-card{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:8px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;flex-shrink:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon img{width:24px;height:24px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info{flex:1;min-width:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-label{font-size:1rem;font-weight:600;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-type{font-size:.875rem;color:#586069}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start{background-color:#4caf500d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-icon{background-color:#4caf501a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-label{color:#4caf50}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end{background-color:#f443360d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-icon{background-color:#f443361a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-label{color:#f44336}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway{background-color:#ff98000d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-icon{background-color:#ff98001a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-label{color:#ff9800}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action{background-color:#9c27b00d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-icon{background-color:#9c27b01a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-label{color:#9c27b0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default{background-color:#607d8b0d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-icon{background-color:#607d8b1a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-label{color:#607d8b}.node-details-sidebar .sidebar-content .section{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .section .section-label{display:block;font-size:.65rem;font-weight:600;color:#24292e;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control{width:100%;padding:.625rem .875rem;font-size:.875rem;border:1px solid #d1d5da;border-radius:6px;background:white;transition:border-color .2s;box-sizing:border-box;resize:vertical}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control:focus{outline:none;border-color:#0366d6;box-shadow:0 0 0 3px #0366d61a}.node-details-sidebar .sidebar-content .section .info-grid{display:flex;flex-direction:column;gap:.75rem}.node-details-sidebar .sidebar-content .section .info-grid .info-item{display:flex;justify-content:space-between;align-items:flex-start;padding:.75rem;background:#f6f8fa;border-radius:6px}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-label{font-size:.8125rem;color:#586069;font-weight:500}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-value{font-size:.8125rem;color:#24292e;font-weight:600;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .section .review-status .review-badge{display:inline-block;padding:.5rem 1rem;border-radius:20px;color:#fff;font-size:.8125rem;font-weight:600;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#fff3cd;border-radius:4px;margin-bottom:.5rem;font-size:.8125rem;color:#856404}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason .reason-icon{flex-shrink:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card{padding:1rem;background:#f6f8fa;border-radius:6px;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card:last-child{margin-bottom:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-label{font-size:.75rem;font-weight:600;color:#586069;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value{font-size:.875rem;color:#24292e;line-height:1.5}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value.instructions{white-space:pre-wrap}\n"] }]
+            args: [{ selector: 'node-details-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div class=\"sidebar-overlay\" *ngIf=\"isOpen\" (click)=\"onClose()\"></div> -->\r\n\r\n<div class=\"node-details-sidebar\" [class.open]=\"isOpen\">\r\n  <div class=\"sidebar-header\">\r\n    <h3>Node Details</h3>\r\n    <button class=\"close-btn\" (click)=\"onClose()\">\r\n      <span>&times;</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"sidebar-content\" *ngIf=\"nodeData\">\r\n    <!-- Node Preview -->\r\n    <div class=\"node-preview\">\r\n      <div class=\"node-preview-card\" [ngClass]=\"getNodeColorClass()\">\r\n        <div class=\"node-icon\">\r\n          <img [src]=\"getNodeIcon()\" alt=\"Node Icon\" />\r\n        </div>\r\n        <div class=\"node-info\">\r\n          <div class=\"node-label\">{{ nodeData.name?.split(\"\\n\")?.[0] }}</div>\r\n          <div class=\"node-type\">{{ transformedActivityName }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Activity Type Selector -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Activity Type</label>\r\n      <div class=\"display-type-selector\">\r\n        <select\r\n          class=\"form-control\"\r\n          title=\"Select activity type\"\r\n          [value]=\"selectedActivityType?.value\"\r\n          (change)=\"onActivityTypeSelectChange($event)\"\r\n        >\r\n          <option\r\n            *ngFor=\"let type of activityDisplayTypes; trackBy: trackByValue\"\r\n            [value]=\"type.value\"\r\n          >\r\n            {{ type.label }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Description</label>\r\n      <div class=\"display-type-selector\">\r\n        <textarea\r\n          class=\"form-control\"\r\n          aria-label=\"property-description\"\r\n          (input)=\"onDescriptionChange($event)\"\r\n          [value]=\"nodeData.suggestedProperties?.uccxDescription\"\r\n          rows=\"3\"\r\n        ></textarea>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Node Information -->\r\n    <div class=\"section\">\r\n      <label class=\"section-label\">Information</label>\r\n      <div class=\"info-grid\">\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">UCCX Type:</span>\r\n          <span class=\"info-value\" [title]=\"nodeData.uccxTypeName\">{{\r\n            nodeData.uccxTypeName\r\n          }}</span>\r\n        </div>\r\n        <div class=\"info-item\">\r\n          <span class=\"info-label\">WxCC Activity Name:</span>\r\n          <span class=\"info-value\" [title]=\"transformedActivityName\">{{\r\n            transformedActivityName\r\n          }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Status -->\r\n    <div class=\"section\" *ngIf=\"nodeData.review\">\r\n      <label class=\"section-label\">Review Status</label>\r\n      <div class=\"review-status\">\r\n        <div class=\"review-badge\" [style.background-color]=\"getReviewColor()\">\r\n          {{ getReviewLabel() }}\r\n        </div>\r\n        <div\r\n          class=\"review-reasons\"\r\n          *ngIf=\"nodeData.review.reasons && nodeData.review.reasons.length > 0\"\r\n        >\r\n          <div class=\"reason\" *ngFor=\"let reason of nodeData.review.reasons\">\r\n            <span class=\"reason-icon\">\u26A0</span>\r\n            <span>{{ reason }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Suggested Properties -->\r\n    <div class=\"section\" *ngIf=\"nodeData.suggestedProperties\">\r\n      <label class=\"section-label\">Migration Information</label>\r\n      <div class=\"migration-info\">\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.closestWxccActivity\"\r\n        >\r\n          <div class=\"card-label\">Closest WXCC Activity</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.closestWxccActivity }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.mappingNotes\"\r\n        >\r\n          <div class=\"card-label\">Mapping Notes</div>\r\n          <div class=\"card-value\">\r\n            {{ nodeData.suggestedProperties.mappingNotes }}\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"info-card\"\r\n          *ngIf=\"nodeData.suggestedProperties.migrationInstructions\"\r\n        >\r\n          <div class=\"card-label\">Migration Instructions</div>\r\n          <div class=\"card-value instructions\">\r\n            {{ nodeData.suggestedProperties.migrationInstructions }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.node-details-sidebar{position:fixed;top:0;right:-420px;width:420px;height:100%;background:#ffffff;box-shadow:-2px 0 8px #00000026;z-index:1000;transition:right .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}.node-details-sidebar.open{right:0}.node-details-sidebar .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e1e4e8;background:#f8f9fa}.node-details-sidebar .sidebar-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#24292e}.node-details-sidebar .sidebar-header .close-btn{background:none;border:none;font-size:2rem;line-height:1;cursor:pointer;color:#586069;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.node-details-sidebar .sidebar-header .close-btn:hover{background:rgba(0,0,0,.05);color:#24292e}.node-details-sidebar .sidebar-content{flex:1;overflow-y:auto;padding:1.5rem}.node-details-sidebar .sidebar-content .node-preview{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .node-preview .node-preview-card{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:8px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;flex-shrink:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-icon img{width:24px;height:24px}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info{flex:1;min-width:0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-label{font-size:1rem;font-weight:600;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .node-preview .node-preview-card .node-info .node-type{font-size:.875rem;color:#586069}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start{background-color:#4caf500d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-icon{background-color:#4caf501a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-start .node-label{color:#4caf50}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end{background-color:#f443360d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-icon{background-color:#f443361a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-end .node-label{color:#f44336}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway{background-color:#ff98000d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-icon{background-color:#ff98001a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-gateway .node-label{color:#ff9800}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action{background-color:#9c27b00d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-icon{background-color:#9c27b01a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-action .node-label{color:#9c27b0}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default{background-color:#607d8b0d}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-icon{background-color:#607d8b1a}.node-details-sidebar .sidebar-content .node-preview .node-preview-card.node-default .node-label{color:#607d8b}.node-details-sidebar .sidebar-content .section{margin-bottom:1.5rem}.node-details-sidebar .sidebar-content .section .section-label{display:block;font-size:.65rem;font-weight:600;color:#24292e;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control{width:100%;padding:.625rem .875rem;font-size:.875rem;border:1px solid #d1d5da;border-radius:6px;background:white;transition:border-color .2s;box-sizing:border-box;resize:vertical}.node-details-sidebar .sidebar-content .section .display-type-selector .form-control:focus{outline:none;border-color:#0366d6;box-shadow:0 0 0 3px #0366d61a}.node-details-sidebar .sidebar-content .section .info-grid{display:flex;flex-direction:column;gap:.75rem}.node-details-sidebar .sidebar-content .section .info-grid .info-item{display:flex;justify-content:space-between;align-items:flex-start;padding:.75rem;background:#f6f8fa;border-radius:6px}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-label{font-size:.8125rem;color:#586069;font-weight:500}.node-details-sidebar .sidebar-content .section .info-grid .info-item .info-value{font-size:.8125rem;color:#24292e;font-weight:600;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-details-sidebar .sidebar-content .section .review-status .review-badge{display:inline-block;padding:.5rem 1rem;border-radius:20px;color:#fff;font-size:.8125rem;font-weight:600;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem;background:#fff3cd;border-radius:4px;margin-bottom:.5rem;font-size:.8125rem;color:#856404}.node-details-sidebar .sidebar-content .section .review-status .review-reasons .reason .reason-icon{flex-shrink:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card{padding:1rem;background:#f6f8fa;border-radius:6px;margin-bottom:.75rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card:last-child{margin-bottom:0}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-label{font-size:.75rem;font-weight:600;color:#586069;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value{font-size:.875rem;color:#24292e;line-height:1.5}.node-details-sidebar .sidebar-content .section .migration-info .info-card .card-value.instructions{white-space:pre-wrap}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], nodeData: [{