mapa-library-ui 2.2.0 → 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.
@@ -1,11 +1,50 @@
1
- import * as i1 from '@angular/common';
1
+ import * as i1$1 from '@angular/common';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { EventEmitter, Output, Input, Component } from '@angular/core';
4
+ import { SecurityContext, Injectable, Pipe, EventEmitter, Output, Input, Component } from '@angular/core';
5
5
  import * as i2 from '@angular/material/icon';
6
6
  import { MatIconModule } from '@angular/material/icon';
7
7
  import * as i3 from '@angular/material/menu';
8
8
  import { MatMenuModule } from '@angular/material/menu';
9
+ import * as i1 from '@angular/platform-browser';
10
+
11
+ function sanitizeHtmlContent(sanitizer, value) {
12
+ return sanitizer.sanitize(SecurityContext.HTML, value ?? "") ?? "";
13
+ }
14
+ class HtmlSanitizerService {
15
+ constructor(sanitizer) {
16
+ this.sanitizer = sanitizer;
17
+ }
18
+ sanitize(value) {
19
+ return sanitizeHtmlContent(this.sanitizer, value);
20
+ }
21
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
22
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, providedIn: "root" }); }
23
+ }
24
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: HtmlSanitizerService, decorators: [{
25
+ type: Injectable,
26
+ args: [{
27
+ providedIn: "root",
28
+ }]
29
+ }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
30
+
31
+ class SafeHtmlPipe {
32
+ constructor(htmlSanitizer) {
33
+ this.htmlSanitizer = htmlSanitizer;
34
+ }
35
+ transform(value) {
36
+ return this.htmlSanitizer.sanitize(value);
37
+ }
38
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: HtmlSanitizerService }], target: i0.ɵɵFactoryTarget.Pipe }); }
39
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.21", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
40
+ }
41
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: SafeHtmlPipe, decorators: [{
42
+ type: Pipe,
43
+ args: [{
44
+ name: "safeHtml",
45
+ standalone: true,
46
+ }]
47
+ }], ctorParameters: () => [{ type: HtmlSanitizerService }] });
9
48
 
