mapa-library-ui 2.1.2 → 2.2.1

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

@@ -441,6 +441,9 @@ function formatPaginatorShowingRange(page, pageSize, length) {
     const itemLabel = safeLength === 1 ? 'item' : 'itens';
     return `Mostrando ${startIndex + 1} - ${endIndex} de ${safeLength} ${itemLabel}`;
 }
+function formatItemCount(count) {
+    return `${count} ${count === 1 ? 'item' : 'itens'}`;
+}
 const DEFAULT_MAPA_UI_TEXTS = {
     common: {
         selectAll: 'Selecionar todos',
@@ -467,6 +470,41 @@ const DEFAULT_MAPA_UI_TEXTS = {
         negativeDirectionLabel: 'Direção Negativa |',
         positiveDirectionLabel: 'Direção Positiva |',
     },
+    report: {
+        summarized: 'Resumida',
+        detailed: 'Detalhada',
+        list: 'Lista',
+        chart: 'Gráfico',
+        viewModeLabel: 'Modo de visualização',
+        readingInformationTitle: 'Informações de leitura',
+        dimensionTitle: 'Dimensão',
+        conceptTitle: 'Conceito',
+        classificationTitle: 'Classificação',
+        resultReadingTitle: 'Leitura do resultado',
+        resultTitle: 'Resultado',
+        globalAverageTitle: 'Média global',
+        factorsTitle: 'Fatores relativos à organização e ao trabalho',
+        strongPointsTitle: 'Pontos fortes',
+        attentionPointsTitle: 'Pontos de atenção',
+        vulnerabilitiesTitle: 'Vulnerabilidades socioemocionais',
+        positiveDirectionLabel: 'Direção positiva',
+        negativeDirectionLabel: 'Direção negativa',
+        lowerIntensityLabel: 'Menos intensamente',
+        higherIntensityLabel: 'Mais intensamente',
+        noClassification: 'Sem classificação',
+        emptyState: 'Não há resultados disponíveis para esta seção.',
+        interpretationTitle: 'Interpretação',
+        detailedListLabel: 'Lista detalhada',
+        groupAverageTitle: 'Média geral do grupo',
+        groupDistributionLabel: 'Distribuição do grupo',
+        overallPercentageTitle: '% Geral',
+        scaleConceptTitle: 'Conceito da escala',
+        psychosocialFactorsTitle: 'Fatores psicossociais',
+        editConclusionLabel: 'Editar conclusão',
+        meterLabel: (name, value) => `${name}: ${value}%`,
+        gaugeLabel: (name, value) => `${name}: ${value}%`,
+        itemCountLabel: formatItemCount,
+    },
     paginator: {
         itemsPerPage: 'Itens por página',
         nextPage: 'Próxima página',
@@ -510,6 +548,7 @@ function mergeMapaUiTexts(customTexts) {
         filters: { ...defaults.filters, ...(customTexts?.filters ?? {}) },
         datepicker: { ...defaults.datepicker, ...(customTexts?.datepicker ?? {}) },
         capability: { ...defaults.capability, ...(customTexts?.capability ?? {}) },
+        report: { ...defaults.report, ...(customTexts?.report ?? {}) },
         paginator: { ...defaults.paginator, ...(customTexts?.paginator ?? {}) },
         warning: { ...defaults.warning, ...(customTexts?.warning ?? {}) },
         table: { ...defaults.table, ...(customTexts?.table ?? {}) },
@@ -588,11 +627,11 @@ class MapaCapabilityExpandComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaCapabilityExpandComponent, deps: [{ token: CapabilityClassificationService }, { token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaCapabilityExpandComponent, isStandalone: true, selector: "mapa-capability-expand", inputs: { data: "data" }, providers: [CapabilityClassificationService], ngImport: i0, template: "<div\n  class=\"capability__concept\"\n  *ngIf=\"data.capabilityConcept?.concept || data.capabilityConcept?.result\"\n>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.concept\"\n  >\n    <div class=\"capability__concept--title\">{{ conceptTitle }}</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.concept! }}\n    </div>\n  </div>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.result\"\n  >\n    <div class=\"capability__concept--title\">{{ resultTitle }}</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.result! }}\n    </div>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <div class=\"capability__expanded--name\">\n        <span *ngIf=\"item.classificationColor\">\n          <strong *ngIf=\"!classification.getByItem(item).positive\">&searr; </strong>\n          <strong *ngIf=\"classification.getByItem(item).positive\">&nearr; </strong>\n        </span>\n        {{ item.name }}\n      </div>\n      <mapa-tag\n        [tag]=\"createTag(item)\"\n        class=\"capability__expanded--tag\"\n        *ngIf=\"item.classificationId\"\n      >\n        <mapa-capability-dot\n          [item]=\"item\"\n          *ngIf=\"item.classificationColor\"\n        ></mapa-capability-dot>\n        {{ item.classificationName }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"capability__expanded--description\" *ngIf=\"item.description\">\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && !classification.getByItem(item).positive\"\n        >{{ negativeDirectionLabel }}</strong>\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && classification.getByItem(item).positive\"\n        >{{ positiveDirectionLabel }}</strong>\n      <span [innerHTML]=\"item.description | safeHtml\"></span>\n    </p>\n  </div>\n</div>\n\n\n\n", styles: [":host ::ng-deep .capability__concept{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:42px;margin:24px 0 60px}:host ::ng-deep .capability__concept--content{display:flex;flex-direction:column;flex-basis:100%;flex:1}:host ::ng-deep .capability__concept--title{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}:host ::ng-deep .capability__concept--text{color:#676767;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded{border-top:1px solid #cdcdcd;padding:36px 0 16px 16px;gap:30px}@media(min-width:800px)and (max-width:1250px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr}}@media(min-width:1251px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr 1fr}}:host ::ng-deep .capability__expanded--description{color:#8c8f94;font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}:host ::ng-deep .capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px;font-size:14px;font-style:normal;font-weight:400;height:18px}:host ::ng-deep .capability__expanded--name{color:#181818;font-size:20px;font-style:normal;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TagComponent, selector: "mapa-tag", inputs: ["tag"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaCapabilityExpandComponent, isStandalone: true, selector: "mapa-capability-expand", inputs: { data: "data" }, providers: [CapabilityClassificationService], ngImport: i0, template: "<div\n  class=\"capability__concept\"\n  *ngIf=\"data.capabilityConcept?.concept || data.capabilityConcept?.result\"\n>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.concept\"\n  >\n    <div class=\"capability__concept--title\">{{ conceptTitle }}</div>\n    <div\n      class=\"capability__concept--text\"\n      [innerHTML]=\"data.capabilityConcept?.concept! | safeHtml\"\n    ></div>\n  </div>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.result\"\n  >\n    <div class=\"capability__concept--title\">{{ resultTitle }}</div>\n    <div\n      class=\"capability__concept--text\"\n      [innerHTML]=\"data.capabilityConcept?.result! | safeHtml\"\n    ></div>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <div class=\"capability__expanded--name\">\n        <span *ngIf=\"item.classificationColor\">\n          <strong *ngIf=\"!classification.getByItem(item).positive\">&searr; </strong>\n          <strong *ngIf=\"classification.getByItem(item).positive\">&nearr; </strong>\n        </span>\n        {{ item.name }}\n      </div>\n      <mapa-tag\n        [tag]=\"createTag(item)\"\n        class=\"capability__expanded--tag\"\n        *ngIf=\"item.classificationId\"\n      >\n        <mapa-capability-dot\n          [item]=\"item\"\n          *ngIf=\"item.classificationColor\"\n        ></mapa-capability-dot>\n        {{ item.classificationName }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"capability__expanded--description\" *ngIf=\"item.description\">\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && !classification.getByItem(item).positive\"\n        >{{ negativeDirectionLabel }}</strong>\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && classification.getByItem(item).positive\"\n        >{{ positiveDirectionLabel }}</strong>\n      <span [innerHTML]=\"item.description | safeHtml\"></span>\n    </p>\n  </div>\n</div>\n\n\n\n", styles: [":host ::ng-deep .capability__concept{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:42px;margin:24px 0 60px}:host ::ng-deep .capability__concept--content{display:flex;flex-direction:column;flex-basis:100%;flex:1}:host ::ng-deep .capability__concept--title{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}:host ::ng-deep .capability__concept--text{color:#676767;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded{border-top:1px solid #cdcdcd;padding:36px 0 16px 16px;gap:30px}@media(min-width:800px)and (max-width:1250px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr}}@media(min-width:1251px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr 1fr}}:host ::ng-deep .capability__expanded--description{color:#8c8f94;font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}:host ::ng-deep .capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px;font-size:14px;font-style:normal;font-weight:400;height:18px}:host ::ng-deep .capability__expanded--name{color:#181818;font-size:20px;font-style:normal;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TagComponent, selector: "mapa-tag", inputs: ["tag"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaCapabilityExpandComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-capability-expand", imports: [CommonModule, TagComponent, MapaCapabilityDotComponent, SafeHtmlPipe], providers: [CapabilityClassificationService], standalone: true, template: "<div\n  class=\"capability__concept\"\n  *ngIf=\"data.capabilityConcept?.concept || data.capabilityConcept?.result\"\n>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.concept\"\n  >\n    <div class=\"capability__concept--title\">{{ conceptTitle }}</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.concept! }}\n    </div>\n  </div>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.result\"\n  >\n    <div class=\"capability__concept--title\">{{ resultTitle }}</div>\n    <div class=\"capability__concept--text\">\n      {{ data.capabilityConcept?.result! }}\n    </div>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <div class=\"capability__expanded--name\">\n        <span *ngIf=\"item.classificationColor\">\n          <strong *ngIf=\"!classification.getByItem(item).positive\">&searr; </strong>\n          <strong *ngIf=\"classification.getByItem(item).positive\">&nearr; </strong>\n        </span>\n        {{ item.name }}\n      </div>\n      <mapa-tag\n        [tag]=\"createTag(item)\"\n        class=\"capability__expanded--tag\"\n        *ngIf=\"item.classificationId\"\n      >\n        <mapa-capability-dot\n          [item]=\"item\"\n          *ngIf=\"item.classificationColor\"\n        ></mapa-capability-dot>\n        {{ item.classificationName }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"capability__expanded--description\" *ngIf=\"item.description\">\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && !classification.getByItem(item).positive\"\n        >{{ negativeDirectionLabel }}</strong>\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && classification.getByItem(item).positive\"\n        >{{ positiveDirectionLabel }}</strong>\n      <span [innerHTML]=\"item.description | safeHtml\"></span>\n    </p>\n  </div>\n</div>\n\n\n\n", styles: [":host ::ng-deep .capability__concept{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:42px;margin:24px 0 60px}:host ::ng-deep .capability__concept--content{display:flex;flex-direction:column;flex-basis:100%;flex:1}:host ::ng-deep .capability__concept--title{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}:host ::ng-deep .capability__concept--text{color:#676767;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded{border-top:1px solid #cdcdcd;padding:36px 0 16px 16px;gap:30px}@media(min-width:800px)and (max-width:1250px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr}}@media(min-width:1251px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr 1fr}}:host ::ng-deep .capability__expanded--description{color:#8c8f94;font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}:host ::ng-deep .capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px;font-size:14px;font-style:normal;font-weight:400;height:18px}:host ::ng-deep .capability__expanded--name{color:#181818;font-size:20px;font-style:normal;font-weight:400}\n"] }]
+            args: [{ selector: "mapa-capability-expand", imports: [CommonModule, TagComponent, MapaCapabilityDotComponent, SafeHtmlPipe], providers: [CapabilityClassificationService], standalone: true, template: "<div\n  class=\"capability__concept\"\n  *ngIf=\"data.capabilityConcept?.concept || data.capabilityConcept?.result\"\n>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.concept\"\n  >\n    <div class=\"capability__concept--title\">{{ conceptTitle }}</div>\n    <div\n      class=\"capability__concept--text\"\n      [innerHTML]=\"data.capabilityConcept?.concept! | safeHtml\"\n    ></div>\n  </div>\n  <div\n    class=\"capability__concept--content\"\n    *ngIf=\"data.capabilityConcept?.result\"\n  >\n    <div class=\"capability__concept--title\">{{ resultTitle }}</div>\n    <div\n      class=\"capability__concept--text\"\n      [innerHTML]=\"data.capabilityConcept?.result! | safeHtml\"\n    ></div>\n  </div>\n</div>\n<div class=\"capability__expanded\">\n  <div *ngFor=\"let item of data.items\" class=\"capability__expanded--item\">\n    <div class=\"name\">\n      <div class=\"capability__expanded--name\">\n        <span *ngIf=\"item.classificationColor\">\n          <strong *ngIf=\"!classification.getByItem(item).positive\">&searr; </strong>\n          <strong *ngIf=\"classification.getByItem(item).positive\">&nearr; </strong>\n        </span>\n        {{ item.name }}\n      </div>\n      <mapa-tag\n        [tag]=\"createTag(item)\"\n        class=\"capability__expanded--tag\"\n        *ngIf=\"item.classificationId\"\n      >\n        <mapa-capability-dot\n          [item]=\"item\"\n          *ngIf=\"item.classificationColor\"\n        ></mapa-capability-dot>\n        {{ item.classificationName }}\n      </mapa-tag>\n    </div>\n\n    <p class=\"capability__expanded--description\" *ngIf=\"item.description\">\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && !classification.getByItem(item).positive\"\n        >{{ negativeDirectionLabel }}</strong>\n      <strong\n        *ngIf=\"item.classificationId && !item.classificationBg && classification.getByItem(item).positive\"\n        >{{ positiveDirectionLabel }}</strong>\n      <span [innerHTML]=\"item.description | safeHtml\"></span>\n    </p>\n  </div>\n</div>\n\n\n\n", styles: [":host ::ng-deep .capability__concept{display:flex;flex-direction:row;flex-wrap:wrap;width:100%;gap:42px;margin:24px 0 60px}:host ::ng-deep .capability__concept--content{display:flex;flex-direction:column;flex-basis:100%;flex:1}:host ::ng-deep .capability__concept--title{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:8px}:host ::ng-deep .capability__concept--text{color:#676767;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded{border-top:1px solid #cdcdcd;padding:36px 0 16px 16px;gap:30px}@media(min-width:800px)and (max-width:1250px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr}}@media(min-width:1251px){:host ::ng-deep .capability__expanded{display:grid;grid-template-columns:1fr 1fr 1fr}}:host ::ng-deep .capability__expanded--description{color:#8c8f94;font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .capability__expanded--item .name{display:flex;justify-content:space-between;margin-bottom:16px}:host ::ng-deep .capability__expanded--item mapa-tag .mapa-tag--small{display:flex;align-items:center;gap:8px;padding:2px 8px 2px 3px;font-size:14px;font-style:normal;font-weight:400;height:18px}:host ::ng-deep .capability__expanded--name{color:#181818;font-size:20px;font-style:normal;font-weight:400}\n"] }]
         }], ctorParameters: () => [{ type: CapabilityClassificationService }, { type: MapaI18nService }], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -1022,7 +1061,7 @@ class MapaScaleComponent {
         return `assets/images/icons/${img}.svg`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaScaleComponent, isStandalone: true, selector: "mapa-scale", inputs: { data: "data", showProgressbar: "showProgressbar" }, ngImport: i0, template: "@for (competence of data; track competence) {\n  <section class=\"mapa__card competence\">\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      @for (scale of competence.scales; track scale) {\n        <section class=\"mapa__card scale-details\">\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                @if (scale.classification) {\n                  <div\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 }}\n                    </span>\n                  </div>\n                }\n              </div>\n              @if (showProgressbar) {\n                <div class=\"scale__header--progressbar\">\n                  @if (!scale.classification?.classificationBg) {\n                    <mapa-progressbar\n                      [data]=\"getProgressbarData(scale)\"\n                    ></mapa-progressbar>\n                  } @else {\n                    <mapa-capability-interval-bar\n                      [data]=\"getIntervalbarData(scale)\"\n                      [showInterval]=\"true\"\n                    ></mapa-capability-interval-bar>\n                  }\n                </div>\n              }\n            </header>\n            @if (scale.scaleConcept) {\n              <article class=\"scale-details__concept\">\n                <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n              </article>\n            }\n          </section>\n          <section\n            class=\"scale-details__dimensions\"\n            [class.dimension--full-sized]=\"!showSummarized(scale)\"\n            [class.dimension--summarized]=\"showSummarized(scale)\"\n          >\n            @for (dimension of scale.dimensions; track dimension) {\n              <article class=\"mapa__card--sm dimension\">\n                <nav class=\"dimension__main\">\n                  <div class=\"dimension__title\">\n                    <div class=\"dimension__title--direction\">\n                      @if (isPositive(dimension)) {\n                        <span>&uarr;</span>\n                      } @else {\n                        <span>&darr;</span>\n                      }\n                    </div>\n                    <div class=\"dimension__title--label\">\n                      {{ dimension.dimensionName }}\n                    </div>\n                  </div>\n                  <div class=\"dimension--classification\">\n                    @if (dimension.classification) {\n                      <div\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 }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </nav>\n                @if (dimension.dimensionClassificationMessage) {\n                  <div class=\"dimension__concept\">\n                    {{ dimension.dimensionClassificationMessage }}\n                  </div>\n                }\n              </article>\n            }\n          </section>\n        </section>\n      }\n    </section>\n  </section>\n}\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);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: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:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;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: "ngmodule", type: CommonModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaScaleComponent, isStandalone: true, selector: "mapa-scale", inputs: { data: "data", showProgressbar: "showProgressbar" }, ngImport: i0, template: "@for (competence of data; track competence) {\n  <section class=\"mapa__card competence\">\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      @for (scale of competence.scales; track scale) {\n        <section class=\"mapa__card scale-details\">\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                @if (scale.classification) {\n                  <div\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 }}\n                    </span>\n                  </div>\n                }\n              </div>\n              @if (showProgressbar) {\n                <div class=\"scale__header--progressbar\">\n                  @if (!scale.classification?.classificationBg) {\n                    <mapa-progressbar\n                      [data]=\"getProgressbarData(scale)\"\n                    ></mapa-progressbar>\n                  } @else {\n                    <mapa-capability-interval-bar\n                      [data]=\"getIntervalbarData(scale)\"\n                      [showInterval]=\"true\"\n                    ></mapa-capability-interval-bar>\n                  }\n                </div>\n              }\n            </header>\n            @if (scale.scaleConcept) {\n              <article class=\"scale-details__concept\">\n                <strong>{{ conceptTitle }}:</strong>\n                <span [innerHTML]=\"scale.scaleConcept | safeHtml\"></span>\n              </article>\n            }\n          </section>\n          <section\n            class=\"scale-details__dimensions\"\n            [class.dimension--full-sized]=\"!showSummarized(scale)\"\n            [class.dimension--summarized]=\"showSummarized(scale)\"\n          >\n            @for (dimension of scale.dimensions; track dimension) {\n              <article class=\"mapa__card--sm dimension\">\n                <nav class=\"dimension__main\">\n                  <div class=\"dimension__title\">\n                    <div class=\"dimension__title--direction\">\n                      @if (isPositive(dimension)) {\n                        <span>&uarr;</span>\n                      } @else {\n                        <span>&darr;</span>\n                      }\n                    </div>\n                    <div class=\"dimension__title--label\">\n                      {{ dimension.dimensionName }}\n                    </div>\n                  </div>\n                  <div class=\"dimension--classification\">\n                    @if (dimension.classification) {\n                      <div\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 }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </nav>\n                @if (dimension.dimensionClassificationMessage) {\n                  <div class=\"dimension__concept\">\n                    {{ dimension.dimensionClassificationMessage }}\n                  </div>\n                }\n              </article>\n            }\n          </section>\n        </section>\n      }\n    </section>\n  </section>\n}\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);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: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:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;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: "ngmodule", type: CommonModule }, { 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"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleComponent, decorators: [{
             type: Component,
@@ -1030,7 +1069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         CommonModule,
                         MapaCapabilityIntervalBarComponent,
                         MapaProgressbarComponent,
-                    ], standalone: true, template: "@for (competence of data; track competence) {\n  <section class=\"mapa__card competence\">\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      @for (scale of competence.scales; track scale) {\n        <section class=\"mapa__card scale-details\">\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                @if (scale.classification) {\n                  <div\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 }}\n                    </span>\n                  </div>\n                }\n              </div>\n              @if (showProgressbar) {\n                <div class=\"scale__header--progressbar\">\n                  @if (!scale.classification?.classificationBg) {\n                    <mapa-progressbar\n                      [data]=\"getProgressbarData(scale)\"\n                    ></mapa-progressbar>\n                  } @else {\n                    <mapa-capability-interval-bar\n                      [data]=\"getIntervalbarData(scale)\"\n                      [showInterval]=\"true\"\n                    ></mapa-capability-interval-bar>\n                  }\n                </div>\n              }\n            </header>\n            @if (scale.scaleConcept) {\n              <article class=\"scale-details__concept\">\n                <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n              </article>\n            }\n          </section>\n          <section\n            class=\"scale-details__dimensions\"\n            [class.dimension--full-sized]=\"!showSummarized(scale)\"\n            [class.dimension--summarized]=\"showSummarized(scale)\"\n          >\n            @for (dimension of scale.dimensions; track dimension) {\n              <article class=\"mapa__card--sm dimension\">\n                <nav class=\"dimension__main\">\n                  <div class=\"dimension__title\">\n                    <div class=\"dimension__title--direction\">\n                      @if (isPositive(dimension)) {\n                        <span>&uarr;</span>\n                      } @else {\n                        <span>&darr;</span>\n                      }\n                    </div>\n                    <div class=\"dimension__title--label\">\n                      {{ dimension.dimensionName }}\n                    </div>\n                  </div>\n                  <div class=\"dimension--classification\">\n                    @if (dimension.classification) {\n                      <div\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 }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </nav>\n                @if (dimension.dimensionClassificationMessage) {\n                  <div class=\"dimension__concept\">\n                    {{ dimension.dimensionClassificationMessage }}\n                  </div>\n                }\n              </article>\n            }\n          </section>\n        </section>\n      }\n    </section>\n  </section>\n}\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);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: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:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;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"] }]
+                        SafeHtmlPipe,
+                    ], standalone: true, template: "@for (competence of data; track competence) {\n  <section class=\"mapa__card competence\">\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      @for (scale of competence.scales; track scale) {\n        <section class=\"mapa__card scale-details\">\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                @if (scale.classification) {\n                  <div\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 }}\n                    </span>\n                  </div>\n                }\n              </div>\n              @if (showProgressbar) {\n                <div class=\"scale__header--progressbar\">\n                  @if (!scale.classification?.classificationBg) {\n                    <mapa-progressbar\n                      [data]=\"getProgressbarData(scale)\"\n                    ></mapa-progressbar>\n                  } @else {\n                    <mapa-capability-interval-bar\n                      [data]=\"getIntervalbarData(scale)\"\n                      [showInterval]=\"true\"\n                    ></mapa-capability-interval-bar>\n                  }\n                </div>\n              }\n            </header>\n            @if (scale.scaleConcept) {\n              <article class=\"scale-details__concept\">\n                <strong>{{ conceptTitle }}:</strong>\n                <span [innerHTML]=\"scale.scaleConcept | safeHtml\"></span>\n              </article>\n            }\n          </section>\n          <section\n            class=\"scale-details__dimensions\"\n            [class.dimension--full-sized]=\"!showSummarized(scale)\"\n            [class.dimension--summarized]=\"showSummarized(scale)\"\n          >\n            @for (dimension of scale.dimensions; track dimension) {\n              <article class=\"mapa__card--sm dimension\">\n                <nav class=\"dimension__main\">\n                  <div class=\"dimension__title\">\n                    <div class=\"dimension__title--direction\">\n                      @if (isPositive(dimension)) {\n                        <span>&uarr;</span>\n                      } @else {\n                        <span>&darr;</span>\n                      }\n                    </div>\n                    <div class=\"dimension__title--label\">\n                      {{ dimension.dimensionName }}\n                    </div>\n                  </div>\n                  <div class=\"dimension--classification\">\n                    @if (dimension.classification) {\n                      <div\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 }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </nav>\n                @if (dimension.dimensionClassificationMessage) {\n                  <div class=\"dimension__concept\">\n                    {{ dimension.dimensionClassificationMessage }}\n                  </div>\n                }\n              </article>\n            }\n          </section>\n        </section>\n      }\n    </section>\n  </section>\n}\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);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: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:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;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: () => [{ type: MapaI18nService }], propDecorators: { data: [{
                 type: Input
             }], showProgressbar: [{
@@ -1136,7 +1176,7 @@ class MapaScaleParameterizationComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleParameterizationComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaScaleParameterizationComponent, isStandalone: true, 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: "@for (competence of data; track competence) {\n  <section class=\"mapa-scale-parameterization\">\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        @for (scale of competence.scales; track scale) {\n          <mat-expansion-panel\n            class=\"mapa__card mapa-scale-parameterization-details\"\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                    @if (showDots) {\n                      @let dimensionsCapability = getDimensionsAsCapability(scale);\n                      <div\n                        class=\"mapa-scale-parameterization-details__dots\"\n                      >\n                        @for (item of dimensionsCapability.items; track item) {\n                          <mapa-capability-dot\n                            type=\"small\"\n                            [item]=\"item\"\n                            [capability]=\"dimensionsCapability\"\n                            [tooltip]=\"true\"\n                          ></mapa-capability-dot>\n                        }\n                      </div>\n                    }\n                  </div>\n\n                  @if (scale.classification) {\n                    <div\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 }}\n                      </span>\n                    </div>\n                  }\n                </div>\n                @if (showProgressbar) {\n                  <div class=\"scale__header--progressbar\">\n                    @if (!scale.classification?.classificationBg) {\n                      <mapa-progressbar\n                        [data]=\"getProgressbarData(scale)\"\n                      ></mapa-progressbar>\n                    } @else {\n                      <mapa-capability-interval-bar\n                        [data]=\"getIntervalbarData(scale)\"\n                        [showInterval]=\"true\"\n                      ></mapa-capability-interval-bar>\n                    }\n                  </div>\n                }\n              </header>\n            </mat-expansion-panel-header>\n            @if (scale.scaleConcept) {\n              <article\n                class=\"mapa-scale-parameterization-details__concept\"\n              >\n                <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n              </article>\n            }\n            <section\n              class=\"mapa-scale-parameterization-details__dimensions\"\n              [class.dimension--full-sized]=\"!showSummarized(scale)\"\n              [class.dimension--summarized]=\"showSummarized(scale)\"\n            >\n              @for (dimension of scale.dimensions; track dimension) {\n                <article class=\"mapa__card--sm dimension\">\n                  <nav class=\"dimension__main\">\n                    <div class=\"dimension__title\">\n                      <div class=\"dimension__title--direction\">\n                        @if (isPositive(dimension)) {\n                          <span>&uarr;</span>\n                        } @else {\n                          <span>&darr;</span>\n                        }\n                      </div>\n                      <div class=\"dimension__title--label\">\n                        {{ dimension.dimensionName }}\n                      </div>\n                    </div>\n                    <div class=\"dimension--classification\">\n                      @if (dimension.classification) {\n                        <div\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 }}\n                          </span>\n                        </div>\n                      }\n                    </div>\n                  </nav>\n                  @if (dimension.dimensionClassificationMessage) {\n                    <div class=\"dimension__concept\">\n                      {{ dimension.dimensionClassificationMessage }}\n                    </div>\n                  }\n                </article>\n              }\n            </section>\n          </mat-expansion-panel>\n        }\n      </mat-accordion>\n    </section>\n  </section>\n}\n", styles: [":host{display:block;width:100%}:host ::ng-deep .mapa-scale-parameterization{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%;max-width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-scales{flex:1 1 auto;width:100%;min-width:0}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion{width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:8px;border-top-left-radius:8px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel{box-shadow:unset!important;padding:unset!important;width:100%;max-width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header{width:100%;height:auto;min-height:96px;padding:0 24px;border-bottom:unset!important;box-sizing:border-box;gap:24px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header.mat-expanded{height:auto;min-height:96px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header .mat-content{min-width:0;padding-right:4px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-content,:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{padding:24px!important}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-spacing{margin:unset!important}:host ::ng-deep .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:100%;max-width:100%;height:fit-content;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__dots{display:flex;align-items:center;margin-top:16px;gap:8px}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__header--title{display:flex;align-items:center;gap:24px}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:fit-content}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:fit-content}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__main{display:flex;justify-content:space-between;width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__main{width:35%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__concept{width:65%}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--classification{display:flex;align-items:center;justify-content:center}:host ::ng-deep .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: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaScaleParameterizationComponent, isStandalone: true, 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: "@for (competence of data; track competence) {\n  <section class=\"mapa-scale-parameterization\">\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        @for (scale of competence.scales; track scale) {\n          <mat-expansion-panel\n            class=\"mapa__card mapa-scale-parameterization-details\"\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                    @if (showDots) {\n                      @let dimensionsCapability = getDimensionsAsCapability(scale);\n                      <div\n                        class=\"mapa-scale-parameterization-details__dots\"\n                      >\n                        @for (item of dimensionsCapability.items; track item) {\n                          <mapa-capability-dot\n                            type=\"small\"\n                            [item]=\"item\"\n                            [capability]=\"dimensionsCapability\"\n                            [tooltip]=\"true\"\n                          ></mapa-capability-dot>\n                        }\n                      </div>\n                    }\n                  </div>\n\n                  @if (scale.classification) {\n                    <div\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 }}\n                      </span>\n                    </div>\n                  }\n                </div>\n                @if (showProgressbar) {\n                  <div class=\"scale__header--progressbar\">\n                    @if (!scale.classification?.classificationBg) {\n                      <mapa-progressbar\n                        [data]=\"getProgressbarData(scale)\"\n                      ></mapa-progressbar>\n                    } @else {\n                      <mapa-capability-interval-bar\n                        [data]=\"getIntervalbarData(scale)\"\n                        [showInterval]=\"true\"\n                      ></mapa-capability-interval-bar>\n                    }\n                  </div>\n                }\n              </header>\n            </mat-expansion-panel-header>\n            @if (scale.scaleConcept) {\n              <article\n                class=\"mapa-scale-parameterization-details__concept\"\n              >\n                <strong>{{ conceptTitle }}:</strong>\n                <span [innerHTML]=\"scale.scaleConcept | safeHtml\"></span>\n              </article>\n            }\n            <section\n              class=\"mapa-scale-parameterization-details__dimensions\"\n              [class.dimension--full-sized]=\"!showSummarized(scale)\"\n              [class.dimension--summarized]=\"showSummarized(scale)\"\n            >\n              @for (dimension of scale.dimensions; track dimension) {\n                <article class=\"mapa__card--sm dimension\">\n                  <nav class=\"dimension__main\">\n                    <div class=\"dimension__title\">\n                      <div class=\"dimension__title--direction\">\n                        @if (isPositive(dimension)) {\n                          <span>&uarr;</span>\n                        } @else {\n                          <span>&darr;</span>\n                        }\n                      </div>\n                      <div class=\"dimension__title--label\">\n                        {{ dimension.dimensionName }}\n                      </div>\n                    </div>\n                    <div class=\"dimension--classification\">\n                      @if (dimension.classification) {\n                        <div\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 }}\n                          </span>\n                        </div>\n                      }\n                    </div>\n                  </nav>\n                  @if (dimension.dimensionClassificationMessage) {\n                    <div class=\"dimension__concept\">\n                      {{ dimension.dimensionClassificationMessage }}\n                    </div>\n                  }\n                </article>\n              }\n            </section>\n          </mat-expansion-panel>\n        }\n      </mat-accordion>\n    </section>\n  </section>\n}\n", styles: [":host{display:block;width:100%}:host ::ng-deep .mapa-scale-parameterization{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%;max-width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-scales{flex:1 1 auto;width:100%;min-width:0}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion{width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:8px;border-top-left-radius:8px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel{box-shadow:unset!important;padding:unset!important;width:100%;max-width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header{width:100%;height:auto;min-height:96px;padding:0 24px;border-bottom:unset!important;box-sizing:border-box;gap:24px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header.mat-expanded{height:auto;min-height:96px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header .mat-content{min-width:0;padding-right:4px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-content,:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{padding:24px!important}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-spacing{margin:unset!important}:host ::ng-deep .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:100%;max-width:100%;height:fit-content;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__dots{display:flex;align-items:center;margin-top:16px;gap:8px}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__header--title{display:flex;align-items:center;gap:24px}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:fit-content}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:fit-content}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__main{display:flex;justify-content:space-between;width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__main{width:35%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__concept{width:65%}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--classification{display:flex;align-items:center;justify-content:center}:host ::ng-deep .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: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: MapaCapabilityDotComponent, selector: "mapa-capability-dot", inputs: ["type", "item", "tooltip", "capability"] }, { 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"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleParameterizationComponent, decorators: [{
             type: Component,
@@ -1146,7 +1186,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         MapaCapabilityDotComponent,
                         MapaCapabilityIntervalBarComponent,
                         MapaProgressbarComponent,
-                    ], standalone: true, template: "@for (competence of data; track competence) {\n  <section class=\"mapa-scale-parameterization\">\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        @for (scale of competence.scales; track scale) {\n          <mat-expansion-panel\n            class=\"mapa__card mapa-scale-parameterization-details\"\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                    @if (showDots) {\n                      @let dimensionsCapability = getDimensionsAsCapability(scale);\n                      <div\n                        class=\"mapa-scale-parameterization-details__dots\"\n                      >\n                        @for (item of dimensionsCapability.items; track item) {\n                          <mapa-capability-dot\n                            type=\"small\"\n                            [item]=\"item\"\n                            [capability]=\"dimensionsCapability\"\n                            [tooltip]=\"true\"\n                          ></mapa-capability-dot>\n                        }\n                      </div>\n                    }\n                  </div>\n\n                  @if (scale.classification) {\n                    <div\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 }}\n                      </span>\n                    </div>\n                  }\n                </div>\n                @if (showProgressbar) {\n                  <div class=\"scale__header--progressbar\">\n                    @if (!scale.classification?.classificationBg) {\n                      <mapa-progressbar\n                        [data]=\"getProgressbarData(scale)\"\n                      ></mapa-progressbar>\n                    } @else {\n                      <mapa-capability-interval-bar\n                        [data]=\"getIntervalbarData(scale)\"\n                        [showInterval]=\"true\"\n                      ></mapa-capability-interval-bar>\n                    }\n                  </div>\n                }\n              </header>\n            </mat-expansion-panel-header>\n            @if (scale.scaleConcept) {\n              <article\n                class=\"mapa-scale-parameterization-details__concept\"\n              >\n                <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n              </article>\n            }\n            <section\n              class=\"mapa-scale-parameterization-details__dimensions\"\n              [class.dimension--full-sized]=\"!showSummarized(scale)\"\n              [class.dimension--summarized]=\"showSummarized(scale)\"\n            >\n              @for (dimension of scale.dimensions; track dimension) {\n                <article class=\"mapa__card--sm dimension\">\n                  <nav class=\"dimension__main\">\n                    <div class=\"dimension__title\">\n                      <div class=\"dimension__title--direction\">\n                        @if (isPositive(dimension)) {\n                          <span>&uarr;</span>\n                        } @else {\n                          <span>&darr;</span>\n                        }\n                      </div>\n                      <div class=\"dimension__title--label\">\n                        {{ dimension.dimensionName }}\n                      </div>\n                    </div>\n                    <div class=\"dimension--classification\">\n                      @if (dimension.classification) {\n                        <div\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 }}\n                          </span>\n                        </div>\n                      }\n                    </div>\n                  </nav>\n                  @if (dimension.dimensionClassificationMessage) {\n                    <div class=\"dimension__concept\">\n                      {{ dimension.dimensionClassificationMessage }}\n                    </div>\n                  }\n                </article>\n              }\n            </section>\n          </mat-expansion-panel>\n        }\n      </mat-accordion>\n    </section>\n  </section>\n}\n", styles: [":host{display:block;width:100%}:host ::ng-deep .mapa-scale-parameterization{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%;max-width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-scales{flex:1 1 auto;width:100%;min-width:0}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion{width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:8px;border-top-left-radius:8px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel{box-shadow:unset!important;padding:unset!important;width:100%;max-width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header{width:100%;height:auto;min-height:96px;padding:0 24px;border-bottom:unset!important;box-sizing:border-box;gap:24px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header.mat-expanded{height:auto;min-height:96px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header .mat-content{min-width:0;padding-right:4px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-content,:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{padding:24px!important}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-spacing{margin:unset!important}:host ::ng-deep .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:100%;max-width:100%;height:fit-content;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__dots{display:flex;align-items:center;margin-top:16px;gap:8px}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__header--title{display:flex;align-items:center;gap:24px}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:fit-content}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:fit-content}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__main{display:flex;justify-content:space-between;width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__main{width:35%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__concept{width:65%}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--classification{display:flex;align-items:center;justify-content:center}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
+                        SafeHtmlPipe,
+                    ], standalone: true, template: "@for (competence of data; track competence) {\n  <section class=\"mapa-scale-parameterization\">\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        @for (scale of competence.scales; track scale) {\n          <mat-expansion-panel\n            class=\"mapa__card mapa-scale-parameterization-details\"\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                    @if (showDots) {\n                      @let dimensionsCapability = getDimensionsAsCapability(scale);\n                      <div\n                        class=\"mapa-scale-parameterization-details__dots\"\n                      >\n                        @for (item of dimensionsCapability.items; track item) {\n                          <mapa-capability-dot\n                            type=\"small\"\n                            [item]=\"item\"\n                            [capability]=\"dimensionsCapability\"\n                            [tooltip]=\"true\"\n                          ></mapa-capability-dot>\n                        }\n                      </div>\n                    }\n                  </div>\n\n                  @if (scale.classification) {\n                    <div\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 }}\n                      </span>\n                    </div>\n                  }\n                </div>\n                @if (showProgressbar) {\n                  <div class=\"scale__header--progressbar\">\n                    @if (!scale.classification?.classificationBg) {\n                      <mapa-progressbar\n                        [data]=\"getProgressbarData(scale)\"\n                      ></mapa-progressbar>\n                    } @else {\n                      <mapa-capability-interval-bar\n                        [data]=\"getIntervalbarData(scale)\"\n                        [showInterval]=\"true\"\n                      ></mapa-capability-interval-bar>\n                    }\n                  </div>\n                }\n              </header>\n            </mat-expansion-panel-header>\n            @if (scale.scaleConcept) {\n              <article\n                class=\"mapa-scale-parameterization-details__concept\"\n              >\n                <strong>{{ conceptTitle }}:</strong>\n                <span [innerHTML]=\"scale.scaleConcept | safeHtml\"></span>\n              </article>\n            }\n            <section\n              class=\"mapa-scale-parameterization-details__dimensions\"\n              [class.dimension--full-sized]=\"!showSummarized(scale)\"\n              [class.dimension--summarized]=\"showSummarized(scale)\"\n            >\n              @for (dimension of scale.dimensions; track dimension) {\n                <article class=\"mapa__card--sm dimension\">\n                  <nav class=\"dimension__main\">\n                    <div class=\"dimension__title\">\n                      <div class=\"dimension__title--direction\">\n                        @if (isPositive(dimension)) {\n                          <span>&uarr;</span>\n                        } @else {\n                          <span>&darr;</span>\n                        }\n                      </div>\n                      <div class=\"dimension__title--label\">\n                        {{ dimension.dimensionName }}\n                      </div>\n                    </div>\n                    <div class=\"dimension--classification\">\n                      @if (dimension.classification) {\n                        <div\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 }}\n                          </span>\n                        </div>\n                      }\n                    </div>\n                  </nav>\n                  @if (dimension.dimensionClassificationMessage) {\n                    <div class=\"dimension__concept\">\n                      {{ dimension.dimensionClassificationMessage }}\n                    </div>\n                  }\n                </article>\n              }\n            </section>\n          </mat-expansion-panel>\n        }\n      </mat-accordion>\n    </section>\n  </section>\n}\n", styles: [":host{display:block;width:100%}:host ::ng-deep .mapa-scale-parameterization{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%;max-width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-scales{flex:1 1 auto;width:100%;min-width:0}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion{width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:first-of-type{border-top-right-radius:8px;border-top-left-radius:8px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel:last-of-type{border-bottom-right-radius:8px;border-bottom-left-radius:8px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel{box-shadow:unset!important;padding:unset!important;width:100%;max-width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header{width:100%;height:auto;min-height:96px;padding:0 24px;border-bottom:unset!important;box-sizing:border-box;gap:24px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header.mat-expanded{height:auto;min-height:96px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-header .mat-content{min-width:0;padding-right:4px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-content,:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{width:100%;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-body{padding:24px!important}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-accordion .mat-expansion-panel-spacing{margin:unset!important}:host ::ng-deep .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:100%;max-width:100%;height:fit-content;box-sizing:border-box}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__dots{display:flex;align-items:center;margin-top:16px;gap:8px}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__header--title{display:flex;align-items:center;gap:24px}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:fit-content}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:fit-content}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__main{display:flex;justify-content:space-between;width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__main{width:35%}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--full-sized .dimension__concept{width:65%}:host ::ng-deep .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}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension--classification{display:flex;align-items:center;justify-content:center}:host ::ng-deep .mapa-scale-parameterization .mapa-scale-parameterization-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
         }], ctorParameters: () => [{ type: MapaI18nService }], propDecorators: { data: [{
                 type: Input
             }], showProgressbar: [{