mapa-library-ui 0.73.5 → 0.74.0

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

@@ -4,10 +4,10 @@ import * as i1 from "@angular/common";
 export class MapaCapabilityIndicatorComponent {
 }
 MapaCapabilityIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: { item: "item" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MapaCapabilityIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: { item: "item" }, ngImport: i0, template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,Arial,Helvetica,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,Arial,Helvetica,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-indicator", template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}\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-capability-indicator", template: "<div\n  class=\"indicator\"\n  [style.backgroundColor]=\"item.classificationColor\"\n>\n  <span *ngIf=\"item.name\">{{ item.name }}</span>\n  <div class=\"indicator__classification\">\n    {{ item.interval }}%\n  </div>\n</div>\n", styles: [".indicator{margin:3px 0}.indicator__classification{background-color:#fff;border-radius:16px;color:#000;padding:4px 8px;margin-right:4px;font-size:12px!important}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,Arial,Helvetica,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,Arial,Helvetica,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }] } });

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

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

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

@@ -17,10 +17,10 @@ export class MapaCapabilityIndicatorListComponent {
     }
 }
 MapaCapabilityIndicatorListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityIndicatorListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorListComponent, selector: "mapa-capability-indicator-list", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores positivos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataPositive\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataNegative\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article\n    class=\"indicator-list__column\"\n    *ngIf=\"dataRiskPrecipitation.length > 0 || dataRiskNegligence.length > 0\"\n  >\n    <h2>Indicadores de risco</h2>\n    <div *ngIf=\"dataRiskPrecipitation.length > 0\">\n      <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskPrecipitation\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n    <div *ngIf=\"dataRiskNegligence.length > 0\">\n      <h3>Risco de acidente por neglig\u00EAncia</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskNegligence\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n  </article>\n</section>\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:Inter,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family: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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item"] }] });
+MapaCapabilityIndicatorListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIndicatorListComponent, selector: "mapa-capability-indicator-list", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores positivos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataPositive\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataNegative\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article\n    class=\"indicator-list__column\"\n    *ngIf=\"dataRiskPrecipitation.length > 0 || dataRiskNegligence.length > 0\"\n  >\n    <h2>Indicadores de risco</h2>\n    <div *ngIf=\"dataRiskPrecipitation.length > 0\">\n      <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskPrecipitation\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n    <div *ngIf=\"dataRiskNegligence.length > 0\">\n      <h3>Risco de acidente por neglig\u00EAncia</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskNegligence\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n  </article>\n</section>\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:Inter,Arial,Helvetica,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,Arial,Helvetica,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,Arial,Helvetica,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MapaCapabilityIndicatorComponent, selector: "mapa-capability-indicator", inputs: ["item"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIndicatorListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-indicator-list", template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores positivos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataPositive\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataNegative\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article\n    class=\"indicator-list__column\"\n    *ngIf=\"dataRiskPrecipitation.length > 0 || dataRiskNegligence.length > 0\"\n  >\n    <h2>Indicadores de risco</h2>\n    <div *ngIf=\"dataRiskPrecipitation.length > 0\">\n      <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskPrecipitation\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n    <div *ngIf=\"dataRiskNegligence.length > 0\">\n      <h3>Risco de acidente por neglig\u00EAncia</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskNegligence\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n  </article>\n</section>\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:Inter,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:Inter,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family: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-capability-indicator-list", template: "<section class=\"indicator-list\">\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores positivos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataPositive\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article class=\"indicator-list__column\">\n    <h2>Indicadores negativos</h2>\n    <mapa-capability-indicator *ngFor=\"let item of dataNegative\" [item]=\"item\">\n    </mapa-capability-indicator>\n  </article>\n  <article\n    class=\"indicator-list__column\"\n    *ngIf=\"dataRiskPrecipitation.length > 0 || dataRiskNegligence.length > 0\"\n  >\n    <h2>Indicadores de risco</h2>\n    <div *ngIf=\"dataRiskPrecipitation.length > 0\">\n      <h3>Risco de acidente por precipita\u00E7\u00E3o</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskPrecipitation\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n    <div *ngIf=\"dataRiskNegligence.length > 0\">\n      <h3>Risco de acidente por neglig\u00EAncia</h3>\n      <mapa-capability-indicator\n        *ngFor=\"let item of dataRiskNegligence\"\n        [item]=\"item\"\n      >\n      </mapa-capability-indicator>\n    </div>\n  </article>\n</section>\n", styles: [".indicator-list{display:flex;gap:42px;justify-content:space-between;margin-bottom:42px}.indicator-list__column{width:33%}.indicator-list__column h2{font-family:Inter,Arial,Helvetica,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}.indicator-list__column h3{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:32px;margin-bottom:24px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:Inter,Arial,Helvetica,sans-serif;font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:Inter,Arial,Helvetica,sans-serif;font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:Inter,Arial,Helvetica,sans-serif;font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }] } });

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

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

@@ -159,10 +159,10 @@ export class MapaDropdownComponent {
     }
 }
 MapaDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: { formControl: "formControl", formControlSearch: "formControlSearch", element: "element", border: "border" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"element\">\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n    {{ element.label }}\n  </label>\n  <div class=\"mapa-form--inline\">\n    <mat-form-field\n      appearance=\"outline\"\n      class=\"mapa-dropdown\"\n      [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n      [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n      [class.mapa-dropdown--tag]=\"border === 'tag'\"\n      [class.mapa-dropdown--labeled]=\"!!element.label\"\n    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n      >\n        <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n          <ngx-mat-select-search\n            *ngIf=\"element.search.formControl\"\n            [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n            [formControl]=\"element.search.formControl\"\n            [placeholderLabel]=\"element.search.placeholder || ''\"\n            i18n-placeholderLabel\n            [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n          ></ngx-mat-select-search>\n        </mat-option>\n        <mat-option\n          *ngIf=\"element.multiple\"\n          class=\"mapa-dropdown__option--select-all\"\n        >\n          <mat-checkbox\n            class=\"mat-option\"\n            [indeterminate]=\"isIndeterminate\"\n            [checked]=\"isChecked\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleSelectAll($event)\"\n          >\n            Selecionar todos\n          </mat-checkbox>\n        </mat-option>\n        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option\n              *ngFor=\"let option of group.options\"\n              [value]=\"option\"\n              [ngClass]=\"[\n                'mapa-dropdown__option--children-level-' + option.childrenLevel\n              ]\"\n            >\n              <span [innerHTML]=\"option.value\"></span>\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\n            [value]=\"option\"\n            [ngClass]=\"[\n              'mapa-dropdown__option mapa-dropdown__option--children-level-' + option.childrenLevel\n            ]\"\n          >\n            <span class=\"mapa-dropdown__option-value\" [innerHTML]=\"option.value\"></span>\n          </mat-option>\n        </ng-template>\n\n        <mat-option\n          *ngFor=\"let option of selectedOptions\"\n          hidden\n          [value]=\"option\"\n          [ngClass]=\"[\n            'mapa-dropdown__option--children-level-' + option.childrenLevel\n          ]\"\n        >\n          <span [innerHTML]=\"option.value\"></span>\n        </mat-option>\n      </mat-select>\n      <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n      <mat-error *ngIf=\"formControl?.hasError('required')\">\n        {{ element.errors?.required }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minlength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cpf')\">\n        {{ element.errors?.cpf }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cnpj')\">\n        {{ element.errors?.cnpj }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('email')\">\n        {{ element.errors?.email }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('pattern')\">\n        {{ element.errors?.pattern }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('min')\">\n        {{ element.errors?.min }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('max')\">\n        {{ element.errors?.max }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minLength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('maxlength')\">\n        {{ element.errors?.maxLength }}\n      </mat-error>\n      <mat-icon\n        *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n        (click)=\"clearValue($event)\"\n        class=\"mapa-input--close\"\n        >close</mat-icon\n      >\n    </mat-form-field>\n    <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n      <mapa-button\n        color=\"basic\"\n        (click)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    </div>\n  </div>\n</div>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:Inter,sans-serif!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:32px;top:4px}.mapa-dropdown__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown__option{height:auto!important;align-items:start!important}.mapa-dropdown__option--children-level-1{padding-left:30px!important}.mapa-dropdown__option--children-level-2{padding-left:50px!important}.mapa-dropdown__option--children-level-3{padding-left:70px!important}.mapa-dropdown__option--children-level-4{padding-left:90px!important}.mapa-dropdown__option--children-level-5{padding-left:100px!important}.mapa-dropdown__option--children-level-6{padding-left:120px!important}.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}.mapa-dropdown__option--select-all .mat-checkbox{padding:0!important}.mapa-dropdown__option-value{text-wrap:auto}.mapa-dropdown__option .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}.mapa-dropdown__option .mat-option-text{height:auto!important}.mapa-dropdown--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown--tag .mat-form-field-outline{border-radius:16px!important;height:42px!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important;border-color:#cdcdcd}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown .mat-form-field-outline{background-color:#fff;border-radius:8px}.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-end{border-width:2px}.mapa-dropdown .mat-form-field-flex{display:flex;align-items:center;height:48px}.mapa-dropdown .mat-form-field-infix{border-top:unset!important;padding:unset!important;position:relative}.mapa-dropdown .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown .mat-select-value-text{display:block;width:90%}.mapa-dropdown .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown .mat-select-arrow{border:unset}.mapa-dropdown .mat-select-arrow:before,.mapa-dropdown .mat-select-arrow:after{content:\"\";display:block;margin-top:-4px;position:absolute;right:10px;top:50%;width:0;border:solid black;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.mapa-dropdown .mat-form-field-subscript-wrapper{padding:0!important}.mapa-dropdown [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown{transform:translate(-16px) translateY(36px)!important}.mapa-overlay-dropdown .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown .mat-select-panel .mat-option,.mapa-overlay-dropdown .mat-select-panel .mat-option-text{font-family:Inter,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mat-select-panel .mat-option[aria-disabled=true].contains-mat-select-search{height:48px}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inside-mat-option .mat-select-search-input{background-color:#fff;border:2px solid #a7aaad;border-radius:6px;margin:8px;height:2.3em!important;line-height:2.3em!important;width:96%}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-input{padding:8px 53px 8px 8px!important}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inner{background-color:#f6f7f7}.mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown .mat-checkbox-frame{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i9.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+MapaDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: { formControl: "formControl", formControlSearch: "formControlSearch", element: "element", border: "border" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"element\">\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n    {{ element.label }}\n  </label>\n  <div class=\"mapa-form--inline\">\n    <mat-form-field\n      appearance=\"outline\"\n      class=\"mapa-dropdown\"\n      [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n      [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n      [class.mapa-dropdown--tag]=\"border === 'tag'\"\n      [class.mapa-dropdown--labeled]=\"!!element.label\"\n    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n      >\n        <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n          <ngx-mat-select-search\n            *ngIf=\"element.search.formControl\"\n            [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n            [formControl]=\"element.search.formControl\"\n            [placeholderLabel]=\"element.search.placeholder || ''\"\n            i18n-placeholderLabel\n            [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n          ></ngx-mat-select-search>\n        </mat-option>\n        <mat-option\n          *ngIf=\"element.multiple\"\n          class=\"mapa-dropdown__option--select-all\"\n        >\n          <mat-checkbox\n            class=\"mat-option\"\n            [indeterminate]=\"isIndeterminate\"\n            [checked]=\"isChecked\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleSelectAll($event)\"\n          >\n            Selecionar todos\n          </mat-checkbox>\n        </mat-option>\n        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option\n              *ngFor=\"let option of group.options\"\n              [value]=\"option\"\n              [ngClass]=\"[\n                'mapa-dropdown__option--children-level-' + option.childrenLevel\n              ]\"\n            >\n              <span [innerHTML]=\"option.value\"></span>\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\n            [value]=\"option\"\n            [ngClass]=\"[\n              'mapa-dropdown__option mapa-dropdown__option--children-level-' + option.childrenLevel\n            ]\"\n          >\n            <span class=\"mapa-dropdown__option-value\" [innerHTML]=\"option.value\"></span>\n          </mat-option>\n        </ng-template>\n\n        <mat-option\n          *ngFor=\"let option of selectedOptions\"\n          hidden\n          [value]=\"option\"\n          [ngClass]=\"[\n            'mapa-dropdown__option--children-level-' + option.childrenLevel\n          ]\"\n        >\n          <span [innerHTML]=\"option.value\"></span>\n        </mat-option>\n      </mat-select>\n      <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n      <mat-error *ngIf=\"formControl?.hasError('required')\">\n        {{ element.errors?.required }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minlength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cpf')\">\n        {{ element.errors?.cpf }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cnpj')\">\n        {{ element.errors?.cnpj }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('email')\">\n        {{ element.errors?.email }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('pattern')\">\n        {{ element.errors?.pattern }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('min')\">\n        {{ element.errors?.min }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('max')\">\n        {{ element.errors?.max }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minLength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('maxlength')\">\n        {{ element.errors?.maxLength }}\n      </mat-error>\n      <mat-icon\n        *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n        (click)=\"clearValue($event)\"\n        class=\"mapa-input--close\"\n        >close</mat-icon\n      >\n    </mat-form-field>\n    <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n      <mapa-button\n        color=\"basic\"\n        (click)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    </div>\n  </div>\n</div>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:Inter,Arial,Helvetica,sans-serif!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:32px;top:4px}.mapa-dropdown__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown__option{height:auto!important;align-items:start!important}.mapa-dropdown__option--children-level-1{padding-left:30px!important}.mapa-dropdown__option--children-level-2{padding-left:50px!important}.mapa-dropdown__option--children-level-3{padding-left:70px!important}.mapa-dropdown__option--children-level-4{padding-left:90px!important}.mapa-dropdown__option--children-level-5{padding-left:100px!important}.mapa-dropdown__option--children-level-6{padding-left:120px!important}.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}.mapa-dropdown__option--select-all .mat-checkbox{padding:0!important}.mapa-dropdown__option-value{text-wrap:auto}.mapa-dropdown__option .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}.mapa-dropdown__option .mat-option-text{height:auto!important}.mapa-dropdown--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown--tag .mat-form-field-outline{border-radius:16px!important;height:42px!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important;border-color:#cdcdcd}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown .mat-form-field-outline{background-color:#fff;border-radius:8px}.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-end{border-width:2px}.mapa-dropdown .mat-form-field-flex{display:flex;align-items:center;height:48px}.mapa-dropdown .mat-form-field-infix{border-top:unset!important;padding:unset!important;position:relative}.mapa-dropdown .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown .mat-select-value-text{display:block;width:90%}.mapa-dropdown .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown .mat-select-arrow{border:unset}.mapa-dropdown .mat-select-arrow:before,.mapa-dropdown .mat-select-arrow:after{content:\"\";display:block;margin-top:-4px;position:absolute;right:10px;top:50%;width:0;border:solid black;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.mapa-dropdown .mat-form-field-subscript-wrapper{padding:0!important}.mapa-dropdown [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown{transform:translate(-16px) translateY(36px)!important}.mapa-overlay-dropdown .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown .mat-select-panel .mat-option,.mapa-overlay-dropdown .mat-select-panel .mat-option-text{font-family:Inter,Arial,Helvetica,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mat-select-panel .mat-option[aria-disabled=true].contains-mat-select-search{height:48px}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inside-mat-option .mat-select-search-input{background-color:#fff;border:2px solid #a7aaad;border-radius:6px;margin:8px;height:2.3em!important;line-height:2.3em!important;width:96%}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-input{padding:8px 53px 8px 8px!important}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inner{background-color:#f6f7f7}.mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown .mat-checkbox-frame{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i8.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i9.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-dropdown", encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"element\">\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n    {{ element.label }}\n  </label>\n  <div class=\"mapa-form--inline\">\n    <mat-form-field\n      appearance=\"outline\"\n      class=\"mapa-dropdown\"\n      [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n      [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n      [class.mapa-dropdown--tag]=\"border === 'tag'\"\n      [class.mapa-dropdown--labeled]=\"!!element.label\"\n    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n      >\n        <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n          <ngx-mat-select-search\n            *ngIf=\"element.search.formControl\"\n            [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n            [formControl]=\"element.search.formControl\"\n            [placeholderLabel]=\"element.search.placeholder || ''\"\n            i18n-placeholderLabel\n            [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n          ></ngx-mat-select-search>\n        </mat-option>\n        <mat-option\n          *ngIf=\"element.multiple\"\n          class=\"mapa-dropdown__option--select-all\"\n        >\n          <mat-checkbox\n            class=\"mat-option\"\n            [indeterminate]=\"isIndeterminate\"\n            [checked]=\"isChecked\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleSelectAll($event)\"\n          >\n            Selecionar todos\n          </mat-checkbox>\n        </mat-option>\n        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option\n              *ngFor=\"let option of group.options\"\n              [value]=\"option\"\n              [ngClass]=\"[\n                'mapa-dropdown__option--children-level-' + option.childrenLevel\n              ]\"\n            >\n              <span [innerHTML]=\"option.value\"></span>\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\n            [value]=\"option\"\n            [ngClass]=\"[\n              'mapa-dropdown__option mapa-dropdown__option--children-level-' + option.childrenLevel\n            ]\"\n          >\n            <span class=\"mapa-dropdown__option-value\" [innerHTML]=\"option.value\"></span>\n          </mat-option>\n        </ng-template>\n\n        <mat-option\n          *ngFor=\"let option of selectedOptions\"\n          hidden\n          [value]=\"option\"\n          [ngClass]=\"[\n            'mapa-dropdown__option--children-level-' + option.childrenLevel\n          ]\"\n        >\n          <span [innerHTML]=\"option.value\"></span>\n        </mat-option>\n      </mat-select>\n      <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n      <mat-error *ngIf=\"formControl?.hasError('required')\">\n        {{ element.errors?.required }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minlength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cpf')\">\n        {{ element.errors?.cpf }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cnpj')\">\n        {{ element.errors?.cnpj }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('email')\">\n        {{ element.errors?.email }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('pattern')\">\n        {{ element.errors?.pattern }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('min')\">\n        {{ element.errors?.min }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('max')\">\n        {{ element.errors?.max }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minLength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('maxlength')\">\n        {{ element.errors?.maxLength }}\n      </mat-error>\n      <mat-icon\n        *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n        (click)=\"clearValue($event)\"\n        class=\"mapa-input--close\"\n        >close</mat-icon\n      >\n    </mat-form-field>\n    <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n      <mapa-button\n        color=\"basic\"\n        (click)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    </div>\n  </div>\n</div>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:Inter,sans-serif!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:32px;top:4px}.mapa-dropdown__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown__option{height:auto!important;align-items:start!important}.mapa-dropdown__option--children-level-1{padding-left:30px!important}.mapa-dropdown__option--children-level-2{padding-left:50px!important}.mapa-dropdown__option--children-level-3{padding-left:70px!important}.mapa-dropdown__option--children-level-4{padding-left:90px!important}.mapa-dropdown__option--children-level-5{padding-left:100px!important}.mapa-dropdown__option--children-level-6{padding-left:120px!important}.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}.mapa-dropdown__option--select-all .mat-checkbox{padding:0!important}.mapa-dropdown__option-value{text-wrap:auto}.mapa-dropdown__option .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}.mapa-dropdown__option .mat-option-text{height:auto!important}.mapa-dropdown--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown--tag .mat-form-field-outline{border-radius:16px!important;height:42px!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important;border-color:#cdcdcd}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown .mat-form-field-outline{background-color:#fff;border-radius:8px}.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-end{border-width:2px}.mapa-dropdown .mat-form-field-flex{display:flex;align-items:center;height:48px}.mapa-dropdown .mat-form-field-infix{border-top:unset!important;padding:unset!important;position:relative}.mapa-dropdown .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown .mat-select-value-text{display:block;width:90%}.mapa-dropdown .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown .mat-select-arrow{border:unset}.mapa-dropdown .mat-select-arrow:before,.mapa-dropdown .mat-select-arrow:after{content:\"\";display:block;margin-top:-4px;position:absolute;right:10px;top:50%;width:0;border:solid black;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.mapa-dropdown .mat-form-field-subscript-wrapper{padding:0!important}.mapa-dropdown [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown{transform:translate(-16px) translateY(36px)!important}.mapa-overlay-dropdown .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown .mat-select-panel .mat-option,.mapa-overlay-dropdown .mat-select-panel .mat-option-text{font-family:Inter,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mat-select-panel .mat-option[aria-disabled=true].contains-mat-select-search{height:48px}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inside-mat-option .mat-select-search-input{background-color:#fff;border:2px solid #a7aaad;border-radius:6px;margin:8px;height:2.3em!important;line-height:2.3em!important;width:96%}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-input{padding:8px 53px 8px 8px!important}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inner{background-color:#f6f7f7}.mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown .mat-checkbox-frame{border-color:#c3c4c7!important}\n"] }]
