mapa-library-ui 0.73.0 → 0.73.2

package/esm2020/src/lib/components/benchmarking/lib/components/benchmarking/src/benchmark-chart.component.mjs

@@ -23,10 +23,10 @@ export class MapaBenchmarkChartComponent {
     }
 }
 MapaBenchmarkChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaBenchmarkChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaBenchmarkChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaBenchmarkChartComponent, selector: "mapa-benchmark-chart", inputs: { data: "data" }, ngImport: i0, template: "<table class=\"indicator-chart\">\n  <thead>\n    <tr class=\"indicator-chart__head\">\n      <th class=\"indicator-chart__column--description\"></th>\n      <th class=\"indicator-chart__column indicator-chart__column--right\">\n        <div class=\"indicator-chart__scale\">\n          <span *ngFor=\"let label of scaleLabels\">{{ label }}</span>\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\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--right\">\n        <div class=\"indicator-chart__column--positive\">\n          <div class=\"indicator-chart__column-background\">\n            <mapa-benchmark-indicator [item]=\"setUnlabeledItem(item)\"\n            [style.width]=\"getWidth(item)\"></mapa-benchmark-indicator>\n          </div>\n        </div>\n      </td>\n      <td class=\"indicator-chart__column--classification\">\n        {{item.interval}} %\n      </td>\n    </tr>\n  </tbody>\n</table>", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__head th{padding:0 0 12px;font-size:12px;font-weight:500;color:#6f6f7b}.indicator-chart__scale{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-align:center;color:#6f6f7b}.indicator-chart__scale span{position:relative;padding-top:8px;text-align:end;transform:translate(10px)}.indicator-chart__scale span:first-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child:before{content:\"\";position:absolute;bottom:-8px;right:0%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart__scale span:before{content:\"\";position:absolute;bottom:-8px;right:50%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--classification{width:2%!important;min-width:50px;text-align:end}.indicator-chart__column-background{width:100%;background:rgb(241,245,249);display:flex;margin:3px 0;border-radius:0 18px 18px 0}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important;position:relative}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MapaBenchmarkIndicatorComponent, selector: "mapa-benchmark-indicator", inputs: ["item"] }], encapsulation: i0.ViewEncapsulation.None });
+MapaBenchmarkChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaBenchmarkChartComponent, selector: "mapa-benchmark-chart", inputs: { data: "data" }, ngImport: i0, template: "<table class=\"indicator-chart\">\n  <thead>\n    <tr class=\"indicator-chart__head\">\n      <th class=\"indicator-chart__column--description\"></th>\n      <th class=\"indicator-chart__column indicator-chart__column--right\">\n        <div class=\"indicator-chart__scale\">\n          <span *ngFor=\"let label of scaleLabels\">{{ label }}</span>\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\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--right\">\n        <div class=\"indicator-chart__column--positive\">\n          <div class=\"indicator-chart__column-background\">\n            <mapa-benchmark-indicator [item]=\"setUnlabeledItem(item)\"\n            [style.width]=\"getWidth(item)\"></mapa-benchmark-indicator>\n          </div>\n        </div>\n      </td>\n      <td class=\"indicator-chart__column--classification\">\n        {{item.interval}} %\n      </td>\n    </tr>\n  </tbody>\n</table>", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__head th{padding:0 0 12px;font-size:12px;font-weight:500;color:#6f6f7b}.indicator-chart__scale{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-align:center;color:#6f6f7b}.indicator-chart__scale span{position:relative;padding-top:8px;text-align:end;transform:translate(10px)}.indicator-chart__scale span:first-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child:before{content:\"\";position:absolute;bottom:-8px;right:0%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart__scale span:before{content:\"\";position:absolute;bottom:-8px;right:50%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--classification{width:2%!important;min-width:50px;text-align:end}.indicator-chart__column-background{width:100%;height:40px;background:rgb(241,245,249);display:flex;margin:3px 0;border-radius:0 18px 18px 0}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important;position:relative}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.MapaBenchmarkIndicatorComponent, selector: "mapa-benchmark-indicator", inputs: ["item"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaBenchmarkChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-benchmark-chart", encapsulation: ViewEncapsulation.None, template: "<table class=\"indicator-chart\">\n  <thead>\n    <tr class=\"indicator-chart__head\">\n      <th class=\"indicator-chart__column--description\"></th>\n      <th class=\"indicator-chart__column indicator-chart__column--right\">\n        <div class=\"indicator-chart__scale\">\n          <span *ngFor=\"let label of scaleLabels\">{{ label }}</span>\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\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--right\">\n        <div class=\"indicator-chart__column--positive\">\n          <div class=\"indicator-chart__column-background\">\n            <mapa-benchmark-indicator [item]=\"setUnlabeledItem(item)\"\n            [style.width]=\"getWidth(item)\"></mapa-benchmark-indicator>\n          </div>\n        </div>\n      </td>\n      <td class=\"indicator-chart__column--classification\">\n        {{item.interval}} %\n      </td>\n    </tr>\n  </tbody>\n</table>", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__head th{padding:0 0 12px;font-size:12px;font-weight:500;color:#6f6f7b}.indicator-chart__scale{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-align:center;color:#6f6f7b}.indicator-chart__scale span{position:relative;padding-top:8px;text-align:end;transform:translate(10px)}.indicator-chart__scale span:first-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child:before{content:\"\";position:absolute;bottom:-8px;right:0%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart__scale span:before{content:\"\";position:absolute;bottom:-8px;right:50%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--classification{width:2%!important;min-width:50px;text-align:end}.indicator-chart__column-background{width:100%;background:rgb(241,245,249);display:flex;margin:3px 0;border-radius:0 18px 18px 0}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important;position:relative}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+            args: [{ selector: "mapa-benchmark-chart", encapsulation: ViewEncapsulation.None, template: "<table class=\"indicator-chart\">\n  <thead>\n    <tr class=\"indicator-chart__head\">\n      <th class=\"indicator-chart__column--description\"></th>\n      <th class=\"indicator-chart__column indicator-chart__column--right\">\n        <div class=\"indicator-chart__scale\">\n          <span *ngFor=\"let label of scaleLabels\">{{ label }}</span>\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\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--right\">\n        <div class=\"indicator-chart__column--positive\">\n          <div class=\"indicator-chart__column-background\">\n            <mapa-benchmark-indicator [item]=\"setUnlabeledItem(item)\"\n            [style.width]=\"getWidth(item)\"></mapa-benchmark-indicator>\n          </div>\n        </div>\n      </td>\n      <td class=\"indicator-chart__column--classification\">\n        {{item.interval}} %\n      </td>\n    </tr>\n  </tbody>\n</table>", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__head th{padding:0 0 12px;font-size:12px;font-weight:500;color:#6f6f7b}.indicator-chart__scale{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-align:center;color:#6f6f7b}.indicator-chart__scale span{position:relative;padding-top:8px;text-align:end;transform:translate(10px)}.indicator-chart__scale span:first-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child:before{content:\"\";position:absolute;bottom:-8px;right:0%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart__scale span:before{content:\"\";position:absolute;bottom:-8px;right:50%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--classification{width:2%!important;min-width:50px;text-align:end}.indicator-chart__column-background{width:100%;height:40px;background:rgb(241,245,249);display:flex;margin:3px 0;border-radius:0 18px 18px 0}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important;position:relative}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }] } });

package/esm2020/src/lib/components/benchmarking/lib/components/benchmarking/src/benchmark-indicator/benchmark-indicator.component.mjs

@@ -4,11 +4,11 @@ import * as i1 from "@angular/common";
 export class MapaBenchmarkIndicatorComponent {
 }
 MapaBenchmarkIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaBenchmarkIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaBenchmarkIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaBenchmarkIndicatorComponent, selector: "mapa-benchmark-indicator", inputs: { item: "item" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <!-- Linhas dos marcadores -->\n  <div class=\"indicator__markers\">\n    <div\n      *ngFor=\"let mark of item.marks\"\n      class=\"indicator__marker\"\n      [ngStyle]=\"{\n        left: mark.value + '%',\n        borderLeftColor: mark.color\n      }\"\n      [title]=\"mark.name + ' (' + mark.value + '%)'\"\n    ></div>\n  </div>\n</div>\n", styles: [".indicator{min-height:23px}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}.indicator__markers{position:absolute;inset:0;z-index:10}.indicator__marker{position:absolute;top:0;bottom:0;height:70%;width:0;margin:auto 0;border-left-width:4px;border-left-style:solid}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+MapaBenchmarkIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaBenchmarkIndicatorComponent, selector: "mapa-benchmark-indicator", inputs: { item: "item" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <div class=\"indicator__markers\">\n    <div\n      *ngFor=\"let mark of item.marks\"\n      class=\"indicator__marker--arrow\"\n      [ngStyle]=\"{\n        left: mark.value + '%',\n        borderTopColor: mark.color\n      }\"\n      [title]=\"mark.name + ' (' + mark.value + '%)'\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-end}.indicator{min-height:23px}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}.indicator__markers{position:absolute;inset:0;z-index:10}.indicator__marker--arrow{position:absolute;top:10px;width:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid;transform:translate(-80%)}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaBenchmarkIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-benchmark-indicator", template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <!-- Linhas dos marcadores -->\n  <div class=\"indicator__markers\">\n    <div\n      *ngFor=\"let mark of item.marks\"\n      class=\"indicator__marker\"\n      [ngStyle]=\"{\n        left: mark.value + '%',\n        borderLeftColor: mark.color\n      }\"\n      [title]=\"mark.name + ' (' + mark.value + '%)'\"\n    ></div>\n  </div>\n</div>\n", styles: [".indicator{min-height:23px}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}.indicator__markers{position:absolute;inset:0;z-index:10}.indicator__marker{position:absolute;top:0;bottom:0;height:70%;width:0;margin:auto 0;border-left-width:4px;border-left-style:solid}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+            args: [{ selector: "mapa-benchmark-indicator", template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <div class=\"indicator__markers\">\n    <div\n      *ngFor=\"let mark of item.marks\"\n      class=\"indicator__marker--arrow\"\n      [ngStyle]=\"{\n        left: mark.value + '%',\n        borderTopColor: mark.color\n      }\"\n      [title]=\"mark.name + ' (' + mark.value + '%)'\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-end}.indicator{min-height:23px}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}.indicator__markers{position:absolute;inset:0;z-index:10}.indicator__marker--arrow{position:absolute;top:10px;width:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid;transform:translate(-80%)}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmVuY2htYXJrLWluZGljYXRvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2JlbmNobWFya2luZy9zcmMvYmVuY2htYXJrLWluZGljYXRvci9iZW5jaG1hcmstaW5kaWNhdG9yLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hcGEtbGlicmFyeS11aS9zcmMvbGliL2NvbXBvbmVudHMvYmVuY2htYXJraW5nL3NyYy9iZW5jaG1hcmstaW5kaWNhdG9yL2JlbmNobWFyay1pbmRpY2F0b3IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVdqRCxNQUFNLE9BQU8sK0JBQStCOzs2SEFBL0IsK0JBQStCO2lIQUEvQiwrQkFBK0IsMEZDWDVDLHFiQWlCQTs0RkROYSwrQkFBK0I7a0JBUjNDLFNBQVM7K0JBQ0UsMEJBQTBCOzhCQVEzQixJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEJlbmNobWFya2luZ0NoYXJ0IH0gZnJvbSBcIi4uL2JlbmNobWFya2luZy5pbnRlcmZhY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1hcGEtYmVuY2htYXJrLWluZGljYXRvclwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL2JlbmNobWFyay1pbmRpY2F0b3IuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXG4gICAgXCIuL2JlbmNobWFyay1pbmRpY2F0b3IuY29tcG9uZW50LnNjc3NcIixcbiAgICBcIi4vLi4vc3R5bGVzL2JlbmNobWFyay5zY3NzXCIsXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIE1hcGFCZW5jaG1hcmtJbmRpY2F0b3JDb21wb25lbnQge1xuICBASW5wdXQoKSBpdGVtITogQmVuY2htYXJraW5nQ2hhcnQ7XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiaW5kaWNhdG9yXCJcbiAgW3N0eWxlLmJhY2tncm91bmRDb2xvcl09XCJpdGVtLmNsYXNzaWZpY2F0aW9uQ29sb3JcIlxuPlxuICA8IS0tIExpbmhhcyBkb3MgbWFyY2Fkb3JlcyAtLT5cbiAgPGRpdiBjbGFzcz1cImluZGljYXRvcl9fbWFya2Vyc1wiPlxuICAgIDxkaXZcbiAgICAgICpuZ0Zvcj1cImxldCBtYXJrIG9mIGl0ZW0ubWFya3NcIlxuICAgICAgY2xhc3M9XCJpbmRpY2F0b3JfX21hcmtlclwiXG4gICAgICBbbmdTdHlsZV09XCJ7XG4gICAgICAgIGxlZnQ6IG1hcmsudmFsdWUgKyAnJScsXG4gICAgICAgIGJvcmRlckxlZnRDb2xvcjogbWFyay5jb2xvclxuICAgICAgfVwiXG4gICAgICBbdGl0bGVdPVwibWFyay5uYW1lICsgJyAoJyArIG1hcmsudmFsdWUgKyAnJSknXCJcbiAgICA+PC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmVuY2htYXJrLWluZGljYXRvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXBhLWxpYnJhcnktdWkvc3JjL2xpYi9jb21wb25lbnRzL2JlbmNobWFya2luZy9zcmMvYmVuY2htYXJrLWluZGljYXRvci9iZW5jaG1hcmstaW5kaWNhdG9yLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hcGEtbGlicmFyeS11aS9zcmMvbGliL2NvbXBvbmVudHMvYmVuY2htYXJraW5nL3NyYy9iZW5jaG1hcmstaW5kaWNhdG9yL2JlbmNobWFyay1pbmRpY2F0b3IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVdqRCxNQUFNLE9BQU8sK0JBQStCOzs2SEFBL0IsK0JBQStCO2lIQUEvQiwrQkFBK0IsMEZDWDVDLHlaQWdCQTs0RkRMYSwrQkFBK0I7a0JBUjNDLFNBQVM7K0JBQ0UsMEJBQTBCOzhCQVEzQixJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEJlbmNobWFya2luZ0NoYXJ0IH0gZnJvbSBcIi4uL2JlbmNobWFya2luZy5pbnRlcmZhY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1hcGEtYmVuY2htYXJrLWluZGljYXRvclwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL2JlbmNobWFyay1pbmRpY2F0b3IuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXG4gICAgXCIuL2JlbmNobWFyay1pbmRpY2F0b3IuY29tcG9uZW50LnNjc3NcIixcbiAgICBcIi4vLi4vc3R5bGVzL2JlbmNobWFyay5zY3NzXCIsXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIE1hcGFCZW5jaG1hcmtJbmRpY2F0b3JDb21wb25lbnQge1xuICBASW5wdXQoKSBpdGVtITogQmVuY2htYXJraW5nQ2hhcnQ7XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiaW5kaWNhdG9yXCJcbiAgW3N0eWxlLmJhY2tncm91bmRDb2xvcl09XCJpdGVtLmNsYXNzaWZpY2F0aW9uQ29sb3JcIlxuPlxuICA8ZGl2IGNsYXNzPVwiaW5kaWNhdG9yX19tYXJrZXJzXCI+XG4gICAgPGRpdlxuICAgICAgKm5nRm9yPVwibGV0IG1hcmsgb2YgaXRlbS5tYXJrc1wiXG4gICAgICBjbGFzcz1cImluZGljYXRvcl9fbWFya2VyLS1hcnJvd1wiXG4gICAgICBbbmdTdHlsZV09XCJ7XG4gICAgICAgIGxlZnQ6IG1hcmsudmFsdWUgKyAnJScsXG4gICAgICAgIGJvcmRlclRvcENvbG9yOiBtYXJrLmNvbG9yXG4gICAgICB9XCJcbiAgICAgIFt0aXRsZV09XCJtYXJrLm5hbWUgKyAnICgnICsgbWFyay52YWx1ZSArICclKSdcIlxuICAgID48L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==

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

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

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

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

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

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

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

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

package/fesm2015/mapa-library-ui-src-lib-components-benchmarking.mjs

@@ -6,10 +6,10 @@ import { CommonModule } from '@angular/common';
 class MapaBenchmarkIndicatorComponent {
 }
 MapaBenchmarkIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaBenchmarkIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaBenchmarkIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaBenchmarkIndicatorComponent, selector: "mapa-benchmark-indicator", inputs: { item: "item" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <!-- Linhas dos marcadores -->\n  <div class=\"indicator__markers\">\n    <div\n      *ngFor=\"let mark of item.marks\"\n      class=\"indicator__marker\"\n      [ngStyle]=\"{\n        left: mark.value + '%',\n        borderLeftColor: mark.color\n      }\"\n      [title]=\"mark.name + ' (' + mark.value + '%)'\"\n    ></div>\n  </div>\n</div>\n", styles: [".indicator{min-height:23px}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}.indicator__markers{position:absolute;inset:0;z-index:10}.indicator__marker{position:absolute;top:0;bottom:0;height:70%;width:0;margin:auto 0;border-left-width:4px;border-left-style:solid}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+MapaBenchmarkIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaBenchmarkIndicatorComponent, selector: "mapa-benchmark-indicator", inputs: { item: "item" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <div class=\"indicator__markers\">\n    <div\n      *ngFor=\"let mark of item.marks\"\n      class=\"indicator__marker--arrow\"\n      [ngStyle]=\"{\n        left: mark.value + '%',\n        borderTopColor: mark.color\n      }\"\n      [title]=\"mark.name + ' (' + mark.value + '%)'\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-end}.indicator{min-height:23px}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}.indicator__markers{position:absolute;inset:0;z-index:10}.indicator__marker--arrow{position:absolute;top:10px;width:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid;transform:translate(-80%)}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaBenchmarkIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-benchmark-indicator", template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <!-- Linhas dos marcadores -->\n  <div class=\"indicator__markers\">\n    <div\n      *ngFor=\"let mark of item.marks\"\n      class=\"indicator__marker\"\n      [ngStyle]=\"{\n        left: mark.value + '%',\n        borderLeftColor: mark.color\n      }\"\n      [title]=\"mark.name + ' (' + mark.value + '%)'\"\n    ></div>\n  </div>\n</div>\n", styles: [".indicator{min-height:23px}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}.indicator__markers{position:absolute;inset:0;z-index:10}.indicator__marker{position:absolute;top:0;bottom:0;height:70%;width:0;margin:auto 0;border-left-width:4px;border-left-style:solid}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+            args: [{ selector: "mapa-benchmark-indicator", template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <div class=\"indicator__markers\">\n    <div\n      *ngFor=\"let mark of item.marks\"\n      class=\"indicator__marker--arrow\"\n      [ngStyle]=\"{\n        left: mark.value + '%',\n        borderTopColor: mark.color\n      }\"\n      [title]=\"mark.name + ' (' + mark.value + '%)'\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;justify-content:flex-end}.indicator{min-height:23px}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}.indicator__markers{position:absolute;inset:0;z-index:10}.indicator__marker--arrow{position:absolute;top:10px;width:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid;transform:translate(-80%)}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }] } });
@@ -30,10 +30,10 @@ class MapaBenchmarkChartComponent {
     }
 }
 MapaBenchmarkChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaBenchmarkChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaBenchmarkChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaBenchmarkChartComponent, selector: "mapa-benchmark-chart", inputs: { data: "data" }, ngImport: i0, template: "<table class=\"indicator-chart\">\n  <thead>\n    <tr class=\"indicator-chart__head\">\n      <th class=\"indicator-chart__column--description\"></th>\n      <th class=\"indicator-chart__column indicator-chart__column--right\">\n        <div class=\"indicator-chart__scale\">\n          <span *ngFor=\"let label of scaleLabels\">{{ label }}</span>\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\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--right\">\n        <div class=\"indicator-chart__column--positive\">\n          <div class=\"indicator-chart__column-background\">\n            <mapa-benchmark-indicator [item]=\"setUnlabeledItem(item)\"\n            [style.width]=\"getWidth(item)\"></mapa-benchmark-indicator>\n          </div>\n        </div>\n      </td>\n      <td class=\"indicator-chart__column--classification\">\n        {{item.interval}} %\n      </td>\n    </tr>\n  </tbody>\n</table>", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__head th{padding:0 0 12px;font-size:12px;font-weight:500;color:#6f6f7b}.indicator-chart__scale{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-align:center;color:#6f6f7b}.indicator-chart__scale span{position:relative;padding-top:8px;text-align:end;transform:translate(10px)}.indicator-chart__scale span:first-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child:before{content:\"\";position:absolute;bottom:-8px;right:0%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart__scale span:before{content:\"\";position:absolute;bottom:-8px;right:50%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--classification{width:2%!important;min-width:50px;text-align:end}.indicator-chart__column-background{width:100%;background:rgb(241,245,249);display:flex;margin:3px 0;border-radius:0 18px 18px 0}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important;position:relative}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MapaBenchmarkIndicatorComponent, selector: "mapa-benchmark-indicator", inputs: ["item"] }], encapsulation: i0.ViewEncapsulation.None });
+MapaBenchmarkChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaBenchmarkChartComponent, selector: "mapa-benchmark-chart", inputs: { data: "data" }, ngImport: i0, template: "<table class=\"indicator-chart\">\n  <thead>\n    <tr class=\"indicator-chart__head\">\n      <th class=\"indicator-chart__column--description\"></th>\n      <th class=\"indicator-chart__column indicator-chart__column--right\">\n        <div class=\"indicator-chart__scale\">\n          <span *ngFor=\"let label of scaleLabels\">{{ label }}</span>\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\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--right\">\n        <div class=\"indicator-chart__column--positive\">\n          <div class=\"indicator-chart__column-background\">\n            <mapa-benchmark-indicator [item]=\"setUnlabeledItem(item)\"\n            [style.width]=\"getWidth(item)\"></mapa-benchmark-indicator>\n          </div>\n        </div>\n      </td>\n      <td class=\"indicator-chart__column--classification\">\n        {{item.interval}} %\n      </td>\n    </tr>\n  </tbody>\n</table>", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__head th{padding:0 0 12px;font-size:12px;font-weight:500;color:#6f6f7b}.indicator-chart__scale{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-align:center;color:#6f6f7b}.indicator-chart__scale span{position:relative;padding-top:8px;text-align:end;transform:translate(10px)}.indicator-chart__scale span:first-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child:before{content:\"\";position:absolute;bottom:-8px;right:0%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart__scale span:before{content:\"\";position:absolute;bottom:-8px;right:50%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--classification{width:2%!important;min-width:50px;text-align:end}.indicator-chart__column-background{width:100%;height:40px;background:rgb(241,245,249);display:flex;margin:3px 0;border-radius:0 18px 18px 0}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important;position:relative}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MapaBenchmarkIndicatorComponent, selector: "mapa-benchmark-indicator", inputs: ["item"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaBenchmarkChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-benchmark-chart", encapsulation: ViewEncapsulation.None, template: "<table class=\"indicator-chart\">\n  <thead>\n    <tr class=\"indicator-chart__head\">\n      <th class=\"indicator-chart__column--description\"></th>\n      <th class=\"indicator-chart__column indicator-chart__column--right\">\n        <div class=\"indicator-chart__scale\">\n          <span *ngFor=\"let label of scaleLabels\">{{ label }}</span>\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\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--right\">\n        <div class=\"indicator-chart__column--positive\">\n          <div class=\"indicator-chart__column-background\">\n            <mapa-benchmark-indicator [item]=\"setUnlabeledItem(item)\"\n            [style.width]=\"getWidth(item)\"></mapa-benchmark-indicator>\n          </div>\n        </div>\n      </td>\n      <td class=\"indicator-chart__column--classification\">\n        {{item.interval}} %\n      </td>\n    </tr>\n  </tbody>\n</table>", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__head th{padding:0 0 12px;font-size:12px;font-weight:500;color:#6f6f7b}.indicator-chart__scale{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-align:center;color:#6f6f7b}.indicator-chart__scale span{position:relative;padding-top:8px;text-align:end;transform:translate(10px)}.indicator-chart__scale span:first-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child:before{content:\"\";position:absolute;bottom:-8px;right:0%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart__scale span:before{content:\"\";position:absolute;bottom:-8px;right:50%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--classification{width:2%!important;min-width:50px;text-align:end}.indicator-chart__column-background{width:100%;background:rgb(241,245,249);display:flex;margin:3px 0;border-radius:0 18px 18px 0}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important;position:relative}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
+            args: [{ selector: "mapa-benchmark-chart", encapsulation: ViewEncapsulation.None, template: "<table class=\"indicator-chart\">\n  <thead>\n    <tr class=\"indicator-chart__head\">\n      <th class=\"indicator-chart__column--description\"></th>\n      <th class=\"indicator-chart__column indicator-chart__column--right\">\n        <div class=\"indicator-chart__scale\">\n          <span *ngFor=\"let label of scaleLabels\">{{ label }}</span>\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\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--right\">\n        <div class=\"indicator-chart__column--positive\">\n          <div class=\"indicator-chart__column-background\">\n            <mapa-benchmark-indicator [item]=\"setUnlabeledItem(item)\"\n            [style.width]=\"getWidth(item)\"></mapa-benchmark-indicator>\n          </div>\n        </div>\n      </td>\n      <td class=\"indicator-chart__column--classification\">\n        {{item.interval}} %\n      </td>\n    </tr>\n  </tbody>\n</table>", styles: [".indicator-chart{width:100%;border-collapse:collapse}.indicator-chart__head th{padding:0 0 12px;font-size:12px;font-weight:500;color:#6f6f7b}.indicator-chart__scale{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-align:center;color:#6f6f7b}.indicator-chart__scale span{position:relative;padding-top:8px;text-align:end;transform:translate(10px)}.indicator-chart__scale span:first-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child{text-align:start;transform:translate(0)}.indicator-chart__scale span:last-child:before{content:\"\";position:absolute;bottom:-8px;right:0%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart__scale span:before{content:\"\";position:absolute;bottom:-8px;right:50%;width:1px;height:8px;background-color:#dcdcde}.indicator-chart tr:first-child{border-top:unset!important}.indicator-chart tr:last-child{border-bottom:unset!important}.indicator-chart__column{padding:0;font-size:14px!important}.indicator-chart__column--description{padding-right:24px;width:20%!important}.indicator-chart__column--classification{width:2%!important;min-width:50px;text-align:end}.indicator-chart__column-background{width:100%;height:40px;background:rgb(241,245,249);display:flex;margin:3px 0;border-radius:0 18px 18px 0}.indicator-chart__column--positive{display:flex;border-spacing:0px;padding:8px 0!important;position:relative}.indicator-chart__column--positive .indicator{border-radius:0 18px 18px 0!important;padding:2px!important;justify-content:flex-end!important}.indicator-chart__column--positive .indicator__classification{margin-right:1px!important}.indicator-chart__column--negative{display:flex;justify-content:flex-end;border-spacing:0px;padding:8px 0!important}.indicator-chart__column--negative .indicator{border-radius:18px 0 0 18px!important;justify-content:flex-start!important;padding:2px!important}.indicator-chart__column--negative .indicator__classification{margin-left:1px!important}.indicator-chart__column--left{width:40%;border-bottom:1px solid #dcdcde}.indicator-chart__column--right{border-bottom:1px solid #dcdcde;border-left:1px solid #dcdcde;width:40%}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }] } });

package/fesm2015/mapa-library-ui-src-lib-components-benchmarking.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mapa-library-ui-src-lib-components-benchmarking.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-indicator/benchmark-indicator.component.ts","../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-indicator/benchmark-indicator.component.html","../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-chart.component.ts","../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-chart.component.html","../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-indicator/benchmark-indicator.module.ts","../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-chart.module.ts","../../../projects/mapa-library-ui/src/lib/components/benchmarking/public-api.ts","../../../projects/mapa-library-ui/src/benchmarking.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-benchmarking.ts"],"sourcesContent":["import { Component, Input } from \"@angular/core\";\nimport { BenchmarkingChart } from \"../benchmarking.interface\";\n\n@Component({\n  selector: \"mapa-benchmark-indicator\",\n  templateUrl: \"./benchmark-indicator.component.html\",\n  styleUrls: [\n    \"./benchmark-indicator.component.scss\",\n    \"./../styles/benchmark.scss\",\n  ],\n})\nexport class MapaBenchmarkIndicatorComponent {\n  @Input() item!: BenchmarkingChart;\n}\n","<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <!-- Linhas dos marcadores -->\n  <div class=\"indicator__markers\">\n    <div\n      *ngFor=\"let mark of item.marks\"\n      class=\"indicator__marker\"\n      [ngStyle]=\"{\n        left: mark.value + '%',\n        borderLeftColor: mark.color\n      }\"\n      [title]=\"mark.name + ' (' + mark.value + '%)'\"\n    ></div>\n  </div>\n</div>\n","import { Component, Input, ViewEncapsulation } from \"@angular/core\";\nimport { BenchmarkingChart } from \"./benchmarking.interface\";\n\n@Component({\n  selector: \"mapa-benchmark-chart\",\n  templateUrl: \"./benchmark-chart.component.html\",\n  styleUrls: [\n    \"./benchmark-chart.component.scss\",\n    \"./styles/benchmark.scss\",\n  ],\n  encapsulation: ViewEncapsulation.None\n})\nexport class MapaBenchmarkChartComponent {\n  @Input() data!: BenchmarkingChart[];\n  public scaleLabels: number[] = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];\n\n  constructor() {}\n\n  public setUnlabeledItem(item: BenchmarkingChart): BenchmarkingChart {\n    return {\n      ...item,\n      classificationId: item.classificationId,\n      classificationColor: item.classificationColor,\n      interval: item.interval,\n    }\n  }\n\n  public getWidth(item: BenchmarkingChart): string {\n    const minWidth = 0;\n    const interval = (item.interval || 0);\n    if (interval < 10) return minWidth + 'px';\n    return interval + '%';\n  }\n}\n","<table class=\"indicator-chart\">\n  <thead>\n    <tr class=\"indicator-chart__head\">\n      <th class=\"indicator-chart__column--description\"></th>\n      <th class=\"indicator-chart__column indicator-chart__column--right\">\n        <div class=\"indicator-chart__scale\">\n          <span *ngFor=\"let label of scaleLabels\">{{ label }}</span>\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\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--right\">\n        <div class=\"indicator-chart__column--positive\">\n          <div class=\"indicator-chart__column-background\">\n            <mapa-benchmark-indicator [item]=\"setUnlabeledItem(item)\"\n            [style.width]=\"getWidth(item)\"></mapa-benchmark-indicator>\n          </div>\n        </div>\n      </td>\n      <td class=\"indicator-chart__column--classification\">\n        {{item.interval}} %\n      </td>\n    </tr>\n  </tbody>\n</table>","import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { MapaBenchmarkIndicatorComponent } from \"./benchmark-indicator.component\";\n\n@NgModule({\n  declarations: [MapaBenchmarkIndicatorComponent],\n  exports: [MapaBenchmarkIndicatorComponent],\n  imports: [CommonModule],\n})\nexport class MapaBenchmarkIndicatorModule {}\n","import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { MapaBenchmarkIndicatorModule } from \"./benchmark-indicator/benchmark-indicator.module\";\nimport { MapaBenchmarkChartComponent } from \"./benchmark-chart.component\";\n\n@NgModule({\n  declarations: [MapaBenchmarkChartComponent],\n  exports: [MapaBenchmarkChartComponent],\n  imports: [CommonModule, MapaBenchmarkIndicatorModule],\n})\nexport class MapaBenchmarkChartModule {}\n","/*\n * Public API Surface of mapa-library-ui benchmarking\n */\n\nexport * from './src/benchmarking.interface';\nexport * from './src/benchmark-chart.component';\nexport * from './src/benchmark-chart.module';\n\nexport * from './src/benchmark-indicator/benchmark-indicator.component';\nexport * from './src/benchmark-indicator/benchmark-indicator.module';\n","/*\n * Public API Surface of mapa-library-ui benchmarking\n */\n\nexport * from './lib/components/benchmarking/public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './benchmarking';\n"],"names":["i2.MapaBenchmarkIndicatorComponent"],"mappings":"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"}
+{"version":3,"file":"mapa-library-ui-src-lib-components-benchmarking.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-indicator/benchmark-indicator.component.ts","../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-indicator/benchmark-indicator.component.html","../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-chart.component.ts","../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-chart.component.html","../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-indicator/benchmark-indicator.module.ts","../../../projects/mapa-library-ui/src/lib/components/benchmarking/src/benchmark-chart.module.ts","../../../projects/mapa-library-ui/src/lib/components/benchmarking/public-api.ts","../../../projects/mapa-library-ui/src/benchmarking.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-benchmarking.ts"],"sourcesContent":["import { Component, Input } from \"@angular/core\";\nimport { BenchmarkingChart } from \"../benchmarking.interface\";\n\n@Component({\n  selector: \"mapa-benchmark-indicator\",\n  templateUrl: \"./benchmark-indicator.component.html\",\n  styleUrls: [\n    \"./benchmark-indicator.component.scss\",\n    \"./../styles/benchmark.scss\",\n  ],\n})\nexport class MapaBenchmarkIndicatorComponent {\n  @Input() item!: BenchmarkingChart;\n}\n","<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <div class=\"indicator__markers\">\n    <div\n      *ngFor=\"let mark of item.marks\"\n      class=\"indicator__marker--arrow\"\n      [ngStyle]=\"{\n        left: mark.value + '%',\n        borderTopColor: mark.color\n      }\"\n      [title]=\"mark.name + ' (' + mark.value + '%)'\"\n    ></div>\n  </div>\n</div>\n","import { Component, Input, ViewEncapsulation } from \"@angular/core\";\nimport { BenchmarkingChart } from \"./benchmarking.interface\";\n\n@Component({\n  selector: \"mapa-benchmark-chart\",\n  templateUrl: \"./benchmark-chart.component.html\",\n  styleUrls: [\n    \"./benchmark-chart.component.scss\",\n    \"./styles/benchmark.scss\",\n  ],\n  encapsulation: ViewEncapsulation.None\n})\nexport class MapaBenchmarkChartComponent {\n  @Input() data!: BenchmarkingChart[];\n  public scaleLabels: number[] = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];\n\n  constructor() {}\n\n  public setUnlabeledItem(item: BenchmarkingChart): BenchmarkingChart {\n    return {\n      ...item,\n      classificationId: item.classificationId,\n      classificationColor: item.classificationColor,\n      interval: item.interval,\n    }\n  }\n\n  public getWidth(item: BenchmarkingChart): string {\n    const minWidth = 0;\n    const interval = (item.interval || 0);\n    if (interval < 10) return minWidth + 'px';\n    return interval + '%';\n  }\n}\n","<table class=\"indicator-chart\">\n  <thead>\n    <tr class=\"indicator-chart__head\">\n      <th class=\"indicator-chart__column--description\"></th>\n      <th class=\"indicator-chart__column indicator-chart__column--right\">\n        <div class=\"indicator-chart__scale\">\n          <span *ngFor=\"let label of scaleLabels\">{{ label }}</span>\n        </div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\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--right\">\n        <div class=\"indicator-chart__column--positive\">\n          <div class=\"indicator-chart__column-background\">\n            <mapa-benchmark-indicator [item]=\"setUnlabeledItem(item)\"\n            [style.width]=\"getWidth(item)\"></mapa-benchmark-indicator>\n          </div>\n        </div>\n      </td>\n      <td class=\"indicator-chart__column--classification\">\n        {{item.interval}} %\n      </td>\n    </tr>\n  </tbody>\n</table>","import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { MapaBenchmarkIndicatorComponent } from \"./benchmark-indicator.component\";\n\n@NgModule({\n  declarations: [MapaBenchmarkIndicatorComponent],\n  exports: [MapaBenchmarkIndicatorComponent],\n  imports: [CommonModule],\n})\nexport class MapaBenchmarkIndicatorModule {}\n","import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { MapaBenchmarkIndicatorModule } from \"./benchmark-indicator/benchmark-indicator.module\";\nimport { MapaBenchmarkChartComponent } from \"./benchmark-chart.component\";\n\n@NgModule({\n  declarations: [MapaBenchmarkChartComponent],\n  exports: [MapaBenchmarkChartComponent],\n  imports: [CommonModule, MapaBenchmarkIndicatorModule],\n})\nexport class MapaBenchmarkChartModule {}\n","/*\n * Public API Surface of mapa-library-ui benchmarking\n */\n\nexport * from './src/benchmarking.interface';\nexport * from './src/benchmark-chart.component';\nexport * from './src/benchmark-chart.module';\n\nexport * from './src/benchmark-indicator/benchmark-indicator.component';\nexport * from './src/benchmark-indicator/benchmark-indicator.module';\n","/*\n * Public API Surface of mapa-library-ui benchmarking\n */\n\nexport * from './lib/components/benchmarking/public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './benchmarking';\n"],"names":["i2.MapaBenchmarkIndicatorComponent"],"mappings":"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"}

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

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