mapa-library-ui 0.0.41 → 0.0.42

package/fesm2020/mapa-library-ui-src-lib-components-capability.mjs

@@ -282,63 +282,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Public API Surface of mapa-library-ui icon
  */
 
-const CapabilityClassification = [
+const CAPABILITY_CLASSIFICATION = [
     {
-        classificationId: 1,
-        classificationName: "Destaque",
+        id: 1,
+        name: "Destaque",
         color: "#96f2ee",
         positive: true,
     },
     {
-        classificationId: 2,
-        classificationName: "Satisfatório",
+        id: 2,
+        name: "Satisfatório",
         color: "#68ceee",
         positive: true,
     },
     {
-        classificationId: 3,
-        classificationName: "Adequado",
+        id: 3,
+        name: "Adequado",
         color: "#2d9ced",
         positive: true,
     },
     {
-        classificationId: 4,
-        classificationName: "A desenvolver",
+        id: 4,
+        name: "A desenvolver",
         color: "#0e6ece",
         positive: true,
     },
     {
-        classificationId: 5,
-        classificationName: "Crítico baixo",
+        id: 5,
+        name: "Crítico baixo",
         color: "#073e92",
         positive: true,
     },
     {
-        classificationId: 6,
-        classificationName: "Merece atenção baixo",
+        id: 6,
+        name: "Merece atenção baixo",
         color: "#f56580",
         positive: false,
     },
     {
-        classificationId: 7,
-        classificationName: "Adequado",
+        id: 7,
+        name: "Adequado",
         color: "#f598a7",
         positive: false,
     },
     {
-        classificationId: 8,
-        classificationName: "Merece atenção alto",
+        id: 8,
+        name: "Merece atenção alto",
         color: "#f4284e",
         positive: false,
     },
     {
-        classificationId: 9,
-        classificationName: "Crítico alto",
+        id: 9,
+        name: "Crítico alto",
         color: "#c11c2f",
         positive: false,
     },
 ];
 
+class CapabilityClassificationService {
+    getByItem(item) {
+        return (CAPABILITY_CLASSIFICATION.find((classification) => classification.id === item.classificationId) || CAPABILITY_CLASSIFICATION[0]);
+    }
+}
+CapabilityClassificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CapabilityClassificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CapabilityClassificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CapabilityClassificationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CapabilityClassificationService, decorators: [{
+            type: Injectable
+        }] });
+
 class TagComponent {
 }
 TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -353,16 +364,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class MapaCapabilityDotComponent {
-    getClassificationName(item) {
-        return (CapabilityClassification.find((classification) => classification.classificationId === item.classificationId)?.classificationName || "");
+    constructor(classification) {
+        this.classification = classification;
     }
 }
-MapaCapabilityDotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityDotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: { type: "type", item: "item", tooltip: "tooltip", capability: "capability" }, ngImport: i0, template: "<p\n  *ngIf=\"!tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong class=\"tooltip-info--direction\" *ngIf=\"item.direction === 'Negativa'\">\u2198\uFE0E</strong>\n    <strong class=\"tooltip-info--direction\" *ngIf=\"item.direction === 'Positiva'\">\u2197</strong>\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [ngClass]=\"'classification-' + item.classificationId\"\n      ></p>\n      {{ getClassificationName(item) }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MapaTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "position", "theme", "showDelay", "hideDelay"] }, { kind: "component", type: TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }] });
+MapaCapabilityDotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityDotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: { type: "type", item: "item", tooltip: "tooltip", capability: "capability" }, ngImport: i0, template: "<p\n  *ngIf=\"!tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong class=\"tooltip-info--direction\" *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E</strong>\n    <strong class=\"tooltip-info--direction\" *ngIf=\"classification.getByItem(item).positive\">\u2197</strong>\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [ngClass]=\"'classification-' + item.classificationId\"\n      ></p>\n      {{ classification.getByItem(item).name }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MapaTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "position", "theme", "showDelay", "hideDelay"] }, { kind: "component", type: TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-dot", template: "<p\n  *ngIf=\"!tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong class=\"tooltip-info--direction\" *ngIf=\"item.direction === 'Negativa'\">\u2198\uFE0E</strong>\n    <strong class=\"tooltip-info--direction\" *ngIf=\"item.direction === 'Positiva'\">\u2197</strong>\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [ngClass]=\"'classification-' + item.classificationId\"\n      ></p>\n      {{ getClassificationName(item) }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"] }]
-        }], propDecorators: { type: [{
+            args: [{ selector: "mapa-capability-dot", template: "<p\n  *ngIf=\"!tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong class=\"tooltip-info--direction\" *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E</strong>\n    <strong class=\"tooltip-info--direction\" *ngIf=\"classification.getByItem(item).positive\">\u2197</strong>\n\n    <h5>{{ item.name }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [ngClass]=\"'classification-' + item.classificationId\"\n      ></p>\n      {{ classification.getByItem(item).name }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0;font-family:SF-Pro;font-size:14px;font-style:normal;font-weight:600}.tooltip-info--direction{padding-right:6px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"] }]
+        }], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { type: [{
                 type: Input
             }], item: [{
                 type: Input
@@ -400,27 +411,28 @@ class MapaCapabilityDotModule {
 }
 MapaCapabilityDotModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MapaCapabilityDotModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotModule, declarations: [MapaCapabilityDotComponent], imports: [CommonModule, MapaTooltipModule, MapaTagModule], exports: [MapaCapabilityDotComponent] });
-MapaCapabilityDotModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotModule, imports: [CommonModule, MapaTooltipModule, MapaTagModule] });
+MapaCapabilityDotModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotModule, providers: [CapabilityClassificationService], imports: [CommonModule, MapaTooltipModule, MapaTagModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDotModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MapaCapabilityDotComponent],
                     exports: [MapaCapabilityDotComponent],
                     imports: [CommonModule, MapaTooltipModule, MapaTagModule],
