mapa-library-ui 0.77.5 → 0.90.0

package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-indicator-chart/capability-indicator-chart.component.mjs

@@ -23,10 +23,10 @@ export class MapaCapabilityIndicatorChartComponent {
     }
 }
 MapaCapabilityIndicatorChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, deps: [{ token: i1.CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityIndicatorChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorChartComponent, selector: "mapa-capability-indicator-chart", inputs: { data: "data" }, ngImport: i0, template: "<table class=\"indicator-chart\">\n  <tr *ngFor=\"let item of data\">\n    <td class=\"indicator-chart__column--description\">{{ item.name }}</td>\n    <td class=\"indicator-chart__column indicator-chart__column--left\">\n      <div\n        class=\"indicator-chart__column--negative\"\n        *ngIf=\"item.direction === 'Negativa'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--right\">\n      <div\n        class=\"indicator-chart__column--positive\"\n        *ngIf=\"item.direction === 'Positiva'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,Arial,Helvetica,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,Arial,Helvetica,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item"] }], encapsulation: i0.ViewEncapsulation.None });
+MapaCapabilityIndicatorChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorChartComponent, selector: "mapa-capability-indicator-chart", inputs: { data: "data" }, ngImport: i0, template: "<table class=\"indicator-chart\">\n  <tr *ngFor=\"let item of data\">\n    <td class=\"indicator-chart__column--description\">{{ item.name }}</td>\n    <td class=\"indicator-chart__column indicator-chart__column--left\">\n      <div\n        class=\"indicator-chart__column--negative\"\n        *ngIf=\"item.direction === 'Negativa'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--right\">\n      <div\n        class=\"indicator-chart__column--positive\"\n        *ngIf=\"item.direction === 'Positiva'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-indicator-chart", encapsulation: ViewEncapsulation.None, template: "<table class=\"indicator-chart\">\n  <tr *ngFor=\"let item of data\">\n    <td class=\"indicator-chart__column--description\">{{ item.name }}</td>\n    <td class=\"indicator-chart__column indicator-chart__column--left\">\n      <div\n        class=\"indicator-chart__column--negative\"\n        *ngIf=\"item.direction === 'Negativa'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--right\">\n      <div\n        class=\"indicator-chart__column--positive\"\n        *ngIf=\"item.direction === 'Positiva'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,Arial,Helvetica,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,Arial,Helvetica,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+            args: [{ selector: "mapa-capability-indicator-chart", encapsulation: ViewEncapsulation.None, template: "<table class=\"indicator-chart\">\n  <tr *ngFor=\"let item of data\">\n    <td class=\"indicator-chart__column--description\">{{ item.name }}</td>\n    <td class=\"indicator-chart__column indicator-chart__column--left\">\n      <div\n        class=\"indicator-chart__column--negative\"\n        *ngIf=\"item.direction === 'Negativa'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--right\">\n      <div\n        class=\"indicator-chart__column--positive\"\n        *ngIf=\"item.direction === 'Positiva'\"\n      >\n        <mapa-capability-indicator\n          [item]=\"setUnlabeledItem(item)\"\n          [style.width]=\"getWidth(item)\"\n        ></mapa-capability-indicator>\n      </div>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.CapabilityClassificationService }]; }, propDecorators: { data: [{
                 type: Input
             }] } });

package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-indicator-list/capability-indicator-list.component.mjs

@@ -1,27 +1,63 @@
 import { Component, Input } from "@angular/core";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "../capability-indicator/capability-indicator.component";
