@tuki-io/tuki-widgets 0.0.218 → 0.0.219-dev.1

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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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: [{