+                    providers: [CapabilityClassificationService],
                 }]
         }] });
 
 class MapaCapabilityExpandComponent {
-    getClassificationName(item) {
-        return CapabilityClassification.find((classification) => classification.classificationId === item.classificationId)?.classificationName || '';
+    constructor(classification) {
+        this.classification = classification;
     }
 }
-MapaCapabilityExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"capability__concept\">\n  <div>\n    <strong>Conceito</strong>\n    <p>\n      {{ data.concept }}\n    </p>\n  </div>\n  <div>\n    <strong>Resultado</strong>\n    <p>\n      {{ data.result }}\n    </p>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <strong>{{ item.name }}</strong>\n      <mapa-tag size=\"small\">\n        <mapa-capability-dot\n          [item]=\"item\"\n        ></mapa-capability-dot>\n        {{ getClassificationName(item) }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"classificationName\">\n      <strong *ngIf=\"item.direction === 'Negativa'\">\u2198\uFE0E Dire\u00E7\u00E3o Negativa</strong> \n      <strong *ngIf=\"item.direction === 'Positiva'\">\u2197 Dire\u00E7\u00E3o Positiva</strong>\n      | {{ item.description }}\n    </p>\n  </div>\n</div>\n", styles: [".capability__concept{display:flex;flex:1 1 48%;gap:42px;margin:24px 0 60px}.capability__concept div{width:48%}.capability__concept strong{display:block;margin-bottom:16px}.capability__expanded{border-top:1px solid #8c8f94;padding:36px 16px 16px;display:flex;flex-wrap:wrap;flex:0 0 30%;justify-content:flex-start;gap:30px}.capability__expanded--item{width:30%}.capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item .classificationName{color:#8c8f94}.capability__expanded--item mapa-tag .tag{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px!important;font-size:14px;height:18px}\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: TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }], encapsulation: i0.ViewEncapsulation.None });
+MapaCapabilityExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, deps: [{ token: CapabilityClassificationService }], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"capability__concept\">\n  <div>\n    <strong>Conceito</strong>\n    <p>\n      {{ data.concept }}\n    </p>\n  </div>\n  <div>\n    <strong>Resultado</strong>\n    <p>\n      {{ data.result }}\n    </p>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <strong>{{ item.name }}</strong>\n      <mapa-tag size=\"small\">\n        <mapa-capability-dot\n          [item]=\"item\"\n        ></mapa-capability-dot>\n        {{ classification.getByItem(item).name }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"classificationName\">\n      <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E Dire\u00E7\u00E3o Negativa</strong> \n      <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 Dire\u00E7\u00E3o Positiva</strong>\n      | {{ item.description }}\n    </p>\n  </div>\n</div>\n", styles: [".capability__concept{display:flex;flex:1 1 48%;gap:42px;margin:24px 0 60px}.capability__concept div{width:48%}.capability__concept strong{display:block;margin-bottom:16px}.capability__expanded{border-top:1px solid #8c8f94;padding:36px 16px 16px;display:flex;flex-wrap:wrap;flex:0 0 30%;justify-content:flex-start;gap:30px}.capability__expanded--item{width:30%}.capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item .classificationName{color:#8c8f94}.capability__expanded--item mapa-tag .tag{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px!important;font-size:14px;height:18px}\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: TagComponent, selector: "mapa-tag", inputs: ["color", "size"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-expand", encapsulation: ViewEncapsulation.None, template: "<div class=\"capability__concept\">\n  <div>\n    <strong>Conceito</strong>\n    <p>\n      {{ data.concept }}\n    </p>\n  </div>\n  <div>\n    <strong>Resultado</strong>\n    <p>\n      {{ data.result }}\n    </p>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <strong>{{ item.name }}</strong>\n      <mapa-tag size=\"small\">\n        <mapa-capability-dot\n          [item]=\"item\"\n        ></mapa-capability-dot>\n        {{ getClassificationName(item) }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"classificationName\">\n      <strong *ngIf=\"item.direction === 'Negativa'\">\u2198\uFE0E Dire\u00E7\u00E3o Negativa</strong> \n      <strong *ngIf=\"item.direction === 'Positiva'\">\u2197 Dire\u00E7\u00E3o Positiva</strong>\n      | {{ item.description }}\n    </p>\n  </div>\n</div>\n", styles: [".capability__concept{display:flex;flex:1 1 48%;gap:42px;margin:24px 0 60px}.capability__concept div{width:48%}.capability__concept strong{display:block;margin-bottom:16px}.capability__expanded{border-top:1px solid #8c8f94;padding:36px 16px 16px;display:flex;flex-wrap:wrap;flex:0 0 30%;justify-content:flex-start;gap:30px}.capability__expanded--item{width:30%}.capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item .classificationName{color:#8c8f94}.capability__expanded--item mapa-tag .tag{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px!important;font-size:14px;height:18px}\n"] }]
-        }], propDecorators: { data: [{
+            args: [{ selector: "mapa-capability-expand", encapsulation: ViewEncapsulation.None, template: "<div class=\"capability__concept\">\n  <div>\n    <strong>Conceito</strong>\n    <p>\n      {{ data.concept }}\n    </p>\n  </div>\n  <div>\n    <strong>Resultado</strong>\n    <p>\n      {{ data.result }}\n    </p>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <strong>{{ item.name }}</strong>\n      <mapa-tag size=\"small\">\n        <mapa-capability-dot\n          [item]=\"item\"\n        ></mapa-capability-dot>\n        {{ classification.getByItem(item).name }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"classificationName\">\n      <strong *ngIf=\"!classification.getByItem(item).positive\">\u2198\uFE0E Dire\u00E7\u00E3o Negativa</strong> \n      <strong *ngIf=\"classification.getByItem(item).positive\">\u2197 Dire\u00E7\u00E3o Positiva</strong>\n      | {{ item.description }}\n    </p>\n  </div>\n</div>\n", styles: [".capability__concept{display:flex;flex:1 1 48%;gap:42px;margin:24px 0 60px}.capability__concept div{width:48%}.capability__concept strong{display:block;margin-bottom:16px}.capability__expanded{border-top:1px solid #8c8f94;padding:36px 16px 16px;display:flex;flex-wrap:wrap;flex:0 0 30%;justify-content:flex-start;gap:30px}.capability__expanded--item{width:30%}.capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item .classificationName{color:#8c8f94}.capability__expanded--item mapa-tag .tag{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px!important;font-size:14px;height:18px}\n"] }]
+        }], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
                 type: Input
             }] } });
 
