mapa-library-ui 2.1.2 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -5
- package/fesm2022/mapa-library-ui-src-lib-components-breadcrumb.mjs +10 -2
- package/fesm2022/mapa-library-ui-src-lib-components-breadcrumb.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-button.mjs +8 -2
- package/fesm2022/mapa-library-ui-src-lib-components-button.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-capability.mjs +50 -5
- package/fesm2022/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-chart.mjs +48 -3
- package/fesm2022/mapa-library-ui-src-lib-components-chart.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs +39 -0
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-dialog.mjs +9 -3
- package/fesm2022/mapa-library-ui-src-lib-components-dialog.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown-tree.mjs +48 -3
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown-tree.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown.mjs +48 -3
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-filters.mjs +50 -5
- package/fesm2022/mapa-library-ui-src-lib-components-filters.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs +49 -4
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-group-report.mjs +197 -150
- package/fesm2022/mapa-library-ui-src-lib-components-group-report.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-input.mjs +48 -3
- package/fesm2022/mapa-library-ui-src-lib-components-input.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-report-item.mjs +43 -4
- package/fesm2022/mapa-library-ui-src-lib-components-report-item.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-scale-parameterization.mjs +47 -6
- package/fesm2022/mapa-library-ui-src-lib-components-scale-parameterization.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-scale.mjs +44 -4
- package/fesm2022/mapa-library-ui-src-lib-components-scale.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs +46 -4
- package/fesm2022/mapa-library-ui-src-lib-components-table.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-textarea.mjs +39 -0
- package/fesm2022/mapa-library-ui-src-lib-components-textarea.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-warning.mjs +39 -0
- package/fesm2022/mapa-library-ui-src-lib-components-warning.mjs.map +1 -1
- package/fesm2022/mapa-library-ui.mjs +807 -32
- package/fesm2022/mapa-library-ui.mjs.map +1 -1
- package/index.d.ts +451 -4
- package/mapa-library-ui-2.2.1.tgz +0 -0
- package/package.json +50 -2
- package/src/lib/components/breadcrumb/index.d.ts +3 -1
- package/src/lib/components/button/index.d.ts +3 -1
- package/src/lib/components/capability/index.d.ts +4 -1
- package/src/lib/components/dialog/index.d.ts +3 -1
- package/src/lib/components/filters/index.d.ts +3 -1
- package/src/lib/components/form/index.d.ts +3 -1
- package/src/lib/components/group-report/index.d.ts +2 -0
- package/src/lib/components/scale/index.d.ts +1 -0
- package/src/lib/components/scale-parameterization/index.d.ts +1 -0
- package/src/lib/components/table/index.d.ts +2 -0
- package/mapa-library-ui-2.1.2.tgz +0 -0
|
@@ -441,6 +441,9 @@ function formatPaginatorShowingRange(page, pageSize, length) {
|
|
|
441
441
|
const itemLabel = safeLength === 1 ? 'item' : 'itens';
|
|
442
442
|
return `Mostrando ${startIndex + 1} - ${endIndex} de ${safeLength} ${itemLabel}`;
|
|
443
443
|
}
|
|
444
|
+
function formatItemCount(count) {
|
|
445
|
+
return `${count} ${count === 1 ? 'item' : 'itens'}`;
|
|
446
|
+
}
|
|
444
447
|
const DEFAULT_MAPA_UI_TEXTS = {
|
|
445
448
|
common: {
|
|
446
449
|
selectAll: 'Selecionar todos',
|
|
@@ -467,6 +470,41 @@ const DEFAULT_MAPA_UI_TEXTS = {
|
|
|
467
470
|
negativeDirectionLabel: 'Direção Negativa |',
|
|
468
471
|
positiveDirectionLabel: 'Direção Positiva |',
|
|
469
472
|
},
|
|
473
|
+
report: {
|
|
474
|
+
summarized: 'Resumida',
|
|
475
|
+
detailed: 'Detalhada',
|
|
476
|
+
list: 'Lista',
|
|
477
|
+
chart: 'Gráfico',
|
|
478
|
+
viewModeLabel: 'Modo de visualização',
|
|
479
|
+
readingInformationTitle: 'Informações de leitura',
|
|
480
|
+
dimensionTitle: 'Dimensão',
|
|
481
|
+
conceptTitle: 'Conceito',
|
|
482
|
+
classificationTitle: 'Classificação',
|
|
483
|
+
resultReadingTitle: 'Leitura do resultado',
|
|
484
|
+
resultTitle: 'Resultado',
|
|
485
|
+
globalAverageTitle: 'Média global',
|
|
486
|
+
factorsTitle: 'Fatores relativos à organização e ao trabalho',
|
|
487
|
+
strongPointsTitle: 'Pontos fortes',
|
|
488
|
+
attentionPointsTitle: 'Pontos de atenção',
|
|
489
|
+
vulnerabilitiesTitle: 'Vulnerabilidades socioemocionais',
|
|
490
|
+
positiveDirectionLabel: 'Direção positiva',
|
|
491
|
+
negativeDirectionLabel: 'Direção negativa',
|
|
492
|
+
lowerIntensityLabel: 'Menos intensamente',
|
|
493
|
+
higherIntensityLabel: 'Mais intensamente',
|
|
494
|
+
noClassification: 'Sem classificação',
|
|
495
|
+
emptyState: 'Não há resultados disponíveis para esta seção.',
|
|
496
|
+
interpretationTitle: 'Interpretação',
|
|
497
|
+
detailedListLabel: 'Lista detalhada',
|
|
498
|
+
groupAverageTitle: 'Média geral do grupo',
|
|
499
|
+
groupDistributionLabel: 'Distribuição do grupo',
|
|
500
|
+
overallPercentageTitle: '% Geral',
|
|
501
|
+
scaleConceptTitle: 'Conceito da escala',
|
|
502
|
+
psychosocialFactorsTitle: 'Fatores psicossociais',
|
|
503
|
+
editConclusionLabel: 'Editar conclusão',
|
|
504
|
+
meterLabel: (name, value) => `${name}: ${value}%`,
|
|
505
|
+
gaugeLabel: (name, value) => `${name}: ${value}%`,
|
|
506
|
+
itemCountLabel: formatItemCount,
|
|
507
|
+
},
|
|
470
508
|
paginator: {
|
|
471
509
|
itemsPerPage: 'Itens por página',
|
|
472
510
|
nextPage: 'Próxima página',
|
|
@@ -510,6 +548,7 @@ function mergeMapaUiTexts(customTexts) {
|
|
|
510
548
|
filters: { ...defaults.filters, ...(customTexts?.filters ?? {}) },
|
|
511
549
|
datepicker: { ...defaults.datepicker, ...(customTexts?.datepicker ?? {}) },
|
|
512
550
|
capability: { ...defaults.capability, ...(customTexts?.capability ?? {}) },
|
|
551
|
+
report: { ...defaults.report, ...(customTexts?.report ?? {}) },
|
|
513
552
|
paginator: { ...defaults.paginator, ...(customTexts?.paginator ?? {}) },
|
|
514
553
|
warning: { ...defaults.warning, ...(customTexts?.warning ?? {}) },
|
|
515
554
|
table: { ...defaults.table, ...(customTexts?.table ?? {}) },
|
|
@@ -588,11 +627,11 @@ class MapaCapabilityExpandComponent {
|
|
|
588
627
|
};
|
|
589
628
|
}
|
|
590
629
|
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 }); }
|
|
591
|
-
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
|
|
630
|
+
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\">↘ </strong>\n <strong *ngIf=\"classification.getByItem(item).positive\">↗ </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" }] }); }
|
|
592
631
|
}
|
|
593
632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaCapabilityExpandComponent, decorators: [{
|
|
594
633
|
type: Component,
|
|
595
|
-
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
|
|
634
|
+
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\">↘ </strong>\n <strong *ngIf=\"classification.getByItem(item).positive\">↗ </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"] }]
|
|
596
635
|
}], ctorParameters: () => [{ type: CapabilityClassificationService }, { type: MapaI18nService }], propDecorators: { data: [{
|
|
597
636
|
type: Input
|
|
598
637
|
}] } });
|
|
@@ -1022,7 +1061,7 @@ class MapaScaleComponent {
|
|
|
1022
1061
|
return `assets/images/icons/${img}.svg`;
|
|
1023
1062
|
}
|
|
1024
1063
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1025
|
-
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
|
|
1064
|
+
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>↑</span>\n } @else {\n <span>↓</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 }); }
|
|
1026
1065
|
}
|
|
1027
1066
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleComponent, decorators: [{
|
|
1028
1067
|
type: Component,
|
|
@@ -1030,7 +1069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
1030
1069
|
CommonModule,
|
|
1031
1070
|
MapaCapabilityIntervalBarComponent,
|
|
1032
1071
|
MapaProgressbarComponent,
|
|
1033
|
-
|
|
1072
|
+
SafeHtmlPipe,
|
|
1073
|
+
], 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>↑</span>\n } @else {\n <span>↓</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"] }]
|
|
1034
1074
|
}], ctorParameters: () => [{ type: MapaI18nService }], propDecorators: { data: [{
|
|
1035
1075
|
type: Input
|
|
1036
1076
|
}], showProgressbar: [{
|