mapa-library-ui 0.0.17 → 0.0.19

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

@@ -6,6 +6,8 @@ import { MatButtonModule } from '@angular/material/button';
 import * as i1$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/platform-browser';
+import * as i1$2 from '@angular/router';
+import { NavigationStart } from '@angular/router';
 import * as i2$1 from 'mapa-library-ui/src/lib/components/button';
 import { MapaButtonModule as MapaButtonModule$1 } from 'mapa-library-ui/src/lib/components/button';
 import * as i3 from 'mapa-library-ui/src/lib/components/checkbox';
@@ -14,8 +16,6 @@ import * as i4 from 'mapa-library-ui/src/lib/components/dropdown';
 import { MapaDropdownModule } from 'mapa-library-ui/src/lib/components/dropdown';
 import * as i5 from 'mapa-library-ui/src/lib/components/input';
 import { MapaInputModule } from 'mapa-library-ui/src/lib/components/input';
-import * as i1$2 from '@angular/router';
-import { NavigationStart } from '@angular/router';
 
 var TooltipPosition;
 (function (TooltipPosition) {
@@ -282,64 +282,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Public API Surface of mapa-library-ui icon
  */
 
-const CapabilityGrade = [
+const CapabilityClassification = [
     {
-        grade: 100,
-        description: "Destaque",
+        classificationId: 1,
+        classificationName: "Destaque",
         color: "#96f2ee",
         positive: true,
     },
     {
-        grade: 90,
-        description: "Destaque",
-        color: "#96f2ee",
-        positive: true,
-    },
-    {
-        grade: 80,
-        description: "Satisfatório",
+        classificationId: 2,
+        classificationName: "Satisfatório",
         color: "#68ceee",
         positive: true,
     },
     {
-        grade: 70,
-        description: "Adequado",
+        classificationId: 3,
+        classificationName: "Adequado",
         color: "#2d9ced",
         positive: true,
     },
     {
-        grade: 50,
-        description: "A desenvolver",
+        classificationId: 4,
+        classificationName: "A desenvolver",
         color: "#0e6ece",
         positive: true,
     },
     {
-        grade: 40,
-        description: "Crítico baixo",
+        classificationId: 5,
+        classificationName: "Crítico baixo",
         color: "#073e92",
         positive: true,
     },
     {
-        grade: -10,
-        description: "Merece atenção baixo",
+        classificationId: 6,
+        classificationName: "Merece atenção baixo",
         color: "#f56580",
         positive: false,
     },
     {
-        grade: -20,
-        description: "Adequado",
+        classificationId: 7,
+        classificationName: "Adequado",
         color: "#f598a7",
         positive: false,
     },
     {
-        grade: -30,
-        description: "Merece atenção alto",
+        classificationId: 8,
+        classificationName: "Merece atenção alto",
         color: "#f4284e",
         positive: false,
     },
     {
-        grade: -40,
-        description: "Crítico alto",
+        classificationId: 9,
+        classificationName: "Crítico alto",
         color: "#c11c2f",
         positive: false,
     },
@@ -359,17 +353,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class MapaCapabilityDotComponent {
-    getGradeDescription(item) {
-        const grade = Math.floor(item.grade / 10) * 10;
-        const gradeObject = CapabilityGrade.find((cp) => cp.grade === grade);
-        return gradeObject?.description || grade.toString();
+    getClassificationName(item) {
+        return (CapabilityClassification.find((classification) => classification.classificationId === item.classificationId)?.classificationName || "");
     }
 }
 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  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade < -60\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade < -60\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong *ngIf=\"item.grade < 0\">\u2198\uFE0E</strong>\n    <strong *ngIf=\"item.grade > 0\">\u2197</strong>\n\n    <h5>{{ capability?.title }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n        [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n        [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n        [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n        [class.grade-5]=\"item.grade >= 80\"\n        [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n        [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n        [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n        [class.grade-negative-4]=\"item.grade < -60\"\n      ></p>\n      {{ getGradeDescription(item) }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info .small-dot{margin-right:4px}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0}\n", ".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"], dependencies: [{ 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.ɵ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 *ngIf=\"item.direction === 'Negativa'\">\u2198\uFE0E</strong>\n    <strong *ngIf=\"item.direction === 'Positiva'\">\u2197</strong>\n\n    <h5>{{ capability?.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 .small-dot{margin-right:4px}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0}\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  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade < -60\"\n></p>\n<p\n  *ngIf=\"tooltip\"\n  [class.dot]=\"type !== 'small'\"\n  [class.small-dot]=\"type === 'small'\"\n  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade < -60\"\n  [tooltip]=\"tooltipTemplate\"\n></p>\n<ng-template #tooltipTemplate>\n  <div class=\"tooltip-info\">\n    <strong *ngIf=\"item.grade < 0\">\u2198\uFE0E</strong>\n    <strong *ngIf=\"item.grade > 0\">\u2197</strong>\n\n    <h5>{{ capability?.title }}</h5>\n\n    <mapa-tag size=\"small\">\n      <p\n        class=\"small-dot\"\n        [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n        [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n        [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n        [class.grade-4]=\"item.grade >= 60 && item.grade < 80\"\n        [class.grade-5]=\"item.grade >= 80\"\n        [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n        [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n        [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n        [class.grade-negative-4]=\"item.grade < -60\"\n      ></p>\n      {{ getGradeDescription(item) }}\n    </mapa-tag>\n  </div>\n</ng-template>\n", styles: [".tooltip-info{display:flex;align-items:center}.tooltip-info .small-dot{margin-right:4px}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0}\n", ".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"] }]
+            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 *ngIf=\"item.direction === 'Negativa'\">\u2198\uFE0E</strong>\n    <strong *ngIf=\"item.direction === 'Positiva'\">\u2197</strong>\n\n    <h5>{{ capability?.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 .small-dot{margin-right:4px}.tooltip-info strong{margin-right:2px}.tooltip-info h5{margin:0 5px 0 0}\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: [{
                 type: Input
             }], item: [{
@@ -419,17 +411,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 
 class MapaCapabilityExpandComponent {
-    getGradeDescription(item) {
-        const grade = Math.floor(item.grade / 10) * 10;
-        const gradeObject = CapabilityGrade.find((cp) => cp.grade === grade);
-        return gradeObject?.description || grade.toString();
+    getClassificationName(item) {
+        return CapabilityClassification.find((classification) => classification.classificationId === item.classificationId)?.classificationName || '';
     }
 }
 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=\"title\">\n      <strong>{{ item.title }}</strong>\n      <mapa-tag size=\"small\">\n        <mapa-capability-dot\n          [item]=\"item\"\n        ></mapa-capability-dot>\n        {{ getGradeDescription(item) }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"description\">\n      <strong *ngIf=\"item.grade < 0\">\u2198\uFE0E Dire\u00E7\u00E3o Negativa</strong> \n      <strong *ngIf=\"item.grade > 0\">\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:space-between;gap:30px}.capability__expanded--item{width:30%}.capability__expanded--item .title{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item .description{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.ɵ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 });
 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=\"title\">\n      <strong>{{ item.title }}</strong>\n      <mapa-tag size=\"small\">\n        <mapa-capability-dot\n          [item]=\"item\"\n        ></mapa-capability-dot>\n        {{ getGradeDescription(item) }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"description\">\n      <strong *ngIf=\"item.grade < 0\">\u2198\uFE0E Dire\u00E7\u00E3o Negativa</strong> \n      <strong *ngIf=\"item.grade > 0\">\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:space-between;gap:30px}.capability__expanded--item{width:30%}.capability__expanded--item .title{display:flex;justify-content:space-between;margin-bottom:16px}.capability__expanded--item .description{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"] }]
+            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: [{
                 type: Input
             }] } });