@@ -428,13 +440,14 @@ class MapaCapabilityExpandModule {
 }
 MapaCapabilityExpandModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MapaCapabilityExpandModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandModule, declarations: [MapaCapabilityExpandComponent], imports: [CommonModule, MapaTagModule, MapaCapabilityDotModule], exports: [MapaCapabilityExpandComponent] });
-MapaCapabilityExpandModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandModule, imports: [CommonModule, MapaTagModule, MapaCapabilityDotModule] });
+MapaCapabilityExpandModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandModule, providers: [CapabilityClassificationService], imports: [CommonModule, MapaTagModule, MapaCapabilityDotModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityExpandModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MapaCapabilityExpandComponent],
                     exports: [MapaCapabilityExpandComponent],
                     imports: [CommonModule, MapaTagModule, MapaCapabilityDotModule],
+                    providers: [CapabilityClassificationService],
                 }]
         }] });
 
@@ -701,25 +714,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 
 class MapaCapabilityIndicatorListComponent {
-    constructor() {
+    constructor(classification) {
+        this.classification = classification;
         this.dataPositive = [];
         this.dataNegative = [];
         this.dataRiskPrecipitation = [];
         this.dataRiskNegligence = [];
     }
     ngOnInit() {
-        this.dataPositive = this.data.filter((item) => item.direction === "Positiva" && !item.risk);
-        this.dataNegative = this.data.filter((item) => item.direction === "Negativa" && !item.risk);
+        this.dataPositive = this.data.filter((item) => this.classification.getByItem(item).positive && !item.risk);
+        this.dataNegative = this.data.filter((item) => !this.classification.getByItem(item).positive && !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);
     }
 }
-MapaCapabilityIndicatorListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityIndicatorListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, deps: [{ token: CapabilityClassificationService }], 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\n      *ngFor=\"let item of dataPositive\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataNegative\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores de risco</h2>\n    <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskPrecipitation\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n    <h3>Risco de acidente por neglig\u00EAncia</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskNegligence\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\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:SF-Pro;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:SF-Pro;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:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item", "fullWidth"] }] });
 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\n      *ngFor=\"let item of dataPositive\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataNegative\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores de risco</h2>\n    <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskPrecipitation\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\n    <h3>Risco de acidente por neglig\u00EAncia</h3>\n    <mapa-capability-indicator\n      *ngFor=\"let item of dataRiskNegligence\"\n      [item]=\"item\"\n      [fullWidth]=\"true\">\n    </mapa-capability-indicator>\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:SF-Pro;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:SF-Pro;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:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
                 type: Input
             }] } });
 