+import * as i1 from "../../../../core/services/mapa-i18n.service";
+import * as i2 from "@angular/common";
+import * as i3 from "../capability-indicator/capability-indicator.component";
 export class MapaCapabilityIndicatorListComponent {
-    constructor() {
+    constructor(i18n) {
+        this.i18n = i18n;
         this.dataPositive = [];
         this.dataNegative = [];
         this.dataRiskPrecipitation = [];
         this.dataRiskNegligence = [];
+        this.texts = this.i18n.texts;
+        this.onDestroy$ = new Subject();
+        this.i18n.texts$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((texts) => (this.texts = texts));
+    }
+    get positiveIndicatorsTitle() {
+        return this.texts.capability.positiveIndicatorsTitle;
+    }
+    get negativeIndicatorsTitle() {
+        return this.texts.capability.negativeIndicatorsTitle;
+    }
+    get riskIndicatorsTitle() {
+        return this.texts.capability.riskIndicatorsTitle;
+    }
+    get precipitationRiskTitle() {
+        return this.texts.capability.precipitationRiskTitle;
+    }
+    get negligenceRiskTitle() {
+        return this.texts.capability.negligenceRiskTitle;
     }
     ngOnInit() {
+        this.buildIndicatorGroups();
+    }
+    ngOnChanges(changes) {
+        if (changes["data"]) {
+            this.buildIndicatorGroups();
+        }
+    }
+    buildIndicatorGroups() {
         this.dataPositive = this.data.filter((item) => item.direction === "Positiva" && !item.risk);
         this.dataNegative = this.data.filter((item) => item.direction === "Negativa" && !item.risk);
         this.dataRiskPrecipitation = this.data.filter((item) => item.risk === true && item.precipitation === true);
         this.dataRiskNegligence = this.data.filter((item) => item.risk === true && item.negligence === true);
     }
+    ngOnDestroy() {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
 }
-MapaCapabilityIndicatorListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityIndicatorListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorListComponent, selector: "mapa-capability-indicator-list", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores positivos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataPositive\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataNegative\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article\n    class=\"indicator-list__column\"\n    *ngIf=\"dataRiskPrecipitation.length > 0 || dataRiskNegligence.length > 0\"\n  >\n    <h2>Indicadores de risco</h2>\n    <div *ngIf=\"dataRiskPrecipitation.length > 0\">\n      <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskPrecipitation\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n    <div *ngIf=\"dataRiskNegligence.length > 0\">\n      <h3>Risco de acidente por neglig\u00EAncia</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskNegligence\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n  </article>\n</section>\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:Inter,Arial,Helvetica,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,Arial,Helvetica,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,Arial,Helvetica,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item"] }] });
+MapaCapabilityIndicatorListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, deps: [{ token: i1.MapaI18nService }], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityIndicatorListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorListComponent, selector: "mapa-capability-indicator-list", inputs: { data: "data" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>{{ positiveIndicatorsTitle }}</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataPositive\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>{{ negativeIndicatorsTitle }}</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataNegative\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article\n    class=\"indicator-list__column\"\n    *ngIf=\"dataRiskPrecipitation.length > 0 || dataRiskNegligence.length > 0\"\n  >\n    <h2>{{ riskIndicatorsTitle }}</h2>\n    <div *ngIf=\"dataRiskPrecipitation.length > 0\">\n      <h3>{{ precipitationRiskTitle }}</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskPrecipitation\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n    <div *ngIf=\"dataRiskNegligence.length > 0\">\n      <h3>{{ negligenceRiskTitle }}</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskNegligence\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n  </article>\n</section>\n\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-indicator-list", template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores positivos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataPositive\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataNegative\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article\n    class=\"indicator-list__column\"\n    *ngIf=\"dataRiskPrecipitation.length > 0 || dataRiskNegligence.length > 0\"\n  >\n    <h2>Indicadores de risco</h2>\n    <div *ngIf=\"dataRiskPrecipitation.length > 0\">\n      <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskPrecipitation\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n    <div *ngIf=\"dataRiskNegligence.length > 0\">\n      <h3>Risco de acidente por neglig\u00EAncia</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskNegligence\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n  </article>\n</section>\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:Inter,Arial,Helvetica,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,Arial,Helvetica,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,Arial,Helvetica,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+            args: [{ selector: "mapa-capability-indicator-list", template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>{{ positiveIndicatorsTitle }}</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataPositive\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>{{ negativeIndicatorsTitle }}</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataNegative\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article\n    class=\"indicator-list__column\"\n    *ngIf=\"dataRiskPrecipitation.length > 0 || dataRiskNegligence.length > 0\"\n  >\n    <h2>{{ riskIndicatorsTitle }}</h2>\n    <div *ngIf=\"dataRiskPrecipitation.length > 0\">\n      <h3>{{ precipitationRiskTitle }}</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskPrecipitation\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n    <div *ngIf=\"dataRiskNegligence.length > 0\">\n      <h3>{{ negligenceRiskTitle }}</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskNegligence\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n  </article>\n</section>\n\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MapaI18nService }]; }, propDecorators: { data: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FwYWJpbGl0eS1pbmRpY2F0b3ItbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2NhcGFiaWxpdHktaW5kaWNhdG9yLWxpc3QvY2FwYWJpbGl0eS1pbmRpY2F0b3ItbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2NhcGFiaWxpdHktaW5kaWNhdG9yLWxpc3QvY2FwYWJpbGl0eS1pbmRpY2F0b3ItbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7OztBQWF6RCxNQUFNLE9BQU8sb0NBQW9DO0lBUS9DO1FBTE8saUJBQVksR0FBcUIsRUFBRSxDQUFDO1FBQ3BDLGlCQUFZLEdBQXFCLEVBQUUsQ0FBQztRQUNwQywwQkFBcUIsR0FBcUIsRUFBRSxDQUFDO1FBQzdDLHVCQUFrQixHQUFxQixFQUFFLENBQUM7SUFFbEMsQ0FBQztJQUVoQixRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FDbEMsQ0FBQyxJQUFvQixFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsU0FBUyxLQUFLLFVBQVUsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQ3RFLENBQUM7UUFDRixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUNsQyxDQUFDLElBQW9CLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxTQUFTLEtBQUssVUFBVSxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FDdEUsQ0FBQztRQUNGLElBQUksQ0FBQyxxQkFBcUIsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FDM0MsQ0FBQyxJQUFvQixFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksSUFBSSxJQUFJLENBQUMsYUFBYSxLQUFLLElBQUksQ0FDNUUsQ0FBQztRQUNGLElBQUksQ0FBQyxrQkFBa0IsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FDeEMsQ0FBQyxJQUFvQixFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLElBQUksQ0FDekUsQ0FBQztJQUNKLENBQUM7O2tJQXZCVSxvQ0FBb0M7c0hBQXBDLG9DQUFvQyxnR0NiakQsdXNDQWtDQTs0RkRyQmEsb0NBQW9DO2tCQVJoRCxTQUFTOytCQUNFLGdDQUFnQzswRUFRakMsSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgQ2FwYWJpbGl0eUl0ZW0gfSBmcm9tIFwiLi4vZXNzZW50aWFscy9pbnRlcmZhY2VzL2NhcGFiaWxpdHktaXRlbS5pbnRlcmZhY2VcIjtcbmltcG9ydCB7IENhcGFiaWxpdHlDbGFzc2lmaWNhdGlvblNlcnZpY2UgfSBmcm9tIFwiLi4vZXNzZW50aWFscy9zZXJ2aWNlcy9jYXBhYmlsaXR5LWNsYXNzaWZpY2F0aW9uLnNlcnZpY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1hcGEtY2FwYWJpbGl0eS1pbmRpY2F0b3ItbGlzdFwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL2NhcGFiaWxpdHktaW5kaWNhdG9yLWxpc3QuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXG4gICAgXCIuL2NhcGFiaWxpdHktaW5kaWNhdG9yLWxpc3QuY29tcG9uZW50LnNjc3NcIixcbiAgICBcIi4vLi4vLi4vc3R5bGVzL2NhcGFiaWxpdHkuc2Nzc1wiLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBNYXBhQ2FwYWJpbGl0eUluZGljYXRvckxpc3RDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBkYXRhITogQ2FwYWJpbGl0eUl0ZW1bXTtcblxuICBwdWJsaWMgZGF0YVBvc2l0aXZlOiBDYXBhYmlsaXR5SXRlbVtdID0gW107XG4gIHB1YmxpYyBkYXRhTmVnYXRpdmU6IENhcGFiaWxpdHlJdGVtW10gPSBbXTsgIFxuICBwdWJsaWMgZGF0YVJpc2tQcmVjaXBpdGF0aW9uOiBDYXBhYmlsaXR5SXRlbVtdID0gW107ICBcbiAgcHVibGljIGRhdGFSaXNrTmVnbGlnZW5jZTogQ2FwYWJpbGl0eUl0ZW1bXSA9IFtdOyAgXG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuZGF0YVBvc2l0aXZlID0gdGhpcy5kYXRhLmZpbHRlcihcbiAgICAgIChpdGVtOiBDYXBhYmlsaXR5SXRlbSkgPT4gaXRlbS5kaXJlY3Rpb24gPT09IFwiUG9zaXRpdmFcIiAmJiAhaXRlbS5yaXNrXG4gICAgKTtcbiAgICB0aGlzLmRhdGFOZWdhdGl2ZSA9IHRoaXMuZGF0YS5maWx0ZXIoXG4gICAgICAoaXRlbTogQ2FwYWJpbGl0eUl0ZW0pID0+IGl0ZW0uZGlyZWN0aW9uID09PSBcIk5lZ2F0aXZhXCIgJiYgIWl0ZW0ucmlza1xuICAgICk7XG4gICAgdGhpcy5kYXRhUmlza1ByZWNpcGl0YXRpb24gPSB0aGlzLmRhdGEuZmlsdGVyKFxuICAgICAgKGl0ZW06IENhcGFiaWxpdHlJdGVtKSA9PiBpdGVtLnJpc2sgPT09IHRydWUgJiYgaXRlbS5wcmVjaXBpdGF0aW9uID09PSB0cnVlXG4gICAgKTtcbiAgICB0aGlzLmRhdGFSaXNrTmVnbGlnZW5jZSA9IHRoaXMuZGF0YS5maWx0ZXIoXG4gICAgICAoaXRlbTogQ2FwYWJpbGl0eUl0ZW0pID0+IGl0ZW0ucmlzayA9PT0gdHJ1ZSAmJiBpdGVtLm5lZ2xpZ2VuY2UgPT09IHRydWVcbiAgICApO1xuICB9XG59XG4iLCI8c2VjdGlvbiBjbGFzcz1cImluZGljYXRvci1saXN0XCI+XG4gIDxhcnRpY2xlIGNsYXNzPVwiaW5kaWNhdG9yLWxpc3RfX2NvbHVtblwiPlxuICAgIDxoMj5JbmRpY2Fkb3JlcyBwb3NpdGl2b3M8L2gyPlxuICAgIDxtYXBhLWNhcGFiaWxpdHktaW5kaWNhdG9yICpuZ0Zvcj1cImxldCBpdGVtIG9mIGRhdGFQb3NpdGl2ZVwiIFtpdGVtXT1cIml0ZW1cIj5cbiAgICA8L21hcGEtY2FwYWJpbGl0eS1pbmRpY2F0b3I+XG4gIDwvYXJ0aWNsZT5cbiAgPGFydGljbGUgY2xhc3M9XCJpbmRpY2F0b3ItbGlzdF9fY29sdW1uXCI+XG4gICAgPGgyPkluZGljYWRvcmVzIG5lZ2F0aXZvczwvaDI+XG4gICAgPG1hcGEtY2FwYWJpbGl0eS1pbmRpY2F0b3IgKm5nRm9yPVwibGV0IGl0ZW0gb2YgZGF0YU5lZ2F0aXZlXCIgW2l0ZW1dPVwiaXRlbVwiPlxuICAgIDwvbWFwYS1jYXBhYmlsaXR5LWluZGljYXRvcj5cbiAgPC9hcnRpY2xlPlxuICA8YXJ0aWNsZVxuICAgIGNsYXNzPVwiaW5kaWNhdG9yLWxpc3RfX2NvbHVtblwiXG4gICAgKm5nSWY9XCJkYXRhUmlza1ByZWNpcGl0YXRpb24ubGVuZ3RoID4gMCB8fCBkYXRhUmlza05lZ2xpZ2VuY2UubGVuZ3RoID4gMFwiXG4gID5cbiAgICA8aDI+SW5kaWNhZG9yZXMgZGUgcmlzY288L2gyPlxuICAgIDxkaXYgKm5nSWY9XCJkYXRhUmlza1ByZWNpcGl0YXRpb24ubGVuZ3RoID4gMFwiPlxuICAgICAgPGgzPlJpc2NvIGRlIGFjaWRlbnRlIHBvciBwcmVjaXBpdGHDp8OjbzwvaDM+XG4gICAgICA8bWFwYS1jYXBhYmlsaXR5LWluZGljYXRvclxuICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiBkYXRhUmlza1ByZWNpcGl0YXRpb25cIlxuICAgICAgICBbaXRlbV09XCJpdGVtXCJcbiAgICAgID5cbiAgICAgIDwvbWFwYS1jYXBhYmlsaXR5LWluZGljYXRvcj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2ICpuZ0lmPVwiZGF0YVJpc2tOZWdsaWdlbmNlLmxlbmd0aCA+IDBcIj5cbiAgICAgIDxoMz5SaXNjbyBkZSBhY2lkZW50ZSBwb3IgbmVnbGlnw6puY2lhPC9oMz5cbiAgICAgIDxtYXBhLWNhcGFiaWxpdHktaW5kaWNhdG9yXG4gICAgICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIGRhdGFSaXNrTmVnbGlnZW5jZVwiXG4gICAgICAgIFtpdGVtXT1cIml0ZW1cIlxuICAgICAgPlxuICAgICAgPC9tYXBhLWNhcGFiaWxpdHktaW5kaWNhdG9yPlxuICAgIDwvZGl2PlxuICA8L2FydGljbGU+XG48L3NlY3Rpb24+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FwYWJpbGl0eS1pbmRpY2F0b3ItbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2NhcGFiaWxpdHktaW5kaWNhdG9yLWxpc3QvY2FwYWJpbGl0eS1pbmRpY2F0b3ItbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2NhcGFiaWxpdHktaW5kaWNhdG9yLWxpc3QvY2FwYWJpbGl0eS1pbmRpY2F0b3ItbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBK0MsTUFBTSxlQUFlLENBQUM7QUFDOUYsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7O0FBYTNDLE1BQU0sT0FBTyxvQ0FBb0M7SUFVL0MsWUFBNkIsSUFBcUI7UUFBckIsU0FBSSxHQUFKLElBQUksQ0FBaUI7UUFQM0MsaUJBQVksR0FBcUIsRUFBRSxDQUFDO1FBQ3BDLGlCQUFZLEdBQXFCLEVBQUUsQ0FBQztRQUNwQywwQkFBcUIsR0FBcUIsRUFBRSxDQUFDO1FBQzdDLHVCQUFrQixHQUFxQixFQUFFLENBQUM7UUFDakQsVUFBSyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ1AsZUFBVSxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFHaEQsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNO2FBQ2IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7YUFDaEMsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBRUQsSUFBSSx1QkFBdUI7UUFDekIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyx1QkFBdUIsQ0FBQztJQUN2RCxDQUFDO0lBRUQsSUFBSSx1QkFBdUI7UUFDekIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyx1QkFBdUIsQ0FBQztJQUN2RCxDQUFDO0lBRUQsSUFBSSxtQkFBbUI7UUFDckIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxtQkFBbUIsQ0FBQztJQUNuRCxDQUFDO0lBRUQsSUFBSSxzQkFBc0I7UUFDeEIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxzQkFBc0IsQ0FBQztJQUN0RCxDQUFDO0lBRUQsSUFBSSxtQkFBbUI7UUFDckIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQVUsQ0FBQyxtQkFBbUIsQ0FBQztJQUNuRCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDbkIsSUFBSSxDQUFDLG9CQUFvQixFQUFFLENBQUM7U0FDN0I7SUFDSCxDQUFDO0lBRU8sb0JBQW9CO1FBQzFCLElBQUksQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQ2xDLENBQUMsSUFBb0IsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsS0FBSyxVQUFVLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUN0RSxDQUFDO1FBQ0YsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FDbEMsQ0FBQyxJQUFvQixFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsU0FBUyxLQUFLLFVBQVUsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQ3RFLENBQUM7UUFDRixJQUFJLENBQUMscUJBQXFCLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQzNDLENBQUMsSUFBb0IsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLElBQUksSUFBSSxDQUFDLGFBQWEsS0FBSyxJQUFJLENBQzVFLENBQUM7UUFDRixJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQ3hDLENBQUMsSUFBb0IsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLElBQUksSUFBSSxDQUFDLFVBQVUsS0FBSyxJQUFJLENBQ3pFLENBQUM7SUFDSixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUM3QixDQUFDOztrSUFoRVUsb0NBQW9DO3NIQUFwQyxvQ0FBb0MscUhDZmpELGlzQ0FtQ0E7NEZEcEJhLG9DQUFvQztrQkFSaEQsU0FBUzsrQkFDRSxnQ0FBZ0M7c0dBUWpDLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uQ2hhbmdlcywgT25EZXN0cm95LCBPbkluaXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gXCJyeGpzXCI7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tIFwicnhqcy9vcGVyYXRvcnNcIjtcblxuaW1wb3J0IHsgQ2FwYWJpbGl0eUl0ZW0gfSBmcm9tIFwiLi4vZXNzZW50aWFscy9pbnRlcmZhY2VzL2NhcGFiaWxpdHktaXRlbS5pbnRlcmZhY2VcIjtcbmltcG9ydCB7IE1hcGFJMThuU2VydmljZSB9IGZyb20gXCIuLi8uLi8uLi8uLi9jb3JlL3NlcnZpY2VzL21hcGEtaTE4bi5zZXJ2aWNlXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJtYXBhLWNhcGFiaWxpdHktaW5kaWNhdG9yLWxpc3RcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jYXBhYmlsaXR5LWluZGljYXRvci1saXN0LmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsczogW1xuICAgIFwiLi9jYXBhYmlsaXR5LWluZGljYXRvci1saXN0LmNvbXBvbmVudC5zY3NzXCIsXG4gICAgXCIuLy4uLy4uL3N0eWxlcy9jYXBhYmlsaXR5LnNjc3NcIixcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgTWFwYUNhcGFiaWxpdHlJbmRpY2F0b3JMaXN0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpIGRhdGEhOiBDYXBhYmlsaXR5SXRlbVtdO1xuXG4gIHB1YmxpYyBkYXRhUG9zaXRpdmU6IENhcGFiaWxpdHlJdGVtW10gPSBbXTtcbiAgcHVibGljIGRhdGFOZWdhdGl2ZTogQ2FwYWJpbGl0eUl0ZW1bXSA9IFtdOyAgXG4gIHB1YmxpYyBkYXRhUmlza1ByZWNpcGl0YXRpb246IENhcGFiaWxpdHlJdGVtW10gPSBbXTsgIFxuICBwdWJsaWMgZGF0YVJpc2tOZWdsaWdlbmNlOiBDYXBhYmlsaXR5SXRlbVtdID0gW107ICBcbiAgdGV4dHMgPSB0aGlzLmkxOG4udGV4dHM7XG4gIHByaXZhdGUgcmVhZG9ubHkgb25EZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZWFkb25seSBpMThuOiBNYXBhSTE4blNlcnZpY2UpIHtcbiAgICB0aGlzLmkxOG4udGV4dHMkXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5vbkRlc3Ryb3kkKSlcbiAgICAgIC5zdWJzY3JpYmUoKHRleHRzKSA9PiAodGhpcy50ZXh0cyA9IHRleHRzKSk7XG4gIH1cblxuICBnZXQgcG9zaXRpdmVJbmRpY2F0b3JzVGl0bGUoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy50ZXh0cy5jYXBhYmlsaXR5LnBvc2l0aXZlSW5kaWNhdG9yc1RpdGxlO1xuICB9XG5cbiAgZ2V0IG5lZ2F0aXZlSW5kaWNhdG9yc1RpdGxlKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMudGV4dHMuY2FwYWJpbGl0eS5uZWdhdGl2ZUluZGljYXRvcnNUaXRsZTtcbiAgfVxuXG4gIGdldCByaXNrSW5kaWNhdG9yc1RpdGxlKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMudGV4dHMuY2FwYWJpbGl0eS5yaXNrSW5kaWNhdG9yc1RpdGxlO1xuICB9XG5cbiAgZ2V0IHByZWNpcGl0YXRpb25SaXNrVGl0bGUoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy50ZXh0cy5jYXBhYmlsaXR5LnByZWNpcGl0YXRpb25SaXNrVGl0bGU7XG4gIH1cblxuICBnZXQgbmVnbGlnZW5jZVJpc2tUaXRsZSgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLnRleHRzLmNhcGFiaWxpdHkubmVnbGlnZW5jZVJpc2tUaXRsZTtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuYnVpbGRJbmRpY2F0b3JHcm91cHMoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlc1tcImRhdGFcIl0pIHtcbiAgICAgIHRoaXMuYnVpbGRJbmRpY2F0b3JHcm91cHMoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGJ1aWxkSW5kaWNhdG9yR3JvdXBzKCk6IHZvaWQge1xuICAgIHRoaXMuZGF0YVBvc2l0aXZlID0gdGhpcy5kYXRhLmZpbHRlcihcbiAgICAgIChpdGVtOiBDYXBhYmlsaXR5SXRlbSkgPT4gaXRlbS5kaXJlY3Rpb24gPT09IFwiUG9zaXRpdmFcIiAmJiAhaXRlbS5yaXNrXG4gICAgKTtcbiAgICB0aGlzLmRhdGFOZWdhdGl2ZSA9IHRoaXMuZGF0YS5maWx0ZXIoXG4gICAgICAoaXRlbTogQ2FwYWJpbGl0eUl0ZW0pID0+IGl0ZW0uZGlyZWN0aW9uID09PSBcIk5lZ2F0aXZhXCIgJiYgIWl0ZW0ucmlza1xuICAgICk7XG4gICAgdGhpcy5kYXRhUmlza1ByZWNpcGl0YXRpb24gPSB0aGlzLmRhdGEuZmlsdGVyKFxuICAgICAgKGl0ZW06IENhcGFiaWxpdHlJdGVtKSA9PiBpdGVtLnJpc2sgPT09IHRydWUgJiYgaXRlbS5wcmVjaXBpdGF0aW9uID09PSB0cnVlXG4gICAgKTtcbiAgICB0aGlzLmRhdGFSaXNrTmVnbGlnZW5jZSA9IHRoaXMuZGF0YS5maWx0ZXIoXG4gICAgICAoaXRlbTogQ2FwYWJpbGl0eUl0ZW0pID0+IGl0ZW0ucmlzayA9PT0gdHJ1ZSAmJiBpdGVtLm5lZ2xpZ2VuY2UgPT09IHRydWVcbiAgICApO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5vbkRlc3Ryb3kkLm5leHQoKTtcbiAgICB0aGlzLm9uRGVzdHJveSQuY29tcGxldGUoKTtcbiAgfVxufVxuIiwiPHNlY3Rpb24gY2xhc3M9XCJpbmRpY2F0b3ItbGlzdFwiPlxuICA8YXJ0aWNsZSBjbGFzcz1cImluZGljYXRvci1saXN0X19jb2x1bW5cIj5cbiAgICA8aDI+e3sgcG9zaXRpdmVJbmRpY2F0b3JzVGl0bGUgfX08L2gyPlxuICAgIDxtYXBhLWNhcGFiaWxpdHktaW5kaWNhdG9yICpuZ0Zvcj1cImxldCBpdGVtIG9mIGRhdGFQb3NpdGl2ZVwiIFtpdGVtXT1cIml0ZW1cIj5cbiAgICA8L21hcGEtY2FwYWJpbGl0eS1pbmRpY2F0b3I+XG4gIDwvYXJ0aWNsZT5cbiAgPGFydGljbGUgY2xhc3M9XCJpbmRpY2F0b3ItbGlzdF9fY29sdW1uXCI+XG4gICAgPGgyPnt7IG5lZ2F0aXZlSW5kaWNhdG9yc1RpdGxlIH19PC9oMj5cbiAgICA8bWFwYS1jYXBhYmlsaXR5LWluZGljYXRvciAqbmdGb3I9XCJsZXQgaXRlbSBvZiBkYXRhTmVnYXRpdmVcIiBbaXRlbV09XCJpdGVtXCI+XG4gICAgPC9tYXBhLWNhcGFiaWxpdHktaW5kaWNhdG9yPlxuICA8L2FydGljbGU+XG4gIDxhcnRpY2xlXG4gICAgY2xhc3M9XCJpbmRpY2F0b3ItbGlzdF9fY29sdW1uXCJcbiAgICAqbmdJZj1cImRhdGFSaXNrUHJlY2lwaXRhdGlvbi5sZW5ndGggPiAwIHx8IGRhdGFSaXNrTmVnbGlnZW5jZS5sZW5ndGggPiAwXCJcbiAgPlxuICAgIDxoMj57eyByaXNrSW5kaWNhdG9yc1RpdGxlIH19PC9oMj5cbiAgICA8ZGl2ICpuZ0lmPVwiZGF0YVJpc2tQcmVjaXBpdGF0aW9uLmxlbmd0aCA+IDBcIj5cbiAgICAgIDxoMz57eyBwcmVjaXBpdGF0aW9uUmlza1RpdGxlIH19PC9oMz5cbiAgICAgIDxtYXBhLWNhcGFiaWxpdHktaW5kaWNhdG9yXG4gICAgICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIGRhdGFSaXNrUHJlY2lwaXRhdGlvblwiXG4gICAgICAgIFtpdGVtXT1cIml0ZW1cIlxuICAgICAgPlxuICAgICAgPC9tYXBhLWNhcGFiaWxpdHktaW5kaWNhdG9yPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgKm5nSWY9XCJkYXRhUmlza05lZ2xpZ2VuY2UubGVuZ3RoID4gMFwiPlxuICAgICAgPGgzPnt7IG5lZ2xpZ2VuY2VSaXNrVGl0bGUgfX08L2gzPlxuICAgICAgPG1hcGEtY2FwYWJpbGl0eS1pbmRpY2F0b3JcbiAgICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2YgZGF0YVJpc2tOZWdsaWdlbmNlXCJcbiAgICAgICAgW2l0ZW1dPVwiaXRlbVwiXG4gICAgICA+XG4gICAgICA8L21hcGEtY2FwYWJpbGl0eS1pbmRpY2F0b3I+XG4gICAgPC9kaXY+XG4gIDwvYXJ0aWNsZT5cbjwvc2VjdGlvbj5cblxuIl19

package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-interval/capability-interval.component.mjs

@@ -69,10 +69,10 @@ export class MapaCapabilityIntervalComponent {
     }
 }
 MapaCapabilityIntervalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityIntervalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: { data: "data", showInterval: "showInterval" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\n  <li\n    class=\"capability__interval--item\"\n    *ngFor=\"let block of SVG; let i = index\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"30\"\n      fill=\"none\"\n      [class]=\"'svg_' + i + '_' + getWidth(i)\"\n    >\n      <defs *ngIf=\"hasTransform && i === indexTransform\">\n        <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n          <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\" />\n          <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\" />\n        </linearGradient>\n      </defs>\n      <rect\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFill(i)\"\n      />\n      <rect\n        *ngIf=\"hasTransform && i === indexTransform\"\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFillGradient()\"\n      />\n    </svg>\n  </li>\n  <li class=\"capability__interval--interval\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,Arial,Helvetica,sans-serif;font-size:38px;font-style:normal;font-weight:500;display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MapaCapabilityIntervalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: { data: "data", showInterval: "showInterval" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\n  <li\n    class=\"capability__interval--item\"\n    *ngFor=\"let block of SVG; let i = index\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"30\"\n      fill=\"none\"\n      [class]=\"'svg_' + i + '_' + getWidth(i)\"\n    >\n      <defs *ngIf=\"hasTransform && i === indexTransform\">\n        <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n          <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\" />\n          <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\" />\n        </linearGradient>\n      </defs>\n      <rect\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFill(i)\"\n      />\n      <rect\n        *ngIf=\"hasTransform && i === indexTransform\"\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFillGradient()\"\n      />\n    </svg>\n  </li>\n  <li class=\"capability__interval--interval\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:38px;font-style:normal;font-weight:500;display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\n  <li\n    class=\"capability__interval--item\"\n    *ngFor=\"let block of SVG; let i = index\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"30\"\n      fill=\"none\"\n      [class]=\"'svg_' + i + '_' + getWidth(i)\"\n    >\n      <defs *ngIf=\"hasTransform && i === indexTransform\">\n        <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n          <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\" />\n          <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\" />\n        </linearGradient>\n      </defs>\n      <rect\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFill(i)\"\n      />\n      <rect\n        *ngIf=\"hasTransform && i === indexTransform\"\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFillGradient()\"\n      />\n    </svg>\n  </li>\n  <li class=\"capability__interval--interval\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,Arial,Helvetica,sans-serif;font-size:38px;font-style:normal;font-weight:500;display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
+            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\n  <li\n    class=\"capability__interval--item\"\n    *ngFor=\"let block of SVG; let i = index\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"30\"\n      fill=\"none\"\n      [class]=\"'svg_' + i + '_' + getWidth(i)\"\n    >\n      <defs *ngIf=\"hasTransform && i === indexTransform\">\n        <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n          <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\" />\n          <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\" />\n        </linearGradient>\n      </defs>\n      <rect\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFill(i)\"\n      />\n      <rect\n        *ngIf=\"hasTransform && i === indexTransform\"\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFillGradient()\"\n      />\n    </svg>\n  </li>\n  <li class=\"capability__interval--interval\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:38px;font-style:normal;font-weight:500;display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], showInterval: [{

package/esm2020/src/lib/components/capability/lib/components/capability/src/capability-interval-bar/capability-interval-bar.component.mjs

@@ -6,9 +6,6 @@ export class MapaCapabilityIntervalBarComponent {
         this.clicked = new EventEmitter();
         this.isHovering = false;
         this.isClicked = false;
-        this.clicked.subscribe((res) => {
-            this.isClicked = !this.isClicked;
-        });
     }
     isSVG() {
         return !!this.data.classificationBg && this.data.classificationBg === "SVG";
@@ -19,7 +16,7 @@ MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, decorators: [{
             type: Component,
             args: [{ selector: "mapa-capability-interval-bar", encapsulation: ViewEncapsulation.None, template: "<section reusable-outlet class=\"capability-interval\">\n  <section [class.capability-interval__bar]=\"isSVG()\">\n    <mapa-capability-interval\n      [data]=\"data\"\n      [showInterval]=\"showInterval\"\n    ></mapa-capability-interval>\n  </section>\n</section>\n", styles: [".capability-interval{display:flex;align-items:center;position:relative;height:72px;margin-right:16px}.capability-interval__bar{display:flex;align-items:center;justify-content:center;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%;width:100%}.capability-interval__show-more mapa-button,.capability-interval__show-more button{width:100%;justify-content:flex-end!important}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--hide>*{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+        }], propDecorators: { data: [{
                 type: Input
             }], expanded: [{
                 type: Input
@@ -28,4 +25,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], clicked: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFwYS1saWJyYXJ5LXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXBhYmlsaXR5L3NyYy9jYXBhYmlsaXR5LWludGVydmFsLWJhci9jYXBhYmlsaXR5LWludGVydmFsLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2NhcGFiaWxpdHktaW50ZXJ2YWwtYmFyL2NhcGFiaWxpdHktaW50ZXJ2YWwtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVVsRyxNQUFNLE9BQU8sa0NBQWtDO0lBVzdDO1FBUFUsWUFBTyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBSTFELGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUd2QixJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQzdCLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO1FBQ25DLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVNLEtBQUs7UUFDVixPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQixJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLEtBQUssS0FBSyxDQUFDO0lBQzlFLENBQUM7O2dJQW5CVSxrQ0FBa0M7b0hBQWxDLGtDQUFrQyxtTENWL0MsOFFBUUE7NEZERWEsa0NBQWtDO2tCQU45QyxTQUFTOytCQUNFLDhCQUE4QixpQkFHekIsaUJBQWlCLENBQUMsSUFBSTswRUFHNUIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDSSxPQUFPO3NCQUFoQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQ2FwYWJpbGl0eSB9IGZyb20gXCIuLi9lc3NlbnRpYWxzL2ludGVyZmFjZXMvY2FwYWJpbGl0eS5pbnRlcmZhY2VcIjtcbmltcG9ydCB7IE1kNSB9IGZyb20gXCJ0cy1tZDVcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1hcGEtY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXJcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jYXBhYmlsaXR5LWludGVydmFsLWJhci5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXIuY29tcG9uZW50LnNjc3NcIl0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIE1hcGFDYXBhYmlsaXR5SW50ZXJ2YWxCYXJDb21wb25lbnQge1xuICBASW5wdXQoKSBkYXRhITogQ2FwYWJpbGl0eTtcbiAgQElucHV0KCkgZXhwYW5kZWQ/OiBib29sZWFuO1xuICBASW5wdXQoKSBzaG93SW50ZXJ2YWwhOiBib29sZWFuO1xuICBAT3V0cHV0KCkgY2xpY2tlZDogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIGlkITogc3RyaW5nO1xuXG4gIHB1YmxpYyBpc0hvdmVyaW5nID0gZmFsc2U7XG4gIHB1YmxpYyBpc0NsaWNrZWQgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLmNsaWNrZWQuc3Vic2NyaWJlKChyZXMpID0+IHtcbiAgICAgIHRoaXMuaXNDbGlja2VkID0gIXRoaXMuaXNDbGlja2VkO1xuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIGlzU1ZHKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiAhIXRoaXMuZGF0YS5jbGFzc2lmaWNhdGlvbkJnICYmIHRoaXMuZGF0YS5jbGFzc2lmaWNhdGlvbkJnID09PSBcIlNWR1wiO1xuICB9XG59XG4iLCI8c2VjdGlvbiByZXVzYWJsZS1vdXRsZXQgY2xhc3M9XCJjYXBhYmlsaXR5LWludGVydmFsXCI+XG4gIDxzZWN0aW9uIFtjbGFzcy5jYXBhYmlsaXR5LWludGVydmFsX19iYXJdPVwiaXNTVkcoKVwiPlxuICAgIDxtYXBhLWNhcGFiaWxpdHktaW50ZXJ2YWxcbiAgICAgIFtkYXRhXT1cImRhdGFcIlxuICAgICAgW3Nob3dJbnRlcnZhbF09XCJzaG93SW50ZXJ2YWxcIlxuICAgID48L21hcGEtY2FwYWJpbGl0eS1pbnRlcnZhbD5cbiAgPC9zZWN0aW9uPlxuPC9zZWN0aW9uPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFwYS1saWJyYXJ5LXVpL3NyYy9saWIvY29tcG9uZW50cy9jYXBhYmlsaXR5L3NyYy9jYXBhYmlsaXR5LWludGVydmFsLWJhci9jYXBhYmlsaXR5LWludGVydmFsLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2NhcGFiaWxpdHktaW50ZXJ2YWwtYmFyL2NhcGFiaWxpdHktaW50ZXJ2YWwtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVMxRixNQUFNLE9BQU8sa0NBQWtDO0lBTi9DO1FBVVksWUFBTyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBRTFELGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsY0FBUyxHQUFHLEtBQUssQ0FBQztLQUsxQjtJQUhRLEtBQUs7UUFDVixPQUFPLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGdCQUFnQixJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLEtBQUssS0FBSyxDQUFDO0lBQzlFLENBQUM7O2dJQVhVLGtDQUFrQztvSEFBbEMsa0NBQWtDLG1MQ1QvQyw4UUFRQTs0RkRDYSxrQ0FBa0M7a0JBTjlDLFNBQVM7K0JBQ0UsOEJBQThCLGlCQUd6QixpQkFBaUIsQ0FBQyxJQUFJOzhCQUc1QixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQ2FwYWJpbGl0eSB9IGZyb20gXCIuLi9lc3NlbnRpYWxzL2ludGVyZmFjZXMvY2FwYWJpbGl0eS5pbnRlcmZhY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1hcGEtY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXJcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9jYXBhYmlsaXR5LWludGVydmFsLWJhci5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXIuY29tcG9uZW50LnNjc3NcIl0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIE1hcGFDYXBhYmlsaXR5SW50ZXJ2YWxCYXJDb21wb25lbnQge1xuICBASW5wdXQoKSBkYXRhITogQ2FwYWJpbGl0eTtcbiAgQElucHV0KCkgZXhwYW5kZWQ/OiBib29sZWFuO1xuICBASW5wdXQoKSBzaG93SW50ZXJ2YWwhOiBib29sZWFuO1xuICBAT3V0cHV0KCkgY2xpY2tlZDogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIHB1YmxpYyBpc0hvdmVyaW5nID0gZmFsc2U7XG4gIHB1YmxpYyBpc0NsaWNrZWQgPSBmYWxzZTtcblxuICBwdWJsaWMgaXNTVkcoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICEhdGhpcy5kYXRhLmNsYXNzaWZpY2F0aW9uQmcgJiYgdGhpcy5kYXRhLmNsYXNzaWZpY2F0aW9uQmcgPT09IFwiU1ZHXCI7XG4gIH1cbn1cbiIsIjxzZWN0aW9uIHJldXNhYmxlLW91dGxldCBjbGFzcz1cImNhcGFiaWxpdHktaW50ZXJ2YWxcIj5cbiAgPHNlY3Rpb24gW2NsYXNzLmNhcGFiaWxpdHktaW50ZXJ2YWxfX2Jhcl09XCJpc1NWRygpXCI+XG4gICAgPG1hcGEtY2FwYWJpbGl0eS1pbnRlcnZhbFxuICAgICAgW2RhdGFdPVwiZGF0YVwiXG4gICAgICBbc2hvd0ludGVydmFsXT1cInNob3dJbnRlcnZhbFwiXG4gICAgPjwvbWFwYS1jYXBhYmlsaXR5LWludGVydmFsPlxuICA8L3NlY3Rpb24+XG48L3NlY3Rpb24+XG4iXX0=

package/esm2020/src/lib/components/capability/lib/components/capability/src/essentials/services/reusable-interval-bar.service.mjs

@@ -1,21 +1,29 @@
 import { Injectable } from "@angular/core";
 import { NavigationStart } from "@angular/router";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
 import { MapaCapabilityIntervalBarComponent } from "../../capability-interval-bar/capability-interval-bar.component";
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 export class ReusableCapabilityIntervalBarService {
     constructor(componentFactoryResolver, injector, router) {
         this.componentFactoryResolver = componentFactoryResolver;
-        this.injector = injector;
         this.router = router;
+        this.onDestroy$ = new Subject();
         const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MapaCapabilityIntervalBarComponent);
         this.componentRef = componentFactory.create(injector);
-        this.router.events.subscribe((event) => {
+        this.router.events
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((event) => {
             if (event instanceof NavigationStart && this.currentViewContainerRef) {
                 this.detach(this.currentViewContainerRef);
             }
         });
     }
+    ngOnDestroy() {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
     attach(viewContainerRef) {
         this.currentViewContainerRef = viewContainerRef;
         viewContainerRef.insert(this.componentRef.hostView);
@@ -29,4 +37,4 @@ ReusableCapabilityIntervalBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVe
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReusableCapabilityIntervalBarService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i1.Router }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmV1c2FibGUtaW50ZXJ2YWwtYmFyLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2Vzc2VudGlhbHMvc2VydmljZXMvcmV1c2FibGUtaW50ZXJ2YWwtYmFyLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUtMLFVBQVUsRUFDWCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQVUsZUFBZSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGtDQUFrQyxFQUFFLE1BQU0saUVBQWlFLENBQUM7OztBQUdySCxNQUFNLE9BQU8sb0NBQW9DO0lBSy9DLFlBQ1Usd0JBQWtELEVBQ2xELFFBQWtCLEVBQ2xCLE1BQWM7UUFGZCw2QkFBd0IsR0FBeEIsd0JBQXdCLENBQTBCO1FBQ2xELGFBQVEsR0FBUixRQUFRLENBQVU7UUFDbEIsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUV0QixNQUFNLGdCQUFnQixHQUFHLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyx1QkFBdUIsQ0FDNUUsa0NBQWtDLENBQ25DLENBQUM7UUFDRixJQUFJLENBQUMsWUFBWSxHQUFHLGdCQUFnQixDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUV0RCxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUNyQyxJQUFJLEtBQUssWUFBWSxlQUFlLElBQUksSUFBSSxDQUFDLHVCQUF1QixFQUFFO2dCQUNwRSxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxDQUFDO2FBQzNDO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU0sTUFBTSxDQUFDLGdCQUFrQztRQUM5QyxJQUFJLENBQUMsdUJBQXVCLEdBQUcsZ0JBQWdCLENBQUM7UUFDaEQsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDdEQsQ0FBQztJQUVNLE1BQU0sQ0FBQyxnQkFBa0M7UUFDOUMsZ0JBQWdCLENBQUMsTUFBTSxDQUNyQixnQkFBZ0IsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FDckQsQ0FBQztJQUNKLENBQUM7O2tJQS9CVSxvQ0FBb0M7c0lBQXBDLG9DQUFvQzs0RkFBcEMsb0NBQW9DO2tCQURoRCxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50UmVmLFxuICBWaWV3Q29udGFpbmVyUmVmLFxuICBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXG4gIEluamVjdG9yLFxuICBJbmplY3RhYmxlXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBSb3V0ZXIsIE5hdmlnYXRpb25TdGFydCB9IGZyb20gXCJAYW5ndWxhci9yb3V0ZXJcIjtcbmltcG9ydCB7IE1hcGFDYXBhYmlsaXR5SW50ZXJ2YWxCYXJDb21wb25lbnQgfSBmcm9tIFwiLi4vLi4vY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXIvY2FwYWJpbGl0eS1pbnRlcnZhbC1iYXIuY29tcG9uZW50XCI7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBSZXVzYWJsZUNhcGFiaWxpdHlJbnRlcnZhbEJhclNlcnZpY2Uge1xuICBwcml2YXRlIGNvbXBvbmVudFJlZjogQ29tcG9uZW50UmVmPE1hcGFDYXBhYmlsaXR5SW50ZXJ2YWxCYXJDb21wb25lbnQ+O1xuXG4gIHByaXZhdGUgY3VycmVudFZpZXdDb250YWluZXJSZWYhOiBWaWV3Q29udGFpbmVyUmVmO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgY29tcG9uZW50RmFjdG9yeVJlc29sdmVyOiBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXG4gICAgcHJpdmF0ZSBpbmplY3RvcjogSW5qZWN0b3IsXG4gICAgcHJpdmF0ZSByb3V0ZXI6IFJvdXRlclxuICApIHtcbiAgICBjb25zdCBjb21wb25lbnRGYWN0b3J5ID0gdGhpcy5jb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIucmVzb2x2ZUNvbXBvbmVudEZhY3RvcnkoXG4gICAgICBNYXBhQ2FwYWJpbGl0eUludGVydmFsQmFyQ29tcG9uZW50XG4gICAgKTtcbiAgICB0aGlzLmNvbXBvbmVudFJlZiA9IGNvbXBvbmVudEZhY3RvcnkuY3JlYXRlKGluamVjdG9yKTtcblxuICAgIHRoaXMucm91dGVyLmV2ZW50cy5zdWJzY3JpYmUoKGV2ZW50KSA9PiB7XG4gICAgICBpZiAoZXZlbnQgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uU3RhcnQgJiYgdGhpcy5jdXJyZW50Vmlld0NvbnRhaW5lclJlZikge1xuICAgICAgICB0aGlzLmRldGFjaCh0aGlzLmN1cnJlbnRWaWV3Q29udGFpbmVyUmVmKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuXG4gIHB1YmxpYyBhdHRhY2godmlld0NvbnRhaW5lclJlZjogVmlld0NvbnRhaW5lclJlZikge1xuICAgIHRoaXMuY3VycmVudFZpZXdDb250YWluZXJSZWYgPSB2aWV3Q29udGFpbmVyUmVmO1xuICAgIHZpZXdDb250YWluZXJSZWYuaW5zZXJ0KHRoaXMuY29tcG9uZW50UmVmLmhvc3RWaWV3KTtcbiAgfVxuXG4gIHB1YmxpYyBkZXRhY2godmlld0NvbnRhaW5lclJlZjogVmlld0NvbnRhaW5lclJlZikge1xuICAgIHZpZXdDb250YWluZXJSZWYuZGV0YWNoKFxuICAgICAgdmlld0NvbnRhaW5lclJlZi5pbmRleE9mKHRoaXMuY29tcG9uZW50UmVmLmhvc3RWaWV3KVxuICAgICk7XG4gIH1cbn1cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmV1c2FibGUtaW50ZXJ2YWwtYmFyLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2NhcGFiaWxpdHkvc3JjL2Vzc2VudGlhbHMvc2VydmljZXMvcmV1c2FibGUtaW50ZXJ2YWwtYmFyLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUtMLFVBQVUsRUFFWCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsZUFBZSxFQUFVLE1BQU0saUJBQWlCLENBQUM7QUFDMUQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFFLGtDQUFrQyxFQUFFLE1BQU0saUVBQWlFLENBQUM7OztBQUdySCxNQUFNLE9BQU8sb0NBQW9DO0lBSy9DLFlBQ1Usd0JBQWtELEVBQzFELFFBQWtCLEVBQ1YsTUFBYztRQUZkLDZCQUF3QixHQUF4Qix3QkFBd0IsQ0FBMEI7UUFFbEQsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUxQLGVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO1FBT2hELE1BQU0sZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLHVCQUF1QixDQUM1RSxrQ0FBa0MsQ0FDbkMsQ0FBQztRQUNGLElBQUksQ0FBQyxZQUFZLEdBQUcsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBRXRELElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTTthQUNmLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO2FBQ2hDLFNBQVMsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFO1lBQ25CLElBQUksS0FBSyxZQUFZLGVBQWUsSUFBSSxJQUFJLENBQUMsdUJBQXVCLEVBQUU7Z0JBQ3BFLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLHVCQUF1QixDQUFDLENBQUM7YUFDM0M7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFTSxNQUFNLENBQUMsZ0JBQWtDO1FBQzlDLElBQUksQ0FBQyx1QkFBdUIsR0FBRyxnQkFBZ0IsQ0FBQztRQUNoRCxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUN0RCxDQUFDO0lBRU0sTUFBTSxDQUFDLGdCQUFrQztRQUM5QyxnQkFBZ0IsQ0FBQyxNQUFNLENBQ3JCLGdCQUFnQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUNyRCxDQUFDO0lBQ0osQ0FBQzs7a0lBdENVLG9DQUFvQztzSUFBcEMsb0NBQW9DOzRGQUFwQyxvQ0FBb0M7a0JBRGhELFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnRSZWYsXG4gIFZpZXdDb250YWluZXJSZWYsXG4gIENvbXBvbmVudEZhY3RvcnlSZXNvbHZlcixcbiAgSW5qZWN0b3IsXG4gIEluamVjdGFibGUsXG4gIE9uRGVzdHJveVxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgTmF2aWdhdGlvblN0YXJ0LCBSb3V0ZXIgfSBmcm9tIFwiQGFuZ3VsYXIvcm91dGVyXCI7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSBcInJ4anNcIjtcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gXCJyeGpzL29wZXJhdG9yc1wiO1xuaW1wb3J0IHsgTWFwYUNhcGFiaWxpdHlJbnRlcnZhbEJhckNvbXBvbmVudCB9IGZyb20gXCIuLi8uLi9jYXBhYmlsaXR5LWludGVydmFsLWJhci9jYXBhYmlsaXR5LWludGVydmFsLWJhci5jb21wb25lbnRcIjtcblxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIFJldXNhYmxlQ2FwYWJpbGl0eUludGVydmFsQmFyU2VydmljZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgY29tcG9uZW50UmVmOiBDb21wb25lbnRSZWY8TWFwYUNhcGFiaWxpdHlJbnRlcnZhbEJhckNvbXBvbmVudD47XG4gIHByaXZhdGUgY3VycmVudFZpZXdDb250YWluZXJSZWYhOiBWaWV3Q29udGFpbmVyUmVmO1xuICBwcml2YXRlIHJlYWRvbmx5IG9uRGVzdHJveSQgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgY29tcG9uZW50RmFjdG9yeVJlc29sdmVyOiBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsXG4gICAgaW5qZWN0b3I6IEluamVjdG9yLFxuICAgIHByaXZhdGUgcm91dGVyOiBSb3V0ZXJcbiAgKSB7XG4gICAgY29uc3QgY29tcG9uZW50RmFjdG9yeSA9IHRoaXMuY29tcG9uZW50RmFjdG9yeVJlc29sdmVyLnJlc29sdmVDb21wb25lbnRGYWN0b3J5KFxuICAgICAgTWFwYUNhcGFiaWxpdHlJbnRlcnZhbEJhckNvbXBvbmVudFxuICAgICk7XG4gICAgdGhpcy5jb21wb25lbnRSZWYgPSBjb21wb25lbnRGYWN0b3J5LmNyZWF0ZShpbmplY3Rvcik7XG5cbiAgICB0aGlzLnJvdXRlci5ldmVudHNcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLm9uRGVzdHJveSQpKVxuICAgICAgLnN1YnNjcmliZSgoZXZlbnQpID0+IHtcbiAgICAgICAgaWYgKGV2ZW50IGluc3RhbmNlb2YgTmF2aWdhdGlvblN0YXJ0ICYmIHRoaXMuY3VycmVudFZpZXdDb250YWluZXJSZWYpIHtcbiAgICAgICAgICB0aGlzLmRldGFjaCh0aGlzLmN1cnJlbnRWaWV3Q29udGFpbmVyUmVmKTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLm9uRGVzdHJveSQubmV4dCgpO1xuICAgIHRoaXMub25EZXN0cm95JC5jb21wbGV0ZSgpO1xuICB9XG5cbiAgcHVibGljIGF0dGFjaCh2aWV3Q29udGFpbmVyUmVmOiBWaWV3Q29udGFpbmVyUmVmKSB7XG4gICAgdGhpcy5jdXJyZW50Vmlld0NvbnRhaW5lclJlZiA9IHZpZXdDb250YWluZXJSZWY7XG4gICAgdmlld0NvbnRhaW5lclJlZi5pbnNlcnQodGhpcy5jb21wb25lbnRSZWYuaG9zdFZpZXcpO1xuICB9XG5cbiAgcHVibGljIGRldGFjaCh2aWV3Q29udGFpbmVyUmVmOiBWaWV3Q29udGFpbmVyUmVmKSB7XG4gICAgdmlld0NvbnRhaW5lclJlZi5kZXRhY2goXG4gICAgICB2aWV3Q29udGFpbmVyUmVmLmluZGV4T2YodGhpcy5jb21wb25lbnRSZWYuaG9zdFZpZXcpXG4gICAgKTtcbiAgfVxufVxuXG4iXX0=