+            args: [{ selector: "mapa-dropdown", encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"element\">\n  <label *ngIf=\"element.label\" class=\"mapa-dropdown__label\">\n    {{ element.label }}\n  </label>\n  <div class=\"mapa-form--inline\">\n    <mat-form-field\n      appearance=\"outline\"\n      class=\"mapa-dropdown\"\n      [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n      [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n      [class.mapa-dropdown--tag]=\"border === 'tag'\"\n      [class.mapa-dropdown--labeled]=\"!!element.label\"\n    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n      >\n        <mat-option *ngIf=\"element.search\" class=\"mapa-dropdown__search\">\n          <ngx-mat-select-search\n            *ngIf=\"element.search.formControl\"\n            [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n            [formControl]=\"element.search.formControl\"\n            [placeholderLabel]=\"element.search.placeholder || ''\"\n            i18n-placeholderLabel\n            [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n          ></ngx-mat-select-search>\n        </mat-option>\n        <mat-option\n          *ngIf=\"element.multiple\"\n          class=\"mapa-dropdown__option--select-all\"\n        >\n          <mat-checkbox\n            class=\"mat-option\"\n            [indeterminate]=\"isIndeterminate\"\n            [checked]=\"isChecked\"\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"toggleSelectAll($event)\"\n          >\n            Selecionar todos\n          </mat-checkbox>\n        </mat-option>\n        <ng-container *ngIf=\"isOptionsGroup; else isElementOptions\">\n          <mat-optgroup\n            *ngFor=\"let group of filteredGroups | async\"\n            [label]=\"group.label\"\n          >\n            <mat-option\n              *ngFor=\"let option of group.options\"\n              [value]=\"option\"\n              [ngClass]=\"[\n                'mapa-dropdown__option--children-level-' + option.childrenLevel\n              ]\"\n            >\n              <span [innerHTML]=\"option.value\"></span>\n            </mat-option>\n          </mat-optgroup>\n        </ng-container>\n        <ng-template #isElementOptions>\n          <mat-option\n            *ngFor=\"let option of filteredOptions | async\"\n            [value]=\"option\"\n            [ngClass]=\"[\n              'mapa-dropdown__option mapa-dropdown__option--children-level-' + option.childrenLevel\n            ]\"\n          >\n            <span class=\"mapa-dropdown__option-value\" [innerHTML]=\"option.value\"></span>\n          </mat-option>\n        </ng-template>\n\n        <mat-option\n          *ngFor=\"let option of selectedOptions\"\n          hidden\n          [value]=\"option\"\n          [ngClass]=\"[\n            'mapa-dropdown__option--children-level-' + option.childrenLevel\n          ]\"\n        >\n          <span [innerHTML]=\"option.value\"></span>\n        </mat-option>\n      </mat-select>\n      <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n      <mat-error *ngIf=\"formControl?.hasError('required')\">\n        {{ element.errors?.required }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minlength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cpf')\">\n        {{ element.errors?.cpf }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('cnpj')\">\n        {{ element.errors?.cnpj }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('email')\">\n        {{ element.errors?.email }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('pattern')\">\n        {{ element.errors?.pattern }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('min')\">\n        {{ element.errors?.min }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('max')\">\n        {{ element.errors?.max }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('minlength')\">\n        {{ element.errors?.minLength }}\n      </mat-error>\n      <mat-error *ngIf=\"formControl?.hasError('maxlength')\">\n        {{ element.errors?.maxLength }}\n      </mat-error>\n      <mat-icon\n        *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n        (click)=\"clearValue($event)\"\n        class=\"mapa-input--close\"\n        >close</mat-icon\n      >\n    </mat-form-field>\n    <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n      <mapa-button\n        color=\"basic\"\n        (click)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    </div>\n  </div>\n</div>\n", styles: [".mapa-dropdown{max-width:min-content;min-width:235px}.mapa-dropdown .mat-select{font-family:Inter,Arial,Helvetica,sans-serif!important}.mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:32px;top:4px}.mapa-dropdown__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}.mapa-dropdown__option{height:auto!important;align-items:start!important}.mapa-dropdown__option--children-level-1{padding-left:30px!important}.mapa-dropdown__option--children-level-2{padding-left:50px!important}.mapa-dropdown__option--children-level-3{padding-left:70px!important}.mapa-dropdown__option--children-level-4{padding-left:90px!important}.mapa-dropdown__option--children-level-5{padding-left:100px!important}.mapa-dropdown__option--children-level-6{padding-left:120px!important}.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}.mapa-dropdown__option--select-all .mat-checkbox{padding:0!important}.mapa-dropdown__option-value{text-wrap:auto}.mapa-dropdown__option .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}.mapa-dropdown__option .mat-option-text{height:auto!important}.mapa-dropdown--highlight .mat-form-field-outline{border-radius:16px!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-width:2px!important;border-color:#eedb2a!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--highlight .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--soft-border .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important}.mapa-dropdown--tag .mat-form-field-outline{border-radius:16px!important;height:42px!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-width:1px!important;border-color:#cdcdcd}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-start{display:none!important}.mapa-dropdown--tag .mat-form-field-outline .mat-form-field-outline-end{border-radius:16px!important;border-left-style:solid!important}.mapa-dropdown .mat-form-field-outline{background-color:#fff;border-radius:8px}.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-start,.mapa-dropdown .mat-form-field-outline .mat-form-field-outline-end{border-width:2px}.mapa-dropdown .mat-form-field-flex{display:flex;align-items:center;height:48px}.mapa-dropdown .mat-form-field-infix{border-top:unset!important;padding:unset!important;position:relative}.mapa-dropdown .mat-select-trigger{min-width:50px;padding-top:.3em;height:unset!important}.mapa-dropdown .mat-select-value-text{display:block;width:90%}.mapa-dropdown .mat-select-arrow-wrapper{transform:none!important}.mapa-dropdown .mat-select-arrow{border:unset}.mapa-dropdown .mat-select-arrow:before,.mapa-dropdown .mat-select-arrow:after{content:\"\";display:block;margin-top:-4px;position:absolute;right:10px;top:50%;width:0;border:solid black;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}.mapa-dropdown .mat-form-field-subscript-wrapper{padding:0!important}.mapa-dropdown [aria-expanded=true] .mat-select-arrow{margin:6px 0 0}.mapa-dropdown [aria-expanded=true] .mat-select-arrow:before,.mapa-dropdown [aria-expanded=true] .mat-select-arrow:after{transform:rotate(-135deg)!important;-webkit-transform:rotate(-135deg)!important}.mapa-overlay-dropdown{transform:translate(-16px) translateY(36px)!important}.mapa-overlay-dropdown .mat-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}.mapa-overlay-dropdown .mat-select-panel .mat-option,.mapa-overlay-dropdown .mat-select-panel .mat-option-text{font-family:Inter,Arial,Helvetica,sans-serif!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}.mapa-overlay-dropdown .mat-select-panel .mat-option[aria-disabled=true].contains-mat-select-search{height:48px}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inside-mat-option .mat-select-search-input{background-color:#fff;border:2px solid #a7aaad;border-radius:6px;margin:8px;height:2.3em!important;line-height:2.3em!important;width:96%}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-input{padding:8px 53px 8px 8px!important}.mapa-overlay-dropdown .mat-select-panel .mat-select-search-inner{background-color:#f6f7f7}.mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}.mapa-overlay-dropdown .mat-checkbox-frame{border-color:#c3c4c7!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { formControl: [{
                 type: Input
             }], formControlSearch: [{

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

@@ -85,10 +85,10 @@ export class MapaScaleParameterizationComponent {
     }
 }
 MapaScaleParameterizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaScaleParameterizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaScaleParameterizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaScaleParameterizationComponent, selector: "mapa-scale-parameterization", inputs: { data: "data", showProgressbar: "showProgressbar", showInterval: "showInterval", showDots: "showDots" }, viewQueries: [{ propertyName: "accordion", first: true, predicate: ["detailAccordion"], descendants: true }], ngImport: i0, template: "<section\n  class=\"mapa-scale-parameterization\"\n  *ngFor=\"let competence of data\"\n>\n  <section\n    class=\"mapa-scale-parameterization-scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <mat-accordion\n      class=\"mapa-scale-parameterization-accordion\"\n      #detailAccordion=\"matAccordion\"\n      multi\n    >\n      <mat-expansion-panel\n        class=\"mapa__card mapa-scale-parameterization-details\"\n        *ngFor=\"let scale of competence.scales\"\n      >\n        <mat-expansion-panel-header\n          class=\"mapa-scale-parameterization-details__top\"\n        >\n          <header class=\"mapa-scale-parameterization-details__header\">\n            <div\n              class=\"mapa-scale-parameterization-details__header--title mapa--display-m\"\n            >\n              <div\n                class=\"mapa-scale-parameterization-details__header--title-text\"\n              >\n                {{ scale.scaleName }}\n                <div\n                  *ngIf=\"showDots\"\n                  class=\"mapa-scale-parameterization-details__dots\"\n                >\n                  <mapa-capability-dot\n                    *ngFor=\"let item of getDimensionsAsCapability(scale).items\"\n                    type=\"small\"\n                    [item]=\"item\"\n                    [capability]=\"getDimensionsAsCapability(scale)\"\n                    [tooltip]=\"true\"\n                  ></mapa-capability-dot>\n                </div>\n              </div>\n\n              <div\n                *ngIf=\"scale.classification\"\n                class=\"mapa__tag--bg\"\n                [style.backgroundColor]=\"scale.classification.classificationColor\"\n                [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n              >\n                <span class=\"mapa__tag--text\"\n                  >{{ scale.classification.classificationName }}</span\n                >\n              </div>\n            </div>\n            <div\n              *ngIf=\"showProgressbar\"\n              class=\"scale__header--progressbar\"\n            >\n              <mapa-progressbar\n                *ngIf=\"showProgressbar && !scale.classification?.classificationBg\"\n                [data]=\"getProgressbarData(scale)\"\n              ></mapa-progressbar>\n              <mapa-capability-interval-bar\n                *ngIf=\"scale.classification?.classificationBg\"\n                [data]=\"getIntervalbarData(scale)\"\n                [showInterval]=\"true\"\n                reusable-interval-bar\n              ></mapa-capability-interval-bar>\n            </div>\n          </header>\n        </mat-expansion-panel-header>\n        <article\n          *ngIf=\"scale.scaleConcept\"\n          class=\"mapa-scale-parameterization-details__concept\"\n        >\n          <strong>Conceito:</strong> {{ scale.scaleConcept }}\n        </article>\n        <section\n          class=\"mapa-scale-parameterization-details__dimensions\"\n          [class.dimension--full-sized]=\"!showSummarized(scale)\"\n          [class.dimension--summarized]=\"showSummarized(scale)\"\n        >\n          <article\n            *ngFor=\"let dimension of scale.dimensions\"\n            class=\"mapa__card--sm dimension\"\n          >\n            <nav class=\"dimension__main\">\n              <div class=\"dimension__title\">\n                <div class=\"dimension__title--direction\">\n                  <span\n                    *ngIf=\"dimension.direction === 'Positiva'; else negativeDirection\"\n                    >\u2191</span\n                  >\n                  <ng-template #negativeDirection>\u2193</ng-template>\n                </div>\n                <div class=\"dimension__title--label\">\n                  {{ dimension.dimensionName }}\n                </div>\n              </div>\n              <div class=\"dimension--classification\">\n                <div\n                  *ngIf=\"dimension.classification\"\n                  class=\"mapa__tag--bg\"\n                  [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                  [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n                >\n                  <span class=\"mapa__tag--text\"\n                    >{{ dimension.classification.classificationName }}</span\n                  >\n                </div>\n              </div>\n            </nav>\n            <div\n              *ngIf=\"dimension.dimensionClassificationMessage\"\n              class=\"dimension__concept\"\n            >\n              {{ dimension.dimensionClassificationMessage }}\n            </div>\n          </article>\n        </section>\n      </mat-expansion-panel>\n    </mat-accordion>\n  </section>\n</section>\n", styles: [".mapa-scale-parameterization{display:flex;gap:24px;font-family:Inter,sans-serif;width:-moz-fit-content;width:fit-content}.mapa-scale-parameterization__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%;margin-bottom:unset!important}.mapa-scale-parameterization__header img{margin-right:16px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:8px;border-top-left-radius:8px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel{box-shadow:unset!important;padding:unset!important}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header{padding:24px;border-bottom:unset!important;width:-webkit-fill-available}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header .mat-content{padding-right:4px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{padding:24px!important}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-spacing{margin:unset!important}.mapa-scale-parameterization .mapa-scale-parameterization-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:unset!important;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}.mapa-scale-parameterization .mapa-scale-parameterization-details--title-text{display:flex}.mapa-scale-parameterization .mapa-scale-parameterization-details__dots{display:flex;align-items:center;margin-top:16px;gap:8px}.mapa-scale-parameterization .mapa-scale-parameterization-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin:20px 0}.mapa-scale-parameterization .mapa-scale-parameterization-details__header--title{display:flex;align-items:center;gap:24px}.mapa-scale-parameterization .mapa-scale-parameterization-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.mapa-scale-parameterization .mapa-scale-parameterization-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.mapa-scale-parameterization .mapa-scale-parameterization-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__main{display:flex;justify-content:space-between;width:100%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__main{width:35%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__concept{width:65%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--classification{display:flex;align-items:center;justify-content:center}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: i3.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "directive", type: i4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: i5.MapaProgressbarComponent, selector: "mapa-progressbar", inputs: ["data", "showInterval"] }], encapsulation: i0.ViewEncapsulation.None });
+MapaScaleParameterizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaScaleParameterizationComponent, selector: "mapa-scale-parameterization", inputs: { data: "data", showProgressbar: "showProgressbar", showInterval: "showInterval", showDots: "showDots" }, viewQueries: [{ propertyName: "accordion", first: true, predicate: ["detailAccordion"], descendants: true }], ngImport: i0, template: "<section\n  class=\"mapa-scale-parameterization\"\n  *ngFor=\"let competence of data\"\n>\n  <section\n    class=\"mapa-scale-parameterization-scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <mat-accordion\n      class=\"mapa-scale-parameterization-accordion\"\n      #detailAccordion=\"matAccordion\"\n      multi\n    >\n      <mat-expansion-panel\n        class=\"mapa__card mapa-scale-parameterization-details\"\n        *ngFor=\"let scale of competence.scales\"\n      >\n        <mat-expansion-panel-header\n          class=\"mapa-scale-parameterization-details__top\"\n        >\n          <header class=\"mapa-scale-parameterization-details__header\">\n            <div\n              class=\"mapa-scale-parameterization-details__header--title mapa--display-m\"\n            >\n              <div\n                class=\"mapa-scale-parameterization-details__header--title-text\"\n              >\n                {{ scale.scaleName }}\n                <div\n                  *ngIf=\"showDots\"\n                  class=\"mapa-scale-parameterization-details__dots\"\n                >\n                  <mapa-capability-dot\n                    *ngFor=\"let item of getDimensionsAsCapability(scale).items\"\n                    type=\"small\"\n                    [item]=\"item\"\n                    [capability]=\"getDimensionsAsCapability(scale)\"\n                    [tooltip]=\"true\"\n                  ></mapa-capability-dot>\n                </div>\n              </div>\n\n              <div\n                *ngIf=\"scale.classification\"\n                class=\"mapa__tag--bg\"\n                [style.backgroundColor]=\"scale.classification.classificationColor\"\n                [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n              >\n                <span class=\"mapa__tag--text\"\n                  >{{ scale.classification.classificationName }}</span\n                >\n              </div>\n            </div>\n            <div\n              *ngIf=\"showProgressbar\"\n              class=\"scale__header--progressbar\"\n            >\n              <mapa-progressbar\n                *ngIf=\"showProgressbar && !scale.classification?.classificationBg\"\n                [data]=\"getProgressbarData(scale)\"\n              ></mapa-progressbar>\n              <mapa-capability-interval-bar\n                *ngIf=\"scale.classification?.classificationBg\"\n                [data]=\"getIntervalbarData(scale)\"\n                [showInterval]=\"true\"\n                reusable-interval-bar\n              ></mapa-capability-interval-bar>\n            </div>\n          </header>\n        </mat-expansion-panel-header>\n        <article\n          *ngIf=\"scale.scaleConcept\"\n          class=\"mapa-scale-parameterization-details__concept\"\n        >\n          <strong>Conceito:</strong> {{ scale.scaleConcept }}\n        </article>\n        <section\n          class=\"mapa-scale-parameterization-details__dimensions\"\n          [class.dimension--full-sized]=\"!showSummarized(scale)\"\n          [class.dimension--summarized]=\"showSummarized(scale)\"\n        >\n          <article\n            *ngFor=\"let dimension of scale.dimensions\"\n            class=\"mapa__card--sm dimension\"\n          >\n            <nav class=\"dimension__main\">\n              <div class=\"dimension__title\">\n                <div class=\"dimension__title--direction\">\n                  <span\n                    *ngIf=\"dimension.direction === 'Positiva'; else negativeDirection\"\n                    >\u2191</span\n                  >\n                  <ng-template #negativeDirection>\u2193</ng-template>\n                </div>\n                <div class=\"dimension__title--label\">\n                  {{ dimension.dimensionName }}\n                </div>\n              </div>\n              <div class=\"dimension--classification\">\n                <div\n                  *ngIf=\"dimension.classification\"\n                  class=\"mapa__tag--bg\"\n                  [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                  [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n                >\n                  <span class=\"mapa__tag--text\"\n                    >{{ dimension.classification.classificationName }}</span\n                  >\n                </div>\n              </div>\n            </nav>\n            <div\n              *ngIf=\"dimension.dimensionClassificationMessage\"\n              class=\"dimension__concept\"\n            >\n              {{ dimension.dimensionClassificationMessage }}\n            </div>\n          </article>\n        </section>\n      </mat-expansion-panel>\n    </mat-accordion>\n  </section>\n</section>\n", styles: [".mapa-scale-parameterization{display:flex;gap:24px;font-family:Inter,Arial,Helvetica,sans-serif;width:-moz-fit-content;width:fit-content}.mapa-scale-parameterization__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%;margin-bottom:unset!important}.mapa-scale-parameterization__header img{margin-right:16px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:8px;border-top-left-radius:8px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel{box-shadow:unset!important;padding:unset!important}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header{padding:24px;border-bottom:unset!important;width:-webkit-fill-available}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header .mat-content{padding-right:4px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{padding:24px!important}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-spacing{margin:unset!important}.mapa-scale-parameterization .mapa-scale-parameterization-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:unset!important;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}.mapa-scale-parameterization .mapa-scale-parameterization-details--title-text{display:flex}.mapa-scale-parameterization .mapa-scale-parameterization-details__dots{display:flex;align-items:center;margin-top:16px;gap:8px}.mapa-scale-parameterization .mapa-scale-parameterization-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin:20px 0}.mapa-scale-parameterization .mapa-scale-parameterization-details__header--title{display:flex;align-items:center;gap:24px}.mapa-scale-parameterization .mapa-scale-parameterization-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.mapa-scale-parameterization .mapa-scale-parameterization-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.mapa-scale-parameterization .mapa-scale-parameterization-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__main{display:flex;justify-content:space-between;width:100%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__main{width:35%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__concept{width:65%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--classification{display:flex;align-items:center;justify-content:center}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "component", type: i3.MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "directive", type: i4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "component", type: i5.MapaProgressbarComponent, selector: "mapa-progressbar", inputs: ["data", "showInterval"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaScaleParameterizationComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-scale-parameterization", encapsulation: ViewEncapsulation.None, template: "<section\n  class=\"mapa-scale-parameterization\"\n  *ngFor=\"let competence of data\"\n>\n  <section\n    class=\"mapa-scale-parameterization-scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <mat-accordion\n      class=\"mapa-scale-parameterization-accordion\"\n      #detailAccordion=\"matAccordion\"\n      multi\n    >\n      <mat-expansion-panel\n        class=\"mapa__card mapa-scale-parameterization-details\"\n        *ngFor=\"let scale of competence.scales\"\n      >\n        <mat-expansion-panel-header\n          class=\"mapa-scale-parameterization-details__top\"\n        >\n          <header class=\"mapa-scale-parameterization-details__header\">\n            <div\n              class=\"mapa-scale-parameterization-details__header--title mapa--display-m\"\n            >\n              <div\n                class=\"mapa-scale-parameterization-details__header--title-text\"\n              >\n                {{ scale.scaleName }}\n                <div\n                  *ngIf=\"showDots\"\n                  class=\"mapa-scale-parameterization-details__dots\"\n                >\n                  <mapa-capability-dot\n                    *ngFor=\"let item of getDimensionsAsCapability(scale).items\"\n                    type=\"small\"\n                    [item]=\"item\"\n                    [capability]=\"getDimensionsAsCapability(scale)\"\n                    [tooltip]=\"true\"\n                  ></mapa-capability-dot>\n                </div>\n              </div>\n\n              <div\n                *ngIf=\"scale.classification\"\n                class=\"mapa__tag--bg\"\n                [style.backgroundColor]=\"scale.classification.classificationColor\"\n                [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n              >\n                <span class=\"mapa__tag--text\"\n                  >{{ scale.classification.classificationName }}</span\n                >\n              </div>\n            </div>\n            <div\n              *ngIf=\"showProgressbar\"\n              class=\"scale__header--progressbar\"\n            >\n              <mapa-progressbar\n                *ngIf=\"showProgressbar && !scale.classification?.classificationBg\"\n                [data]=\"getProgressbarData(scale)\"\n              ></mapa-progressbar>\n              <mapa-capability-interval-bar\n                *ngIf=\"scale.classification?.classificationBg\"\n                [data]=\"getIntervalbarData(scale)\"\n                [showInterval]=\"true\"\n                reusable-interval-bar\n              ></mapa-capability-interval-bar>\n            </div>\n          </header>\n        </mat-expansion-panel-header>\n        <article\n          *ngIf=\"scale.scaleConcept\"\n          class=\"mapa-scale-parameterization-details__concept\"\n        >\n          <strong>Conceito:</strong> {{ scale.scaleConcept }}\n        </article>\n        <section\n          class=\"mapa-scale-parameterization-details__dimensions\"\n          [class.dimension--full-sized]=\"!showSummarized(scale)\"\n          [class.dimension--summarized]=\"showSummarized(scale)\"\n        >\n          <article\n            *ngFor=\"let dimension of scale.dimensions\"\n            class=\"mapa__card--sm dimension\"\n          >\n            <nav class=\"dimension__main\">\n              <div class=\"dimension__title\">\n                <div class=\"dimension__title--direction\">\n                  <span\n                    *ngIf=\"dimension.direction === 'Positiva'; else negativeDirection\"\n                    >\u2191</span\n                  >\n                  <ng-template #negativeDirection>\u2193</ng-template>\n                </div>\n                <div class=\"dimension__title--label\">\n                  {{ dimension.dimensionName }}\n                </div>\n              </div>\n              <div class=\"dimension--classification\">\n                <div\n                  *ngIf=\"dimension.classification\"\n                  class=\"mapa__tag--bg\"\n                  [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                  [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n                >\n                  <span class=\"mapa__tag--text\"\n                    >{{ dimension.classification.classificationName }}</span\n                  >\n                </div>\n              </div>\n            </nav>\n            <div\n              *ngIf=\"dimension.dimensionClassificationMessage\"\n              class=\"dimension__concept\"\n            >\n              {{ dimension.dimensionClassificationMessage }}\n            </div>\n          </article>\n        </section>\n      </mat-expansion-panel>\n    </mat-accordion>\n  </section>\n</section>\n", styles: [".mapa-scale-parameterization{display:flex;gap:24px;font-family:Inter,sans-serif;width:-moz-fit-content;width:fit-content}.mapa-scale-parameterization__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%;margin-bottom:unset!important}.mapa-scale-parameterization__header img{margin-right:16px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:8px;border-top-left-radius:8px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel{box-shadow:unset!important;padding:unset!important}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header{padding:24px;border-bottom:unset!important;width:-webkit-fill-available}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header .mat-content{padding-right:4px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{padding:24px!important}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-spacing{margin:unset!important}.mapa-scale-parameterization .mapa-scale-parameterization-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:unset!important;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}.mapa-scale-parameterization .mapa-scale-parameterization-details--title-text{display:flex}.mapa-scale-parameterization .mapa-scale-parameterization-details__dots{display:flex;align-items:center;margin-top:16px;gap:8px}.mapa-scale-parameterization .mapa-scale-parameterization-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin:20px 0}.mapa-scale-parameterization .mapa-scale-parameterization-details__header--title{display:flex;align-items:center;gap:24px}.mapa-scale-parameterization .mapa-scale-parameterization-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.mapa-scale-parameterization .mapa-scale-parameterization-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.mapa-scale-parameterization .mapa-scale-parameterization-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__main{display:flex;justify-content:space-between;width:100%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__main{width:35%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__concept{width:65%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--classification{display:flex;align-items:center;justify-content:center}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
+            args: [{ selector: "mapa-scale-parameterization", encapsulation: ViewEncapsulation.None, template: "<section\n  class=\"mapa-scale-parameterization\"\n  *ngFor=\"let competence of data\"\n>\n  <section\n    class=\"mapa-scale-parameterization-scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <mat-accordion\n      class=\"mapa-scale-parameterization-accordion\"\n      #detailAccordion=\"matAccordion\"\n      multi\n    >\n      <mat-expansion-panel\n        class=\"mapa__card mapa-scale-parameterization-details\"\n        *ngFor=\"let scale of competence.scales\"\n      >\n        <mat-expansion-panel-header\n          class=\"mapa-scale-parameterization-details__top\"\n        >\n          <header class=\"mapa-scale-parameterization-details__header\">\n            <div\n              class=\"mapa-scale-parameterization-details__header--title mapa--display-m\"\n            >\n              <div\n                class=\"mapa-scale-parameterization-details__header--title-text\"\n              >\n                {{ scale.scaleName }}\n                <div\n                  *ngIf=\"showDots\"\n                  class=\"mapa-scale-parameterization-details__dots\"\n                >\n                  <mapa-capability-dot\n                    *ngFor=\"let item of getDimensionsAsCapability(scale).items\"\n                    type=\"small\"\n                    [item]=\"item\"\n                    [capability]=\"getDimensionsAsCapability(scale)\"\n                    [tooltip]=\"true\"\n                  ></mapa-capability-dot>\n                </div>\n              </div>\n\n              <div\n                *ngIf=\"scale.classification\"\n                class=\"mapa__tag--bg\"\n                [style.backgroundColor]=\"scale.classification.classificationColor\"\n                [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n              >\n                <span class=\"mapa__tag--text\"\n                  >{{ scale.classification.classificationName }}</span\n                >\n              </div>\n            </div>\n            <div\n              *ngIf=\"showProgressbar\"\n              class=\"scale__header--progressbar\"\n            >\n              <mapa-progressbar\n                *ngIf=\"showProgressbar && !scale.classification?.classificationBg\"\n                [data]=\"getProgressbarData(scale)\"\n              ></mapa-progressbar>\n              <mapa-capability-interval-bar\n                *ngIf=\"scale.classification?.classificationBg\"\n                [data]=\"getIntervalbarData(scale)\"\n                [showInterval]=\"true\"\n                reusable-interval-bar\n              ></mapa-capability-interval-bar>\n            </div>\n          </header>\n        </mat-expansion-panel-header>\n        <article\n          *ngIf=\"scale.scaleConcept\"\n          class=\"mapa-scale-parameterization-details__concept\"\n        >\n          <strong>Conceito:</strong> {{ scale.scaleConcept }}\n        </article>\n        <section\n          class=\"mapa-scale-parameterization-details__dimensions\"\n          [class.dimension--full-sized]=\"!showSummarized(scale)\"\n          [class.dimension--summarized]=\"showSummarized(scale)\"\n        >\n          <article\n            *ngFor=\"let dimension of scale.dimensions\"\n            class=\"mapa__card--sm dimension\"\n          >\n            <nav class=\"dimension__main\">\n              <div class=\"dimension__title\">\n                <div class=\"dimension__title--direction\">\n                  <span\n                    *ngIf=\"dimension.direction === 'Positiva'; else negativeDirection\"\n                    >\u2191</span\n                  >\n                  <ng-template #negativeDirection>\u2193</ng-template>\n                </div>\n                <div class=\"dimension__title--label\">\n                  {{ dimension.dimensionName }}\n                </div>\n              </div>\n              <div class=\"dimension--classification\">\n                <div\n                  *ngIf=\"dimension.classification\"\n                  class=\"mapa__tag--bg\"\n                  [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                  [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n                >\n                  <span class=\"mapa__tag--text\"\n                    >{{ dimension.classification.classificationName }}</span\n                  >\n                </div>\n              </div>\n            </nav>\n            <div\n              *ngIf=\"dimension.dimensionClassificationMessage\"\n              class=\"dimension__concept\"\n            >\n              {{ dimension.dimensionClassificationMessage }}\n            </div>\n          </article>\n        </section>\n      </mat-expansion-panel>\n    </mat-accordion>\n  </section>\n</section>\n", styles: [".mapa-scale-parameterization{display:flex;gap:24px;font-family:Inter,Arial,Helvetica,sans-serif;width:-moz-fit-content;width:fit-content}.mapa-scale-parameterization__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%;margin-bottom:unset!important}.mapa-scale-parameterization__header img{margin-right:16px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:8px;border-top-left-radius:8px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel{box-shadow:unset!important;padding:unset!important}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header{padding:24px;border-bottom:unset!important;width:-webkit-fill-available}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header .mat-content{padding-right:4px}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{padding:24px!important}.mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-spacing{margin:unset!important}.mapa-scale-parameterization .mapa-scale-parameterization-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:unset!important;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}.mapa-scale-parameterization .mapa-scale-parameterization-details--title-text{display:flex}.mapa-scale-parameterization .mapa-scale-parameterization-details__dots{display:flex;align-items:center;margin-top:16px;gap:8px}.mapa-scale-parameterization .mapa-scale-parameterization-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin:20px 0}.mapa-scale-parameterization .mapa-scale-parameterization-details__header--title{display:flex;align-items:center;gap:24px}.mapa-scale-parameterization .mapa-scale-parameterization-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.mapa-scale-parameterization .mapa-scale-parameterization-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.mapa-scale-parameterization .mapa-scale-parameterization-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__main{display:flex;justify-content:space-between;width:100%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__main{width:35%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__concept{width:65%}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--classification{display:flex;align-items:center;justify-content:center}.mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], showProgressbar: [{

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

@@ -4,10 +4,10 @@ import * as i1 from "@angular/common";
 export class TagComponent {
 }
 TagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagComponent, selector: "mapa-tag", inputs: { tag: "tag" }, ngImport: i0, template: "<div\n  *ngIf=\"tag\"\n  class=\"mapa-tag\"\n  [class.mapa-tag--small]=\"tag.size === 'small' && !tag.fontSize\"\n  [class.mapa-tag--highlight]=\"tag.color === 'highlight'\"\n  [class.mapa-tag--selected]=\"tag.color === 'selected'\"\n  [class.mapa-tag--default-bg]=\"!tag.bgColor\"\n  [class.mapa-tag--bg]=\"tag.bgColor\"\n  [style.backgroundColor]=\"tag.bgColor\"\n  [style.padding-left]=\"tag.fontSize\"\n  [style.border-radius]=\"tag.fontSize\"\n  [style.fontSize]=\"tag.fontSize\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".mapa-tag{font-family:Inter,sans-serif;display:flex;align-items:center;border-radius:16px;padding:8px 12px;margin:0 4px;white-space:nowrap}.mapa-tag--default-bg{border:1px solid #cdcdcd;background:#fff;font-weight:300}.mapa-tag--bg{font-weight:500!important;text-transform:uppercase;padding:4px 8px!important;height:24px!important;color:#181818;font-size:12px}.mapa-tag--highlight{border:2px solid #eedb2a!important}.mapa-tag--small{gap:8px;padding:2px 8px!important;font-size:12px}.mapa-tag--selected{padding:8px 16px!important;gap:16px;border-radius:8px!important;border:1px solid #d9d9d9!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagComponent, selector: "mapa-tag", inputs: { tag: "tag" }, ngImport: i0, template: "<div\n  *ngIf=\"tag\"\n  class=\"mapa-tag\"\n  [class.mapa-tag--small]=\"tag.size === 'small' && !tag.fontSize\"\n  [class.mapa-tag--highlight]=\"tag.color === 'highlight'\"\n  [class.mapa-tag--selected]=\"tag.color === 'selected'\"\n  [class.mapa-tag--default-bg]=\"!tag.bgColor\"\n  [class.mapa-tag--bg]=\"tag.bgColor\"\n  [style.backgroundColor]=\"tag.bgColor\"\n  [style.padding-left]=\"tag.fontSize\"\n  [style.border-radius]=\"tag.fontSize\"\n  [style.fontSize]=\"tag.fontSize\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".mapa-tag{font-family:Inter,Arial,Helvetica,sans-serif;display:flex;align-items:center;border-radius:16px;padding:8px 12px;margin:0 4px;white-space:nowrap}.mapa-tag--default-bg{border:1px solid #cdcdcd;background:#fff;font-weight:300}.mapa-tag--bg{font-weight:500!important;text-transform:uppercase;padding:4px 8px!important;height:24px!important;color:#181818;font-size:12px}.mapa-tag--highlight{border:2px solid #eedb2a!important}.mapa-tag--small{gap:8px;padding:2px 8px!important;font-size:12px}.mapa-tag--selected{padding:8px 16px!important;gap:16px;border-radius:8px!important;border:1px solid #d9d9d9!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-tag", template: "<div\n  *ngIf=\"tag\"\n  class=\"mapa-tag\"\n  [class.mapa-tag--small]=\"tag.size === 'small' && !tag.fontSize\"\n  [class.mapa-tag--highlight]=\"tag.color === 'highlight'\"\n  [class.mapa-tag--selected]=\"tag.color === 'selected'\"\n  [class.mapa-tag--default-bg]=\"!tag.bgColor\"\n  [class.mapa-tag--bg]=\"tag.bgColor\"\n  [style.backgroundColor]=\"tag.bgColor\"\n  [style.padding-left]=\"tag.fontSize\"\n  [style.border-radius]=\"tag.fontSize\"\n  [style.fontSize]=\"tag.fontSize\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".mapa-tag{font-family:Inter,sans-serif;display:flex;align-items:center;border-radius:16px;padding:8px 12px;margin:0 4px;white-space:nowrap}.mapa-tag--default-bg{border:1px solid #cdcdcd;background:#fff;font-weight:300}.mapa-tag--bg{font-weight:500!important;text-transform:uppercase;padding:4px 8px!important;height:24px!important;color:#181818;font-size:12px}.mapa-tag--highlight{border:2px solid #eedb2a!important}.mapa-tag--small{gap:8px;padding:2px 8px!important;font-size:12px}.mapa-tag--selected{padding:8px 16px!important;gap:16px;border-radius:8px!important;border:1px solid #d9d9d9!important}\n"] }]
+            args: [{ selector: "mapa-tag", template: "<div\n  *ngIf=\"tag\"\n  class=\"mapa-tag\"\n  [class.mapa-tag--small]=\"tag.size === 'small' && !tag.fontSize\"\n  [class.mapa-tag--highlight]=\"tag.color === 'highlight'\"\n  [class.mapa-tag--selected]=\"tag.color === 'selected'\"\n  [class.mapa-tag--default-bg]=\"!tag.bgColor\"\n  [class.mapa-tag--bg]=\"tag.bgColor\"\n  [style.backgroundColor]=\"tag.bgColor\"\n  [style.padding-left]=\"tag.fontSize\"\n  [style.border-radius]=\"tag.fontSize\"\n  [style.fontSize]=\"tag.fontSize\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".mapa-tag{font-family:Inter,Arial,Helvetica,sans-serif;display:flex;align-items:center;border-radius:16px;padding:8px 12px;margin:0 4px;white-space:nowrap}.mapa-tag--default-bg{border:1px solid #cdcdcd;background:#fff;font-weight:300}.mapa-tag--bg{font-weight:500!important;text-transform:uppercase;padding:4px 8px!important;height:24px!important;color:#181818;font-size:12px}.mapa-tag--highlight{border:2px solid #eedb2a!important}.mapa-tag--small{gap:8px;padding:2px 8px!important;font-size:12px}.mapa-tag--selected{padding:8px 16px!important;gap:16px;border-radius:8px!important;border:1px solid #d9d9d9!important}\n"] }]
         }], propDecorators: { tag: [{
                 type: Input
             }] } });

package/esm2020/src/lib/components/slide-toggle/lib/components/slide-toggle/src/slide-toggle.component.mjs

@@ -17,10 +17,10 @@ export class SlideToggleComponent {
     }
 }
 SlideToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SlideToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SlideToggleComponent, selector: "mapa-slide-toggle", inputs: { formControl: "formControl", element: "element" }, outputs: { optionSelected: "optionSelected" }, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl?.value ? element.status[1].label :\n    element.status[0].label ) :( formControl?.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }], encapsulation: i0.ViewEncapsulation.None });
+SlideToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SlideToggleComponent, selector: "mapa-slide-toggle", inputs: { formControl: "formControl", element: "element" }, outputs: { optionSelected: "optionSelected" }, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl?.value ? element.status[1].label :\n    element.status[0].label ) :( formControl?.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SlideToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-slide-toggle', encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl?.value ? element.status[1].label :\n    element.status[0].label ) :( formControl?.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}\n"] }]
+            args: [{ selector: 'mapa-slide-toggle', encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl?.value ? element.status[1].label :\n    element.status[0].label ) :( formControl?.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__label{display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { formControl: [{
                 type: Input
             }], element: [{