@@ -727,17 +741,21 @@ class MapaCapabilityIndicatorListModule {
 }
 MapaCapabilityIndicatorListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MapaCapabilityIndicatorListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListModule, declarations: [MapaCapabilityIndicatorListComponent], imports: [CommonModule, MapaCapabilityIndicatorModule], exports: [MapaCapabilityIndicatorListComponent] });
-MapaCapabilityIndicatorListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListModule, imports: [CommonModule, MapaCapabilityIndicatorModule] });
+MapaCapabilityIndicatorListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListModule, providers: [CapabilityClassificationService], imports: [CommonModule, MapaCapabilityIndicatorModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MapaCapabilityIndicatorListComponent],
                     exports: [MapaCapabilityIndicatorListComponent],
                     imports: [CommonModule, MapaCapabilityIndicatorModule],
+                    providers: [CapabilityClassificationService],
                 }]
         }] });
 
 class MapaCapabilityIndicatorChartComponent {
+    constructor(classification) {
+        this.classification = classification;
+    }
     setUnlabeledItem(item) {
         return {
             classificationId: item.classificationId,
@@ -745,12 +763,12 @@ class MapaCapabilityIndicatorChartComponent {
         };
     }
 }
-MapaCapabilityIndicatorChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, deps: [], 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--negative\">\n      <mapa-capability-indicator\n        *ngIf=\"item.direction === 'Negativa'\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--positive\">\n      <mapa-capability-indicator\n        *ngIf=\"item.direction === 'Positiva'\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.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--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\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: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item", "fullWidth"] }], encapsulation: i0.ViewEncapsulation.None });
+MapaCapabilityIndicatorChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartComponent, deps: [{ token: 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--negative\">\n      <mapa-capability-indicator\n        *ngIf=\"!classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--positive\">\n      <mapa-capability-indicator\n        *ngIf=\"classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.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--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\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: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item", "fullWidth"] }], 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--negative\">\n      <mapa-capability-indicator\n        *ngIf=\"item.direction === 'Negativa'\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--positive\">\n      <mapa-capability-indicator\n        *ngIf=\"item.direction === 'Positiva'\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.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--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"] }]
-        }], propDecorators: { data: [{
+            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--negative\">\n      <mapa-capability-indicator\n        *ngIf=\"!classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n    <td class=\"indicator-chart__column indicator-chart__column--positive\">\n      <mapa-capability-indicator\n        *ngIf=\"classification.getByItem(item).positive\"\n        [item]=\"setUnlabeledItem(item)\"\n      ></mapa-capability-indicator>\n    </td>\n  </tr>\n</table>\n", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__column--description{width:1%;white-space:nowrap;padding-right:24px}.indicator-chart__column--negative{display:flex;justify-content:flex-end}.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--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#fff}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f56580;color:#000}.classification-7{background-color:#f598a7;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}\n"] }]
+        }], ctorParameters: function () { return [{ type: CapabilityClassificationService }]; }, propDecorators: { data: [{
                 type: Input
             }] } });
 