10
49
  class ReportItemComponent {
11
50
  constructor() {
@@ -54,11 +93,11 @@ class ReportItemComponent {
54
93
  this.clicked.emit(item.id);
55
94
  }
56
95
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ReportItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
57
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: ReportItemComponent, isStandalone: true, selector: "mapa-report-item", inputs: { itemData: "itemData", menuItems: "menuItems" }, outputs: { clicked: "clicked", emitMenu: "emitMenu" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"report-item\">\n <div class=\"report-icon\">\n <mat-icon class=\"material-icons\">{{ icon }}</mat-icon>\n </div>\n <div class=\"report-text\">\n <h1>\n {{ description }}\n </h1>\n </div>\n <div class=\"report-button\">\n <div class=\"report-circle\" *ngIf=\"resolvedMenuItems.length > 0\">\n <mat-icon [matMenuTriggerFor]=\"menu\">more_vert</mat-icon>\n <mat-menu #menu=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let item of resolvedMenuItems\"\n (click)=\"onClick(item.action)\"\n >\n <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n <span>{{ item.text }}</span>\n </button>\n </mat-menu>\n </div>\n </div>\n</div>\n", styles: [".report-item{margin:24px 48px;height:161px;display:flex;border-radius:16px;border:1px solid #CDCDCD}.report-item .report-icon{width:25%;border-radius:16px 0 0 16px;background:#fdefea}.report-item .report-icon .mat-icon{width:123px;height:123px;font-size:123px;color:#ea561d;padding:20px 42px}.report-item .report-text{background:var(--GlobalColors-Neutral-20, #F9F9F9);width:100%;padding:0 16px}.report-item .report-text h1{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:28px;margin-top:25px}.report-item .report-text li{color:var #000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px;margin-top:10px}.report-item .report-button{width:4vw;align-items:flex-end;border-radius:50%;margin-top:10px}.report-item .report-button .report-circle{background-color:#fff;border-radius:50%;display:flex;align-items:center;margin-right:10px}.report-item .report-button .mat-icon{width:20px;height:20px;font-size:20px;margin:5px;color:#ea561d}\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: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
96
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: ReportItemComponent, isStandalone: true, selector: "mapa-report-item", inputs: { itemData: "itemData", menuItems: "menuItems" }, outputs: { clicked: "clicked", emitMenu: "emitMenu" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"report-item\">\n <div class=\"report-icon\">\n <mat-icon class=\"material-icons\">{{ icon }}</mat-icon>\n </div>\n <div class=\"report-text\">\n <h1 [innerHTML]=\"description | safeHtml\"></h1>\n </div>\n <div class=\"report-button\">\n <div class=\"report-circle\" *ngIf=\"resolvedMenuItems.length > 0\">\n <mat-icon [matMenuTriggerFor]=\"menu\">more_vert</mat-icon>\n <mat-menu #menu=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let item of resolvedMenuItems\"\n (click)=\"onClick(item.action)\"\n >\n <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n <span>{{ item.text }}</span>\n </button>\n </mat-menu>\n </div>\n </div>\n</div>\n", styles: [".report-item{margin:24px 48px;height:161px;display:flex;border-radius:16px;border:1px solid #CDCDCD}.report-item .report-icon{width:25%;border-radius:16px 0 0 16px;background:#fdefea}.report-item .report-icon .mat-icon{width:123px;height:123px;font-size:123px;color:#ea561d;padding:20px 42px}.report-item .report-text{background:var(--GlobalColors-Neutral-20, #F9F9F9);width:100%;padding:0 16px}.report-item .report-text h1{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:28px;margin-top:25px}.report-item .report-text li{color:var #000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px;margin-top:10px}.report-item .report-button{width:4vw;align-items:flex-end;border-radius:50%;margin-top:10px}.report-item .report-button .report-circle{background-color:#fff;border-radius:50%;display:flex;align-items:center;margin-right:10px}.report-item .report-button .mat-icon{width:20px;height:20px;font-size:20px;margin:5px;color:#ea561d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
58
97
  }
59
98
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ReportItemComponent, decorators: [{
60
99
  type: Component,
61
- args: [{ selector: 'mapa-report-item', imports: [CommonModule, MatIconModule, MatMenuModule], standalone: true, template: "<div class=\"report-item\">\n <div class=\"report-icon\">\n <mat-icon class=\"material-icons\">{{ icon }}</mat-icon>\n </div>\n <div class=\"report-text\">\n <h1>\n {{ description }}\n </h1>\n </div>\n <div class=\"report-button\">\n <div class=\"report-circle\" *ngIf=\"resolvedMenuItems.length > 0\">\n <mat-icon [matMenuTriggerFor]=\"menu\">more_vert</mat-icon>\n <mat-menu #menu=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let item of resolvedMenuItems\"\n (click)=\"onClick(item.action)\"\n >\n <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n <span>{{ item.text }}</span>\n </button>\n </mat-menu>\n </div>\n </div>\n</div>\n", styles: [".report-item{margin:24px 48px;height:161px;display:flex;border-radius:16px;border:1px solid #CDCDCD}.report-item .report-icon{width:25%;border-radius:16px 0 0 16px;background:#fdefea}.report-item .report-icon .mat-icon{width:123px;height:123px;font-size:123px;color:#ea561d;padding:20px 42px}.report-item .report-text{background:var(--GlobalColors-Neutral-20, #F9F9F9);width:100%;padding:0 16px}.report-item .report-text h1{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:28px;margin-top:25px}.report-item .report-text li{color:var #000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px;margin-top:10px}.report-item .report-button{width:4vw;align-items:flex-end;border-radius:50%;margin-top:10px}.report-item .report-button .report-circle{background-color:#fff;border-radius:50%;display:flex;align-items:center;margin-right:10px}.report-item .report-button .mat-icon{width:20px;height:20px;font-size:20px;margin:5px;color:#ea561d}\n"] }]
100
+ args: [{ selector: 'mapa-report-item', imports: [CommonModule, MatIconModule, MatMenuModule, SafeHtmlPipe], standalone: true, template: "<div class=\"report-item\">\n <div class=\"report-icon\">\n <mat-icon class=\"material-icons\">{{ icon }}</mat-icon>\n </div>\n <div class=\"report-text\">\n <h1 [innerHTML]=\"description | safeHtml\"></h1>\n </div>\n <div class=\"report-button\">\n <div class=\"report-circle\" *ngIf=\"resolvedMenuItems.length > 0\">\n <mat-icon [matMenuTriggerFor]=\"menu\">more_vert</mat-icon>\n <mat-menu #menu=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let item of resolvedMenuItems\"\n (click)=\"onClick(item.action)\"\n >\n <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n <span>{{ item.text }}</span>\n </button>\n </mat-menu>\n </div>\n </div>\n</div>\n", styles: [".report-item{margin:24px 48px;height:161px;display:flex;border-radius:16px;border:1px solid #CDCDCD}.report-item .report-icon{width:25%;border-radius:16px 0 0 16px;background:#fdefea}.report-item .report-icon .mat-icon{width:123px;height:123px;font-size:123px;color:#ea561d;padding:20px 42px}.report-item .report-text{background:var(--GlobalColors-Neutral-20, #F9F9F9);width:100%;padding:0 16px}.report-item .report-text h1{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:28px;margin-top:25px}.report-item .report-text li{color:var #000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px;margin-top:10px}.report-item .report-button{width:4vw;align-items:flex-end;border-radius:50%;margin-top:10px}.report-item .report-button .report-circle{background-color:#fff;border-radius:50%;display:flex;align-items:center;margin-right:10px}.report-item .report-button .mat-icon{width:20px;height:20px;font-size:20px;margin:5px;color:#ea561d}\n"] }]
62
101
  }], propDecorators: { itemData: [{
63
102
  type: Input
64
103
  }], menuItems: [{
@@ -1 +1 @@
1
- {"version":3,"file":"mapa-library-ui-src-lib-components-report-item.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/report-item/src/report-item.component.ts","../../../projects/mapa-library-ui/src/lib/components/report-item/src/report-item.component.html","../../../projects/mapa-library-ui/src/lib/components/report-item/public-api.ts","../../../projects/mapa-library-ui/src/report-item.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-report-item.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n} from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport {\n MenuActionEvent,\n MenuActionItem,\n} from '../../../core/interfaces/menu-action.interface';\n\nexport interface ReportItemMenuItem extends MenuActionItem {}\n\nexport interface ReportItem {\n id: string;\n icon: string;\n description: string;\n menu?: ReportItemMenuItem[];\n}\n\n@Component({\n selector: 'mapa-report-item',\n templateUrl: './report-item.component.html',\n styleUrl: './report-item.component.scss',\n imports: [CommonModule, MatIconModule, MatMenuModule],\n standalone: true\n})\nexport class ReportItemComponent implements OnChanges {\n @Input() itemData?: ReportItem | ReportItem[];\n @Input() menuItems: ReportItemMenuItem[] = [];\n @Output() clicked: EventEmitter<string> = new EventEmitter<string>();\n @Output() emitMenu: EventEmitter<MenuActionEvent<ReportItem>> =\n new EventEmitter<MenuActionEvent<ReportItem>>();\n\n id: string = '';\n description: string = '';\n icon: string = '';\n\n get item(): ReportItem | undefined {\n if (Array.isArray(this.itemData)) {\n return this.itemData[0];\n }\n\n return this.itemData;\n }\n\n get resolvedMenuItems(): ReportItemMenuItem[] {\n if (this.item?.menu && this.item.menu.length > 0) {\n return this.item.menu;\n }\n\n return this.menuItems;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['itemData']) {\n this.syncItemData();\n }\n }\n\n private syncItemData(): void {\n const data = this.item;\n\n if (!data) {\n return;\n }\n\n this.id = data.id;\n this.description = data.description;\n this.icon = data.icon;\n }\n\n onClick(action: string): void {\n const item = this.item;\n\n if (!item) {\n return;\n }\n\n this.emitMenu.emit({\n action,\n data: item,\n });\n this.clicked.emit(item.id);\n }\n}\n","<div class=\"report-item\">\n <div class=\"report-icon\">\n <mat-icon class=\"material-icons\">{{ icon }}</mat-icon>\n </div>\n <div class=\"report-text\">\n <h1>\n {{ description }}\n </h1>\n </div>\n <div class=\"report-button\">\n <div class=\"report-circle\" *ngIf=\"resolvedMenuItems.length > 0\">\n <mat-icon [matMenuTriggerFor]=\"menu\">more_vert</mat-icon>\n <mat-menu #menu=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let item of resolvedMenuItems\"\n (click)=\"onClick(item.action)\"\n >\n <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n <span>{{ item.text }}</span>\n </button>\n </mat-menu>\n </div>\n </div>\n</div>\n","/*\n * Public API Surface of mapa-library-ui report-item\n */\n\nexport * from './src/report-item.component';\n","/*\n * Public API Surface of mapa-library-ui report-item\n */\n\nexport * from './lib/components/report-item/public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './report-item';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"mapa-library-ui-src-lib-components-report-item.mjs","sources":["../../../projects/mapa-library-ui/src/lib/core/services/html-sanitizer.service.ts","../../../projects/mapa-library-ui/src/lib/core/pipes/safe-html.pipe.ts","../../../projects/mapa-library-ui/src/lib/components/report-item/src/report-item.component.ts","../../../projects/mapa-library-ui/src/lib/components/report-item/src/report-item.component.html","../../../projects/mapa-library-ui/src/lib/components/report-item/public-api.ts","../../../projects/mapa-library-ui/src/report-item.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-report-item.ts"],"sourcesContent":["import { Injectable, SecurityContext } from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\n\nexport function sanitizeHtmlContent(\n sanitizer: DomSanitizer,\n value?: string | null\n): string {\n return sanitizer.sanitize(SecurityContext.HTML, value ?? \"\") ?? \"\";\n}\n\n@Injectable({\n providedIn: \"root\",\n})\nexport class HtmlSanitizerService {\n constructor(private readonly sanitizer: DomSanitizer) {}\n\n sanitize(value?: string | null): string {\n return sanitizeHtmlContent(this.sanitizer, value);\n }\n}\n","import { Pipe, PipeTransform } from \"@angular/core\";\nimport { HtmlSanitizerService } from \"../services/html-sanitizer.service\";\n\n@Pipe({\n name: \"safeHtml\",\n standalone: true,\n})\nexport class SafeHtmlPipe implements PipeTransform {\n constructor(private readonly htmlSanitizer: HtmlSanitizerService) {}\n\n transform(value?: string | null): string {\n return this.htmlSanitizer.sanitize(value);\n }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n} from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport {\n MenuActionEvent,\n MenuActionItem,\n} from '../../../core/interfaces/menu-action.interface';\nimport { SafeHtmlPipe } from '../../../core/pipes/safe-html.pipe';\n\nexport interface ReportItemMenuItem extends MenuActionItem {}\n\nexport interface ReportItem {\n id: string;\n icon: string;\n description: string;\n menu?: ReportItemMenuItem[];\n}\n\n@Component({\n selector: 'mapa-report-item',\n templateUrl: './report-item.component.html',\n styleUrl: './report-item.component.scss',\n imports: [CommonModule, MatIconModule, MatMenuModule, SafeHtmlPipe],\n standalone: true\n})\nexport class ReportItemComponent implements OnChanges {\n @Input() itemData?: ReportItem | ReportItem[];\n @Input() menuItems: ReportItemMenuItem[] = [];\n @Output() clicked: EventEmitter<string> = new EventEmitter<string>();\n @Output() emitMenu: EventEmitter<MenuActionEvent<ReportItem>> =\n new EventEmitter<MenuActionEvent<ReportItem>>();\n\n id: string = '';\n description: string = '';\n icon: string = '';\n\n get item(): ReportItem | undefined {\n if (Array.isArray(this.itemData)) {\n return this.itemData[0];\n }\n\n return this.itemData;\n }\n\n get resolvedMenuItems(): ReportItemMenuItem[] {\n if (this.item?.menu && this.item.menu.length > 0) {\n return this.item.menu;\n }\n\n return this.menuItems;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['itemData']) {\n this.syncItemData();\n }\n }\n\n private syncItemData(): void {\n const data = this.item;\n\n if (!data) {\n return;\n }\n\n this.id = data.id;\n this.description = data.description;\n this.icon = data.icon;\n }\n\n onClick(action: string): void {\n const item = this.item;\n\n if (!item) {\n return;\n }\n\n this.emitMenu.emit({\n action,\n data: item,\n });\n this.clicked.emit(item.id);\n }\n}\n","<div class=\"report-item\">\n <div class=\"report-icon\">\n <mat-icon class=\"material-icons\">{{ icon }}</mat-icon>\n </div>\n <div class=\"report-text\">\n <h1 [innerHTML]=\"description | safeHtml\"></h1>\n </div>\n <div class=\"report-button\">\n <div class=\"report-circle\" *ngIf=\"resolvedMenuItems.length > 0\">\n <mat-icon [matMenuTriggerFor]=\"menu\">more_vert</mat-icon>\n <mat-menu #menu=\"matMenu\">\n <button\n mat-menu-item\n *ngFor=\"let item of resolvedMenuItems\"\n (click)=\"onClick(item.action)\"\n >\n <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <img *ngIf=\"item.image\" [src]=\"item.image\" />\n <span>{{ item.text }}</span>\n </button>\n </mat-menu>\n </div>\n </div>\n</div>\n","/*\n * Public API Surface of mapa-library-ui report-item\n */\n\nexport * from './src/report-item.component';\n","/*\n * Public API Surface of mapa-library-ui report-item\n */\n\nexport * from './lib/components/report-item/public-api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './report-item';\n"],"names":["i1.HtmlSanitizerService"],"mappings":"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"}
@@ -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 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" }] }); }
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\">&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" }] }); }
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 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"] }]
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\">&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"] }]
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> {{ 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 }); }
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>&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 }); }
1065
1065
  }
