mapa-library-ui 0.77.5 → 0.90.0

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

@@ -1,21 +1,154 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, ViewEncapsulation, Output, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
+import { InjectionToken, Injectable, Optional, Inject, Component, Input, EventEmitter, ViewEncapsulation, Output, NgModule } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Md5 } from 'ts-md5';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1$1 from '@angular/material/icon';
+import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2 from '@angular/platform-browser';
-import * as i2$1 from 'mapa-library-ui/src/lib/components/button';
+import * as i2$1 from '@angular/platform-browser';
+import * as i3 from 'mapa-library-ui/src/lib/components/button';
 import { MapaButtonModule as MapaButtonModule$1 } from 'mapa-library-ui/src/lib/components/button';
-import * as i3 from 'mapa-library-ui/src/lib/components/checkbox';
+import * as i4 from 'mapa-library-ui/src/lib/components/checkbox';
 import { MapaCheckboxModule } from 'mapa-library-ui/src/lib/components/checkbox';
-import * as i4 from 'mapa-library-ui/src/lib/components/dropdown';
+import * as i5 from 'mapa-library-ui/src/lib/components/dropdown';
 import { MapaDropdownModule } from 'mapa-library-ui/src/lib/components/dropdown';
-import * as i5 from 'mapa-library-ui/src/lib/components/input';
+import * as i6 from 'mapa-library-ui/src/lib/components/input';
 import { MapaInputModule } from 'mapa-library-ui/src/lib/components/input';
 
