mapa-library-ui 2.2.1 → 2.3.0
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/fesm2022/mapa-library-ui-src-lib-components-capability.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-scale-parameterization.mjs +6 -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 +4 -4
- package/fesm2022/mapa-library-ui-src-lib-components-scale.mjs.map +1 -1
- package/fesm2022/mapa-library-ui.mjs +24 -24
- package/fesm2022/mapa-library-ui.mjs.map +1 -1
- package/mapa-library-ui-2.3.0.tgz +0 -0
- package/package.json +1 -1
- package/mapa-library-ui-2.2.1.tgz +0 -0
|
@@ -627,11 +627,11 @@ class MapaCapabilityExpandComponent {
|
|
|
627
627
|
};
|
|
628
628
|
}
|
|
629
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 }); }
|
|
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" }] }); }
|
|
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__concept--text ol,:host ::ng-deep .capability__concept--text p,:host ::ng-deep .capability__concept--text ul{margin:0 0 8px}:host ::ng-deep .capability__concept--text ol,:host ::ng-deep .capability__concept--text ul{padding-left:20px}:host ::ng-deep .capability__concept--text :last-child{margin-bottom:0}: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" }] }); }
|
|
631
631
|
}
|
|
632
632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaCapabilityExpandComponent, decorators: [{
|
|
633
633
|
type: Component,
|
|
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"] }]
|
|
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__concept--text ol,:host ::ng-deep .capability__concept--text p,:host ::ng-deep .capability__concept--text ul{margin:0 0 8px}:host ::ng-deep .capability__concept--text ol,:host ::ng-deep .capability__concept--text ul{padding-left:20px}:host ::ng-deep .capability__concept--text :last-child{margin-bottom:0}: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"] }]
|
|
635
635
|
}], ctorParameters: () => [{ type: CapabilityClassificationService }, { type: MapaI18nService }], propDecorators: { data: [{
|
|
636
636
|
type: Input
|
|
637
637
|
}] } });
|
|
@@ -1061,7 +1061,7 @@ class MapaScaleComponent {
|
|
|
1061
1061
|
return `assets/images/icons/${img}.svg`;
|
|
1062
1062
|
}
|
|
1063
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 }); }
|
|
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
|
|
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\n class=\"scale-details__concept-copy\"\n [innerHTML]=\"scale.scaleConcept | safeHtml\"\n ></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: [".scale-details__concept-copy ::ng-deep ol,.scale-details__concept-copy ::ng-deep p,.scale-details__concept-copy ::ng-deep ul{margin:0 0 8px}.scale-details__concept-copy ::ng-deep ol,.scale-details__concept-copy ::ng-deep ul{padding-left:20px}.scale-details__concept-copy ::ng-deep li{margin:0 0 3px}.scale-details__concept-copy ::ng-deep b,.scale-details__concept-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.scale-details__concept-copy ::ng-deep :last-child{margin-bottom:0}.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 }); }
|
|
1065
1065
|
}
|
|
1066
1066
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleComponent, decorators: [{
|
|
1067
1067
|
type: Component,
|
|
@@ -1070,7 +1070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
1070
1070
|
MapaCapabilityIntervalBarComponent,
|
|
1071
1071
|
MapaProgressbarComponent,
|
|
1072
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
|
|
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\n class=\"scale-details__concept-copy\"\n [innerHTML]=\"scale.scaleConcept | safeHtml\"\n ></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: [".scale-details__concept-copy ::ng-deep ol,.scale-details__concept-copy ::ng-deep p,.scale-details__concept-copy ::ng-deep ul{margin:0 0 8px}.scale-details__concept-copy ::ng-deep ol,.scale-details__concept-copy ::ng-deep ul{padding-left:20px}.scale-details__concept-copy ::ng-deep li{margin:0 0 3px}.scale-details__concept-copy ::ng-deep b,.scale-details__concept-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.scale-details__concept-copy ::ng-deep :last-child{margin-bottom:0}.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"] }]
|
|
1074
1074
|
}], ctorParameters: () => [{ type: MapaI18nService }], propDecorators: { data: [{
|
|
1075
1075
|
type: Input
|
|
1076
1076
|
}], showProgressbar: [{
|