@@ -758,13 +776,14 @@ class MapaCapabilityIndicatorChartModule {
 }
 MapaCapabilityIndicatorChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MapaCapabilityIndicatorChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartModule, declarations: [MapaCapabilityIndicatorChartComponent], imports: [CommonModule, MapaCapabilityIndicatorModule], exports: [MapaCapabilityIndicatorChartComponent] });
-MapaCapabilityIndicatorChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartModule, imports: [CommonModule, MapaCapabilityIndicatorModule] });
+MapaCapabilityIndicatorChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartModule, providers: [CapabilityClassificationService], imports: [CommonModule, MapaCapabilityIndicatorModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorChartModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MapaCapabilityIndicatorChartComponent],
                     exports: [MapaCapabilityIndicatorChartComponent],
                     imports: [CommonModule, MapaCapabilityIndicatorModule],
+                    providers: [CapabilityClassificationService],
                 }]
         }] });
 
@@ -780,5 +799,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, IconComponent, MapaButtonModule, MapaCapabilityDetailComponent, MapaCapabilityDetailModule, MapaCapabilityDotComponent, MapaCapabilityDotModule, MapaCapabilityExpandComponent, MapaCapabilityExpandModule, MapaCapabilityIndicatorChartComponent, MapaCapabilityIndicatorChartModule, MapaCapabilityIndicatorComponent, MapaCapabilityIndicatorListComponent, MapaCapabilityIndicatorListModule, MapaCapabilityIndicatorModule, MapaCapabilityIntervalComponent, MapaCapabilityIntervalModule, MapaIconModule, MapaTooltipComponent, MapaTooltipDirective, MapaTooltipModule };
+export { ButtonComponent, CapabilityClassificationService, IconComponent, MapaButtonModule, MapaCapabilityDetailComponent, MapaCapabilityDetailModule, MapaCapabilityDotComponent, MapaCapabilityDotModule, MapaCapabilityExpandComponent, MapaCapabilityExpandModule, MapaCapabilityIndicatorChartComponent, MapaCapabilityIndicatorChartModule, MapaCapabilityIndicatorComponent, MapaCapabilityIndicatorListComponent, MapaCapabilityIndicatorListModule, MapaCapabilityIndicatorModule, MapaCapabilityIntervalComponent, MapaCapabilityIntervalModule, MapaIconModule, MapaTooltipComponent, MapaTooltipDirective, MapaTooltipModule };
 //# sourceMappingURL=mapa-library-ui-src-lib-components-capability.mjs.map