+const MAPA_UI_TEXTS = new InjectionToken("MAPA_UI_TEXTS");
+const MAPA_UI_DEFAULT_TEXTS = {
+    common: {
+        selectAll: "Selecionar todos",
+    },
+    filters: {
+        clear: "Limpar filtros",
+        submit: "Filtrar",
+    },
+    datepicker: {
+        startDatePlaceholder: "Data inicial",
+        endDatePlaceholder: "Data final",
+    },
+    capability: {
+        groupAverageTitle: "Média geral do grupo",
+        individualAverageTitle: "Média geral do indivíduo",
+        conceptTitle: "Conceito",
+        resultTitle: "Resultado",
+        positiveIndicatorsTitle: "Indicadores positivos",
+        negativeIndicatorsTitle: "Indicadores negativos",
+        riskIndicatorsTitle: "Indicadores de risco",
+        precipitationRiskTitle: "Risco de acidente por precipitação",
+        negligenceRiskTitle: "Risco de acidente por negligência",
+        negativeDirectionLabel: "Direção Negativa |",
+        positiveDirectionLabel: "Direção Positiva |",
+    },
+    paginator: {
+        itemsPerPage: "Itens por página",
+        nextPage: "Próxima página",
+        previousPage: "Página anterior",
+        rangeLabel: (page, pageSize, length) => {
+            if (length === 0 || pageSize === 0) {
+                return `0 de ${length}`;
+            }
+            const startIndex = page * pageSize;
+            const endIndex = startIndex < length
+                ? Math.min(startIndex + pageSize, length)
+                : startIndex + pageSize;
+            return `${startIndex + 1} - ${endIndex} de ${length}`;
+        },
+        showingRangeLabel: (page, pageSize, length) => {
+            if (length === 0) {
+                return "Mostrando 0 - 0 de 0 item";
+            }
+            const startIndex = page * pageSize;
+            const endIndex = startIndex < length
+                ? Math.min(startIndex + pageSize, length)
+                : startIndex + pageSize;
+            const itemLabel = length === 1 ? "item" : "itens";
+            return `Mostrando ${startIndex + 1} - ${endIndex} de ${length} ${itemLabel}`;
+        },
+    },
+    validation: {
+        cnpj: "CNPJ inválido",
+        cpf: "CPF inválido",
+        email: "E-mail inválido",
+        max: (context) => `O valor máximo permitido é ${context?.max ?? ""}`.trim(),
+        maxLength: (context) => `O máximo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
+        min: (context) => `O valor minimo permitido é ${context?.min ?? ""}`.trim(),
+        minLength: (context) => `O mínimo permitido é ${context?.requiredLength ?? ""} caracteres`.trim(),
+        pattern: "Formato inválido",
+        required: "Campo obrigatório",
+    },
+};
+function mergeMapaUiTexts(customTexts) {
+    return {
+        common: {
+            ...MAPA_UI_DEFAULT_TEXTS.common,
+            ...(customTexts?.common ?? {}),
+        },
+        filters: {
+            ...MAPA_UI_DEFAULT_TEXTS.filters,
+            ...(customTexts?.filters ?? {}),
+        },
+        datepicker: {
+            ...MAPA_UI_DEFAULT_TEXTS.datepicker,
+            ...(customTexts?.datepicker ?? {}),
+        },
+        capability: {
+            ...MAPA_UI_DEFAULT_TEXTS.capability,
+            ...(customTexts?.capability ?? {}),
+        },
+        paginator: {
+            ...MAPA_UI_DEFAULT_TEXTS.paginator,
+            ...(customTexts?.paginator ?? {}),
+        },
+        validation: {
+            ...MAPA_UI_DEFAULT_TEXTS.validation,
+            ...(customTexts?.validation ?? {}),
+        },
+    };
+}
+function provideMapaUiTexts(texts) {
+    return {
+        provide: MAPA_UI_TEXTS,
+        useValue: texts,
+    };
+}
+
+class MapaI18nService {
+    constructor(customTexts) {
+        this.textsSubject = new BehaviorSubject(mergeMapaUiTexts(customTexts));
+        this.texts$ = this.textsSubject.asObservable();
+    }
+    get texts() {
+        return this.textsSubject.value;
+    }
+    setTexts(texts) {
+        this.textsSubject.next(mergeMapaUiTexts(texts));
+    }
+    resolveValidationText(key, context) {
+        return this.resolveText(this.texts.validation[key], context);
+    }
+    resolveText(value, context) {
+        return typeof value === "function" ? value(context) : value;
+    }
+}
+MapaI18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaI18nService, deps: [{ token: MAPA_UI_TEXTS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+MapaI18nService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaI18nService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaI18nService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAPA_UI_TEXTS]
+                }] }]; } });
+
 class MapaCapabilityIntervalComponent {
     constructor() {
         this.SVG = [
@@ -83,10 +216,10 @@ class MapaCapabilityIntervalComponent {
     }
 }
 MapaCapabilityIntervalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaCapabilityIntervalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: { data: "data", showInterval: "showInterval" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\n  <li\n    class=\"capability__interval--item\"\n    *ngFor=\"let block of SVG; let i = index\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"30\"\n      fill=\"none\"\n      [class]=\"'svg_' + i + '_' + getWidth(i)\"\n    >\n      <defs *ngIf=\"hasTransform && i === indexTransform\">\n        <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n          <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\" />\n          <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\" />\n        </linearGradient>\n      </defs>\n      <rect\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFill(i)\"\n      />\n      <rect\n        *ngIf=\"hasTransform && i === indexTransform\"\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFillGradient()\"\n      />\n    </svg>\n  </li>\n  <li class=\"capability__interval--interval\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,Arial,Helvetica,sans-serif;font-size:38px;font-style:normal;font-weight:500;display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MapaCapabilityIntervalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaCapabilityIntervalComponent, selector: "mapa-capability-interval", inputs: { data: "data", showInterval: "showInterval" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\n  <li\n    class=\"capability__interval--item\"\n    *ngFor=\"let block of SVG; let i = index\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"30\"\n      fill=\"none\"\n      [class]=\"'svg_' + i + '_' + getWidth(i)\"\n    >\n      <defs *ngIf=\"hasTransform && i === indexTransform\">\n        <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n          <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\" />\n          <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\" />\n        </linearGradient>\n      </defs>\n      <rect\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFill(i)\"\n      />\n      <rect\n        *ngIf=\"hasTransform && i === indexTransform\"\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFillGradient()\"\n      />\n    </svg>\n  </li>\n  <li class=\"capability__interval--interval\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:38px;font-style:normal;font-weight:500;display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\n  <li\n    class=\"capability__interval--item\"\n    *ngFor=\"let block of SVG; let i = index\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"30\"\n      fill=\"none\"\n      [class]=\"'svg_' + i + '_' + getWidth(i)\"\n    >\n      <defs *ngIf=\"hasTransform && i === indexTransform\">\n        <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n          <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\" />\n          <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\" />\n        </linearGradient>\n      </defs>\n      <rect\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFill(i)\"\n      />\n      <rect\n        *ngIf=\"hasTransform && i === indexTransform\"\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFillGradient()\"\n      />\n    </svg>\n  </li>\n  <li class=\"capability__interval--interval\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:Inter,Arial,Helvetica,sans-serif;font-size:38px;font-style:normal;font-weight:500;display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
+            args: [{ selector: "mapa-capability-interval", template: "<ul class=\"capability__interval\" *ngIf=\"isSVG(); else progressBar\">\n  <li\n    class=\"capability__interval--item\"\n    *ngFor=\"let block of SVG; let i = index\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"30\"\n      fill=\"none\"\n      [class]=\"'svg_' + i + '_' + getWidth(i)\"\n    >\n      <defs *ngIf=\"hasTransform && i === indexTransform\">\n        <linearGradient [attr.id]=\"paintLinear\" gradientUnits=\"userSpaceOnUse\">\n          <stop [attr.offset]=\"getStartOffset()\" stop-color=\"#8C8F94\" />\n          <stop [attr.offset]=\"getStopOffset()\" stop-color=\"#D9D9D9\" />\n        </linearGradient>\n      </defs>\n      <rect\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFill(i)\"\n      />\n      <rect\n        *ngIf=\"hasTransform && i === indexTransform\"\n        rx=\"6\"\n        x=\"0\"\n        y=\"0.710938\"\n        [attr.width]=\"SVG[i].width\"\n        [attr.height]=\"SVG[i].height\"\n        [attr.fill]=\"getFillGradient()\"\n      />\n    </svg>\n  </li>\n  <li class=\"capability__interval--interval\" *ngIf=\"showInterval\">\n    {{ data.interval }}%\n  </li>\n</ul>\n<ng-template #progressBar>\n  <div class=\"capability__progress-bar\">\n    <div class=\"capability__progress-bar--bg\">\n      <div\n        class=\"capability__progress-bar--filled\"\n        [style.width.%]=\"data.interval\"\n      ></div>\n    </div>\n    <div class=\"capability__interval--result\" *ngIf=\"showInterval\">\n      {{data.interval}}%\n    </div>\n  </div>\n</ng-template>\n", styles: [".capability__interval{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:38px;font-style:normal;font-weight:500;display:flex;align-items:center;list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.capability__interval--interval{display:flex;align-items:flex-start;justify-content:flex-end;text-align:right;font-size:24px;font-style:normal;font-weight:500;height:36px;padding-left:16px;width:68px}.capability__interval--item{border-radius:6px;margin-right:2px;width:18px;height:34px;position:relative}.capability__interval--item:last-of-type{margin-right:0}.capability__interval--percentage{background-color:#d9d9d9;height:34.57px}.capability__progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px}.capability__progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.capability__progress-bar--filled{position:absolute;top:0;left:0;background-color:#ea561d;border-radius:6px;height:8px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], showInterval: [{
@@ -98,9 +231,6 @@ class MapaCapabilityIntervalBarComponent {
         this.clicked = new EventEmitter();
         this.isHovering = false;
         this.isClicked = false;
-        this.clicked.subscribe((res) => {
-            this.isClicked = !this.isClicked;
-        });
     }
     isSVG() {
         return !!this.data.classificationBg && this.data.classificationBg === "SVG";
@@ -111,7 +241,7 @@ MapaCapabilityIntervalBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaCapabilityIntervalBarComponent, decorators: [{
             type: Component,
             args: [{ selector: "mapa-capability-interval-bar", encapsulation: ViewEncapsulation.None, template: "<section reusable-outlet class=\"capability-interval\">\n  <section [class.capability-interval__bar]=\"isSVG()\">\n    <mapa-capability-interval\n      [data]=\"data\"\n      [showInterval]=\"showInterval\"\n    ></mapa-capability-interval>\n  </section>\n</section>\n", styles: [".capability-interval{display:flex;align-items:center;position:relative;height:72px;margin-right:16px}.capability-interval__bar{display:flex;align-items:center;justify-content:center;max-height:72px;height:100%}.capability-interval__show-more{display:flex;align-items:center;justify-content:flex-end;max-height:72px;height:100%;width:100%}.capability-interval__show-more mapa-button,.capability-interval__show-more button{width:100%;justify-content:flex-end!important}.capability-interval--hide{opacity:0;max-height:0}.capability-interval--hide>*{opacity:0;max-height:0}.capability-interval--show{opacity:1;max-height:72px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+        }], propDecorators: { data: [{
                 type: Input
             }], expanded: [{
                 type: Input
@@ -127,7 +257,7 @@ class MapaProgressbarComponent {
     }
 }
 MapaProgressbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaProgressbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaProgressbarComponent, selector: "mapa-progressbar", inputs: { data: "data", showInterval: "showInterval" }, ngImport: i0, template: "<div class=\"progress-bar\">\n  <div class=\"progress-bar--bg\">\n    <div\n      class=\"progress-bar--filled\"\n      [style.width.%]=\"data.interval\"\n      [style.backgroundColor]=\"data.classification?.classificationColor\"\n    ></div>\n  </div>\n  <div class=\"progress-bar--interval\" *ngIf=\"showInterval\">\n    {{data.interval}}%\n  </div>\n</div>\n", styles: [".progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px;gap:20px}.progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.progress-bar--filled{position:absolute;top:0;left:0;background-color:#c6c6c6;border-radius:6px;height:8px}.progress-bar--interval{color:#2e2a2a;text-align:center;font-size:24px;font-style:normal;font-weight:400;line-height:32px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MapaProgressbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaProgressbarComponent, selector: "mapa-progressbar", inputs: { data: "data", showInterval: "showInterval" }, ngImport: i0, template: "<div class=\"progress-bar\">\n  <div class=\"progress-bar--bg\">\n    <div\n      class=\"progress-bar--filled\"\n      [style.width.%]=\"data.interval\"\n      [style.backgroundColor]=\"data.classification?.classificationColor\"\n    ></div>\n  </div>\n  <div class=\"progress-bar--interval\" *ngIf=\"showInterval\">\n    {{data.interval}}%\n  </div>\n</div>\n", styles: [".progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px;gap:20px}.progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.progress-bar--filled{position:absolute;top:0;left:0;background-color:#c6c6c6;border-radius:6px;height:8px}.progress-bar--interval{color:#2e2a2a;text-align:center;font-size:24px;font-style:normal;font-weight:400;line-height:32px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaProgressbarComponent, decorators: [{
             type: Component,
             args: [{ selector: "mapa-progressbar", template: "<div class=\"progress-bar\">\n  <div class=\"progress-bar--bg\">\n    <div\n      class=\"progress-bar--filled\"\n      [style.width.%]=\"data.interval\"\n      [style.backgroundColor]=\"data.classification?.classificationColor\"\n    ></div>\n  </div>\n  <div class=\"progress-bar--interval\" *ngIf=\"showInterval\">\n    {{data.interval}}%\n  </div>\n</div>\n", styles: [".progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px;gap:20px}.progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.progress-bar--filled{position:absolute;top:0;left:0;background-color:#c6c6c6;border-radius:6px;height:8px}.progress-bar--interval{color:#2e2a2a;text-align:center;font-size:24px;font-style:normal;font-weight:400;line-height:32px}\n"] }]
@@ -138,8 +268,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class MapaScaleComponent {
-    constructor() {
+    constructor(i18n) {
+        this.i18n = i18n;
         this.showProgressbar = true;
+        this.texts = this.i18n.texts;
+        this.onDestroy$ = new Subject();
+        this.i18n.texts$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((texts) => (this.texts = texts));
+    }
+    get conceptTitle() {
+        return this.texts.capability.conceptTitle;
     }
     getProgressbarData(scale) {
         return {
@@ -179,13 +318,17 @@ class MapaScaleComponent {
         }
         return `assets/images/icons/${img}.svg`;
     }
+    ngOnDestroy() {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
 }
-MapaScaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaScaleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaScaleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaScaleComponent, selector: "mapa-scale", inputs: { data: "data", showProgressbar: "showProgressbar" }, ngImport: i0, template: "<section class=\"mapa__card competence\" *ngFor=\"let competence of data\">\n  <header class=\"competence__header\">\n    <img [src]=\"getCompetenceImg(competence)\" />\n    {{ competence.competenceName }}\n  </header>\n  <section\n    class=\"scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <section\n      class=\"mapa__card scale-details\"\n      *ngFor=\"let scale of competence.scales\"\n    >\n      <section class=\"scale-details__top\">\n        <header class=\"scale-details__header\">\n          <div class=\"scale-details__header--title mapa--display-m\">\n            {{ scale.scaleName }}\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        <article *ngIf=\"scale.scaleConcept\" class=\"scale-details__concept\">\n          <strong>Conceito:</strong> {{ scale.scaleConcept }}\n        </article>\n      </section>\n      <section\n        class=\"scale-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    </section>\n  </section>\n</section>\n", styles: [".competence{display:flex;gap:24px;font-family:Inter,Arial,Helvetica,sans-serif;width:-moz-fit-content;width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}@media (max-width: 768px){.competence .scales--summarized{grid-template-columns:1fr}}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-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-bottom:20px;gap:18px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}@media (max-width: 768px){.competence .scale-details .dimension--full-sized .dimension__main{width:auto;flex-direction:column;justify-content:start;gap:26px}}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-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}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}@media (max-width: 768px){.competence{overflow-x:auto;width:auto}}\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: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: MapaProgressbarComponent, selector: "mapa-progressbar", inputs: ["data", "showInterval"] }] });
+MapaScaleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaScaleComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component });
+MapaScaleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaScaleComponent, selector: "mapa-scale", inputs: { data: "data", showProgressbar: "showProgressbar" }, ngImport: i0, template: "<section class=\"mapa__card competence\" *ngFor=\"let competence of data\">\n  <header class=\"competence__header\">\n    <img [src]=\"getCompetenceImg(competence)\" />\n    {{ competence.competenceName }}\n  </header>\n  <section\n    class=\"scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <section\n      class=\"mapa__card scale-details\"\n      *ngFor=\"let scale of competence.scales\"\n    >\n      <section class=\"scale-details__top\">\n        <header class=\"scale-details__header\">\n          <div class=\"scale-details__header--title mapa--display-m\">\n            {{ scale.scaleName }}\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        <article *ngIf=\"scale.scaleConcept\" class=\"scale-details__concept\">\n          <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n        </article>\n      </section>\n      <section\n        class=\"scale-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                  >&uarr;</span\n                >\n                <ng-template #negativeDirection>&darr;</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    </section>\n  </section>\n</section>\n\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:-moz-fit-content;width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}@media (max-width: 768px){.competence .scales--summarized{grid-template-columns:1fr}}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-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-bottom:20px;gap:18px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}@media (max-width: 768px){.competence .scale-details .dimension--full-sized .dimension__main{width:auto;flex-direction:column;justify-content:start;gap:26px}}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-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}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}@media (max-width: 768px){.competence{overflow-x:auto;width:auto}}\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: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: MapaProgressbarComponent, selector: "mapa-progressbar", inputs: ["data", "showInterval"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaScaleComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-scale", template: "<section class=\"mapa__card competence\" *ngFor=\"let competence of data\">\n  <header class=\"competence__header\">\n    <img [src]=\"getCompetenceImg(competence)\" />\n    {{ competence.competenceName }}\n  </header>\n  <section\n    class=\"scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <section\n      class=\"mapa__card scale-details\"\n      *ngFor=\"let scale of competence.scales\"\n    >\n      <section class=\"scale-details__top\">\n        <header class=\"scale-details__header\">\n          <div class=\"scale-details__header--title mapa--display-m\">\n            {{ scale.scaleName }}\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        <article *ngIf=\"scale.scaleConcept\" class=\"scale-details__concept\">\n          <strong>Conceito:</strong> {{ scale.scaleConcept }}\n        </article>\n      </section>\n      <section\n        class=\"scale-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    </section>\n  </section>\n</section>\n", styles: [".competence{display:flex;gap:24px;font-family:Inter,Arial,Helvetica,sans-serif;width:-moz-fit-content;width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}@media (max-width: 768px){.competence .scales--summarized{grid-template-columns:1fr}}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-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-bottom:20px;gap:18px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}@media (max-width: 768px){.competence .scale-details .dimension--full-sized .dimension__main{width:auto;flex-direction:column;justify-content:start;gap:26px}}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-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}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}@media (max-width: 768px){.competence{overflow-x:auto;width:auto}}\n"] }]
-        }], propDecorators: { data: [{
+            args: [{ selector: "mapa-scale", template: "<section class=\"mapa__card competence\" *ngFor=\"let competence of data\">\n  <header class=\"competence__header\">\n    <img [src]=\"getCompetenceImg(competence)\" />\n    {{ competence.competenceName }}\n  </header>\n  <section\n    class=\"scales\"\n    [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n    [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n  >\n    <section\n      class=\"mapa__card scale-details\"\n      *ngFor=\"let scale of competence.scales\"\n    >\n      <section class=\"scale-details__top\">\n        <header class=\"scale-details__header\">\n          <div class=\"scale-details__header--title mapa--display-m\">\n            {{ scale.scaleName }}\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        <article *ngIf=\"scale.scaleConcept\" class=\"scale-details__concept\">\n          <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n        </article>\n      </section>\n      <section\n        class=\"scale-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                  >&uarr;</span\n                >\n                <ng-template #negativeDirection>&darr;</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    </section>\n  </section>\n</section>\n\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:-moz-fit-content;width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}@media (max-width: 768px){.competence .scales--summarized{grid-template-columns:1fr}}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-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-bottom:20px;gap:18px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:-moz-fit-content;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}@media (max-width: 768px){.competence .scale-details .dimension--full-sized .dimension__main{width:auto;flex-direction:column;justify-content:start;gap:26px}}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-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}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}@media (max-width: 768px){.competence{overflow-x:auto;width:auto}}\n"] }]
+        }], ctorParameters: function () { return [{ type: MapaI18nService }]; }, propDecorators: { data: [{
                 type: Input
             }], showProgressbar: [{
                 type: Input
@@ -194,10 +337,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class MapaDetailsComponent {
 }
 MapaDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MapaDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaDetailsComponent, selector: "mapa-details", ngImport: i0, template: "<p>details works!</p>\n", styles: [""] });
+MapaDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaDetailsComponent, selector: "mapa-details", ngImport: i0, template: "<ng-container></ng-container>\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-details', template: "<p>details works!</p>\n" }]
+            args: [{ selector: 'mapa-details', template: "<ng-container></ng-container>\n" }]
         }] });
 
 class ButtonComponent {
@@ -209,10 +352,10 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, selector: "mapa-button", inputs: { color: "color", disabled: "disabled" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:Inter,Arial,Helvetica,sans-serif;font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, selector: "mapa-button", inputs: { color: "color", disabled: "disabled" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-button', template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:Inter,Arial,Helvetica,sans-serif;font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }]
+            args: [{ selector: 'mapa-button', template: "<button\n  class=\"mapa-button\"\n  (click)=\"onClick()\"\n  [class.primary]=\"color === 'primary'\"\n  [class.accent]=\"color === 'accent'\"\n  [class.basic]=\"color === 'basic'\"\n  [disabled]=\"disabled\"\n>\n  <ng-content></ng-content>\n</button>  ", styles: [".mapa-button{display:flex;padding:14px 42px;justify-content:center;align-items:center;gap:10px;border-radius:28px;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-weight:500;cursor:pointer;transform-origin:center;transition:transform .2s ease-in-out}.mapa-button:active{transform:scale(1.1)}.mapa-button:disabled{color:#dcdcde!important;background-color:transparent!important}.mapa-button.basic{color:#ea561d;background-color:transparent}.mapa-button.accent{border:2px solid #ea561d!important;color:#ea561d;background-color:#fff}.mapa-button.primary{background-color:#ea561d;color:#fff}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], disabled: [{
@@ -251,12 +394,12 @@ class IconComponent {
         this.matIconRegistry.addSvgIcon(svg, this.domSanitizer.bypassSecurityTrustResourceUrl(`../../../../assets/${svg}.svg`));
     }
 }
-IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, deps: [{ token: i1$1.MatIconRegistry }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IconComponent, selector: "mapa-icon", inputs: { svg: "svg" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon *ngIf=\"svg\" [svgIcon]=\"svg\"></mat-icon>\n<mat-icon *ngIf=\"!svg\"><ng-content></ng-content></mat-icon>\n", styles: [".mat-icon{color:#f5704b}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, deps: [{ token: i1.MatIconRegistry }, { token: i2$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IconComponent, selector: "mapa-icon", inputs: { svg: "svg" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon *ngIf=\"svg\" [svgIcon]=\"svg\"></mat-icon>\n<mat-icon *ngIf=\"!svg\"><ng-content></ng-content></mat-icon>\n", styles: [".mat-icon{color:#f5704b}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mapa-icon', template: "<mat-icon *ngIf=\"svg\" [svgIcon]=\"svg\"></mat-icon>\n<mat-icon *ngIf=\"!svg\"><ng-content></ng-content></mat-icon>\n", styles: [".mat-icon{color:#f5704b}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatIconRegistry }, { type: i2.DomSanitizer }]; }, propDecorators: { svg: [{
+        }], ctorParameters: function () { return [{ type: i1.MatIconRegistry }, { type: i2$1.DomSanitizer }]; }, propDecorators: { svg: [{
                 type: Input
             }] } });
 
@@ -279,8 +422,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  */
 
 class FiltersComponent {
-    constructor() {
+    constructor(i18n) {
+        this.i18n = i18n;
         this.selectedValues = new EventEmitter();
+        this.texts = this.i18n.texts;
+        this.onDestroy$ = new Subject();
+        this.i18n.texts$
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe((texts) => (this.texts = texts));
+    }
+    get clearFiltersLabel() {
+        return this.texts.filters.clear;
+    }
+    get submitFiltersLabel() {
+        return this.texts.filters.submit;
     }
     getFormControl(filterKey) {
         return this.form.get(filterKey);
@@ -291,13 +446,17 @@ class FiltersComponent {
     emitSelectedValues() {
         this.selectedValues.emit(this.form.value);
     }
+    ngOnDestroy() {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
 }
-FiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FiltersComponent, selector: "mapa-filters", inputs: { form: "form", elements: "elements" }, outputs: { selectedValues: "selectedValues" }, ngImport: i0, template: "<div class=\"filter\">\n  <div *ngFor=\"let filter of elements\">\n    <div *ngIf=\"filter.controlType === 'checkbox'\" class=\"filter__item--resizable\">\n      <mapa-checkbox [formControl]=\"getFormControl(filter.key)\"></mapa-checkbox>\n    </div>\n    <div *ngIf=\"filter.controlType === 'dropdown'\" class=\"filter__item--resizable\">\n      <mapa-dropdown\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-dropdown>\n    </div>\n    <div *ngIf=\"filter.controlType === 'input'\" class=\"filter__item\">\n      <mapa-input\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-input>\n    </div>\n  </div>\n  <div class=\"filter__item\">\n    <mapa-button [color]=\"'basic'\" (clicked)=\"clearFilters()\">\n      Limpar filtros\n    </mapa-button>\n    <mapa-button\n      [color]=\"'primary'\"\n      [disabled]=\"!!form.invalid\"\n      (clicked)=\"emitSelectedValues()\"\n    >\n      Filtrar\n    </mapa-button>\n  </div>\n</div>\n\n", styles: [".filter{display:flex;align-items:center;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:95vw;gap:30px}.filter__item{display:flex}.filter .mapa-dropdown{max-width:none;min-width:10vw}.filter .mapa-dropdown--labeled .mat-form-field-flex{height:40px!important}\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$1.ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i3.CheckboxComponent, selector: "mapa-checkbox", inputs: ["color", "formControl"] }, { kind: "component", type: i4.MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }, { kind: "component", type: i5.MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }] });
+FiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FiltersComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component });
+FiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FiltersComponent, selector: "mapa-filters", inputs: { form: "form", elements: "elements" }, outputs: { selectedValues: "selectedValues" }, ngImport: i0, template: "<div class=\"filter\">\n  <div *ngFor=\"let filter of elements\">\n    <div *ngIf=\"filter.controlType === 'checkbox'\" class=\"filter__item--resizable\">\n      <mapa-checkbox [formControl]=\"getFormControl(filter.key)\"></mapa-checkbox>\n    </div>\n    <div *ngIf=\"filter.controlType === 'dropdown'\" class=\"filter__item--resizable\">\n      <mapa-dropdown\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-dropdown>\n    </div>\n    <div *ngIf=\"filter.controlType === 'input'\" class=\"filter__item\">\n      <mapa-input\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-input>\n    </div>\n  </div>\n  <div class=\"filter__item\">\n    <mapa-button [color]=\"'basic'\" (clicked)=\"clearFilters()\">\n      {{ clearFiltersLabel }}\n    </mapa-button>\n    <mapa-button\n      [color]=\"'primary'\"\n      [disabled]=\"!!form.invalid\"\n      (clicked)=\"emitSelectedValues()\"\n    >\n      {{ submitFiltersLabel }}\n    </mapa-button>\n  </div>\n</div>\n\n", styles: [".filter{display:flex;align-items:center;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:95vw;gap:30px}.filter__item{display:flex}.filter .mapa-dropdown{max-width:none;min-width:10vw}.filter .mapa-dropdown--labeled .mat-form-field-flex{height:40px!important}\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.ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: i4.CheckboxComponent, selector: "mapa-checkbox", inputs: ["color", "formControl"] }, { kind: "component", type: i5.MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }, { kind: "component", type: i6.MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-filters', template: "<div class=\"filter\">\n  <div *ngFor=\"let filter of elements\">\n    <div *ngIf=\"filter.controlType === 'checkbox'\" class=\"filter__item--resizable\">\n      <mapa-checkbox [formControl]=\"getFormControl(filter.key)\"></mapa-checkbox>\n    </div>\n    <div *ngIf=\"filter.controlType === 'dropdown'\" class=\"filter__item--resizable\">\n      <mapa-dropdown\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-dropdown>\n    </div>\n    <div *ngIf=\"filter.controlType === 'input'\" class=\"filter__item\">\n      <mapa-input\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-input>\n    </div>\n  </div>\n  <div class=\"filter__item\">\n    <mapa-button [color]=\"'basic'\" (clicked)=\"clearFilters()\">\n      Limpar filtros\n    </mapa-button>\n    <mapa-button\n      [color]=\"'primary'\"\n      [disabled]=\"!!form.invalid\"\n      (clicked)=\"emitSelectedValues()\"\n    >\n      Filtrar\n    </mapa-button>\n  </div>\n</div>\n\n", styles: [".filter{display:flex;align-items:center;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:95vw;gap:30px}.filter__item{display:flex}.filter .mapa-dropdown{max-width:none;min-width:10vw}.filter .mapa-dropdown--labeled .mat-form-field-flex{height:40px!important}\n"] }]
-        }], propDecorators: { form: [{
+            args: [{ selector: 'mapa-filters', template: "<div class=\"filter\">\n  <div *ngFor=\"let filter of elements\">\n    <div *ngIf=\"filter.controlType === 'checkbox'\" class=\"filter__item--resizable\">\n      <mapa-checkbox [formControl]=\"getFormControl(filter.key)\"></mapa-checkbox>\n    </div>\n    <div *ngIf=\"filter.controlType === 'dropdown'\" class=\"filter__item--resizable\">\n      <mapa-dropdown\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-dropdown>\n    </div>\n    <div *ngIf=\"filter.controlType === 'input'\" class=\"filter__item\">\n      <mapa-input\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-input>\n    </div>\n  </div>\n  <div class=\"filter__item\">\n    <mapa-button [color]=\"'basic'\" (clicked)=\"clearFilters()\">\n      {{ clearFiltersLabel }}\n    </mapa-button>\n    <mapa-button\n      [color]=\"'primary'\"\n      [disabled]=\"!!form.invalid\"\n      (clicked)=\"emitSelectedValues()\"\n    >\n      {{ submitFiltersLabel }}\n    </mapa-button>\n  </div>\n</div>\n\n", styles: [".filter{display:flex;align-items:center;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:95vw;gap:30px}.filter__item{display:flex}.filter .mapa-dropdown{max-width:none;min-width:10vw}.filter .mapa-dropdown--labeled .mat-form-field-flex{height:40px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: MapaI18nService }]; }, propDecorators: { form: [{
                 type: Input
             }], elements: [{
                 type: Input