@@ -449,14 +439,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 
 class MapaCapabilityIndicatorComponent {
+    getWidth(item) {
+        return 32 + ((item.interval || 0) * 2) + 'px';
+    }
 }
 MapaCapabilityIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: { item: "item" }, ngImport: i0, template: "<p\n  class=\"indicator\"\n  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 70\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade > -60\"\n>\n    <span>{{ item.title }}</span>\n    <i>{{ item.grade }}</i>\n</p>\n", styles: ["", ".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"] });
+MapaCapabilityIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: { item: "item", fullWidth: "fullWidth" }, ngImport: i0, template: "<p\n  class=\"indicator\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n    <span>{{ item.name }}</span>\n    <span class=\"indicator__classification\">\n      {{ item.interval }}%\n    </span>\n</p>\n", styles: [".indicator{color:#fff}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px}\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-indicator", template: "<p\n  class=\"indicator\"\n  [class.grade-1]=\"item.grade >= 0 && item.grade < 20\"\n  [class.grade-2]=\"item.grade >= 20 && item.grade < 40\"\n  [class.grade-3]=\"item.grade >= 40 && item.grade < 60\"\n  [class.grade-4]=\"item.grade >= 60 && item.grade < 70\"\n  [class.grade-5]=\"item.grade >= 80\"\n  [class.grade-negative-1]=\"item.grade >= -20 && item.grade < 0\"\n  [class.grade-negative-2]=\"item.grade >= -40 && item.grade < -20\"\n  [class.grade-negative-3]=\"item.grade >= -60 && item.grade < -40\"\n  [class.grade-negative-4]=\"item.grade > -60\"\n>\n    <span>{{ item.title }}</span>\n    <i>{{ item.grade }}</i>\n</p>\n", styles: [".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"] }]
+            args: [{ selector: "mapa-capability-indicator", template: "<p\n  class=\"indicator\"\n  [ngClass]=\"'classification-' + item.classificationId\"\n  [style.width]=\"fullWidth ? '100%' : getWidth(item)\"\n>\n    <span>{{ item.name }}</span>\n    <span class=\"indicator__classification\">\n      {{ item.interval }}%\n    </span>\n</p>\n", styles: [".indicator{color:#fff}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px}\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: { item: [{
                 type: Input
+            }], fullWidth: [{
+                type: Input
             }] } });
 
 class MapaCapabilityIndicatorModule {
@@ -473,42 +468,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-class MapaCapabilityGradeComponent {
-    getGradeWidth(index) {
+class MapaCapabilityIntervalComponent {
+    getWidth(index) {
         if (!this.data)
             return 0;
-        const gradeMod10 = Math.floor(this.data.grade / 10) % 10;
-        return index < gradeMod10
+        const interval = this.data.interval || 0;
+        const intervalMod10 = Math.floor(interval / 10) % 10;
+        return index < intervalMod10
             ? 100
-            : index === gradeMod10
-                ? (this.data.grade % 10) * 10
+            : index === intervalMod10
+                ? (interval % 10) * 10
                 : 0;
     }
 }
-MapaCapabilityGradeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityGradeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityGradeComponent, selector: "mapa-capability-grade", inputs: { data: "data" }, ngImport: i0, template: "<ul class=\"capability__grade\">\n  <li class=\"capability__grade--item\" *ngFor=\"let item of [].constructor(9); let i = index\">\n    <div\n      class=\"capability__grade--percentage\"\n      [style.width.%]=\"getGradeWidth(i)\"\n    ></div>\n  </li>\n  <li>\n    <h1>{{ data?.grade }}</h1>\n  </li>\n</ul>\n", styles: [".capability__grade{display:flex;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__grade h1{margin-bottom:0;margin-left:16px}.capability__grade--item{height:35px;width:20px;background-color:#d9d9d9;border-radius:6px;margin-right:6px}.capability__grade--item:last-of-type{margin-right:0}.capability__grade--percentage{height:35px;width:20px;background-color:#8c8f94;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeComponent, decorators: [{
+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" }, ngImport: i0, template: "<ul class=\"capability__interval\">\n  <li class=\"capability__interval--item\" *ngFor=\"let item of [].constructor(9); let i = index\">\n    <div\n      class=\"capability__interval--percentage\"\n      [style.width.%]=\"getWidth(i)\"\n    ></div>\n  </li>\n  <li>\n    <h1>{{ data.interval }}</h1>\n  </li>\n</ul>\n", styles: [".capability__interval{display:flex;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval h1{margin-bottom:0;margin-left:16px}.capability__interval--item{height:35px;width:20px;background-color:#d9d9d9;border-radius:6px;margin-right:6px}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{height:35px;width:20px;background-color:#8c8f94;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-grade", template: "<ul class=\"capability__grade\">\n  <li class=\"capability__grade--item\" *ngFor=\"let item of [].constructor(9); let i = index\">\n    <div\n      class=\"capability__grade--percentage\"\n      [style.width.%]=\"getGradeWidth(i)\"\n    ></div>\n  </li>\n  <li>\n    <h1>{{ data?.grade }}</h1>\n  </li>\n</ul>\n", styles: [".capability__grade{display:flex;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__grade h1{margin-bottom:0;margin-left:16px}.capability__grade--item{height:35px;width:20px;background-color:#d9d9d9;border-radius:6px;margin-right:6px}.capability__grade--item:last-of-type{margin-right:0}.capability__grade--percentage{height:35px;width:20px;background-color:#8c8f94;border-radius:6px}\n"] }]
+            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\">\n  <li class=\"capability__interval--item\" *ngFor=\"let item of [].constructor(9); let i = index\">\n    <div\n      class=\"capability__interval--percentage\"\n      [style.width.%]=\"getWidth(i)\"\n    ></div>\n  </li>\n  <li>\n    <h1>{{ data.interval }}</h1>\n  </li>\n</ul>\n", styles: [".capability__interval{display:flex;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval h1{margin-bottom:0;margin-left:16px}.capability__interval--item{height:35px;width:20px;background-color:#d9d9d9;border-radius:6px;margin-right:6px}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{height:35px;width:20px;background-color:#8c8f94;border-radius:6px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });
 
-class MapaCapabilityGradeModule {
+class MapaCapabilityIntervalModule {
 }
-MapaCapabilityGradeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MapaCapabilityGradeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeModule, declarations: [MapaCapabilityGradeComponent], imports: [CommonModule], exports: [MapaCapabilityGradeComponent] });
-MapaCapabilityGradeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeModule, decorators: [{
+MapaCapabilityIntervalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityIntervalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalModule, declarations: [MapaCapabilityIntervalComponent], imports: [CommonModule], exports: [MapaCapabilityIntervalComponent] });
+MapaCapabilityIntervalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MapaCapabilityGradeComponent],
-                    exports: [MapaCapabilityGradeComponent],
+                    declarations: [MapaCapabilityIntervalComponent],
+                    exports: [MapaCapabilityIntervalComponent],
                     imports: [CommonModule],
                 }]
         }] });
 