1066
1066
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleComponent, decorators: [{
1067
1067
  type: Component,
@@ -1069,7 +1069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
1069
1069
  CommonModule,
1070
1070
  MapaCapabilityIntervalBarComponent,
1071
1071
  MapaProgressbarComponent,
1072
- ], 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"] }]
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>&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"] }]
1073
1074
  }], ctorParameters: () => [{ type: MapaI18nService }], propDecorators: { data: [{
1074
1075
  type: Input
1075
1076
  }], showProgressbar: [{
@@ -1175,7 +1176,7 @@ class MapaScaleParameterizationComponent {
1175
1176
  };
1176
1177
  }
1177
1178
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleParameterizationComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
1178
- 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 }); }
1179
+ 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 }); }
1179
1180
  }
1180
1181
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleParameterizationComponent, decorators: [{
1181
1182
  type: Component,
@@ -1185,7 +1186,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
1185
1186
  MapaCapabilityDotComponent,
1186
1187
  MapaCapabilityIntervalBarComponent,
1187
1188
  MapaProgressbarComponent,
1188
- ], 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"] }]
1189
+ SafeHtmlPipe,
1190
+ ], 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"] }]
1189
1191
  }], ctorParameters: () => [{ type: MapaI18nService }], propDecorators: { data: [{
1190
1192
  type: Input
1191
1193
  }], showProgressbar: [{