-class MapaCapabilityGradeBarComponent {
+class MapaCapabilityIntervalBarComponent {
     constructor() {
         this.clicked = new EventEmitter();
         this.isHovering = false;
@@ -523,11 +519,11 @@ class MapaCapabilityGradeBarComponent {
         this.clicked.emit();
     }
 }
-MapaCapabilityGradeBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityGradeBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityGradeBarComponent, selector: "mapa-capability-grade-bar", inputs: { data: "data" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"capability-grade\"\n  (mouseover)=\"onHover()\"\n  (mouseout)=\"onMouseOut()\"\n  reusable-outlet\n>\n  <mapa-capability-grade\n    [ngClass]=\"{'capability-grade--hide': isHovering}\"\n    [data]=\"data\"\n  ></mapa-capability-grade>\n  <span\n    class=\"capability-grade--hide\"\n    [ngClass]=\"{'capability-grade--show': isHovering}\"\n  >\n    <mapa-button color=\"basic\" (click)=\"showMore()\">Veja mais</mapa-button>\n  </span>\n</div>\n", styles: [".capability-grade{border:1px solid #8c8f94;border-radius:16px;display:flex;align-items:center;justify-content:flex-end;padding:16px;height:35px;width:290px}.capability-grade--hide{display:none}.capability-grade--show{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityGradeComponent, selector: "mapa-capability-grade", inputs: ["data"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarComponent, decorators: [{
+MapaCapabilityIntervalBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: { data: "data" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"capability-interval\"\n  (mouseover)=\"onHover()\"\n  (mouseout)=\"onMouseOut()\"\n  reusable-outlet\n>\n  <mapa-capability-interval\n    [ngClass]=\"{'capability-interval--hide': isHovering}\"\n    [data]=\"data\"\n  ></mapa-capability-interval>\n  <span\n    class=\"capability-interval--hide\"\n    [ngClass]=\"{'capability-interval--show': isHovering}\"\n  >\n    <mapa-button color=\"basic\" (click)=\"showMore()\">Veja mais</mapa-button>\n  </span>\n</div>\n", styles: [".capability-interval{border:1px solid #8c8f94;border-radius:16px;display:flex;align-items:center;justify-content:flex-end;padding:16px;height:35px;width:290px}.capability-interval--hide{display:none}.capability-interval--show{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: ["data"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-grade-bar", template: "<div\n  class=\"capability-grade\"\n  (mouseover)=\"onHover()\"\n  (mouseout)=\"onMouseOut()\"\n  reusable-outlet\n>\n  <mapa-capability-grade\n    [ngClass]=\"{'capability-grade--hide': isHovering}\"\n    [data]=\"data\"\n  ></mapa-capability-grade>\n  <span\n    class=\"capability-grade--hide\"\n    [ngClass]=\"{'capability-grade--show': isHovering}\"\n  >\n    <mapa-button color=\"basic\" (click)=\"showMore()\">Veja mais</mapa-button>\n  </span>\n</div>\n", styles: [".capability-grade{border:1px solid #8c8f94;border-radius:16px;display:flex;align-items:center;justify-content:flex-end;padding:16px;height:35px;width:290px}.capability-grade--hide{display:none}.capability-grade--show{display:block}\n"] }]
+            args: [{ selector: "mapa-capability-interval-bar", template: "<div\n  class=\"capability-interval\"\n  (mouseover)=\"onHover()\"\n  (mouseout)=\"onMouseOut()\"\n  reusable-outlet\n>\n  <mapa-capability-interval\n    [ngClass]=\"{'capability-interval--hide': isHovering}\"\n    [data]=\"data\"\n  ></mapa-capability-interval>\n  <span\n    class=\"capability-interval--hide\"\n    [ngClass]=\"{'capability-interval--show': isHovering}\"\n  >\n    <mapa-button color=\"basic\" (click)=\"showMore()\">Veja mais</mapa-button>\n  </span>\n</div>\n", styles: [".capability-interval{border:1px solid #8c8f94;border-radius:16px;display:flex;align-items:center;justify-content:flex-end;padding:16px;height:35px;width:290px}.capability-interval--hide{display:none}.capability-interval--show{display:block}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], clicked: [{
@@ -538,8 +534,8 @@ class MapaCapabilityDetailComponent {
     constructor() {
         this.expanded = new Set();
     }
-    sortItemsByGrade(items) {
-        return items.sort((a, b) => b.grade - a.grade);
+    sortItemsByinterval(items) {
+        return items.sort((a, b) => b.interval - a.interval);
     }
     showMore(index) {
         if (this.expanded.has(index)) {
@@ -552,14 +548,41 @@ class MapaCapabilityDetailComponent {
     }
 }
 MapaCapabilityDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"capability\">\n  <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n    <div class=\"capability__item--header\">\n      <div>\n        <h1>{{ capability.title }}</h1>\n  \n        <div class=\"capability__item--dots\">\n          <mapa-capability-dot\n            *ngFor=\"let item of sortItemsByGrade(capability.items)\"\n            type=\"small\"\n            [item]=\"item\"\n            [capability]=\"capability\"\n            [tooltip]=\"true\"\n          ></mapa-capability-dot>\n        </div>\n      </div>\n  \n      <div class=\"capability__item--grade\">\n        <mapa-capability-grade-bar\n          [data]=\"capability\"\n          (clicked)=\"showMore(i)\"\n          reusable-grade-bar\n        ></mapa-capability-grade-bar>\n      </div>\n    </div>\n    <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n      <mapa-capability-expand\n        [data]=\"capability\"\n      ></mapa-capability-expand>\n    </div>\n  </div>\n</div>\n", styles: [".capability{border:1px solid #8c8f94;border-radius:16px}.capability h1{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__item{padding:16px 16px 0}.capability__item:not(:only-child){border-bottom:1px solid #8C8F94}.capability__item:last-child{border-bottom:unset}.capability__item--hide{display:none}.capability__item--show{display:block}.capability__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot{margin-right:8px}\n", ".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;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: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: MapaCapabilityGradeBarComponent, selector: "mapa-capability-grade-bar", inputs: ["data"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
+MapaCapabilityDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityDetailComponent, selector: "mapa-capability-detail", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"capability\">\n  <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n    <div class=\"capability__item--header\">\n      <div>\n        <h1>{{ capability.name }}</h1>\n  \n        <div class=\"capability__item--dots\">\n          <mapa-capability-dot\n            *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n            type=\"small\"\n            [item]=\"item\"\n            [capability]=\"capability\"\n            [tooltip]=\"true\"\n          ></mapa-capability-dot>\n        </div>\n      </div>\n  \n      <div class=\"capability__item--interval\">\n        <mapa-capability-interval-bar\n          [data]=\"capability\"\n          (clicked)=\"showMore(i)\"\n          reusable-interval-bar\n        ></mapa-capability-interval-bar>\n      </div>\n    </div>\n    <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n      <mapa-capability-expand\n        [data]=\"capability\"\n      ></mapa-capability-expand>\n    </div>\n  </div>\n</div>\n", styles: [".capability{border:1px solid #8c8f94;border-radius:16px}.capability h1{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__item{padding:16px 16px 0}.capability__item:not(:only-child){border-bottom:1px solid #8C8F94}.capability__item:last-child{border-bottom:unset}.capability__item--hide{display:none}.capability__item--show{display:block}.capability__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot{margin-right:8px}\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: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data"], outputs: ["clicked"] }, { kind: "component", type: MapaCapabilityExpandComponent, selector: "mapa-capability-expand", inputs: ["data"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<div class=\"capability\">\n  <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n    <div class=\"capability__item--header\">\n      <div>\n        <h1>{{ capability.title }}</h1>\n  \n        <div class=\"capability__item--dots\">\n          <mapa-capability-dot\n            *ngFor=\"let item of sortItemsByGrade(capability.items)\"\n            type=\"small\"\n            [item]=\"item\"\n            [capability]=\"capability\"\n            [tooltip]=\"true\"\n          ></mapa-capability-dot>\n        </div>\n      </div>\n  \n      <div class=\"capability__item--grade\">\n        <mapa-capability-grade-bar\n          [data]=\"capability\"\n          (clicked)=\"showMore(i)\"\n          reusable-grade-bar\n        ></mapa-capability-grade-bar>\n      </div>\n    </div>\n    <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n      <mapa-capability-expand\n        [data]=\"capability\"\n      ></mapa-capability-expand>\n    </div>\n  </div>\n</div>\n", styles: [".capability{border:1px solid #8c8f94;border-radius:16px}.capability h1{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__item{padding:16px 16px 0}.capability__item:not(:only-child){border-bottom:1px solid #8C8F94}.capability__item:last-child{border-bottom:unset}.capability__item--hide{display:none}.capability__item--show{display:block}.capability__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot{margin-right:8px}\n", ".grade-1{background-color:#96f2ee}.grade-2{background-color:#68ceee}.grade-3{background-color:#2d9ced}.grade-4{background-color:#0e6ece}.grade-5{background-color:#073e92}.grade-negative-1{background-color:#f56580}.grade-negative-2{background-color:#f598a7}.grade-negative-3{background-color:#f4284e}.grade-negative-4{background-color:#c11c2f}.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;width:408px;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px}\n"] }]
+            args: [{ selector: "mapa-capability-detail", encapsulation: ViewEncapsulation.None, template: "<div class=\"capability\">\n  <div *ngFor=\"let capability of data; let i = index\" class=\"capability__item\">\n    <div class=\"capability__item--header\">\n      <div>\n        <h1>{{ capability.name }}</h1>\n  \n        <div class=\"capability__item--dots\">\n          <mapa-capability-dot\n            *ngFor=\"let item of sortItemsByinterval(capability.items)\"\n            type=\"small\"\n            [item]=\"item\"\n            [capability]=\"capability\"\n            [tooltip]=\"true\"\n          ></mapa-capability-dot>\n        </div>\n      </div>\n  \n      <div class=\"capability__item--interval\">\n        <mapa-capability-interval-bar\n          [data]=\"capability\"\n          (clicked)=\"showMore(i)\"\n          reusable-interval-bar\n        ></mapa-capability-interval-bar>\n      </div>\n    </div>\n    <div [class.capability__item--show]=\"expanded.has(i)\" [class.capability__item--hide]=\"!expanded.has(i)\">\n      <mapa-capability-expand\n        [data]=\"capability\"\n      ></mapa-capability-expand>\n    </div>\n  </div>\n</div>\n", styles: [".capability{border:1px solid #8c8f94;border-radius:16px}.capability h1{font-family:SF Pro Display;font-size:32px;font-style:normal;font-weight:400;line-height:40px}.capability__item{padding:16px 16px 0}.capability__item:not(:only-child){border-bottom:1px solid #8C8F94}.capability__item:last-child{border-bottom:unset}.capability__item--hide{display:none}.capability__item--show{display:block}.capability__item--header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px}.capability__item--dots{display:flex}.capability__item--dots mapa-capability-dot{margin-right:8px}\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: [{
                 type: Input
             }] } });
 
+class ReusableCapabilityIntervalBarService {
+    constructor(componentFactoryResolver, injector, router) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.injector = injector;
+        this.router = router;
+        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MapaCapabilityIntervalBarComponent);
+        this.componentRef = componentFactory.create(injector);
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationStart && this.currentViewContainerRef) {
+                this.detach(this.currentViewContainerRef);
+            }
+        });
+    }
+    attach(viewContainerRef) {
+        this.currentViewContainerRef = viewContainerRef;
+        viewContainerRef.insert(this.componentRef.hostView);
+    }
+    detach(viewContainerRef) {
+        viewContainerRef.detach(viewContainerRef.indexOf(this.componentRef.hostView));
+    }
+}
+ReusableCapabilityIntervalBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReusableCapabilityIntervalBarService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+ReusableCapabilityIntervalBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReusableCapabilityIntervalBarService });
+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$2.Router }]; } });
+
 class FiltersComponent {
     constructor() {
         this.selectedValues = new EventEmitter();
@@ -625,63 +648,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Public API Surface of mapa-library-ui filters
  */
 
-class MapaCapabilityGradeBarModule {
+class MapaCapabilityIntervalBarModule {
 }
-MapaCapabilityGradeBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MapaCapabilityGradeBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarModule, declarations: [MapaCapabilityGradeBarComponent], imports: [CommonModule, MapaButtonModule, MapaCapabilityGradeModule], exports: [MapaCapabilityGradeBarComponent] });
-MapaCapabilityGradeBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarModule, imports: [CommonModule, MapaButtonModule, MapaCapabilityGradeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityGradeBarModule, decorators: [{
+MapaCapabilityIntervalBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MapaCapabilityIntervalBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarModule, declarations: [MapaCapabilityIntervalBarComponent], imports: [CommonModule, MapaButtonModule, MapaCapabilityIntervalModule], exports: [MapaCapabilityIntervalBarComponent] });
+MapaCapabilityIntervalBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarModule, imports: [CommonModule, MapaButtonModule, MapaCapabilityIntervalModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MapaCapabilityGradeBarComponent],
-                    exports: [MapaCapabilityGradeBarComponent],
-                    imports: [CommonModule, MapaButtonModule, MapaCapabilityGradeModule],
+                    declarations: [MapaCapabilityIntervalBarComponent],
+                    exports: [MapaCapabilityIntervalBarComponent],
+                    imports: [CommonModule, MapaButtonModule, MapaCapabilityIntervalModule],
                 }]
         }] });
 
-class ReusableCapabilityGradeBarService {
-    constructor(componentFactoryResolver, injector, router) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.injector = injector;
-        this.router = router;
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MapaCapabilityGradeBarComponent);
-        this.componentRef = componentFactory.create(injector);
-        this.router.events.subscribe((event) => {
-            if (event instanceof NavigationStart && this.currentViewContainerRef) {
-                this.detach(this.currentViewContainerRef);
-            }
-        });
-    }
-    attach(viewContainerRef) {
-        this.currentViewContainerRef = viewContainerRef;
-        viewContainerRef.insert(this.componentRef.hostView);
-    }
-    detach(viewContainerRef) {
-        viewContainerRef.detach(viewContainerRef.indexOf(this.componentRef.hostView));
-    }
-}
-ReusableCapabilityGradeBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReusableCapabilityGradeBarService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-ReusableCapabilityGradeBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReusableCapabilityGradeBarService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ReusableCapabilityGradeBarService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i1$2.Router }]; } });
-
 class MapaCapabilityDetailModule {
 }
 MapaCapabilityDetailModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MapaCapabilityDetailModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailModule, declarations: [MapaCapabilityDetailComponent], imports: [CommonModule,
         MapaCapabilityDotModule,
         MapaCapabilityIndicatorModule,
-        MapaCapabilityGradeModule,
-        MapaCapabilityGradeBarModule,
+        MapaCapabilityIntervalModule,
+        MapaCapabilityIntervalBarModule,
         MapaCapabilityExpandModule], exports: [MapaCapabilityDetailComponent] });
 MapaCapabilityDetailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailModule, providers: [
-        ReusableCapabilityGradeBarService,
+        ReusableCapabilityIntervalBarService,
     ], imports: [CommonModule,
         MapaCapabilityDotModule,
         MapaCapabilityIndicatorModule,
-        MapaCapabilityGradeModule,
-        MapaCapabilityGradeBarModule,
+        MapaCapabilityIntervalModule,
+        MapaCapabilityIntervalBarModule,
         MapaCapabilityExpandModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityDetailModule, decorators: [{
             type: NgModule,
@@ -694,16 +690,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         CommonModule,
                         MapaCapabilityDotModule,
                         MapaCapabilityIndicatorModule,
-                        MapaCapabilityGradeModule,
-                        MapaCapabilityGradeBarModule,
+                        MapaCapabilityIntervalModule,
+                        MapaCapabilityIntervalBarModule,
                         MapaCapabilityExpandModule,
                     ],
                     providers: [
-                        ReusableCapabilityGradeBarService,
+                        ReusableCapabilityIntervalBarService,
                     ],
                 }]
         }] });
 
+class MapaCapabilityIndicatorListComponent {
+    constructor() {
+        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.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.ɵ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: [{
+                type: Input
+            }] } });
+
+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] });
+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],
+                }]
+        }] });
+
+class MapaCapabilityIndicatorChartComponent {
+    setUnlabeledItem(item) {
+        return {
+            classificationId: item.classificationId,
+            interval: item.interval,
+        };
+    }
+}
+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%}.indicator-chart__column{width:275px}.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%}.indicator-chart__column{width:275px}.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: [{
+                type: Input
+            }] } });
+
+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] });
+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],
+                }]
+        }] });
+
 /*
  * Public API Surface of mapa-library-ui capability-detail
  */
@@ -716,5 +780,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, MapaCapabilityGradeComponent, MapaCapabilityGradeModule, MapaCapabilityIndicatorComponent, MapaCapabilityIndicatorModule, MapaIconModule, MapaTooltipComponent, MapaTooltipDirective, MapaTooltipModule };
+export { ButtonComponent, 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