mapa-library-ui 2.5.5 → 2.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/mapa-library-ui-src-lib-components-capability.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-capability.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-chart.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-chart.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs +4 -3
- package/fesm2022/mapa-library-ui-src-lib-components-datepicker.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown-tree.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown-tree.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-dropdown.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-filters.mjs +2 -2
- package/fesm2022/mapa-library-ui-src-lib-components-filters.mjs.map +1 -1
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs +5 -5
- package/fesm2022/mapa-library-ui-src-lib-components-form.mjs.map +1 -1
- package/fesm2022/mapa-library-ui.mjs +27 -23
- package/fesm2022/mapa-library-ui.mjs.map +1 -1
- package/index.d.ts +6 -2
- package/mapa-library-ui-2.5.7.tgz +0 -0
- package/package.json +1 -1
- package/mapa-library-ui-2.5.5.tgz +0 -0
|
@@ -7,7 +7,7 @@ import * as i2 from '@angular/forms';
|
|
|
7
7
|
import { NgControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, FormsModule } from '@angular/forms';
|
|
8
8
|
import { NgxMaskDirective, NgxMaskService, provideNgxMask } from 'ngx-mask';
|
|
9
9
|
import { filter, map, startWith } from 'rxjs/operators';
|
|
10
|
-
import { fromEvent, merge } from 'rxjs';
|
|
10
|
+
import { fromEvent, merge, EMPTY } from 'rxjs';
|
|
11
11
|
import * as i1 from '@angular/material/input';
|
|
12
12
|
import { MatInputModule } from '@angular/material/input';
|
|
13
13
|
import * as i1$1 from '@angular/material/paginator';
|
|
@@ -6046,7 +6046,7 @@ class MapaDropdownComponent {
|
|
|
6046
6046
|
set formControl(control) {
|
|
6047
6047
|
this.formControlChanges?.unsubscribe();
|
|
6048
6048
|
this.formControlValue = control;
|
|
6049
|
-
this.formControlChanges = merge(control.
|
|
6049
|
+
this.formControlChanges = merge(control.events, control.parent?.events ?? EMPTY)
|
|
6050
6050
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
6051
6051
|
.subscribe(() => this.cdr.markForCheck());
|
|
6052
6052
|
}
|
|
@@ -6593,7 +6593,7 @@ class MapaDatepicker {
|
|
|
6593
6593
|
this.control.valueChanges
|
|
6594
6594
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
6595
6595
|
.subscribe((value) => this.applyExternal(value));
|
|
6596
|
-
this.control.
|
|
6596
|
+
merge(this.control.events, this.formGroup.events)
|
|
6597
6597
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
6598
6598
|
.subscribe(() => this.cdr.markForCheck());
|
|
6599
6599
|
this.formDisplay.valueChanges
|
|
@@ -7016,7 +7016,7 @@ class MapaDatepicker {
|
|
|
7016
7016
|
this.openedChange.emit(isOpen);
|
|
7017
7017
|
}
|
|
7018
7018
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7019
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepicker, isStandalone: true, selector: "mapa-datepicker, mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, outputs: { openedChange: "openedChange" }, host: { listeners: { "document:keydown.escape": "handleEscape()" }, properties: { "class.mapa-datepicker--range": "mode() === \"range\"" } }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true }, { propertyName: "picker", first: true, predicate: NgxsmkDatepickerComponent, descendants: true }], ngImport: i0, template: "@if (element && formGroup) {\n <div\n class=\"mapa-datepicker\"\n [class.mapa-datepicker--open]=\"isOpen()\"\n [class.mapa-datepicker--disabled]=\"isDisabled()\"\n >\n @if (element.label) {\n <label class=\"mapa-datepicker__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <!-- A origem do overlay precisa ficar fora do @if: refer\u00EAncias de template\n n\u00E3o atravessam blocos de controle de fluxo. -->\n <div\n class=\"mapa-datepicker__origin\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [formGroup]=\"formDisplay\"\n >\n @if (mode() === \"range\") {\n <div class=\"mapa-datepicker__range\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-start\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n </mat-form-field>\n\n <span class=\"mapa-datepicker__divider\">–</span>\n\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-end\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n } @else {\n <div class=\"mapa-datepicker__field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (mode() === \"multiple\") {\n <input\n matInput\n [attr.id]=\"element.key || null\"\n [value]=\"selectedLabel()\"\n [placeholder]=\"singlePlaceholder()\"\n readonly\n (click)=\"toggleCalendar()\"\n />\n } @else {\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"singlePlaceholder()\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n }\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n cdkConnectedOverlayPanelClass=\"mapa-datepicker__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-datepicker__panel\" role=\"dialog\">\n @if (hasPresets()) {\n <div class=\"mapa-datepicker__presets\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-trigger\"\n [class.mapa-datepicker__presets-trigger--open]=\"isPresetsOpen()\"\n [attr.aria-expanded]=\"isPresetsOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"togglePresets()\"\n >\n <span>{{ presetsTriggerLabel() }}</span>\n <svg\n class=\"mapa-datepicker__presets-chevron\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M6 9l6 6 6-6\"></path>\n </svg>\n </button>\n\n @if (isPresetsOpen()) {\n <ul class=\"mapa-datepicker__presets-list\" role=\"listbox\">\n @for (preset of presetList(); track preset.label) {\n <li role=\"option\" [attr.aria-selected]=\"isPresetActive(preset)\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-option\"\n [class.mapa-datepicker__presets-option--active]=\"\n isPresetActive(preset)\n \"\n (click)=\"applyPreset(preset)\"\n >\n {{ preset.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <ngxsmk-datepicker\n [inline]=\"true\"\n [mode]=\"mode()\"\n [value]=\"pickerValue()\"\n [locale]=\"ngxsmkLocale()\"\n [displayFormat]=\"displayFormat()\"\n [theme]=\"'light'\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabledDates]=\"disabledDates()\"\n [isInvalidDate]=\"isInvalidDate()\"\n [showRanges]=\"false\"\n [calendars]=\"calendars()\"\n [weekStart]=\"weekStart()\"\n [showCalendarButton]=\"false\"\n [classes]=\"ngxsmkClasses\"\n (valueChange)=\"handlePickerValue($event)\"\n ></ngxsmk-datepicker>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-datepicker__error\">\n <mapa-form-errors\n [control]=\"control\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-datepicker__hint\">{{ element.hint }}</p>\n }\n </div>\n}\n\n<ng-template #calendarIcon>\n <svg\n class=\"mapa-datepicker__icon\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"3\"></rect>\n <path d=\"M3 10h18M8 3v4M16 3v4\"></path>\n </svg>\n</ng-template>\n", styles: [":host{display:inline-block;width:min(var(--mapa-datepicker-width, 310px),100%);max-width:var(--mapa-datepicker-max-width, 310px)!important;min-width:0;box-sizing:border-box}:host(.mapa-datepicker--range){width:min(var(--mapa-datepicker-width, 272px),100%);max-width:var(--mapa-datepicker-max-width, 272px)!important}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}:host ::ng-deep .mapa-datepicker__origin{display:block;width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:0}:host ::ng-deep .mapa-datepicker__field .mapa-datepicker__toggle{margin-right:14px}:host ::ng-deep .mapa-datepicker__range{display:flex;align-items:center;justify-content:flex-start;background-color:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 14px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker__range-start,:host ::ng-deep .mapa-datepicker__range-end{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__range-end{flex-basis:48px}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%;height:48px!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker__range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker__range .mat-mdc-input-element{align-self:center;height:100%;margin:0!important;padding:0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker__range-end{padding-left:4px}:host ::ng-deep .mapa-datepicker__divider{flex:none;margin:0 4px;color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);cursor:pointer}:host ::ng-deep .mapa-datepicker__toggle:hover:not(:disabled){background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle:disabled{cursor:default;opacity:.5}:host ::ng-deep .mapa-datepicker__icon{display:block;pointer-events:none}:host ::ng-deep .mapa-datepicker__error,:host ::ng-deep .mapa-datepicker__hint{margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker__error{color:#b54242}:host ::ng-deep .mapa-datepicker__hint{color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-datepicker--open :host ::ng-deep .mapa-datepicker__toggle{color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__panel{display:block;max-width:calc(100vw - 32px);overflow-x:auto;padding:8px;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);box-sizing:border-box}.mapa-datepicker__panel ::ng-deep ngxsmk-datepicker,.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container,.mapa-datepicker__panel ::ng-deep .ngxsmk-backdrop{--datepicker-primary-color: var(--mapa-color-accent, #ff560b);--datepicker-primary-contrast: var(--mapa-color-surface, #ffffff);--datepicker-background: var(--mapa-color-surface, #ffffff);--datepicker-text-color: var(--mapa-color-ink, #1a1a1a);--datepicker-subtle-text-color: var(--mapa-color-muted, #555555);--datepicker-border-color: var( --mapa-color-border-soft, rgba(26, 26, 26, .08) );--datepicker-hover-background: rgba(255, 86, 11, .08);--datepicker-range-background: rgba(255, 86, 11, .12);--datepicker-radius-sm: 8px;--datepicker-radius-md: var(--mapa-radius-sm, 12px);--datepicker-radius-lg: var(--mapa-radius-md, 16px);--datepicker-border-radius: var(--mapa-radius-md, 16px);--datepicker-spacing-xs: 2px;--datepicker-spacing-sm: 6px;--datepicker-spacing-md: 8px;--datepicker-spacing-lg: 12px;--datepicker-spacing-xl: 12px;--datepicker-spacing-2xl: 16px;--datepicker-font-size-xs: 10px;--datepicker-font-size-sm: 11px;--datepicker-font-size-base: 13px;--datepicker-font-size-lg: 15px;--datepicker-font-family: var( --mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif );--ngxsmk-cell-size-desktop: 36px;--ngxsmk-touch-target: 36px;--ngxsmk-space-sm: 6px;--ngxsmk-space-md: 8px;--ngxsmk-font-size-sm: 11px;--datepicker-shadow-sm: none;--datepicker-shadow-md: none;--datepicker-shadow-lg: none;--datepicker-z-index-base: 0;display:block}.mapa-datepicker__panel ::ng-deep .mapa-datepicker__ngxsmk-group{display:none}.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-wrapper,.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-container{box-shadow:none;border:0;background:transparent}.mapa-datepicker__panel ::ng-deep .ngxsmk-day-number{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container{min-width:0}.mapa-datepicker__panel ::ng-deep .ngxsmk-calendar-month-multi{min-width:0}.mapa-datepicker__presets{position:relative;z-index:10;margin-bottom:8px}.mapa-datepicker__presets-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-trigger:hover,.mapa-datepicker__presets-trigger--open{border-color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__presets-chevron{flex:none;color:var(--mapa-color-muted, #555555);transition:transform .12s ease}.mapa-datepicker__presets-trigger--open .mapa-datepicker__presets-chevron{transform:rotate(180deg)}.mapa-datepicker__presets-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:11;max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));box-sizing:border-box}.mapa-datepicker__presets-option{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-option:hover{background:#1a1a1a0f}.mapa-datepicker__presets-option--active{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b);font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: NgxsmkDatepickerComponent, selector: "ngxsmk-datepicker", inputs: ["mode", "calendarViewMode", "isInvalidDate", "asyncDateFilter", "showRanges", "showTime", "timeOnly", "timeRangeMode", "showCalendarButton", "minuteInterval", "use24Hour", "secondInterval", "showSeconds", "holidayProvider", "disableHolidays", "disabledDates", "disabledRanges", "recurringPattern", "dateTemplate", "placeholder", "inline", "responsive", "inputId", "name", "autocomplete", "translations", "translationService", "clearLabel", "closeLabel", "prevMonthAriaLabel", "nextMonthAriaLabel", "clearAriaLabel", "closeAriaLabel", "weekStart", "yearRange", "timezone", "showOtherMonths", "hooks", "enableKeyboardShortcuts", "customShortcuts", "autoApplyClose", "allowSameDay", "displayFormat", "allowTyping", "inputMask", "enableNaturalLanguage", "naturalLanguagePreviewTemplate", "calendars", "rangePresetFactory", "showTimezoneSelector", "defaultTimezone", "calendarCount", "calendarLayout", "changeActiveMonthOnSelection", "showWeekNumbers", "weekNumberLabel", "secondaryCalendar", "dayMetadata", "calendarHeaderTemplate", "calendarFooterTemplate", "defaultMonthOffset", "syncScroll", "align", "useNativePicker", "enableHapticFeedback", "mobileModalStyle", "mobileTimePickerStyle", "enablePullToRefresh", "mobileTheme", "enableVoiceInput", "autoDetectMobile", "disableFocusTrap", "appendToBody", "value", "field", "startAt", "locale", "theme", "dateFormatPattern", "animationConfig", "rtl", "classes", "disabledState", "required", "errorState", "userAriaDescribedBy", "minDate", "maxDate", "ranges", "comparisonRange"], outputs: ["asyncDateFilterLoading", "asyncDateFilterError", "naturalLanguageResolved", "invalidRange", "timezoneChange", "valueChange", "action", "validationError"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7019
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepicker, isStandalone: true, selector: "mapa-datepicker, mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, outputs: { openedChange: "openedChange" }, host: { listeners: { "document:keydown.escape": "handleEscape()" }, properties: { "class.mapa-datepicker--range": "mode() === \"range\"" } }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true }, { propertyName: "picker", first: true, predicate: NgxsmkDatepickerComponent, descendants: true }], ngImport: i0, template: "@if (element && formGroup) {\n <div\n class=\"mapa-datepicker\"\n [class.mapa-datepicker--open]=\"isOpen()\"\n [class.mapa-datepicker--disabled]=\"isDisabled()\"\n [class.mapa-datepicker--invalid]=\"shouldShowError()\"\n >\n @if (element.label) {\n <label class=\"mapa-datepicker__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <!-- A origem do overlay precisa ficar fora do @if: refer\u00EAncias de template\n n\u00E3o atravessam blocos de controle de fluxo. -->\n <div\n class=\"mapa-datepicker__origin\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [formGroup]=\"formDisplay\"\n >\n @if (mode() === \"range\") {\n <div class=\"mapa-datepicker__range\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-start\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n </mat-form-field>\n\n <span class=\"mapa-datepicker__divider\">–</span>\n\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-end\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n } @else {\n <div class=\"mapa-datepicker__field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (mode() === \"multiple\") {\n <input\n matInput\n [attr.id]=\"element.key || null\"\n [value]=\"selectedLabel()\"\n [placeholder]=\"singlePlaceholder()\"\n readonly\n (click)=\"toggleCalendar()\"\n />\n } @else {\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"singlePlaceholder()\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n }\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n cdkConnectedOverlayPanelClass=\"mapa-datepicker__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-datepicker__panel\" role=\"dialog\">\n @if (hasPresets()) {\n <div class=\"mapa-datepicker__presets\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-trigger\"\n [class.mapa-datepicker__presets-trigger--open]=\"isPresetsOpen()\"\n [attr.aria-expanded]=\"isPresetsOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"togglePresets()\"\n >\n <span>{{ presetsTriggerLabel() }}</span>\n <svg\n class=\"mapa-datepicker__presets-chevron\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M6 9l6 6 6-6\"></path>\n </svg>\n </button>\n\n @if (isPresetsOpen()) {\n <ul class=\"mapa-datepicker__presets-list\" role=\"listbox\">\n @for (preset of presetList(); track preset.label) {\n <li role=\"option\" [attr.aria-selected]=\"isPresetActive(preset)\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-option\"\n [class.mapa-datepicker__presets-option--active]=\"\n isPresetActive(preset)\n \"\n (click)=\"applyPreset(preset)\"\n >\n {{ preset.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <ngxsmk-datepicker\n [inline]=\"true\"\n [mode]=\"mode()\"\n [value]=\"pickerValue()\"\n [locale]=\"ngxsmkLocale()\"\n [displayFormat]=\"displayFormat()\"\n [theme]=\"'light'\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabledDates]=\"disabledDates()\"\n [isInvalidDate]=\"isInvalidDate()\"\n [showRanges]=\"false\"\n [calendars]=\"calendars()\"\n [weekStart]=\"weekStart()\"\n [showCalendarButton]=\"false\"\n [classes]=\"ngxsmkClasses\"\n (valueChange)=\"handlePickerValue($event)\"\n ></ngxsmk-datepicker>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-datepicker__error\">\n <mapa-form-errors\n [control]=\"control\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-datepicker__hint\">{{ element.hint }}</p>\n }\n </div>\n}\n\n<ng-template #calendarIcon>\n <svg\n class=\"mapa-datepicker__icon\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"3\"></rect>\n <path d=\"M3 10h18M8 3v4M16 3v4\"></path>\n </svg>\n</ng-template>\n", styles: [":host{display:inline-block;width:min(var(--mapa-datepicker-width, 310px),100%);max-width:var(--mapa-datepicker-max-width, 310px)!important;min-width:0;box-sizing:border-box}:host(.mapa-datepicker--range){width:min(var(--mapa-datepicker-width, 272px),100%);max-width:var(--mapa-datepicker-max-width, 272px)!important}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}:host ::ng-deep .mapa-datepicker__origin{display:block;width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:0}:host ::ng-deep .mapa-datepicker__field .mapa-datepicker__toggle{margin-right:14px}:host ::ng-deep .mapa-datepicker__range{display:flex;align-items:center;justify-content:flex-start;background-color:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 14px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker__range-start,:host ::ng-deep .mapa-datepicker__range-end{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__range-end{flex-basis:48px}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%;height:48px!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker__range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker__range .mat-mdc-input-element{align-self:center;height:100%;margin:0!important;padding:0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker__range-end{padding-left:4px}:host ::ng-deep .mapa-datepicker__divider{flex:none;margin:0 4px;color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);cursor:pointer}:host ::ng-deep .mapa-datepicker__toggle:hover:not(:disabled){background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle:disabled{cursor:default;opacity:.5}:host ::ng-deep .mapa-datepicker__icon{display:block;pointer-events:none}:host ::ng-deep .mapa-datepicker__error,:host ::ng-deep .mapa-datepicker__hint{margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker__error{color:#b54242}:host ::ng-deep .mapa-datepicker__hint{color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-datepicker--open :host ::ng-deep .mapa-datepicker__toggle{color:var(--mapa-color-accent, #ff560b)}:host ::ng-deep .mapa-datepicker--invalid .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-outline-color: #b54242;--mat-form-field-outlined-hover-outline-color: #b54242;--mat-form-field-outlined-focus-outline-color: #b54242}:host ::ng-deep .mapa-datepicker--invalid .mapa-datepicker__range{border-color:#b54242}.mapa-datepicker__panel{display:block;max-width:calc(100vw - 32px);overflow-x:auto;padding:8px;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);box-sizing:border-box}.mapa-datepicker__panel ::ng-deep ngxsmk-datepicker,.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container,.mapa-datepicker__panel ::ng-deep .ngxsmk-backdrop{--datepicker-primary-color: var(--mapa-color-accent, #ff560b);--datepicker-primary-contrast: var(--mapa-color-surface, #ffffff);--datepicker-background: var(--mapa-color-surface, #ffffff);--datepicker-text-color: var(--mapa-color-ink, #1a1a1a);--datepicker-subtle-text-color: var(--mapa-color-muted, #555555);--datepicker-border-color: var( --mapa-color-border-soft, rgba(26, 26, 26, .08) );--datepicker-hover-background: rgba(255, 86, 11, .08);--datepicker-range-background: rgba(255, 86, 11, .12);--datepicker-radius-sm: 8px;--datepicker-radius-md: var(--mapa-radius-sm, 12px);--datepicker-radius-lg: var(--mapa-radius-md, 16px);--datepicker-border-radius: var(--mapa-radius-md, 16px);--datepicker-spacing-xs: 2px;--datepicker-spacing-sm: 6px;--datepicker-spacing-md: 8px;--datepicker-spacing-lg: 12px;--datepicker-spacing-xl: 12px;--datepicker-spacing-2xl: 16px;--datepicker-font-size-xs: 10px;--datepicker-font-size-sm: 11px;--datepicker-font-size-base: 13px;--datepicker-font-size-lg: 15px;--datepicker-font-family: var( --mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif );--ngxsmk-cell-size-desktop: 36px;--ngxsmk-touch-target: 36px;--ngxsmk-space-sm: 6px;--ngxsmk-space-md: 8px;--ngxsmk-font-size-sm: 11px;--datepicker-shadow-sm: none;--datepicker-shadow-md: none;--datepicker-shadow-lg: none;--datepicker-z-index-base: 0;display:block}.mapa-datepicker__panel ::ng-deep .mapa-datepicker__ngxsmk-group{display:none}.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-wrapper,.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-container{box-shadow:none;border:0;background:transparent}.mapa-datepicker__panel ::ng-deep .ngxsmk-day-number{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container{min-width:0}.mapa-datepicker__panel ::ng-deep .ngxsmk-calendar-month-multi{min-width:0}.mapa-datepicker__presets{position:relative;z-index:10;margin-bottom:8px}.mapa-datepicker__presets-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-trigger:hover,.mapa-datepicker__presets-trigger--open{border-color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__presets-chevron{flex:none;color:var(--mapa-color-muted, #555555);transition:transform .12s ease}.mapa-datepicker__presets-trigger--open .mapa-datepicker__presets-chevron{transform:rotate(180deg)}.mapa-datepicker__presets-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:11;max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));box-sizing:border-box}.mapa-datepicker__presets-option{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-option:hover{background:#1a1a1a0f}.mapa-datepicker__presets-option--active{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b);font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: NgxsmkDatepickerComponent, selector: "ngxsmk-datepicker", inputs: ["mode", "calendarViewMode", "isInvalidDate", "asyncDateFilter", "showRanges", "showTime", "timeOnly", "timeRangeMode", "showCalendarButton", "minuteInterval", "use24Hour", "secondInterval", "showSeconds", "holidayProvider", "disableHolidays", "disabledDates", "disabledRanges", "recurringPattern", "dateTemplate", "placeholder", "inline", "responsive", "inputId", "name", "autocomplete", "translations", "translationService", "clearLabel", "closeLabel", "prevMonthAriaLabel", "nextMonthAriaLabel", "clearAriaLabel", "closeAriaLabel", "weekStart", "yearRange", "timezone", "showOtherMonths", "hooks", "enableKeyboardShortcuts", "customShortcuts", "autoApplyClose", "allowSameDay", "displayFormat", "allowTyping", "inputMask", "enableNaturalLanguage", "naturalLanguagePreviewTemplate", "calendars", "rangePresetFactory", "showTimezoneSelector", "defaultTimezone", "calendarCount", "calendarLayout", "changeActiveMonthOnSelection", "showWeekNumbers", "weekNumberLabel", "secondaryCalendar", "dayMetadata", "calendarHeaderTemplate", "calendarFooterTemplate", "defaultMonthOffset", "syncScroll", "align", "useNativePicker", "enableHapticFeedback", "mobileModalStyle", "mobileTimePickerStyle", "enablePullToRefresh", "mobileTheme", "enableVoiceInput", "autoDetectMobile", "disableFocusTrap", "appendToBody", "value", "field", "startAt", "locale", "theme", "dateFormatPattern", "animationConfig", "rtl", "classes", "disabledState", "required", "errorState", "userAriaDescribedBy", "minDate", "maxDate", "ranges", "comparisonRange"], outputs: ["asyncDateFilterLoading", "asyncDateFilterError", "naturalLanguageResolved", "invalidRange", "timezoneChange", "valueChange", "action", "validationError"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7020
7020
|
}
|
|
7021
7021
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, decorators: [{
|
|
7022
7022
|
type: Component,
|
|
@@ -7033,7 +7033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
7033
7033
|
CdkOverlayOrigin,
|
|
7034
7034
|
NgxsmkDatepickerComponent,
|
|
7035
7035
|
MapaFormErrorsComponent,
|
|
7036
|
-
], providers: [provideNgxMask()], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (element && formGroup) {\n <div\n class=\"mapa-datepicker\"\n [class.mapa-datepicker--open]=\"isOpen()\"\n [class.mapa-datepicker--disabled]=\"isDisabled()\"\n >\n @if (element.label) {\n <label class=\"mapa-datepicker__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <!-- A origem do overlay precisa ficar fora do @if: refer\u00EAncias de template\n n\u00E3o atravessam blocos de controle de fluxo. -->\n <div\n class=\"mapa-datepicker__origin\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [formGroup]=\"formDisplay\"\n >\n @if (mode() === \"range\") {\n <div class=\"mapa-datepicker__range\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-start\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n </mat-form-field>\n\n <span class=\"mapa-datepicker__divider\">–</span>\n\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-end\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n } @else {\n <div class=\"mapa-datepicker__field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (mode() === \"multiple\") {\n <input\n matInput\n [attr.id]=\"element.key || null\"\n [value]=\"selectedLabel()\"\n [placeholder]=\"singlePlaceholder()\"\n readonly\n (click)=\"toggleCalendar()\"\n />\n } @else {\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"singlePlaceholder()\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n }\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n cdkConnectedOverlayPanelClass=\"mapa-datepicker__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-datepicker__panel\" role=\"dialog\">\n @if (hasPresets()) {\n <div class=\"mapa-datepicker__presets\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-trigger\"\n [class.mapa-datepicker__presets-trigger--open]=\"isPresetsOpen()\"\n [attr.aria-expanded]=\"isPresetsOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"togglePresets()\"\n >\n <span>{{ presetsTriggerLabel() }}</span>\n <svg\n class=\"mapa-datepicker__presets-chevron\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M6 9l6 6 6-6\"></path>\n </svg>\n </button>\n\n @if (isPresetsOpen()) {\n <ul class=\"mapa-datepicker__presets-list\" role=\"listbox\">\n @for (preset of presetList(); track preset.label) {\n <li role=\"option\" [attr.aria-selected]=\"isPresetActive(preset)\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-option\"\n [class.mapa-datepicker__presets-option--active]=\"\n isPresetActive(preset)\n \"\n (click)=\"applyPreset(preset)\"\n >\n {{ preset.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <ngxsmk-datepicker\n [inline]=\"true\"\n [mode]=\"mode()\"\n [value]=\"pickerValue()\"\n [locale]=\"ngxsmkLocale()\"\n [displayFormat]=\"displayFormat()\"\n [theme]=\"'light'\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabledDates]=\"disabledDates()\"\n [isInvalidDate]=\"isInvalidDate()\"\n [showRanges]=\"false\"\n [calendars]=\"calendars()\"\n [weekStart]=\"weekStart()\"\n [showCalendarButton]=\"false\"\n [classes]=\"ngxsmkClasses\"\n (valueChange)=\"handlePickerValue($event)\"\n ></ngxsmk-datepicker>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-datepicker__error\">\n <mapa-form-errors\n [control]=\"control\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-datepicker__hint\">{{ element.hint }}</p>\n }\n </div>\n}\n\n<ng-template #calendarIcon>\n <svg\n class=\"mapa-datepicker__icon\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"3\"></rect>\n <path d=\"M3 10h18M8 3v4M16 3v4\"></path>\n </svg>\n</ng-template>\n", styles: [":host{display:inline-block;width:min(var(--mapa-datepicker-width, 310px),100%);max-width:var(--mapa-datepicker-max-width, 310px)!important;min-width:0;box-sizing:border-box}:host(.mapa-datepicker--range){width:min(var(--mapa-datepicker-width, 272px),100%);max-width:var(--mapa-datepicker-max-width, 272px)!important}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}:host ::ng-deep .mapa-datepicker__origin{display:block;width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:0}:host ::ng-deep .mapa-datepicker__field .mapa-datepicker__toggle{margin-right:14px}:host ::ng-deep .mapa-datepicker__range{display:flex;align-items:center;justify-content:flex-start;background-color:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 14px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker__range-start,:host ::ng-deep .mapa-datepicker__range-end{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__range-end{flex-basis:48px}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%;height:48px!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker__range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker__range .mat-mdc-input-element{align-self:center;height:100%;margin:0!important;padding:0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker__range-end{padding-left:4px}:host ::ng-deep .mapa-datepicker__divider{flex:none;margin:0 4px;color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);cursor:pointer}:host ::ng-deep .mapa-datepicker__toggle:hover:not(:disabled){background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle:disabled{cursor:default;opacity:.5}:host ::ng-deep .mapa-datepicker__icon{display:block;pointer-events:none}:host ::ng-deep .mapa-datepicker__error,:host ::ng-deep .mapa-datepicker__hint{margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker__error{color:#b54242}:host ::ng-deep .mapa-datepicker__hint{color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-datepicker--open :host ::ng-deep .mapa-datepicker__toggle{color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__panel{display:block;max-width:calc(100vw - 32px);overflow-x:auto;padding:8px;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);box-sizing:border-box}.mapa-datepicker__panel ::ng-deep ngxsmk-datepicker,.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container,.mapa-datepicker__panel ::ng-deep .ngxsmk-backdrop{--datepicker-primary-color: var(--mapa-color-accent, #ff560b);--datepicker-primary-contrast: var(--mapa-color-surface, #ffffff);--datepicker-background: var(--mapa-color-surface, #ffffff);--datepicker-text-color: var(--mapa-color-ink, #1a1a1a);--datepicker-subtle-text-color: var(--mapa-color-muted, #555555);--datepicker-border-color: var( --mapa-color-border-soft, rgba(26, 26, 26, .08) );--datepicker-hover-background: rgba(255, 86, 11, .08);--datepicker-range-background: rgba(255, 86, 11, .12);--datepicker-radius-sm: 8px;--datepicker-radius-md: var(--mapa-radius-sm, 12px);--datepicker-radius-lg: var(--mapa-radius-md, 16px);--datepicker-border-radius: var(--mapa-radius-md, 16px);--datepicker-spacing-xs: 2px;--datepicker-spacing-sm: 6px;--datepicker-spacing-md: 8px;--datepicker-spacing-lg: 12px;--datepicker-spacing-xl: 12px;--datepicker-spacing-2xl: 16px;--datepicker-font-size-xs: 10px;--datepicker-font-size-sm: 11px;--datepicker-font-size-base: 13px;--datepicker-font-size-lg: 15px;--datepicker-font-family: var( --mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif );--ngxsmk-cell-size-desktop: 36px;--ngxsmk-touch-target: 36px;--ngxsmk-space-sm: 6px;--ngxsmk-space-md: 8px;--ngxsmk-font-size-sm: 11px;--datepicker-shadow-sm: none;--datepicker-shadow-md: none;--datepicker-shadow-lg: none;--datepicker-z-index-base: 0;display:block}.mapa-datepicker__panel ::ng-deep .mapa-datepicker__ngxsmk-group{display:none}.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-wrapper,.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-container{box-shadow:none;border:0;background:transparent}.mapa-datepicker__panel ::ng-deep .ngxsmk-day-number{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container{min-width:0}.mapa-datepicker__panel ::ng-deep .ngxsmk-calendar-month-multi{min-width:0}.mapa-datepicker__presets{position:relative;z-index:10;margin-bottom:8px}.mapa-datepicker__presets-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-trigger:hover,.mapa-datepicker__presets-trigger--open{border-color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__presets-chevron{flex:none;color:var(--mapa-color-muted, #555555);transition:transform .12s ease}.mapa-datepicker__presets-trigger--open .mapa-datepicker__presets-chevron{transform:rotate(180deg)}.mapa-datepicker__presets-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:11;max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));box-sizing:border-box}.mapa-datepicker__presets-option{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-option:hover{background:#1a1a1a0f}.mapa-datepicker__presets-option--active{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b);font-weight:600}\n"] }]
|
|
7036
|
+
], providers: [provideNgxMask()], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (element && formGroup) {\n <div\n class=\"mapa-datepicker\"\n [class.mapa-datepicker--open]=\"isOpen()\"\n [class.mapa-datepicker--disabled]=\"isDisabled()\"\n [class.mapa-datepicker--invalid]=\"shouldShowError()\"\n >\n @if (element.label) {\n <label class=\"mapa-datepicker__label\" [attr.for]=\"element.key || null\">\n {{ element.label }}\n </label>\n }\n\n <!-- A origem do overlay precisa ficar fora do @if: refer\u00EAncias de template\n n\u00E3o atravessam blocos de controle de fluxo. -->\n <div\n class=\"mapa-datepicker__origin\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [formGroup]=\"formDisplay\"\n >\n @if (mode() === \"range\") {\n <div class=\"mapa-datepicker__range\">\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-start\"\n >\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"startDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n </mat-form-field>\n\n <span class=\"mapa-datepicker__divider\">–</span>\n\n <mat-form-field\n appearance=\"outline\"\n subscriptSizing=\"dynamic\"\n class=\"mapa-datepicker__range-end\"\n >\n <input\n matInput\n formControlName=\"endDate\"\n [placeholder]=\"endDatePlaceholder\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n } @else {\n <div class=\"mapa-datepicker__field\">\n <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n @if (mode() === \"multiple\") {\n <input\n matInput\n [attr.id]=\"element.key || null\"\n [value]=\"selectedLabel()\"\n [placeholder]=\"singlePlaceholder()\"\n readonly\n (click)=\"toggleCalendar()\"\n />\n } @else {\n <input\n matInput\n formControlName=\"startDate\"\n [attr.id]=\"element.key || null\"\n [placeholder]=\"singlePlaceholder()\"\n [mask]=\"mask()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isReadonly()\"\n />\n }\n\n @if (showClear()) {\n <button\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__clear\"\n aria-label=\"Limpar\"\n tabindex=\"-1\"\n (click)=\"clear($event)\"\n >\n ×\n </button>\n }\n\n <button\n #toggleButton\n matSuffix\n type=\"button\"\n class=\"mapa-datepicker__toggle\"\n [disabled]=\"isDisabled() || isReadonly()\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"dialog\"\n aria-label=\"Abrir calend\u00E1rio\"\n (click)=\"toggleCalendar()\"\n >\n <ng-container [ngTemplateOutlet]=\"calendarIcon\"></ng-container>\n </button>\n </mat-form-field>\n </div>\n }\n </div>\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayPush]=\"true\"\n cdkConnectedOverlayPanelClass=\"mapa-datepicker__overlay-pane\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n >\n <div class=\"mapa-datepicker__panel\" role=\"dialog\">\n @if (hasPresets()) {\n <div class=\"mapa-datepicker__presets\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-trigger\"\n [class.mapa-datepicker__presets-trigger--open]=\"isPresetsOpen()\"\n [attr.aria-expanded]=\"isPresetsOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"togglePresets()\"\n >\n <span>{{ presetsTriggerLabel() }}</span>\n <svg\n class=\"mapa-datepicker__presets-chevron\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M6 9l6 6 6-6\"></path>\n </svg>\n </button>\n\n @if (isPresetsOpen()) {\n <ul class=\"mapa-datepicker__presets-list\" role=\"listbox\">\n @for (preset of presetList(); track preset.label) {\n <li role=\"option\" [attr.aria-selected]=\"isPresetActive(preset)\">\n <button\n type=\"button\"\n class=\"mapa-datepicker__presets-option\"\n [class.mapa-datepicker__presets-option--active]=\"\n isPresetActive(preset)\n \"\n (click)=\"applyPreset(preset)\"\n >\n {{ preset.label }}\n </button>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <ngxsmk-datepicker\n [inline]=\"true\"\n [mode]=\"mode()\"\n [value]=\"pickerValue()\"\n [locale]=\"ngxsmkLocale()\"\n [displayFormat]=\"displayFormat()\"\n [theme]=\"'light'\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [disabledDates]=\"disabledDates()\"\n [isInvalidDate]=\"isInvalidDate()\"\n [showRanges]=\"false\"\n [calendars]=\"calendars()\"\n [weekStart]=\"weekStart()\"\n [showCalendarButton]=\"false\"\n [classes]=\"ngxsmkClasses\"\n (valueChange)=\"handlePickerValue($event)\"\n ></ngxsmk-datepicker>\n </div>\n </ng-template>\n\n @if (shouldShowError()) {\n <p class=\"mapa-datepicker__error\">\n <mapa-form-errors\n [control]=\"control\"\n [errors]=\"element.errors\"\n ></mapa-form-errors>\n </p>\n } @else if (element.hint) {\n <p class=\"mapa-datepicker__hint\">{{ element.hint }}</p>\n }\n </div>\n}\n\n<ng-template #calendarIcon>\n <svg\n class=\"mapa-datepicker__icon\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"3\"></rect>\n <path d=\"M3 10h18M8 3v4M16 3v4\"></path>\n </svg>\n</ng-template>\n", styles: [":host{display:inline-block;width:min(var(--mapa-datepicker-width, 310px),100%);max-width:var(--mapa-datepicker-max-width, 310px)!important;min-width:0;box-sizing:border-box}:host(.mapa-datepicker--range){width:min(var(--mapa-datepicker-width, 272px),100%);max-width:var(--mapa-datepicker-max-width, 272px)!important}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}:host ::ng-deep .mapa-datepicker__origin{display:block;width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:0}:host ::ng-deep .mapa-datepicker__field .mapa-datepicker__toggle{margin-right:14px}:host ::ng-deep .mapa-datepicker__range{display:flex;align-items:center;justify-content:flex-start;background-color:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 14px;min-height:48px;height:48px;width:100%}:host ::ng-deep .mapa-datepicker__range-start,:host ::ng-deep .mapa-datepicker__range-end{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-start .mat-mdc-text-field-wrapper,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker__range-end .mat-mdc-text-field-wrapper{width:100%;min-width:0}:host ::ng-deep .mapa-datepicker__range-end{flex-basis:48px}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%;height:48px!important}:host ::ng-deep .mapa-datepicker__range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker__range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker__range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker__range .mat-mdc-input-element{align-self:center;height:100%;margin:0!important;padding:0!important;text-align:left;vertical-align:middle}:host ::ng-deep .mapa-datepicker__range-end{padding-left:4px}:host ::ng-deep .mapa-datepicker__divider{flex:none;margin:0 4px;color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle{display:flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);cursor:pointer}:host ::ng-deep .mapa-datepicker__toggle:hover:not(:disabled){background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker__toggle:disabled{cursor:default;opacity:.5}:host ::ng-deep .mapa-datepicker__icon{display:block;pointer-events:none}:host ::ng-deep .mapa-datepicker__error,:host ::ng-deep .mapa-datepicker__hint{margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker__error{color:#b54242}:host ::ng-deep .mapa-datepicker__hint{color:var(--mapa-color-muted, #555555)}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-datepicker--open :host ::ng-deep .mapa-datepicker__toggle{color:var(--mapa-color-accent, #ff560b)}:host ::ng-deep .mapa-datepicker--invalid .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-outline-color: #b54242;--mat-form-field-outlined-hover-outline-color: #b54242;--mat-form-field-outlined-focus-outline-color: #b54242}:host ::ng-deep .mapa-datepicker--invalid .mapa-datepicker__range{border-color:#b54242}.mapa-datepicker__panel{display:block;max-width:calc(100vw - 32px);overflow-x:auto;padding:8px;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);box-sizing:border-box}.mapa-datepicker__panel ::ng-deep ngxsmk-datepicker,.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container,.mapa-datepicker__panel ::ng-deep .ngxsmk-backdrop{--datepicker-primary-color: var(--mapa-color-accent, #ff560b);--datepicker-primary-contrast: var(--mapa-color-surface, #ffffff);--datepicker-background: var(--mapa-color-surface, #ffffff);--datepicker-text-color: var(--mapa-color-ink, #1a1a1a);--datepicker-subtle-text-color: var(--mapa-color-muted, #555555);--datepicker-border-color: var( --mapa-color-border-soft, rgba(26, 26, 26, .08) );--datepicker-hover-background: rgba(255, 86, 11, .08);--datepicker-range-background: rgba(255, 86, 11, .12);--datepicker-radius-sm: 8px;--datepicker-radius-md: var(--mapa-radius-sm, 12px);--datepicker-radius-lg: var(--mapa-radius-md, 16px);--datepicker-border-radius: var(--mapa-radius-md, 16px);--datepicker-spacing-xs: 2px;--datepicker-spacing-sm: 6px;--datepicker-spacing-md: 8px;--datepicker-spacing-lg: 12px;--datepicker-spacing-xl: 12px;--datepicker-spacing-2xl: 16px;--datepicker-font-size-xs: 10px;--datepicker-font-size-sm: 11px;--datepicker-font-size-base: 13px;--datepicker-font-size-lg: 15px;--datepicker-font-family: var( --mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif );--ngxsmk-cell-size-desktop: 36px;--ngxsmk-touch-target: 36px;--ngxsmk-space-sm: 6px;--ngxsmk-space-md: 8px;--ngxsmk-font-size-sm: 11px;--datepicker-shadow-sm: none;--datepicker-shadow-md: none;--datepicker-shadow-lg: none;--datepicker-z-index-base: 0;display:block}.mapa-datepicker__panel ::ng-deep .mapa-datepicker__ngxsmk-group{display:none}.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-wrapper,.mapa-datepicker__panel ::ng-deep .ngxsmk-datepicker-container{box-shadow:none;border:0;background:transparent}.mapa-datepicker__panel ::ng-deep .ngxsmk-day-number{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px}.mapa-datepicker__panel ::ng-deep .ngxsmk-popover-container{min-width:0}.mapa-datepicker__panel ::ng-deep .ngxsmk-calendar-month-multi{min-width:0}.mapa-datepicker__presets{position:relative;z-index:10;margin-bottom:8px}.mapa-datepicker__presets-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:0 12px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-trigger:hover,.mapa-datepicker__presets-trigger--open{border-color:var(--mapa-color-accent, #ff560b)}.mapa-datepicker__presets-chevron{flex:none;color:var(--mapa-color-muted, #555555);transition:transform .12s ease}.mapa-datepicker__presets-trigger--open .mapa-datepicker__presets-chevron{transform:rotate(180deg)}.mapa-datepicker__presets-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:11;max-height:240px;margin:0;padding:4px;overflow-y:auto;list-style:none;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-sm, 12px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08));box-sizing:border-box}.mapa-datepicker__presets-option{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--mapa-color-ink, #1a1a1a);font-family:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}.mapa-datepicker__presets-option:hover{background:#1a1a1a0f}.mapa-datepicker__presets-option--active{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b);font-weight:600}\n"] }]
|
|
7037
7037
|
}], propDecorators: { formGroup: [{
|
|
7038
7038
|
type: Input,
|
|
7039
7039
|
args: [{ required: true }]
|
|
@@ -8507,6 +8507,7 @@ class MapaReportGroupProfileWidgetComponent {
|
|
|
8507
8507
|
this.distributionLabel = input(...(ngDevMode ? [undefined, { debugName: "distributionLabel" }] : []));
|
|
8508
8508
|
/** Overrides the group average caption; defaults to the i18n text. */
|
|
8509
8509
|
this.averageLabel = input(...(ngDevMode ? [undefined, { debugName: "averageLabel" }] : []));
|
|
8510
|
+
this.averageAppearance = input('rounded', ...(ngDevMode ? [{ debugName: "averageAppearance" }] : []));
|
|
8510
8511
|
this.distributionCaption = computed(() => this.distributionLabel() ?? this.i18n.texts.report.groupDistributionLabel, ...(ngDevMode ? [{ debugName: "distributionCaption" }] : []));
|
|
8511
8512
|
this.averageCaption = computed(() => this.averageLabel() ?? this.i18n.texts.report.groupAverageTitle, ...(ngDevMode ? [{ debugName: "averageCaption" }] : []));
|
|
8512
8513
|
this.dimensions = computed(() => this.data()?.dimensions ?? [], ...(ngDevMode ? [{ debugName: "dimensions" }] : []));
|
|
@@ -8590,12 +8591,12 @@ class MapaReportGroupProfileWidgetComponent {
|
|
|
8590
8591
|
: this.i18n.texts.report.positiveDirectionLabel;
|
|
8591
8592
|
}
|
|
8592
8593
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportGroupProfileWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8593
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportGroupProfileWidgetComponent, isStandalone: true, selector: "mapa-report-group-profile-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, showAverage: { classPropertyName: "showAverage", publicName: "showAverage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, distributionLabel: { classPropertyName: "distributionLabel", publicName: "distributionLabel", isSignal: true, isRequired: false, transformFunction: null }, averageLabel: { classPropertyName: "averageLabel", publicName: "averageLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n @if (heading(); as head) {\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ head.title }}</h2>\n @if (head.description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"head.description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n }\n\n <div class=\"mapa-report-group-profile__filters\">\n <ng-content select=\"[mapaReportGroupProfileFilters]\"></ng-content>\n </div>\n\n @if (!dimensions().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <header class=\"mapa-report-group-profile__scale\">\n <h3>\n {{ data()?.name }}\n @if (direction()) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel()\"\n [attr.aria-label]=\"directionLabel()\"\n >{{ directionArrow() }}</span\n >\n }\n </h3>\n @if (showAverage() && average() !== null) {\n <div class=\"mapa-report-group-profile__average\">\n <span class=\"mapa-report-group-profile__average-label\">{{\n averageCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__average-value\">\n <mapa-result-track\n [name]=\"averageCaption()\"\n [showValue]=\"false\"\n [value]=\"average()!\"\n />\n <strong>{{ averageText() }}</strong>\n </div>\n </div>\n }\n </header>\n\n <div class=\"mapa-report-group-profile__rows\">\n @for (dimension of dimensions(); track dimension.id ?? dimension.name) {\n <article class=\"mapa-report-group-profile__row\">\n <h4 class=\"mapa-report-group-profile__row-name\">\n {{ dimension.name }}\n @if (direction(dimension)) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel(dimension)\"\n [attr.aria-label]=\"directionLabel(dimension)\"\n >{{ directionArrow(dimension) }}</span\n >\n }\n </h4>\n <div class=\"mapa-report-group-profile__bar\">\n <span class=\"mapa-report-group-profile__caption\">{{\n distributionCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__values\" aria-hidden=\"true\">\n @for (slice of slices(dimension); track $index) {\n <b [style.width.%]=\"width(slice)\">{{ sliceValue(slice) }}</b>\n }\n </div>\n <div\n class=\"mapa-report-group-profile__pill\"\n role=\"img\"\n [attr.aria-label]=\"pillLabel(dimension)\"\n >\n @for (slice of slices(dimension); track $index) {\n <span\n class=\"mapa-report-group-profile__slice\"\n [class.mapa-report-group-profile__slice--highlighted]=\"\n slice.highlighted\n \"\n [style.width.%]=\"width(slice)\"\n [style.background-color]=\"sliceColor(slice)\"\n [attr.title]=\"sliceTitle(slice)\"\n ></span>\n }\n </div>\n </div>\n </article>\n }\n </div>\n\n @if (showLegend() && legendItems().length) {\n <ul class=\"mapa-report-group-profile__legend\">\n @for (item of legendItems(); track item.id ?? item.label) {\n <li>\n <i\n class=\"mapa-report-group-profile__swatch\"\n [style.background-color]=\"item.color\"\n aria-hidden=\"true\"\n ></i>\n {{ item.label }}\n </li>\n }\n </ul>\n }\n }\n</section>\n", styles: ["@charset \"UTF-8\";:host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-pill-height: 21px;--mapa-report-line-soft: #edf1f3}.mapa-report-group-profile__filters{border-bottom:1px solid var(--mapa-report-border);display:grid;gap:12px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding-bottom:var(--mapa-report-space)}.mapa-report-group-profile__filters:empty{display:none}.mapa-report-group-profile__scale{align-items:center;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}.mapa-report-group-profile__scale h3{align-items:center;display:flex;font-size:26px;font-weight:500;gap:8px;letter-spacing:-.02em;line-height:1.15;margin:0}.mapa-report-group-profile__average{border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);min-width:230px;padding:10px 14px}.mapa-report-group-profile__average-label{color:var(--mapa-report-muted);display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-report-group-profile__average-value{align-items:center;display:flex;gap:10px}.mapa-report-group-profile__average-value mapa-result-track{--mapa-result-track-height: 8px;flex:1}.mapa-report-group-profile__average-value strong{font-size:20px;font-weight:500}.mapa-report-group-profile__rows{display:grid}.mapa-report-group-profile__row{align-items:center;border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:16px;grid-template-columns:minmax(120px,20%) minmax(0,1fr);padding:15px 0}.mapa-report-group-profile__row-name{align-items:center;display:flex;font-size:14px;font-weight:500;gap:7px;margin:0}.mapa-report-group-profile__bar{min-width:0}.mapa-report-group-profile__caption{color:var(--mapa-report-muted);display:block;font-size:11px;margin-bottom:2px}.mapa-report-group-profile__values{display:flex;gap:2px;margin-bottom:4px;width:100%}.mapa-report-group-profile__values b{color:var(--mapa-report-text);flex:0 1 auto;font-size:11px;font-weight:600;min-width:8px;text-align:center;white-space:nowrap}.mapa-report-group-profile__pill{background:var(--mapa-report-surface-muted);border-radius:999px;display:flex;gap:2px;height:var(--mapa-report-pill-height);overflow:hidden;width:100%}.mapa-report-group-profile__slice{display:block;flex:0 1 auto;height:100%;min-width:8px;overflow:hidden}.mapa-report-group-profile__slice--highlighted{align-items:center;display:flex;justify-content:center}.mapa-report-group-profile__slice--highlighted:after{color:var(--mapa-report-surface);content:\"\\25bc\";font-size:9px;line-height:1}.mapa-report-group-profile__legend{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0}.mapa-report-group-profile__legend li{align-items:center;color:var(--mapa-report-muted);display:inline-flex;font-size:12px;gap:6px}.mapa-report-group-profile__swatch{border-radius:999px;flex:0 0 auto;height:10px;width:10px}:host ::ng-deep .mapa-report-group-profile__filters>*{min-width:0;width:100%}@media(max-width:760px){.mapa-report-group-profile__filters{grid-auto-flow:row}.mapa-report-group-profile__average{min-width:0;width:100%}.mapa-report-group-profile__row{gap:8px;grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportGroupProfileWidgetComponent, isStandalone: true, selector: "mapa-report-group-profile-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, showAverage: { classPropertyName: "showAverage", publicName: "showAverage", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, distributionLabel: { classPropertyName: "distributionLabel", publicName: "distributionLabel", isSignal: true, isRequired: false, transformFunction: null }, averageLabel: { classPropertyName: "averageLabel", publicName: "averageLabel", isSignal: true, isRequired: false, transformFunction: null }, averageAppearance: { classPropertyName: "averageAppearance", publicName: "averageAppearance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n @if (heading(); as head) {\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ head.title }}</h2>\n @if (head.description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"head.description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n }\n\n @if (showLegend() && legendItems().length) {\n <ul class=\"mapa-report-group-profile__legend\">\n @for (item of legendItems(); track item.id ?? item.label) {\n <li>\n <i\n class=\"mapa-report-group-profile__swatch\"\n [style.background-color]=\"item.color\"\n aria-hidden=\"true\"\n ></i>\n {{ item.label }}\n </li>\n }\n </ul>\n }\n\n <div class=\"mapa-report-group-profile__filters\">\n <ng-content select=\"[mapaReportGroupProfileFilters]\"></ng-content>\n </div>\n\n @if (!dimensions().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <header class=\"mapa-report-group-profile__scale\">\n <h3>\n {{ data()?.name }}\n @if (direction()) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel()\"\n [attr.aria-label]=\"directionLabel()\"\n >{{ directionArrow() }}</span\n >\n }\n </h3>\n @if (showAverage() && average() !== null) {\n <div class=\"mapa-report-group-profile__average\">\n <span class=\"mapa-report-group-profile__average-label\">{{\n averageCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__average-value\">\n <mapa-result-track\n [appearance]=\"averageAppearance()\"\n [name]=\"averageCaption()\"\n [showValue]=\"false\"\n [value]=\"average()!\"\n />\n <strong>{{ averageText() }}</strong>\n </div>\n </div>\n }\n </header>\n\n <div class=\"mapa-report-group-profile__rows\">\n @for (dimension of dimensions(); track dimension.id ?? dimension.name) {\n <article class=\"mapa-report-group-profile__row\">\n <h4 class=\"mapa-report-group-profile__row-name\">\n {{ dimension.name }}\n @if (direction(dimension)) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel(dimension)\"\n [attr.aria-label]=\"directionLabel(dimension)\"\n >{{ directionArrow(dimension) }}</span\n >\n }\n </h4>\n <div class=\"mapa-report-group-profile__bar\">\n <span class=\"mapa-report-group-profile__caption\">{{\n distributionCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__values\" aria-hidden=\"true\">\n @for (slice of slices(dimension); track $index) {\n <b [style.width.%]=\"width(slice)\">{{ sliceValue(slice) }}</b>\n }\n </div>\n <div\n class=\"mapa-report-group-profile__pill\"\n role=\"img\"\n [attr.aria-label]=\"pillLabel(dimension)\"\n >\n @for (slice of slices(dimension); track $index) {\n <span\n class=\"mapa-report-group-profile__slice\"\n [class.mapa-report-group-profile__slice--highlighted]=\"\n slice.highlighted\n \"\n [style.width.%]=\"width(slice)\"\n [style.background-color]=\"sliceColor(slice)\"\n [attr.title]=\"sliceTitle(slice)\"\n ></span>\n }\n </div>\n </div>\n </article>\n }\n </div>\n }\n</section>\n", styles: ["@charset \"UTF-8\";:host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-pill-height: 21px;--mapa-report-line-soft: #edf1f3}.mapa-report-group-profile__filters{border-bottom:1px solid var(--mapa-report-border);display:grid;gap:12px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding-bottom:var(--mapa-report-space)}.mapa-report-group-profile__filters:empty{display:none}.mapa-report-group-profile__scale{align-items:center;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}.mapa-report-group-profile__scale h3{align-items:center;display:flex;font-size:26px;font-weight:500;gap:8px;letter-spacing:-.02em;line-height:1.15;margin:0}.mapa-report-group-profile__average{border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);min-width:230px;padding:10px 14px}.mapa-report-group-profile__average-label{color:var(--mapa-report-muted);display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-report-group-profile__average-value{align-items:center;display:flex;gap:10px}.mapa-report-group-profile__average-value mapa-result-track{--mapa-result-track-height: 8px;flex:1}.mapa-report-group-profile__average-value strong{font-size:20px;font-weight:500}.mapa-report-group-profile__rows{display:grid}.mapa-report-group-profile__row{align-items:center;border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:16px;grid-template-columns:minmax(120px,20%) minmax(0,1fr);padding:15px 0}.mapa-report-group-profile__row-name{align-items:center;display:flex;font-size:14px;font-weight:500;gap:7px;margin:0}.mapa-report-group-profile__bar{min-width:0}.mapa-report-group-profile__caption{color:var(--mapa-report-muted);display:block;font-size:11px;margin-bottom:2px}.mapa-report-group-profile__values{display:flex;gap:2px;margin-bottom:4px;width:100%}.mapa-report-group-profile__values b{color:var(--mapa-report-text);flex:0 1 auto;font-size:11px;font-weight:600;min-width:8px;text-align:center;white-space:nowrap}.mapa-report-group-profile__pill{background:var(--mapa-report-surface-muted);border-radius:999px;display:flex;gap:2px;height:var(--mapa-report-pill-height);overflow:hidden;width:100%}.mapa-report-group-profile__slice{display:block;flex:0 1 auto;height:100%;min-width:8px;overflow:hidden}.mapa-report-group-profile__slice--highlighted{align-items:center;display:flex;justify-content:center}.mapa-report-group-profile__slice--highlighted:after{color:var(--mapa-report-surface);content:\"\\25bc\";font-size:9px;line-height:1}.mapa-report-group-profile__legend{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0}.mapa-report-group-profile__legend li{align-items:center;color:var(--mapa-report-muted);display:inline-flex;font-size:12px;gap:6px}.mapa-report-group-profile__swatch{border-radius:999px;flex:0 0 auto;height:10px;width:10px}:host ::ng-deep .mapa-report-group-profile__filters>*{min-width:0;width:100%}@media(max-width:760px){.mapa-report-group-profile__filters{grid-auto-flow:row}.mapa-report-group-profile__average{min-width:0;width:100%}.mapa-report-group-profile__row{gap:8px;grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8594
8595
|
}
|
|
8595
8596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportGroupProfileWidgetComponent, decorators: [{
|
|
8596
8597
|
type: Component,
|
|
8597
|
-
args: [{ selector: 'mapa-report-group-profile-widget', standalone: true, imports: [MapaResultTrackComponent, SafeHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n @if (heading(); as head) {\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ head.title }}</h2>\n @if (head.description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"head.description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n }\n\n <div class=\"mapa-report-group-profile__filters\">\n <ng-content select=\"[mapaReportGroupProfileFilters]\"></ng-content>\n </div>\n\n @if (!dimensions().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <header class=\"mapa-report-group-profile__scale\">\n <h3>\n {{ data()?.name }}\n @if (direction()) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel()\"\n [attr.aria-label]=\"directionLabel()\"\n >{{ directionArrow() }}</span\n >\n }\n </h3>\n @if (showAverage() && average() !== null) {\n <div class=\"mapa-report-group-profile__average\">\n <span class=\"mapa-report-group-profile__average-label\">{{\n averageCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__average-value\">\n <mapa-result-track\n [name]=\"averageCaption()\"\n [showValue]=\"false\"\n [value]=\"average()!\"\n />\n <strong>{{ averageText() }}</strong>\n </div>\n </div>\n }\n </header>\n\n <div class=\"mapa-report-group-profile__rows\">\n @for (dimension of dimensions(); track dimension.id ?? dimension.name) {\n <article class=\"mapa-report-group-profile__row\">\n <h4 class=\"mapa-report-group-profile__row-name\">\n {{ dimension.name }}\n @if (direction(dimension)) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel(dimension)\"\n [attr.aria-label]=\"directionLabel(dimension)\"\n >{{ directionArrow(dimension) }}</span\n >\n }\n </h4>\n <div class=\"mapa-report-group-profile__bar\">\n <span class=\"mapa-report-group-profile__caption\">{{\n distributionCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__values\" aria-hidden=\"true\">\n @for (slice of slices(dimension); track $index) {\n <b [style.width.%]=\"width(slice)\">{{ sliceValue(slice) }}</b>\n }\n </div>\n <div\n class=\"mapa-report-group-profile__pill\"\n role=\"img\"\n [attr.aria-label]=\"pillLabel(dimension)\"\n >\n @for (slice of slices(dimension); track $index) {\n <span\n class=\"mapa-report-group-profile__slice\"\n [class.mapa-report-group-profile__slice--highlighted]=\"\n slice.highlighted\n \"\n [style.width.%]=\"width(slice)\"\n [style.background-color]=\"sliceColor(slice)\"\n [attr.title]=\"sliceTitle(slice)\"\n ></span>\n }\n </div>\n </div>\n </article>\n }\n </div>\n\n @if (showLegend() && legendItems().length) {\n <ul class=\"mapa-report-group-profile__legend\">\n @for (item of legendItems(); track item.id ?? item.label) {\n <li>\n <i\n class=\"mapa-report-group-profile__swatch\"\n [style.background-color]=\"item.color\"\n aria-hidden=\"true\"\n ></i>\n {{ item.label }}\n </li>\n }\n </ul>\n }\n }\n</section>\n", styles: ["@charset \"UTF-8\";:host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-pill-height: 21px;--mapa-report-line-soft: #edf1f3}.mapa-report-group-profile__filters{border-bottom:1px solid var(--mapa-report-border);display:grid;gap:12px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding-bottom:var(--mapa-report-space)}.mapa-report-group-profile__filters:empty{display:none}.mapa-report-group-profile__scale{align-items:center;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}.mapa-report-group-profile__scale h3{align-items:center;display:flex;font-size:26px;font-weight:500;gap:8px;letter-spacing:-.02em;line-height:1.15;margin:0}.mapa-report-group-profile__average{border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);min-width:230px;padding:10px 14px}.mapa-report-group-profile__average-label{color:var(--mapa-report-muted);display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-report-group-profile__average-value{align-items:center;display:flex;gap:10px}.mapa-report-group-profile__average-value mapa-result-track{--mapa-result-track-height: 8px;flex:1}.mapa-report-group-profile__average-value strong{font-size:20px;font-weight:500}.mapa-report-group-profile__rows{display:grid}.mapa-report-group-profile__row{align-items:center;border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:16px;grid-template-columns:minmax(120px,20%) minmax(0,1fr);padding:15px 0}.mapa-report-group-profile__row-name{align-items:center;display:flex;font-size:14px;font-weight:500;gap:7px;margin:0}.mapa-report-group-profile__bar{min-width:0}.mapa-report-group-profile__caption{color:var(--mapa-report-muted);display:block;font-size:11px;margin-bottom:2px}.mapa-report-group-profile__values{display:flex;gap:2px;margin-bottom:4px;width:100%}.mapa-report-group-profile__values b{color:var(--mapa-report-text);flex:0 1 auto;font-size:11px;font-weight:600;min-width:8px;text-align:center;white-space:nowrap}.mapa-report-group-profile__pill{background:var(--mapa-report-surface-muted);border-radius:999px;display:flex;gap:2px;height:var(--mapa-report-pill-height);overflow:hidden;width:100%}.mapa-report-group-profile__slice{display:block;flex:0 1 auto;height:100%;min-width:8px;overflow:hidden}.mapa-report-group-profile__slice--highlighted{align-items:center;display:flex;justify-content:center}.mapa-report-group-profile__slice--highlighted:after{color:var(--mapa-report-surface);content:\"\\25bc\";font-size:9px;line-height:1}.mapa-report-group-profile__legend{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0}.mapa-report-group-profile__legend li{align-items:center;color:var(--mapa-report-muted);display:inline-flex;font-size:12px;gap:6px}.mapa-report-group-profile__swatch{border-radius:999px;flex:0 0 auto;height:10px;width:10px}:host ::ng-deep .mapa-report-group-profile__filters>*{min-width:0;width:100%}@media(max-width:760px){.mapa-report-group-profile__filters{grid-auto-flow:row}.mapa-report-group-profile__average{min-width:0;width:100%}.mapa-report-group-profile__row{gap:8px;grid-template-columns:minmax(0,1fr)}}\n"] }]
|
|
8598
|
-
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], showAverage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAverage", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], distributionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "distributionLabel", required: false }] }], averageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "averageLabel", required: false }] }] } });
|
|
8598
|
+
args: [{ selector: 'mapa-report-group-profile-widget', standalone: true, imports: [MapaResultTrackComponent, SafeHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n @if (heading(); as head) {\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ head.title }}</h2>\n @if (head.description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"head.description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n }\n\n @if (showLegend() && legendItems().length) {\n <ul class=\"mapa-report-group-profile__legend\">\n @for (item of legendItems(); track item.id ?? item.label) {\n <li>\n <i\n class=\"mapa-report-group-profile__swatch\"\n [style.background-color]=\"item.color\"\n aria-hidden=\"true\"\n ></i>\n {{ item.label }}\n </li>\n }\n </ul>\n }\n\n <div class=\"mapa-report-group-profile__filters\">\n <ng-content select=\"[mapaReportGroupProfileFilters]\"></ng-content>\n </div>\n\n @if (!dimensions().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <header class=\"mapa-report-group-profile__scale\">\n <h3>\n {{ data()?.name }}\n @if (direction()) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel()\"\n [attr.aria-label]=\"directionLabel()\"\n >{{ directionArrow() }}</span\n >\n }\n </h3>\n @if (showAverage() && average() !== null) {\n <div class=\"mapa-report-group-profile__average\">\n <span class=\"mapa-report-group-profile__average-label\">{{\n averageCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__average-value\">\n <mapa-result-track\n [appearance]=\"averageAppearance()\"\n [name]=\"averageCaption()\"\n [showValue]=\"false\"\n [value]=\"average()!\"\n />\n <strong>{{ averageText() }}</strong>\n </div>\n </div>\n }\n </header>\n\n <div class=\"mapa-report-group-profile__rows\">\n @for (dimension of dimensions(); track dimension.id ?? dimension.name) {\n <article class=\"mapa-report-group-profile__row\">\n <h4 class=\"mapa-report-group-profile__row-name\">\n {{ dimension.name }}\n @if (direction(dimension)) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.title]=\"directionLabel(dimension)\"\n [attr.aria-label]=\"directionLabel(dimension)\"\n >{{ directionArrow(dimension) }}</span\n >\n }\n </h4>\n <div class=\"mapa-report-group-profile__bar\">\n <span class=\"mapa-report-group-profile__caption\">{{\n distributionCaption()\n }}</span>\n <div class=\"mapa-report-group-profile__values\" aria-hidden=\"true\">\n @for (slice of slices(dimension); track $index) {\n <b [style.width.%]=\"width(slice)\">{{ sliceValue(slice) }}</b>\n }\n </div>\n <div\n class=\"mapa-report-group-profile__pill\"\n role=\"img\"\n [attr.aria-label]=\"pillLabel(dimension)\"\n >\n @for (slice of slices(dimension); track $index) {\n <span\n class=\"mapa-report-group-profile__slice\"\n [class.mapa-report-group-profile__slice--highlighted]=\"\n slice.highlighted\n \"\n [style.width.%]=\"width(slice)\"\n [style.background-color]=\"sliceColor(slice)\"\n [attr.title]=\"sliceTitle(slice)\"\n ></span>\n }\n </div>\n </div>\n </article>\n }\n </div>\n }\n</section>\n", styles: ["@charset \"UTF-8\";:host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-pill-height: 21px;--mapa-report-line-soft: #edf1f3}.mapa-report-group-profile__filters{border-bottom:1px solid var(--mapa-report-border);display:grid;gap:12px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding-bottom:var(--mapa-report-space)}.mapa-report-group-profile__filters:empty{display:none}.mapa-report-group-profile__scale{align-items:center;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}.mapa-report-group-profile__scale h3{align-items:center;display:flex;font-size:26px;font-weight:500;gap:8px;letter-spacing:-.02em;line-height:1.15;margin:0}.mapa-report-group-profile__average{border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);min-width:230px;padding:10px 14px}.mapa-report-group-profile__average-label{color:var(--mapa-report-muted);display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-report-group-profile__average-value{align-items:center;display:flex;gap:10px}.mapa-report-group-profile__average-value mapa-result-track{--mapa-result-track-height: 8px;flex:1}.mapa-report-group-profile__average-value strong{font-size:20px;font-weight:500}.mapa-report-group-profile__rows{display:grid}.mapa-report-group-profile__row{align-items:center;border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:16px;grid-template-columns:minmax(120px,20%) minmax(0,1fr);padding:15px 0}.mapa-report-group-profile__row-name{align-items:center;display:flex;font-size:14px;font-weight:500;gap:7px;margin:0}.mapa-report-group-profile__bar{min-width:0}.mapa-report-group-profile__caption{color:var(--mapa-report-muted);display:block;font-size:11px;margin-bottom:2px}.mapa-report-group-profile__values{display:flex;gap:2px;margin-bottom:4px;width:100%}.mapa-report-group-profile__values b{color:var(--mapa-report-text);flex:0 1 auto;font-size:11px;font-weight:600;min-width:8px;text-align:center;white-space:nowrap}.mapa-report-group-profile__pill{background:var(--mapa-report-surface-muted);border-radius:999px;display:flex;gap:2px;height:var(--mapa-report-pill-height);overflow:hidden;width:100%}.mapa-report-group-profile__slice{display:block;flex:0 1 auto;height:100%;min-width:8px;overflow:hidden}.mapa-report-group-profile__slice--highlighted{align-items:center;display:flex;justify-content:center}.mapa-report-group-profile__slice--highlighted:after{color:var(--mapa-report-surface);content:\"\\25bc\";font-size:9px;line-height:1}.mapa-report-group-profile__legend{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;margin:0;padding:0}.mapa-report-group-profile__legend li{align-items:center;color:var(--mapa-report-muted);display:inline-flex;font-size:12px;gap:6px}.mapa-report-group-profile__swatch{border-radius:999px;flex:0 0 auto;height:10px;width:10px}:host ::ng-deep .mapa-report-group-profile__filters>*{min-width:0;width:100%}@media(max-width:760px){.mapa-report-group-profile__filters{grid-auto-flow:row}.mapa-report-group-profile__average{min-width:0;width:100%}.mapa-report-group-profile__row{gap:8px;grid-template-columns:minmax(0,1fr)}}\n"] }]
|
|
8599
|
+
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], showAverage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAverage", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], distributionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "distributionLabel", required: false }] }], averageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "averageLabel", required: false }] }], averageAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "averageAppearance", required: false }] }] } });
|
|
8599
8600
|
|
|
8600
8601
|
class MapaReportLegendComponent {
|
|
8601
8602
|
constructor() {
|
|
@@ -8684,7 +8685,7 @@ class MapaReportIndicatorsWidgetComponent {
|
|
|
8684
8685
|
: this.i18n.texts.report.positiveDirectionLabel;
|
|
8685
8686
|
}
|
|
8686
8687
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportIndicatorsWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8687
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportIndicatorsWidgetComponent, isStandalone: true, selector: "mapa-report-indicators-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, legendGroups: { classPropertyName: "legendGroups", publicName: "legendGroups", isSignal: true, isRequired: false, transformFunction: null }, legendTitle: { classPropertyName: "legendTitle", publicName: "legendTitle", isSignal: true, isRequired: false, transformFunction: null }, legendIntro: { classPropertyName: "legendIntro", publicName: "legendIntro", isSignal: true, isRequired: false, transformFunction: null }, legendExpanded: { classPropertyName: "legendExpanded", publicName: "legendExpanded", isSignal: true, isRequired: false, transformFunction: null }, detailedViewLabel: { classPropertyName: "detailedViewLabel", publicName: "detailedViewLabel", isSignal: true, isRequired: false, transformFunction: null }, compactDetailedViewLabel: { classPropertyName: "compactDetailedViewLabel", publicName: "compactDetailedViewLabel", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"list\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A5</span\n >\n {{ i18n.texts.report.list }}\n </mat-button-toggle>\n <mat-button-toggle value=\"chart\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A6</span\n >\n {{ i18n.texts.report.chart }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A4</span\n >\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--full\"\n >{{ detailedViewCaption() }}</span\n >\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--compact\"\n >{{ compactDetailedViewCaption() }}</span\n >\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n @if (!indicators().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"list\") {\n <div\n class=\"mapa-report-indicators mapa-report-indicators--list\"\n [class.mapa-report-indicators--single-column]=\"\n indicatorColumns().length === 1\n \"\n [class.mapa-report-indicators--two-columns]=\"\n indicatorColumns().length === 2\n \"\n >\n @for (column of indicatorColumns(); track $index) {\n <div class=\"mapa-report-indicators__column\">\n @for (group of column; track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--list\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__list\">\n @for (indicator of group.indicators; track indicator.id) {\n <article\n class=\"mapa-report-indicator mapa-report-indicator--list\"\n [style.--mapa-indicator-background]=\"color(indicator)\"\n [style.--mapa-indicator-foreground]=\"foreground(indicator)\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n <strong>{{ value(indicator) }}%</strong>\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"mapa-report-indicators mapa-report-indicators--rows\">\n @for (group of groups(); track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--rows\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__rows\">\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-indicator mapa-report-indicator--row\">\n <div class=\"mapa-report-indicator__graph\">\n <div class=\"mapa-report-indicator__name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n </div>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"indicator.classification\"\n />\n <mapa-result-track\n appearance=\"segmented\"\n mode=\"linear\"\n [color]=\"color(indicator)\"\n [name]=\"indicator.name\"\n [value]=\"value(indicator)\"\n />\n <strong class=\"mapa-report-indicator__percent\"\n >{{ value(indicator) }}%</strong\n >\n </div>\n\n @if (mode() === \"detailed\" && indicator.concept) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.conceptTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </div>\n }\n @if (mode() === \"detailed\" && indicator.description) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.resultTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n </div>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-indicators{display:grid;gap:20px}.mapa-report-indicators--list{align-items:start;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-indicators--single-column{grid-template-columns:1fr}.mapa-report-indicators--two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-indicators--rows{padding-top:2px}.mapa-report-indicators__column{display:grid;gap:23px;min-width:0}.mapa-report-indicator-group{min-width:0}.mapa-report-indicator-group>h3{color:var(--mapa-report-text);font-size:15px;font-weight:600;line-height:1.3;margin:0 0 11px}.mapa-report-indicator-group__list{display:grid;gap:8px}.mapa-report-indicator-group__rows{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;overflow:hidden}.mapa-report-indicator{min-width:0}.mapa-report-indicator--list{align-items:center;background:var(--mapa-indicator-background);border:1px solid rgba(26,26,26,.08);border-radius:9px;color:var(--mapa-indicator-foreground);display:grid;gap:9px;grid-template-columns:20px minmax(0,1fr) auto;min-height:38px;padding:5px 10px 5px 9px}.mapa-report-indicator--list h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator--list>strong{align-items:center;background:#fff;border:1px solid rgba(99,114,124,.16);border-radius:999px;color:#1f3850;display:inline-flex;font-size:10px;font-weight:600;height:25px;justify-content:center;min-width:38px;padding:0 6px}.mapa-report-indicator--row{padding:13px 13px 14px}.mapa-report-indicator--row+.mapa-report-indicator--row{border-top:1px solid var(--mapa-report-border)}.mapa-report-indicator__graph{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,250px) var(--mapa-report-pill-width) minmax(0,1fr) 42px}.mapa-report-indicator__name{align-items:center;color:var(--mapa-report-text);display:flex;gap:7px;min-width:0}.mapa-report-indicator__name h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator__graph mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);justify-self:start;max-width:var(--mapa-report-pill-width)}.mapa-report-indicator__percent{color:#1f3850;font-size:12px;font-weight:400;text-align:right}.mapa-report-indicator__mode-label--compact{display:none}.mapa-report-indicator__detail{border-top:1px solid var(--mapa-report-border);color:var(--mapa-report-muted);display:flex;font-size:11px;gap:4px;line-height:1.45;margin-top:11px;padding-top:10px}.mapa-report-indicator__detail>strong{color:var(--mapa-report-text);flex:0 0 auto;font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy{min-width:0}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep p,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{padding-left:20px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep li{margin:0 0 3px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep b,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-indicator__detail div{min-width:0}.mapa-report-indicator__detail :last-child{margin-bottom:0}@media(max-width:760px){.mapa-report-indicator__graph{gap:8px;grid-template-columns:minmax(0,1fr) var(--mapa-report-pill-width) 40px}.mapa-report-indicator__graph mapa-result-track{grid-column:1/-1;grid-row:2;margin-top:3px}}@media(max-width:560px){.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 10px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-indicator__mode-icon,.mapa-report-indicator__mode-label--full{display:none}.mapa-report-indicator__mode-label--compact{display:inline}.mapa-report-indicators--list:not(.mapa-report-indicators--single-column){grid-template-columns:1fr}.mapa-report-indicator--list{min-height:36px}.mapa-report-indicator--row{padding:12px}.mapa-report-indicator__detail{display:block}.mapa-report-indicator__detail>strong{display:block;margin-bottom:3px}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8688
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportIndicatorsWidgetComponent, isStandalone: true, selector: "mapa-report-indicators-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, legendGroups: { classPropertyName: "legendGroups", publicName: "legendGroups", isSignal: true, isRequired: false, transformFunction: null }, legendTitle: { classPropertyName: "legendTitle", publicName: "legendTitle", isSignal: true, isRequired: false, transformFunction: null }, legendIntro: { classPropertyName: "legendIntro", publicName: "legendIntro", isSignal: true, isRequired: false, transformFunction: null }, legendExpanded: { classPropertyName: "legendExpanded", publicName: "legendExpanded", isSignal: true, isRequired: false, transformFunction: null }, detailedViewLabel: { classPropertyName: "detailedViewLabel", publicName: "detailedViewLabel", isSignal: true, isRequired: false, transformFunction: null }, compactDetailedViewLabel: { classPropertyName: "compactDetailedViewLabel", publicName: "compactDetailedViewLabel", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes mapa-report-widget__modes--standalone\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"list\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\">\u25A5</span>\n {{ i18n.texts.report.list }}\n </mat-button-toggle>\n <mat-button-toggle value=\"chart\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\">\u25A6</span>\n {{ i18n.texts.report.chart }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\">\u25A4</span>\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--full\"\n >{{ detailedViewCaption() }}</span\n >\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--compact\"\n >{{ compactDetailedViewCaption() }}</span\n >\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n @if (!indicators().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"list\") {\n <div\n class=\"mapa-report-indicators mapa-report-indicators--list\"\n [class.mapa-report-indicators--single-column]=\"\n indicatorColumns().length === 1\n \"\n [class.mapa-report-indicators--two-columns]=\"\n indicatorColumns().length === 2\n \"\n >\n @for (column of indicatorColumns(); track $index) {\n <div class=\"mapa-report-indicators__column\">\n @for (group of column; track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--list\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__list\">\n @for (indicator of group.indicators; track indicator.id) {\n <article\n class=\"mapa-report-indicator mapa-report-indicator--list\"\n [style.--mapa-indicator-background]=\"color(indicator)\"\n [style.--mapa-indicator-foreground]=\"foreground(indicator)\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n <strong>{{ value(indicator) }}%</strong>\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"mapa-report-indicators mapa-report-indicators--rows\">\n @for (group of groups(); track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--rows\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__rows\">\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-indicator mapa-report-indicator--row\">\n <div class=\"mapa-report-indicator__graph\">\n <div class=\"mapa-report-indicator__name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n </div>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"indicator.classification\"\n />\n <mapa-result-track\n appearance=\"segmented\"\n mode=\"linear\"\n [color]=\"color(indicator)\"\n [name]=\"indicator.name\"\n [value]=\"value(indicator)\"\n />\n <strong class=\"mapa-report-indicator__percent\"\n >{{ value(indicator) }}%</strong\n >\n </div>\n\n @if (mode() === \"detailed\" && indicator.concept) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.conceptTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </div>\n }\n @if (mode() === \"detailed\" && indicator.description) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.resultTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n </div>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-indicators{display:grid;gap:20px}.mapa-report-indicators--list{align-items:start;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-indicators--single-column{grid-template-columns:1fr}.mapa-report-indicators--two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-indicators--rows{padding-top:2px}.mapa-report-indicators__column{display:grid;gap:23px;min-width:0}.mapa-report-indicator-group{min-width:0}.mapa-report-indicator-group>h3{color:var(--mapa-report-text);font-size:15px;font-weight:600;line-height:1.3;margin:0 0 11px}.mapa-report-indicator-group__list{display:grid;gap:8px}.mapa-report-indicator-group__rows{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;overflow:hidden}.mapa-report-indicator{min-width:0}.mapa-report-indicator--list{align-items:center;background:var(--mapa-indicator-background);border:1px solid rgba(26,26,26,.08);border-radius:9px;color:var(--mapa-indicator-foreground);display:grid;gap:9px;grid-template-columns:20px minmax(0,1fr) auto;min-height:38px;padding:5px 10px 5px 9px}.mapa-report-indicator--list h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator--list>strong{align-items:center;background:#fff;border:1px solid rgba(99,114,124,.16);border-radius:999px;color:#1f3850;display:inline-flex;font-size:10px;font-weight:600;height:25px;justify-content:center;min-width:38px;padding:0 6px}.mapa-report-indicator--row{padding:13px 13px 14px}.mapa-report-indicator--row+.mapa-report-indicator--row{border-top:1px solid var(--mapa-report-border)}.mapa-report-indicator__graph{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,250px) var(--mapa-report-pill-width) minmax(0,1fr) 42px}.mapa-report-indicator__name{align-items:center;color:var(--mapa-report-text);display:flex;gap:7px;min-width:0}.mapa-report-indicator__name h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator__graph mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);justify-self:start;max-width:var(--mapa-report-pill-width)}.mapa-report-indicator__percent{color:#1f3850;font-size:12px;font-weight:400;text-align:right}.mapa-report-indicator__mode-label--compact{display:none}.mapa-report-indicator__detail{border-top:1px solid var(--mapa-report-border);color:var(--mapa-report-muted);display:flex;font-size:11px;gap:4px;line-height:1.45;margin-top:11px;padding-top:10px}.mapa-report-indicator__detail>strong{color:var(--mapa-report-text);flex:0 0 auto;font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy{min-width:0}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep p,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{padding-left:20px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep li{margin:0 0 3px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep b,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-indicator__detail div{min-width:0}.mapa-report-indicator__detail :last-child{margin-bottom:0}@media(max-width:760px){.mapa-report-indicator__graph{gap:8px;grid-template-columns:minmax(0,1fr) var(--mapa-report-pill-width) 40px}.mapa-report-indicator__graph mapa-result-track{grid-column:1/-1;grid-row:2;margin-top:3px}}@media(max-width:560px){.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 10px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-indicator__mode-icon,.mapa-report-indicator__mode-label--full{display:none}.mapa-report-indicator__mode-label--compact{display:inline}.mapa-report-indicators--list:not(.mapa-report-indicators--single-column){grid-template-columns:1fr}.mapa-report-indicator--list{min-height:36px}.mapa-report-indicator--row{padding:12px}.mapa-report-indicator__detail{display:block}.mapa-report-indicator__detail>strong{display:block;margin-bottom:3px}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8688
8689
|
}
|
|
8689
8690
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportIndicatorsWidgetComponent, decorators: [{
|
|
8690
8691
|
type: Component,
|
|
@@ -8694,7 +8695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
8694
8695
|
MapaReportLegendComponent,
|
|
8695
8696
|
MapaResultTrackComponent,
|
|
8696
8697
|
SafeHtmlPipe,
|
|
8697
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"list\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A5</span\n >\n {{ i18n.texts.report.list }}\n </mat-button-toggle>\n <mat-button-toggle value=\"chart\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A6</span\n >\n {{ i18n.texts.report.chart }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\"\n >\u25A4</span\n >\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--full\"\n >{{ detailedViewCaption() }}</span\n >\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--compact\"\n >{{ compactDetailedViewCaption() }}</span\n >\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n @if (!indicators().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"list\") {\n <div\n class=\"mapa-report-indicators mapa-report-indicators--list\"\n [class.mapa-report-indicators--single-column]=\"\n indicatorColumns().length === 1\n \"\n [class.mapa-report-indicators--two-columns]=\"\n indicatorColumns().length === 2\n \"\n >\n @for (column of indicatorColumns(); track $index) {\n <div class=\"mapa-report-indicators__column\">\n @for (group of column; track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--list\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__list\">\n @for (indicator of group.indicators; track indicator.id) {\n <article\n class=\"mapa-report-indicator mapa-report-indicator--list\"\n [style.--mapa-indicator-background]=\"color(indicator)\"\n [style.--mapa-indicator-foreground]=\"foreground(indicator)\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n <strong>{{ value(indicator) }}%</strong>\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"mapa-report-indicators mapa-report-indicators--rows\">\n @for (group of groups(); track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--rows\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__rows\">\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-indicator mapa-report-indicator--row\">\n <div class=\"mapa-report-indicator__graph\">\n <div class=\"mapa-report-indicator__name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n </div>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"indicator.classification\"\n />\n <mapa-result-track\n appearance=\"segmented\"\n mode=\"linear\"\n [color]=\"color(indicator)\"\n [name]=\"indicator.name\"\n [value]=\"value(indicator)\"\n />\n <strong class=\"mapa-report-indicator__percent\"\n >{{ value(indicator) }}%</strong\n >\n </div>\n\n @if (mode() === \"detailed\" && indicator.concept) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.conceptTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </div>\n }\n @if (mode() === \"detailed\" && indicator.description) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.resultTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n </div>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-indicators{display:grid;gap:20px}.mapa-report-indicators--list{align-items:start;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-indicators--single-column{grid-template-columns:1fr}.mapa-report-indicators--two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-indicators--rows{padding-top:2px}.mapa-report-indicators__column{display:grid;gap:23px;min-width:0}.mapa-report-indicator-group{min-width:0}.mapa-report-indicator-group>h3{color:var(--mapa-report-text);font-size:15px;font-weight:600;line-height:1.3;margin:0 0 11px}.mapa-report-indicator-group__list{display:grid;gap:8px}.mapa-report-indicator-group__rows{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;overflow:hidden}.mapa-report-indicator{min-width:0}.mapa-report-indicator--list{align-items:center;background:var(--mapa-indicator-background);border:1px solid rgba(26,26,26,.08);border-radius:9px;color:var(--mapa-indicator-foreground);display:grid;gap:9px;grid-template-columns:20px minmax(0,1fr) auto;min-height:38px;padding:5px 10px 5px 9px}.mapa-report-indicator--list h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator--list>strong{align-items:center;background:#fff;border:1px solid rgba(99,114,124,.16);border-radius:999px;color:#1f3850;display:inline-flex;font-size:10px;font-weight:600;height:25px;justify-content:center;min-width:38px;padding:0 6px}.mapa-report-indicator--row{padding:13px 13px 14px}.mapa-report-indicator--row+.mapa-report-indicator--row{border-top:1px solid var(--mapa-report-border)}.mapa-report-indicator__graph{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,250px) var(--mapa-report-pill-width) minmax(0,1fr) 42px}.mapa-report-indicator__name{align-items:center;color:var(--mapa-report-text);display:flex;gap:7px;min-width:0}.mapa-report-indicator__name h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator__graph mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);justify-self:start;max-width:var(--mapa-report-pill-width)}.mapa-report-indicator__percent{color:#1f3850;font-size:12px;font-weight:400;text-align:right}.mapa-report-indicator__mode-label--compact{display:none}.mapa-report-indicator__detail{border-top:1px solid var(--mapa-report-border);color:var(--mapa-report-muted);display:flex;font-size:11px;gap:4px;line-height:1.45;margin-top:11px;padding-top:10px}.mapa-report-indicator__detail>strong{color:var(--mapa-report-text);flex:0 0 auto;font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy{min-width:0}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep p,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{padding-left:20px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep li{margin:0 0 3px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep b,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-indicator__detail div{min-width:0}.mapa-report-indicator__detail :last-child{margin-bottom:0}@media(max-width:760px){.mapa-report-indicator__graph{gap:8px;grid-template-columns:minmax(0,1fr) var(--mapa-report-pill-width) 40px}.mapa-report-indicator__graph mapa-result-track{grid-column:1/-1;grid-row:2;margin-top:3px}}@media(max-width:560px){.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 10px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-indicator__mode-icon,.mapa-report-indicator__mode-label--full{display:none}.mapa-report-indicator__mode-label--compact{display:inline}.mapa-report-indicators--list:not(.mapa-report-indicators--single-column){grid-template-columns:1fr}.mapa-report-indicator--list{min-height:36px}.mapa-report-indicator--row{padding:12px}.mapa-report-indicator__detail{display:block}.mapa-report-indicator__detail>strong{display:block;margin-bottom:3px}}\n"] }]
|
|
8698
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes mapa-report-widget__modes--standalone\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"list\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\">\u25A5</span>\n {{ i18n.texts.report.list }}\n </mat-button-toggle>\n <mat-button-toggle value=\"chart\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\">\u25A6</span>\n {{ i18n.texts.report.chart }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-indicator__mode-icon\" aria-hidden=\"true\">\u25A4</span>\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--full\"\n >{{ detailedViewCaption() }}</span\n >\n <span\n class=\"mapa-report-indicator__mode-label mapa-report-indicator__mode-label--compact\"\n >{{ compactDetailedViewCaption() }}</span\n >\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n @if (!indicators().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"list\") {\n <div\n class=\"mapa-report-indicators mapa-report-indicators--list\"\n [class.mapa-report-indicators--single-column]=\"\n indicatorColumns().length === 1\n \"\n [class.mapa-report-indicators--two-columns]=\"\n indicatorColumns().length === 2\n \"\n >\n @for (column of indicatorColumns(); track $index) {\n <div class=\"mapa-report-indicators__column\">\n @for (group of column; track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--list\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__list\">\n @for (indicator of group.indicators; track indicator.id) {\n <article\n class=\"mapa-report-indicator mapa-report-indicator--list\"\n [style.--mapa-indicator-background]=\"color(indicator)\"\n [style.--mapa-indicator-foreground]=\"foreground(indicator)\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n <strong>{{ value(indicator) }}%</strong>\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"mapa-report-indicators mapa-report-indicators--rows\">\n @for (group of groups(); track group.id) {\n <section\n class=\"mapa-report-indicator-group mapa-report-indicator-group--rows\"\n >\n <h3>{{ group.name }}</h3>\n <div class=\"mapa-report-indicator-group__rows\">\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-indicator mapa-report-indicator--row\">\n <div class=\"mapa-report-indicator__graph\">\n <div class=\"mapa-report-indicator__name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(indicator)\"\n >{{ directionArrow(indicator) }}</span\n >\n <h4>{{ indicator.name }}</h4>\n </div>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"indicator.classification\"\n />\n <mapa-result-track\n appearance=\"segmented\"\n mode=\"linear\"\n [color]=\"color(indicator)\"\n [name]=\"indicator.name\"\n [value]=\"value(indicator)\"\n />\n <strong class=\"mapa-report-indicator__percent\"\n >{{ value(indicator) }}%</strong\n >\n </div>\n\n @if (mode() === \"detailed\" && indicator.concept) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.conceptTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </div>\n }\n @if (mode() === \"detailed\" && indicator.description) {\n <div class=\"mapa-report-indicator__detail\">\n <strong>{{ i18n.texts.report.resultTitle }}:</strong>\n <div\n class=\"mapa-report-indicator__copy\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n </div>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-indicators{display:grid;gap:20px}.mapa-report-indicators--list{align-items:start;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-indicators--single-column{grid-template-columns:1fr}.mapa-report-indicators--two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-indicators--rows{padding-top:2px}.mapa-report-indicators__column{display:grid;gap:23px;min-width:0}.mapa-report-indicator-group{min-width:0}.mapa-report-indicator-group>h3{color:var(--mapa-report-text);font-size:15px;font-weight:600;line-height:1.3;margin:0 0 11px}.mapa-report-indicator-group__list{display:grid;gap:8px}.mapa-report-indicator-group__rows{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;overflow:hidden}.mapa-report-indicator{min-width:0}.mapa-report-indicator--list{align-items:center;background:var(--mapa-indicator-background);border:1px solid rgba(26,26,26,.08);border-radius:9px;color:var(--mapa-indicator-foreground);display:grid;gap:9px;grid-template-columns:20px minmax(0,1fr) auto;min-height:38px;padding:5px 10px 5px 9px}.mapa-report-indicator--list h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator--list>strong{align-items:center;background:#fff;border:1px solid rgba(99,114,124,.16);border-radius:999px;color:#1f3850;display:inline-flex;font-size:10px;font-weight:600;height:25px;justify-content:center;min-width:38px;padding:0 6px}.mapa-report-indicator--row{padding:13px 13px 14px}.mapa-report-indicator--row+.mapa-report-indicator--row{border-top:1px solid var(--mapa-report-border)}.mapa-report-indicator__graph{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,250px) var(--mapa-report-pill-width) minmax(0,1fr) 42px}.mapa-report-indicator__name{align-items:center;color:var(--mapa-report-text);display:flex;gap:7px;min-width:0}.mapa-report-indicator__name h4{font-size:12px;font-weight:400;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-report-indicator__graph mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);justify-self:start;max-width:var(--mapa-report-pill-width)}.mapa-report-indicator__percent{color:#1f3850;font-size:12px;font-weight:400;text-align:right}.mapa-report-indicator__mode-label--compact{display:none}.mapa-report-indicator__detail{border-top:1px solid var(--mapa-report-border);color:var(--mapa-report-muted);display:flex;font-size:11px;gap:4px;line-height:1.45;margin-top:11px;padding-top:10px}.mapa-report-indicator__detail>strong{color:var(--mapa-report-text);flex:0 0 auto;font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy{min-width:0}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep p,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ol,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep ul{padding-left:20px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep li{margin:0 0 3px}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep b,.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-indicator__detail .mapa-report-indicator__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-indicator__detail div{min-width:0}.mapa-report-indicator__detail :last-child{margin-bottom:0}@media(max-width:760px){.mapa-report-indicator__graph{gap:8px;grid-template-columns:minmax(0,1fr) var(--mapa-report-pill-width) 40px}.mapa-report-indicator__graph mapa-result-track{grid-column:1/-1;grid-row:2;margin-top:3px}}@media(max-width:560px){.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 10px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-indicator__mode-icon,.mapa-report-indicator__mode-label--full{display:none}.mapa-report-indicator__mode-label--compact{display:inline}.mapa-report-indicators--list:not(.mapa-report-indicators--single-column){grid-template-columns:1fr}.mapa-report-indicator--list{min-height:36px}.mapa-report-indicator--row{padding:12px}.mapa-report-indicator__detail{display:block}.mapa-report-indicator__detail>strong{display:block;margin-bottom:3px}}\n"] }]
|
|
8698
8699
|
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], legendGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendGroups", required: false }] }], legendTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendTitle", required: false }] }], legendIntro: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendIntro", required: false }] }], legendExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendExpanded", required: false }] }], detailedViewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailedViewLabel", required: false }] }], compactDetailedViewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactDetailedViewLabel", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }] } });
|
|
8699
8700
|
function indicatorColumn(group) {
|
|
8700
8701
|
const name = group.name
|
|
@@ -8744,7 +8745,7 @@ class MapaReportScaleWidgetComponent {
|
|
|
8744
8745
|
: this.i18n.texts.report.positiveDirectionLabel;
|
|
8745
8746
|
}
|
|
8746
8747
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportScaleWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8747
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportScaleWidgetComponent, isStandalone: true, selector: "mapa-report-scale-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, legendGroups: { classPropertyName: "legendGroups", publicName: "legendGroups", isSignal: true, isRequired: false, transformFunction: null }, legendTitle: { classPropertyName: "legendTitle", publicName: "legendTitle", isSignal: true, isRequired: false, transformFunction: null }, legendIntro: { classPropertyName: "legendIntro", publicName: "legendIntro", isSignal: true, isRequired: false, transformFunction: null }, legendGroupsTitle: { classPropertyName: "legendGroupsTitle", publicName: "legendGroupsTitle", isSignal: true, isRequired: false, transformFunction: null }, legendExpanded: { classPropertyName: "legendExpanded", publicName: "legendExpanded", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A5</span>\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A4</span>\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [groupsTitle]=\"legendGroupsTitle()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n @if (!scales().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"summarized\") {\n <div class=\"mapa-report-scales mapa-report-scales--summary\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__grid\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--summary\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <h4>{{ scale.name }}</h4>\n <!-- Instrumentos que so pontuam no nivel da dimensao\n (Personalidade, Socioemocional) nao classificam a escala:\n omitimos a tag em vez de cair no rotulo \"sem\n classificacao\". Mesma regra do valor, logo abaixo. -->\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </header>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimensions\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n } @else {\n <div class=\"mapa-report-scales mapa-report-scales--detailed\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__rows\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--detailed\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <div class=\"mapa-report-scale-card__title\">\n <h4>{{ scale.name }}</h4>\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </div>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n </header>\n @if (scale.concept) {\n <section class=\"mapa-report-scale-card__concept\">\n <h5>{{ i18n.texts.report.conceptTitle }}:</h5>\n <div\n class=\"mapa-report-scale-card__concept-copy\"\n [innerHTML]=\"scale.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimension-list\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n @if (dimension.description) {\n <div\n class=\"mapa-report-scale-card__copy\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc;--mapa-report-card-radius: 10px}.mapa-report-scale__mode-icon{font-size:12px;margin-right:5px}.mapa-report-scales{display:grid;gap:26px}.mapa-report-scale-group{min-width:0}.mapa-report-scale-group__head{align-items:center;border-bottom:1px solid var(--mapa-report-border);display:flex;gap:11px;margin:0 0 14px;padding:2px 2px 12px}.mapa-report-scale-group__head:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px;width:4px}.mapa-report-scale-group__head h3{font-size:18px;font-weight:600;letter-spacing:-.2px;line-height:1.25;margin:0}.mapa-report-scale-group__grid{align-items:start;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-scale-group__rows{display:grid;gap:14px}.mapa-report-scale-card{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0}.mapa-report-scale-card mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-report-scale-card__score{align-items:center;display:flex;gap:9px}.mapa-report-scale-card__score mapa-result-track{flex:1;min-width:0}.mapa-report-scale-card__percent{color:#1f3850;font-size:15px;line-height:1.1}.mapa-report-scale-card__dimension-name{align-items:center;display:flex;gap:7px;min-width:0}.mapa-report-scale-card__dimension-name span:last-child{overflow-wrap:anywhere}.mapa-report-scale-card--summary{padding:16px 14px 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__head{align-items:flex-start;display:flex;gap:10px;justify-content:space-between;min-height:39px}.mapa-report-scale-card--summary .mapa-report-scale-card__head h4{color:#234b68;font-size:16px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--summary .mapa-report-scale-card__score{margin:15px 0 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 7px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:0;padding:12px 0 0}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;min-height:39px;padding:8px 9px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimension-name{color:#3f5870;font-size:11px;line-height:1.25}.mapa-report-scale-card--detailed{padding:21px 20px 18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(220px,1fr) minmax(300px,390px)}.mapa-report-scale-card--detailed .mapa-report-scale-card__title{align-items:center;display:flex;gap:12px;min-width:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4{font-size:21px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__score{gap:11px}.mapa-report-scale-card--detailed .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:21px;min-width:38px;text-align:right}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept{background:var(--mapa-report-surface-soft);border-radius:var(--mapa-report-card-radius);color:var(--mapa-report-muted);font-size:13px;line-height:1.6;margin-top:16px;padding:13px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;line-height:1.2;margin:0 0 8px;text-transform:uppercase}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list{display:grid;gap:8px;list-style:none;margin:14px 0 0;padding:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:16px;grid-template-columns:minmax(180px,240px) var(--mapa-report-pill-width) minmax(0,1fr);min-height:54px;padding:10px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-name{font-size:13px;gap:9px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{color:var(--mapa-report-muted);font-size:12px;line-height:1.45}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list mapa-classification-tag{justify-self:start}@media(max-width:1199px){.mapa-report-scale-group__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{gap:13px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{grid-template-columns:minmax(180px,1fr) var(--mapa-report-pill-width)}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:1/-1;padding-left:28px}}@media(max-width:760px){.mapa-report-scale-group__head h3{font-size:16px}.mapa-report-scale-group__grid{grid-template-columns:1fr}.mapa-report-scale-card--detailed{padding:16px 14px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4,.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{gap:8px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:auto;padding-left:28px}}@media(max-width:560px){.mapa-report-scale-card--summary .mapa-report-scale-card__head{flex-wrap:wrap}.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 11px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-scale__mode-icon{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8748
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportScaleWidgetComponent, isStandalone: true, selector: "mapa-report-scale-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, legendGroups: { classPropertyName: "legendGroups", publicName: "legendGroups", isSignal: true, isRequired: false, transformFunction: null }, legendTitle: { classPropertyName: "legendTitle", publicName: "legendTitle", isSignal: true, isRequired: false, transformFunction: null }, legendIntro: { classPropertyName: "legendIntro", publicName: "legendIntro", isSignal: true, isRequired: false, transformFunction: null }, legendGroupsTitle: { classPropertyName: "legendGroupsTitle", publicName: "legendGroupsTitle", isSignal: true, isRequired: false, transformFunction: null }, legendExpanded: { classPropertyName: "legendExpanded", publicName: "legendExpanded", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [groupsTitle]=\"legendGroupsTitle()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes mapa-report-widget__modes--standalone\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A5</span>\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A4</span>\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n @if (!scales().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"summarized\") {\n <div class=\"mapa-report-scales mapa-report-scales--summary\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__grid\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--summary\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <h4>{{ scale.name }}</h4>\n <!-- Instrumentos que so pontuam no nivel da dimensao\n (Personalidade, Socioemocional) nao classificam a escala:\n omitimos a tag em vez de cair no rotulo \"sem\n classificacao\". Mesma regra do valor, logo abaixo. -->\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </header>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimensions\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n } @else {\n <div class=\"mapa-report-scales mapa-report-scales--detailed\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__rows\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--detailed\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <div class=\"mapa-report-scale-card__title\">\n <h4>{{ scale.name }}</h4>\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </div>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n </header>\n @if (scale.concept) {\n <section class=\"mapa-report-scale-card__concept\">\n <h5>{{ i18n.texts.report.conceptTitle }}:</h5>\n <div\n class=\"mapa-report-scale-card__concept-copy\"\n [innerHTML]=\"scale.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimension-list\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n @if (dimension.description) {\n <div\n class=\"mapa-report-scale-card__copy\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc;--mapa-report-card-radius: 10px}.mapa-report-scale__mode-icon{font-size:12px;margin-right:5px}.mapa-report-scales{display:grid;gap:26px}.mapa-report-scale-group{min-width:0}.mapa-report-scale-group__head{align-items:center;border-bottom:1px solid var(--mapa-report-border);display:flex;gap:11px;margin:0 0 14px;padding:2px 2px 12px}.mapa-report-scale-group__head:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px;width:4px}.mapa-report-scale-group__head h3{font-size:18px;font-weight:600;letter-spacing:-.2px;line-height:1.25;margin:0}.mapa-report-scale-group__grid{align-items:start;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-scale-group__rows{display:grid;gap:14px}.mapa-report-scale-card{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0}.mapa-report-scale-card mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-report-scale-card__score{align-items:center;display:flex;gap:9px}.mapa-report-scale-card__score mapa-result-track{flex:1;min-width:0}.mapa-report-scale-card__percent{color:#1f3850;font-size:15px;line-height:1.1}.mapa-report-scale-card__dimension-name{align-items:center;display:flex;gap:7px;min-width:0}.mapa-report-scale-card__dimension-name span:last-child{overflow-wrap:anywhere}.mapa-report-scale-card--summary{padding:16px 14px 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__head{align-items:flex-start;display:flex;gap:10px;justify-content:space-between;min-height:39px}.mapa-report-scale-card--summary .mapa-report-scale-card__head h4{color:#234b68;font-size:16px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--summary .mapa-report-scale-card__score{margin:15px 0 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 7px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:0;padding:12px 0 0}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;min-height:39px;padding:8px 9px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimension-name{color:#3f5870;font-size:11px;line-height:1.25}.mapa-report-scale-card--detailed{padding:21px 20px 18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(220px,1fr) minmax(300px,390px)}.mapa-report-scale-card--detailed .mapa-report-scale-card__title{align-items:center;display:flex;gap:12px;min-width:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4{font-size:21px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__score{gap:11px}.mapa-report-scale-card--detailed .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:21px;min-width:38px;text-align:right}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept{background:var(--mapa-report-surface-soft);border-radius:var(--mapa-report-card-radius);color:var(--mapa-report-muted);font-size:13px;line-height:1.6;margin-top:16px;padding:13px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;line-height:1.2;margin:0 0 8px;text-transform:uppercase}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list{display:grid;gap:8px;list-style:none;margin:14px 0 0;padding:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:16px;grid-template-columns:minmax(180px,240px) var(--mapa-report-pill-width) minmax(0,1fr);min-height:54px;padding:10px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-name{font-size:13px;gap:9px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{color:var(--mapa-report-muted);font-size:12px;line-height:1.45}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list mapa-classification-tag{justify-self:start}@media(max-width:1199px){.mapa-report-scale-group__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{gap:13px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{grid-template-columns:minmax(180px,1fr) var(--mapa-report-pill-width)}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:1/-1;padding-left:28px}}@media(max-width:760px){.mapa-report-scale-group__head h3{font-size:16px}.mapa-report-scale-group__grid{grid-template-columns:1fr}.mapa-report-scale-card--detailed{padding:16px 14px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4,.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{gap:8px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:auto;padding-left:28px}}@media(max-width:560px){.mapa-report-scale-card--summary .mapa-report-scale-card__head{flex-wrap:wrap}.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 11px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-scale__mode-icon{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8748
8749
|
}
|
|
8749
8750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportScaleWidgetComponent, decorators: [{
|
|
8750
8751
|
type: Component,
|
|
@@ -8754,7 +8755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
8754
8755
|
MapaReportLegendComponent,
|
|
8755
8756
|
MapaResultTrackComponent,
|
|
8756
8757
|
SafeHtmlPipe,
|
|
8757
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A5</span>\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A4</span>\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [groupsTitle]=\"legendGroupsTitle()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n @if (!scales().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"summarized\") {\n <div class=\"mapa-report-scales mapa-report-scales--summary\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__grid\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--summary\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <h4>{{ scale.name }}</h4>\n <!-- Instrumentos que so pontuam no nivel da dimensao\n (Personalidade, Socioemocional) nao classificam a escala:\n omitimos a tag em vez de cair no rotulo \"sem\n classificacao\". Mesma regra do valor, logo abaixo. -->\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </header>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimensions\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n } @else {\n <div class=\"mapa-report-scales mapa-report-scales--detailed\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__rows\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--detailed\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <div class=\"mapa-report-scale-card__title\">\n <h4>{{ scale.name }}</h4>\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </div>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n </header>\n @if (scale.concept) {\n <section class=\"mapa-report-scale-card__concept\">\n <h5>{{ i18n.texts.report.conceptTitle }}:</h5>\n <div\n class=\"mapa-report-scale-card__concept-copy\"\n [innerHTML]=\"scale.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimension-list\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n @if (dimension.description) {\n <div\n class=\"mapa-report-scale-card__copy\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc;--mapa-report-card-radius: 10px}.mapa-report-scale__mode-icon{font-size:12px;margin-right:5px}.mapa-report-scales{display:grid;gap:26px}.mapa-report-scale-group{min-width:0}.mapa-report-scale-group__head{align-items:center;border-bottom:1px solid var(--mapa-report-border);display:flex;gap:11px;margin:0 0 14px;padding:2px 2px 12px}.mapa-report-scale-group__head:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px;width:4px}.mapa-report-scale-group__head h3{font-size:18px;font-weight:600;letter-spacing:-.2px;line-height:1.25;margin:0}.mapa-report-scale-group__grid{align-items:start;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-scale-group__rows{display:grid;gap:14px}.mapa-report-scale-card{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0}.mapa-report-scale-card mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-report-scale-card__score{align-items:center;display:flex;gap:9px}.mapa-report-scale-card__score mapa-result-track{flex:1;min-width:0}.mapa-report-scale-card__percent{color:#1f3850;font-size:15px;line-height:1.1}.mapa-report-scale-card__dimension-name{align-items:center;display:flex;gap:7px;min-width:0}.mapa-report-scale-card__dimension-name span:last-child{overflow-wrap:anywhere}.mapa-report-scale-card--summary{padding:16px 14px 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__head{align-items:flex-start;display:flex;gap:10px;justify-content:space-between;min-height:39px}.mapa-report-scale-card--summary .mapa-report-scale-card__head h4{color:#234b68;font-size:16px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--summary .mapa-report-scale-card__score{margin:15px 0 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 7px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:0;padding:12px 0 0}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;min-height:39px;padding:8px 9px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimension-name{color:#3f5870;font-size:11px;line-height:1.25}.mapa-report-scale-card--detailed{padding:21px 20px 18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(220px,1fr) minmax(300px,390px)}.mapa-report-scale-card--detailed .mapa-report-scale-card__title{align-items:center;display:flex;gap:12px;min-width:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4{font-size:21px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__score{gap:11px}.mapa-report-scale-card--detailed .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:21px;min-width:38px;text-align:right}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept{background:var(--mapa-report-surface-soft);border-radius:var(--mapa-report-card-radius);color:var(--mapa-report-muted);font-size:13px;line-height:1.6;margin-top:16px;padding:13px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;line-height:1.2;margin:0 0 8px;text-transform:uppercase}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list{display:grid;gap:8px;list-style:none;margin:14px 0 0;padding:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:16px;grid-template-columns:minmax(180px,240px) var(--mapa-report-pill-width) minmax(0,1fr);min-height:54px;padding:10px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-name{font-size:13px;gap:9px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{color:var(--mapa-report-muted);font-size:12px;line-height:1.45}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list mapa-classification-tag{justify-self:start}@media(max-width:1199px){.mapa-report-scale-group__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{gap:13px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{grid-template-columns:minmax(180px,1fr) var(--mapa-report-pill-width)}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:1/-1;padding-left:28px}}@media(max-width:760px){.mapa-report-scale-group__head h3{font-size:16px}.mapa-report-scale-group__grid{grid-template-columns:1fr}.mapa-report-scale-card--detailed{padding:16px 14px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4,.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{gap:8px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:auto;padding-left:28px}}@media(max-width:560px){.mapa-report-scale-card--summary .mapa-report-scale-card__head{flex-wrap:wrap}.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 11px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-scale__mode-icon{display:none}}\n"] }]
|
|
8758
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (legendGroups().length || legendIntro()) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"legendExpanded()\"\n [groups]=\"legendGroups()\"\n [groupsTitle]=\"legendGroupsTitle()\"\n [intro]=\"legendIntro()\"\n [title]=\"legendTitle()\"\n />\n }\n\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes mapa-report-widget__modes--standalone\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A5</span>\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n <span class=\"mapa-report-scale__mode-icon\" aria-hidden=\"true\">\u25A4</span>\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n @if (!scales().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else if (mode() === \"summarized\") {\n <div class=\"mapa-report-scales mapa-report-scales--summary\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__grid\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--summary\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <h4>{{ scale.name }}</h4>\n <!-- Instrumentos que so pontuam no nivel da dimensao\n (Personalidade, Socioemocional) nao classificam a escala:\n omitimos a tag em vez de cair no rotulo \"sem\n classificacao\". Mesma regra do valor, logo abaixo. -->\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </header>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimensions\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n } @else {\n <div class=\"mapa-report-scales mapa-report-scales--detailed\">\n @for (group of groups(); track group.id) {\n <section class=\"mapa-report-scale-group\">\n @if (group.name) {\n <div class=\"mapa-report-scale-group__head\">\n <h3>{{ group.name }}</h3>\n </div>\n }\n <div class=\"mapa-report-scale-group__rows\">\n @for (scale of group.scales; track scale.id) {\n <article\n class=\"mapa-report-scale-card mapa-report-scale-card--detailed\"\n >\n <header class=\"mapa-report-scale-card__head\">\n <div class=\"mapa-report-scale-card__title\">\n <h4>{{ scale.name }}</h4>\n @if (scale.classification) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"scale.classification\"\n />\n }\n </div>\n @if (scale.value !== undefined) {\n <div class=\"mapa-report-scale-card__score\">\n <mapa-result-track\n [color]=\"color(scale)\"\n [direction]=\"direction(scale)\"\n [name]=\"scale.name\"\n [showValue]=\"false\"\n [value]=\"scale.value\"\n />\n <span class=\"mapa-report-scale-card__percent\"\n >{{ value(scale) }}%</span\n >\n </div>\n }\n </header>\n @if (scale.concept) {\n <section class=\"mapa-report-scale-card__concept\">\n <h5>{{ i18n.texts.report.conceptTitle }}:</h5>\n <div\n class=\"mapa-report-scale-card__concept-copy\"\n [innerHTML]=\"scale.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (scale.dimensions?.length) {\n <ul class=\"mapa-report-scale-card__dimension-list\">\n @for (dimension of scale.dimensions; track dimension.id) {\n <li>\n <span class=\"mapa-report-scale-card__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel(dimension, scale)\"\n >{{ directionArrow(dimension, scale) }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n @if (dimension.description) {\n <div\n class=\"mapa-report-scale-card__copy\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc;--mapa-report-card-radius: 10px}.mapa-report-scale__mode-icon{font-size:12px;margin-right:5px}.mapa-report-scales{display:grid;gap:26px}.mapa-report-scale-group{min-width:0}.mapa-report-scale-group__head{align-items:center;border-bottom:1px solid var(--mapa-report-border);display:flex;gap:11px;margin:0 0 14px;padding:2px 2px 12px}.mapa-report-scale-group__head:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px;width:4px}.mapa-report-scale-group__head h3{font-size:18px;font-weight:600;letter-spacing:-.2px;line-height:1.25;margin:0}.mapa-report-scale-group__grid{align-items:start;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}.mapa-report-scale-group__rows{display:grid;gap:14px}.mapa-report-scale-card{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0}.mapa-report-scale-card mapa-classification-tag{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-report-scale-card__score{align-items:center;display:flex;gap:9px}.mapa-report-scale-card__score mapa-result-track{flex:1;min-width:0}.mapa-report-scale-card__percent{color:#1f3850;font-size:15px;line-height:1.1}.mapa-report-scale-card__dimension-name{align-items:center;display:flex;gap:7px;min-width:0}.mapa-report-scale-card__dimension-name span:last-child{overflow-wrap:anywhere}.mapa-report-scale-card--summary{padding:16px 14px 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__head{align-items:flex-start;display:flex;gap:10px;justify-content:space-between;min-height:39px}.mapa-report-scale-card--summary .mapa-report-scale-card__head h4{color:#234b68;font-size:16px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--summary .mapa-report-scale-card__score{margin:15px 0 13px}.mapa-report-scale-card--summary .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 7px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:0;padding:12px 0 0}.mapa-report-scale-card--summary .mapa-report-scale-card__dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;min-height:39px;padding:8px 9px}.mapa-report-scale-card--summary .mapa-report-scale-card__dimension-name{color:#3f5870;font-size:11px;line-height:1.25}.mapa-report-scale-card--detailed{padding:21px 20px 18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(220px,1fr) minmax(300px,390px)}.mapa-report-scale-card--detailed .mapa-report-scale-card__title{align-items:center;display:flex;gap:12px;min-width:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4{font-size:21px;font-weight:500;line-height:1.2;margin:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__score{gap:11px}.mapa-report-scale-card--detailed .mapa-report-scale-card__score mapa-result-track{--mapa-result-track-height: 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:21px;min-width:38px;text-align:right}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept{background:var(--mapa-report-surface-soft);border-radius:var(--mapa-report-card-radius);color:var(--mapa-report-muted);font-size:13px;line-height:1.6;margin-top:16px;padding:13px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;line-height:1.2;margin:0 0 8px;text-transform:uppercase}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list{display:grid;gap:8px;list-style:none;margin:14px 0 0;padding:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:16px;grid-template-columns:minmax(180px,240px) var(--mapa-report-pill-width) minmax(0,1fr);min-height:54px;padding:10px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-name{font-size:13px;gap:9px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{color:var(--mapa-report-muted);font-size:12px;line-height:1.45}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep p,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{margin:0 0 8px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ol,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep ul{padding-left:20px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep li{margin:0 0 3px}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep b,.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-scale-card--detailed .mapa-report-scale-card__concept-copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list mapa-classification-tag{justify-self:start}@media(max-width:1199px){.mapa-report-scale-group__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-scale-card--detailed .mapa-report-scale-card__head{gap:13px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{grid-template-columns:minmax(180px,1fr) var(--mapa-report-pill-width)}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:1/-1;padding-left:28px}}@media(max-width:760px){.mapa-report-scale-group__head h3{font-size:16px}.mapa-report-scale-group__grid{grid-template-columns:1fr}.mapa-report-scale-card--detailed{padding:16px 14px 14px}.mapa-report-scale-card--detailed .mapa-report-scale-card__title h4,.mapa-report-scale-card--detailed .mapa-report-scale-card__percent{font-size:18px}.mapa-report-scale-card--detailed .mapa-report-scale-card__dimension-list li{gap:8px;grid-template-columns:1fr}.mapa-report-scale-card--detailed .mapa-report-scale-card__copy{grid-column:auto;padding-left:28px}}@media(max-width:560px){.mapa-report-scale-card--summary .mapa-report-scale-card__head{flex-wrap:wrap}.mapa-report-widget__modes{--mat-button-toggle-label-text-size: 11px;align-self:stretch;display:flex;justify-self:stretch}.mapa-report-widget__modes mat-button-toggle{flex:1 1 0;font:500 11px/1 var(--mapa-font-body, \"Asap\", sans-serif);min-width:0}.mapa-report-scale__mode-icon{display:none}}\n"] }]
|
|
8758
8759
|
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], legendGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendGroups", required: false }] }], legendTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendTitle", required: false }] }], legendIntro: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendIntro", required: false }] }], legendGroupsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendGroupsTitle", required: false }] }], legendExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendExpanded", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }] } });
|
|
8759
8760
|
|
|
8760
8761
|
const GAUGE_SEGMENT_COUNT = 25;
|
|
@@ -8822,7 +8823,7 @@ class MapaReportSocioemotionalWidgetComponent {
|
|
|
8822
8823
|
return `${this.clamp(value)}, ${this.classificationLabel(classification)}`;
|
|
8823
8824
|
}
|
|
8824
8825
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportSocioemotionalWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportSocioemotionalWidgetComponent, isStandalone: true, selector: "mapa-report-socioemotional-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (data().legend) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"data().legend?.expanded ?? false\"\n [groups]=\"data().legend?.groups ?? []\"\n [groupsTitle]=\"data().legend?.groupsTitle\"\n [intro]=\"data().legend?.intro\"\n [title]=\"data().legend?.title\"\n />\n }\n\n @if (data().competencies.length) {\n <div class=\"mapa-report-socio__competencies\">\n @for (competence of data().competencies; track competence.id) {\n <section class=\"mapa-report-socio__competence\">\n <header class=\"mapa-report-socio__competence-heading\">\n <h3>{{ competence.name }}</h3>\n @if (competence.description) {\n <div\n class=\"mapa-report-socio__competence-description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n </header>\n\n <div class=\"mapa-report-socio__skills\">\n @for (skill of competence.skills; track skill.id) {\n <article class=\"mapa-report-socio__skill\">\n <div class=\"mapa-report-socio__skill-visual\">\n <h4\n [attr.aria-label]=\"\n skillHeadingLabel(skill.name, skill.direction)\n \"\n >\n <span\n class=\"mapa-direction-indicator\"\n aria-hidden=\"true\"\n >{{ directionArrow(skill.direction) }}</span\n >\n <span>{{ skill.name }}</span>\n </h4>\n <div class=\"mapa-report-gauge\">\n <div\n class=\"mapa-report-gauge__visual\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"clamp(skill.value)\"\n [attr.aria-valuetext]=\"\n gaugeValueText(skill.value, skill.classification)\n \"\n [attr.aria-label]=\"\n i18n.texts.report.gaugeLabel(\n skill.name,\n clamp(skill.value)\n )\n \"\n [style.--mapa-gauge-color]=\"\n gaugeColor(skill.classification)\n \"\n >\n <svg\n class=\"mapa-report-gauge__arc\"\n viewBox=\"0 0 180 104\"\n aria-hidden=\"true\"\n >\n @for (\n segment of gaugeSegments;\n track segment.index\n ) {\n <line\n class=\"mapa-report-gauge__segment\"\n [class.mapa-report-gauge__segment--active]=\"\n segment.index <\n activeSegmentCount(skill.value)\n \"\n [attr.x1]=\"segment.x1\"\n [attr.y1]=\"segment.y1\"\n [attr.x2]=\"segment.x2\"\n [attr.y2]=\"segment.y2\"\n />\n }\n </svg>\n <div\n class=\"mapa-report-gauge__reading\"\n aria-hidden=\"true\"\n >\n <strong>{{ clamp(skill.value) }}</strong>\n <span>{{\n classificationLabel(skill.classification)\n }}</span>\n </div>\n </div>\n <div class=\"mapa-report-gauge__extremes\">\n <span>{{\n i18n.texts.report.lowerIntensityLabel\n }}</span>\n <span>{{\n i18n.texts.report.higherIntensityLabel\n }}</span>\n </div>\n </div>\n </div>\n <div class=\"mapa-report-socio__skill-copy\">\n @if (skill.concept) {\n <section class=\"mapa-report-socio__copy-block\">\n <h5>{{ i18n.texts.report.conceptTitle }}</h5>\n <div\n class=\"mapa-report-socio__concept\"\n [innerHTML]=\"skill.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (skill.description) {\n <section class=\"mapa-report-socio__copy-block\">\n <h5>{{ i18n.texts.report.resultTitle }}</h5>\n <div\n class=\"mapa-report-socio__description\"\n [innerHTML]=\"skill.description | safeHtml\"\n ></div>\n </section>\n }\n </div>\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n\n @if (data().vulnerabilities.length) {\n <section class=\"mapa-report-socio__vulnerabilities\">\n @if (data().vulnerabilityLegend) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"data().vulnerabilityLegend?.expanded ?? false\"\n [groups]=\"data().vulnerabilityLegend?.groups ?? []\"\n [groupsTitle]=\"data().vulnerabilityLegend?.groupsTitle\"\n [intro]=\"data().vulnerabilityLegend?.intro\"\n [title]=\"data().vulnerabilityLegend?.title\"\n />\n }\n\n @for (scale of data().vulnerabilities; track scale.id) {\n <section class=\"mapa-report-socio__vulnerability-scale\">\n <header class=\"mapa-report-socio__vulnerability-heading\">\n <h3>{{ scale.name }}</h3>\n @if (scale.concept) {\n <div\n class=\"mapa-report-socio__vulnerability-copy\"\n [innerHTML]=\"scale.concept | safeHtml\"\n ></div>\n }\n </header>\n\n <div\n class=\"mapa-report-socio__vulnerability-table\"\n role=\"table\"\n [attr.aria-label]=\"scale.name\"\n >\n <div class=\"mapa-report-socio__vulnerability-head\" role=\"row\">\n <span role=\"columnheader\">{{\n i18n.texts.report.dimensionTitle\n }}</span>\n <span role=\"columnheader\">{{\n i18n.texts.report.classificationTitle\n }}</span>\n <span role=\"columnheader\">{{\n i18n.texts.report.resultReadingTitle\n }}</span>\n </div>\n\n @for (item of vulnerabilityDimensions(scale); track item.id) {\n <article class=\"mapa-report-socio__vulnerability-row\" role=\"row\">\n <div\n class=\"mapa-report-socio__vulnerability-dimension\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.dimensionTitle }}</span\n >\n <h4\n [attr.aria-label]=\"\n skillHeadingLabel(item.name, item.direction)\n \"\n >\n <span>{{ item.name }}</span>\n <span\n class=\"mapa-direction-indicator\"\n aria-hidden=\"true\"\n >{{ directionArrow(item.direction) }}</span\n >\n </h4>\n </div>\n\n <div\n class=\"mapa-report-socio__vulnerability-classification\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.classificationTitle }}</span\n >\n <mapa-classification-tag\n appearance=\"solid\"\n casing=\"natural\"\n shape=\"rounded\"\n size=\"large\"\n [classification]=\"item.classification\"\n />\n </div>\n\n <div\n class=\"mapa-report-socio__vulnerability-reading\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.resultReadingTitle }}</span\n >\n <div class=\"mapa-report-socio__vulnerability-reading-grid\">\n @if (item.concept) {\n <section class=\"mapa-report-socio__copy-block\">\n <h4>{{ i18n.texts.report.conceptTitle }}</h4>\n <div\n class=\"mapa-report-socio__concept\"\n [innerHTML]=\"item.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (item.description) {\n <section class=\"mapa-report-socio__copy-block\">\n <h4>{{ i18n.texts.report.resultTitle }}</h4>\n <div\n class=\"mapa-report-socio__description\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n </section>\n }\n </div>\n </div>\n </article>\n }\n </div>\n </section>\n }\n </section>\n }\n\n @if (!data().competencies.length && !data().vulnerabilities.length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-socio__competencies{display:grid;gap:28px}.mapa-report-socio__competence{display:grid;gap:12px}.mapa-report-socio__competence-heading{display:grid;gap:5px}.mapa-report-socio__competence-heading h3{font-size:20px;font-weight:500;margin:0}.mapa-report-socio__competence-description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin:0}.mapa-report-socio__competence-description ::ng-deep ol,.mapa-report-socio__competence-description ::ng-deep p,.mapa-report-socio__competence-description ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__competence-description ::ng-deep ol,.mapa-report-socio__competence-description ::ng-deep ul{padding-left:20px}.mapa-report-socio__competence-description ::ng-deep li{margin:0 0 3px}.mapa-report-socio__competence-description ::ng-deep b,.mapa-report-socio__competence-description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__competence-description ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__skills,.mapa-report-socio__vulnerabilities{display:grid;gap:10px}.mapa-report-socio__skill{align-items:stretch;border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);display:grid;gap:22px;grid-template-columns:210px minmax(0,1fr);padding:18px}.mapa-report-socio__skill-visual{align-content:start;display:grid;gap:10px;min-width:0}.mapa-report-socio__skill-visual>h4{align-items:center;display:inline-flex;font-size:14px;gap:8px;margin:0}.mapa-report-socio__skill-copy{align-content:center;display:grid;gap:16px;min-width:0}.mapa-report-socio__copy-block{display:grid;gap:4px}.mapa-report-socio__copy-block h5{color:var(--mapa-report-text);font-size:11px;font-weight:700;margin:0}.mapa-report-socio__concept{color:var(--mapa-report-text);font-size:12px;line-height:1.5}.mapa-report-socio__concept ::ng-deep ol,.mapa-report-socio__concept ::ng-deep p,.mapa-report-socio__concept ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__concept ::ng-deep ol,.mapa-report-socio__concept ::ng-deep ul{padding-left:20px}.mapa-report-socio__concept ::ng-deep li{margin:0 0 3px}.mapa-report-socio__concept ::ng-deep b,.mapa-report-socio__concept ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__concept ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__description{color:var(--mapa-report-muted);font-size:11px;line-height:1.5}.mapa-report-socio__description ::ng-deep ol,.mapa-report-socio__description ::ng-deep p,.mapa-report-socio__description ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__description ::ng-deep ol,.mapa-report-socio__description ::ng-deep ul{padding-left:20px}.mapa-report-socio__description ::ng-deep li{margin:0 0 3px}.mapa-report-socio__description ::ng-deep b,.mapa-report-socio__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__vulnerability-copy ::ng-deep ol,.mapa-report-socio__vulnerability-copy ::ng-deep p,.mapa-report-socio__vulnerability-copy ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__vulnerability-copy ::ng-deep ol,.mapa-report-socio__vulnerability-copy ::ng-deep ul{padding-left:20px}.mapa-report-socio__vulnerability-copy ::ng-deep li{margin:0 0 3px}.mapa-report-socio__vulnerability-copy ::ng-deep b,.mapa-report-socio__vulnerability-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__vulnerability-copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__vulnerabilities{gap:24px;margin-top:20px}.mapa-report-socio__vulnerability-scale{display:grid;gap:12px}.mapa-report-socio__vulnerability-heading{display:grid;gap:5px}.mapa-report-socio__vulnerability-heading h3{font-size:20px;font-weight:500;margin:0}.mapa-report-socio__vulnerability-heading>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5}.mapa-report-socio__vulnerability-table{border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);overflow:hidden}.mapa-report-socio__vulnerability-head,.mapa-report-socio__vulnerability-row{align-items:center;display:grid;gap:18px;grid-template-columns:minmax(180px,.72fr) minmax(105px,.42fr) minmax(0,2fr)}.mapa-report-socio__vulnerability-head{background:var(--mapa-report-surface-muted);border-bottom:1px solid var(--mapa-report-border);color:var(--mapa-report-muted);font-size:10px;font-weight:600;letter-spacing:.03em;padding:10px 16px;text-transform:uppercase}.mapa-report-socio__vulnerability-row{min-height:118px;padding:16px}.mapa-report-socio__vulnerability-row+.mapa-report-socio__vulnerability-row{border-top:1px solid var(--mapa-report-border)}.mapa-report-socio__vulnerability-dimension{min-width:0}.mapa-report-socio__vulnerability-dimension h4{align-items:center;display:flex;font-size:14px;gap:8px;margin:0}.mapa-report-socio__vulnerability-classification{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);min-width:0}.mapa-report-socio__vulnerability-reading{min-width:0}.mapa-report-socio__vulnerability-reading-grid{display:grid;gap:18px;grid-template-columns:minmax(140px,.72fr) minmax(0,1.28fr)}.mapa-report-socio__vulnerability-reading-grid>.mapa-report-socio__copy-block{border-left:1px solid var(--mapa-report-border);min-width:0;padding-left:13px}.mapa-report-socio__cell-label{display:none}.mapa-report-gauge{display:grid;justify-items:center;width:190px}.mapa-report-gauge__visual{height:104px;position:relative;width:180px}.mapa-report-gauge__arc{display:block;height:104px;width:180px}.mapa-report-gauge__segment{stroke:#dfe5e7;stroke-linecap:round;stroke-width:5}.mapa-report-gauge__segment--active{stroke:var(--mapa-gauge-color)}.mapa-report-gauge__reading{bottom:8px;color:var(--mapa-report-text);display:grid;justify-items:center;left:50%;line-height:1.1;position:absolute;transform:translate(-50%)}.mapa-report-gauge__reading strong{font-size:16px;font-weight:600}.mapa-report-gauge__reading span{color:var(--mapa-report-muted);font-size:11px;margin-top:2px}.mapa-report-gauge__extremes{color:var(--mapa-report-muted);display:flex;font-size:10px;justify-content:space-between;line-height:1.15;margin-top:3px;width:190px}.mapa-report-gauge__extremes span{max-width:68px}.mapa-report-gauge__extremes span:last-child{text-align:right}@media(max-width:760px){.mapa-report-socio__skill{grid-template-columns:1fr}.mapa-report-socio__skill-copy{align-content:start}.mapa-report-socio__vulnerability-head{display:none}.mapa-report-socio__vulnerability-row{align-items:start;gap:14px;grid-template-columns:1fr;min-height:0;padding:15px}.mapa-report-socio__vulnerability-dimension,.mapa-report-socio__vulnerability-classification,.mapa-report-socio__vulnerability-reading{display:grid;gap:6px}.mapa-report-socio__vulnerability-reading-grid{gap:10px;grid-template-columns:1fr}.mapa-report-socio__vulnerability-reading-grid>.mapa-report-socio__copy-block{border-left:0;border-top:1px solid var(--mapa-report-border);padding-left:0;padding-top:10px}.mapa-report-socio__cell-label{color:var(--mapa-report-muted);display:block;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}}\n"], dependencies: [{ kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8826
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportSocioemotionalWidgetComponent, isStandalone: true, selector: "mapa-report-socioemotional-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (data().legend) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"data().legend?.expanded ?? false\"\n [groups]=\"data().legend?.groups ?? []\"\n [groupsTitle]=\"data().legend?.groupsTitle\"\n [intro]=\"data().legend?.intro\"\n [title]=\"data().legend?.title\"\n />\n }\n\n @if (data().competencies.length) {\n <div class=\"mapa-report-socio__competencies\">\n @for (competence of data().competencies; track competence.id) {\n <section class=\"mapa-report-socio__competence\">\n <header class=\"mapa-report-socio__competence-heading\">\n <h3>{{ competence.name }}</h3>\n @if (competence.description) {\n <div\n class=\"mapa-report-socio__competence-description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n </header>\n\n <div class=\"mapa-report-socio__skills\">\n @for (skill of competence.skills; track skill.id) {\n <article class=\"mapa-report-socio__skill\">\n <div class=\"mapa-report-socio__skill-visual\">\n <h4\n [attr.aria-label]=\"\n skillHeadingLabel(skill.name, skill.direction)\n \"\n >\n <span\n class=\"mapa-direction-indicator\"\n aria-hidden=\"true\"\n >{{ directionArrow(skill.direction) }}</span\n >\n <span>{{ skill.name }}</span>\n </h4>\n <div class=\"mapa-report-gauge\">\n <div\n class=\"mapa-report-gauge__visual\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"clamp(skill.value)\"\n [attr.aria-valuetext]=\"\n gaugeValueText(skill.value, skill.classification)\n \"\n [attr.aria-label]=\"\n i18n.texts.report.gaugeLabel(\n skill.name,\n clamp(skill.value)\n )\n \"\n [style.--mapa-gauge-color]=\"\n gaugeColor(skill.classification)\n \"\n >\n <svg\n class=\"mapa-report-gauge__arc\"\n viewBox=\"0 0 180 104\"\n aria-hidden=\"true\"\n >\n @for (\n segment of gaugeSegments;\n track segment.index\n ) {\n <line\n class=\"mapa-report-gauge__segment\"\n [class.mapa-report-gauge__segment--active]=\"\n segment.index <\n activeSegmentCount(skill.value)\n \"\n [attr.x1]=\"segment.x1\"\n [attr.y1]=\"segment.y1\"\n [attr.x2]=\"segment.x2\"\n [attr.y2]=\"segment.y2\"\n />\n }\n </svg>\n <div\n class=\"mapa-report-gauge__reading\"\n aria-hidden=\"true\"\n >\n <strong>{{ clamp(skill.value) }}</strong>\n <span>{{\n classificationLabel(skill.classification)\n }}</span>\n </div>\n </div>\n <div class=\"mapa-report-gauge__extremes\">\n <span>{{\n i18n.texts.report.lowerIntensityLabel\n }}</span>\n <span>{{\n i18n.texts.report.higherIntensityLabel\n }}</span>\n </div>\n </div>\n </div>\n <div class=\"mapa-report-socio__skill-copy\">\n @if (skill.concept) {\n <section class=\"mapa-report-socio__copy-block\">\n <h5>{{ i18n.texts.report.conceptTitle }}</h5>\n <div\n class=\"mapa-report-socio__concept\"\n [innerHTML]=\"skill.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (skill.description) {\n <section class=\"mapa-report-socio__copy-block\">\n <h5>{{ i18n.texts.report.resultTitle }}</h5>\n <div\n class=\"mapa-report-socio__description\"\n [innerHTML]=\"skill.description | safeHtml\"\n ></div>\n </section>\n }\n </div>\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n\n @if (data().vulnerabilities.length) {\n <section class=\"mapa-report-socio__vulnerabilities\">\n @if (data().vulnerabilityLegend) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"data().vulnerabilityLegend?.expanded ?? false\"\n [groups]=\"data().vulnerabilityLegend?.groups ?? []\"\n [groupsTitle]=\"data().vulnerabilityLegend?.groupsTitle\"\n [intro]=\"data().vulnerabilityLegend?.intro\"\n [title]=\"data().vulnerabilityLegend?.title\"\n />\n }\n\n @for (scale of data().vulnerabilities; track scale.id) {\n <section class=\"mapa-report-socio__vulnerability-scale\">\n <header class=\"mapa-report-socio__vulnerability-heading\">\n <h3>{{ scale.name }}</h3>\n @if (scale.concept) {\n <div\n class=\"mapa-report-socio__vulnerability-copy\"\n [innerHTML]=\"scale.concept | safeHtml\"\n ></div>\n }\n </header>\n\n <div\n class=\"mapa-report-socio__vulnerability-table\"\n role=\"table\"\n [attr.aria-label]=\"scale.name\"\n >\n <div class=\"mapa-report-socio__vulnerability-head\" role=\"row\">\n <span role=\"columnheader\">{{\n i18n.texts.report.dimensionTitle\n }}</span>\n <span role=\"columnheader\">{{\n i18n.texts.report.classificationTitle\n }}</span>\n <span role=\"columnheader\">{{\n i18n.texts.report.resultReadingTitle\n }}</span>\n </div>\n\n @for (item of vulnerabilityDimensions(scale); track item.id) {\n <article class=\"mapa-report-socio__vulnerability-row\" role=\"row\">\n <div\n class=\"mapa-report-socio__vulnerability-dimension\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.dimensionTitle }}</span\n >\n <h4\n [attr.aria-label]=\"\n skillHeadingLabel(item.name, item.direction)\n \"\n >\n <span>{{ item.name }}</span>\n <span\n class=\"mapa-direction-indicator\"\n aria-hidden=\"true\"\n >{{ directionArrow(item.direction) }}</span\n >\n </h4>\n </div>\n\n <div\n class=\"mapa-report-socio__vulnerability-classification\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.classificationTitle }}</span\n >\n <mapa-classification-tag\n appearance=\"solid\"\n casing=\"natural\"\n shape=\"rounded\"\n size=\"large\"\n [classification]=\"item.classification\"\n />\n </div>\n\n <div\n class=\"mapa-report-socio__vulnerability-reading\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.resultReadingTitle }}</span\n >\n <div class=\"mapa-report-socio__vulnerability-reading-grid\">\n @if (item.concept) {\n <section class=\"mapa-report-socio__copy-block\">\n <h4>{{ i18n.texts.report.conceptTitle }}</h4>\n <div\n class=\"mapa-report-socio__concept\"\n [innerHTML]=\"item.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (item.description) {\n <section class=\"mapa-report-socio__copy-block\">\n <h4>{{ i18n.texts.report.resultTitle }}</h4>\n <div\n class=\"mapa-report-socio__description\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n </section>\n }\n </div>\n </div>\n </article>\n }\n </div>\n </section>\n }\n </section>\n }\n\n @if (!data().competencies.length && !data().vulnerabilities.length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-socio__competencies{display:grid;gap:28px}.mapa-report-socio__competence{display:grid;gap:12px}.mapa-report-socio__competence-heading{display:grid;gap:5px}.mapa-report-socio__competence-heading h3{font-size:20px;font-weight:500;margin:0}.mapa-report-socio__competence-description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin:0}.mapa-report-socio__competence-description ::ng-deep ol,.mapa-report-socio__competence-description ::ng-deep p,.mapa-report-socio__competence-description ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__competence-description ::ng-deep ol,.mapa-report-socio__competence-description ::ng-deep ul{padding-left:20px}.mapa-report-socio__competence-description ::ng-deep li{margin:0 0 3px}.mapa-report-socio__competence-description ::ng-deep b,.mapa-report-socio__competence-description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__competence-description ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__skills,.mapa-report-socio__vulnerabilities{display:grid;gap:10px}.mapa-report-socio__skill{align-items:stretch;border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);display:grid;gap:22px;grid-template-columns:210px minmax(0,1fr);padding:18px}.mapa-report-socio__skill-visual{align-content:start;display:grid;gap:10px;min-width:0}.mapa-report-socio__skill-visual>h4{align-items:center;display:inline-flex;font-size:14px;gap:8px;margin:0}.mapa-report-socio__skill-copy{align-content:center;display:grid;gap:16px;min-width:0}.mapa-report-socio__copy-block{display:grid;gap:4px}.mapa-report-socio__copy-block h5{color:var(--mapa-report-text);font-size:11px;font-weight:700;margin:0}.mapa-report-socio__concept{color:var(--mapa-report-text);font-size:12px;line-height:1.5}.mapa-report-socio__concept ::ng-deep ol,.mapa-report-socio__concept ::ng-deep p,.mapa-report-socio__concept ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__concept ::ng-deep ol,.mapa-report-socio__concept ::ng-deep ul{padding-left:20px}.mapa-report-socio__concept ::ng-deep li{margin:0 0 3px}.mapa-report-socio__concept ::ng-deep b,.mapa-report-socio__concept ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__concept ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__description{color:var(--mapa-report-muted);font-size:11px;line-height:1.5}.mapa-report-socio__description ::ng-deep ol,.mapa-report-socio__description ::ng-deep p,.mapa-report-socio__description ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__description ::ng-deep ol,.mapa-report-socio__description ::ng-deep ul{padding-left:20px}.mapa-report-socio__description ::ng-deep li{margin:0 0 3px}.mapa-report-socio__description ::ng-deep b,.mapa-report-socio__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__vulnerability-copy ::ng-deep ol,.mapa-report-socio__vulnerability-copy ::ng-deep p,.mapa-report-socio__vulnerability-copy ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__vulnerability-copy ::ng-deep ol,.mapa-report-socio__vulnerability-copy ::ng-deep ul{padding-left:20px}.mapa-report-socio__vulnerability-copy ::ng-deep li{margin:0 0 3px}.mapa-report-socio__vulnerability-copy ::ng-deep b,.mapa-report-socio__vulnerability-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__vulnerability-copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__vulnerabilities{gap:24px;margin-top:20px}.mapa-report-socio__vulnerability-scale{display:grid;gap:12px}.mapa-report-socio__vulnerability-heading{display:grid;gap:5px}.mapa-report-socio__vulnerability-heading h3{font-size:20px;font-weight:500;margin:0}.mapa-report-socio__vulnerability-heading>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5}.mapa-report-socio__vulnerability-table{border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);overflow:hidden}.mapa-report-socio__vulnerability-head,.mapa-report-socio__vulnerability-row{align-items:center;display:grid;gap:18px;grid-template-columns:minmax(180px,.72fr) minmax(105px,.42fr) minmax(0,2fr)}.mapa-report-socio__vulnerability-head{background:var(--mapa-report-surface-muted);border-bottom:1px solid var(--mapa-report-border);color:var(--mapa-report-muted);font-size:10px;font-weight:600;letter-spacing:.03em;padding:10px 16px;text-transform:uppercase}.mapa-report-socio__vulnerability-row{min-height:118px;padding:16px}.mapa-report-socio__vulnerability-row+.mapa-report-socio__vulnerability-row{border-top:1px solid var(--mapa-report-border)}.mapa-report-socio__vulnerability-dimension{min-width:0}.mapa-report-socio__vulnerability-dimension h4{align-items:center;display:flex;font-size:14px;gap:8px;margin:0}.mapa-report-socio__vulnerability-classification{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);min-width:0}.mapa-report-socio__vulnerability-reading{min-width:0}.mapa-report-socio__vulnerability-reading-grid{display:grid;gap:18px;grid-template-columns:minmax(140px,.72fr) minmax(0,1.28fr)}.mapa-report-socio__vulnerability-reading-grid>.mapa-report-socio__copy-block{border-left:1px solid var(--mapa-report-border);min-width:0;padding-left:13px}.mapa-report-socio__cell-label{display:none}.mapa-report-gauge{display:grid;justify-items:center;width:190px}.mapa-report-gauge__visual{height:104px;position:relative;width:180px}.mapa-report-gauge__arc{display:block;height:104px;width:180px}.mapa-report-gauge__segment{stroke:#dfe5e7;stroke-linecap:round;stroke-width:5}.mapa-report-gauge__segment--active{stroke:var(--mapa-gauge-color)}.mapa-report-gauge__reading{bottom:8px;color:var(--mapa-report-text);display:grid;justify-items:center;left:50%;line-height:1.1;position:absolute;transform:translate(-50%)}.mapa-report-gauge__reading strong{font-size:16px;font-weight:600}.mapa-report-gauge__reading span{color:var(--mapa-report-muted);font-size:11px;margin-top:2px}.mapa-report-gauge__extremes{color:var(--mapa-report-muted);display:flex;font-size:10px;justify-content:space-between;line-height:1.15;margin-top:3px;width:190px}.mapa-report-gauge__extremes span{max-width:68px}.mapa-report-gauge__extremes span:last-child{text-align:right}@media(max-width:760px){.mapa-report-socio__skill{grid-template-columns:1fr}.mapa-report-socio__skill-copy{align-content:start}.mapa-report-socio__vulnerability-head{display:none}.mapa-report-socio__vulnerability-row{align-items:start;gap:14px;grid-template-columns:1fr;min-height:0;padding:15px}.mapa-report-socio__vulnerability-dimension,.mapa-report-socio__vulnerability-classification,.mapa-report-socio__vulnerability-reading{display:grid;gap:6px}.mapa-report-socio__vulnerability-reading-grid{gap:10px;grid-template-columns:1fr}.mapa-report-socio__vulnerability-reading-grid>.mapa-report-socio__copy-block{border-left:0;border-top:1px solid var(--mapa-report-border);padding-left:0;padding-top:10px}.mapa-report-socio__cell-label{color:var(--mapa-report-muted);display:block;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}}\n"], dependencies: [{ kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8826
8827
|
}
|
|
8827
8828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportSocioemotionalWidgetComponent, decorators: [{
|
|
8828
8829
|
type: Component,
|
|
@@ -8830,7 +8831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
8830
8831
|
MapaClassificationTagComponent,
|
|
8831
8832
|
MapaReportLegendComponent,
|
|
8832
8833
|
SafeHtmlPipe,
|
|
8833
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (data().legend) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"data().legend?.expanded ?? false\"\n [groups]=\"data().legend?.groups ?? []\"\n [groupsTitle]=\"data().legend?.groupsTitle\"\n [intro]=\"data().legend?.intro\"\n [title]=\"data().legend?.title\"\n />\n }\n\n @if (data().competencies.length) {\n <div class=\"mapa-report-socio__competencies\">\n @for (competence of data().competencies; track competence.id) {\n <section class=\"mapa-report-socio__competence\">\n <header class=\"mapa-report-socio__competence-heading\">\n <h3>{{ competence.name }}</h3>\n @if (competence.description) {\n <div\n class=\"mapa-report-socio__competence-description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n </header>\n\n <div class=\"mapa-report-socio__skills\">\n @for (skill of competence.skills; track skill.id) {\n <article class=\"mapa-report-socio__skill\">\n <div class=\"mapa-report-socio__skill-visual\">\n <h4\n [attr.aria-label]=\"\n skillHeadingLabel(skill.name, skill.direction)\n \"\n >\n <span\n class=\"mapa-direction-indicator\"\n aria-hidden=\"true\"\n >{{ directionArrow(skill.direction) }}</span\n >\n <span>{{ skill.name }}</span>\n </h4>\n <div class=\"mapa-report-gauge\">\n <div\n class=\"mapa-report-gauge__visual\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"clamp(skill.value)\"\n [attr.aria-valuetext]=\"\n gaugeValueText(skill.value, skill.classification)\n \"\n [attr.aria-label]=\"\n i18n.texts.report.gaugeLabel(\n skill.name,\n clamp(skill.value)\n )\n \"\n [style.--mapa-gauge-color]=\"\n gaugeColor(skill.classification)\n \"\n >\n <svg\n class=\"mapa-report-gauge__arc\"\n viewBox=\"0 0 180 104\"\n aria-hidden=\"true\"\n >\n @for (\n segment of gaugeSegments;\n track segment.index\n ) {\n <line\n class=\"mapa-report-gauge__segment\"\n [class.mapa-report-gauge__segment--active]=\"\n segment.index <\n activeSegmentCount(skill.value)\n \"\n [attr.x1]=\"segment.x1\"\n [attr.y1]=\"segment.y1\"\n [attr.x2]=\"segment.x2\"\n [attr.y2]=\"segment.y2\"\n />\n }\n </svg>\n <div\n class=\"mapa-report-gauge__reading\"\n aria-hidden=\"true\"\n >\n <strong>{{ clamp(skill.value) }}</strong>\n <span>{{\n classificationLabel(skill.classification)\n }}</span>\n </div>\n </div>\n <div class=\"mapa-report-gauge__extremes\">\n <span>{{\n i18n.texts.report.lowerIntensityLabel\n }}</span>\n <span>{{\n i18n.texts.report.higherIntensityLabel\n }}</span>\n </div>\n </div>\n </div>\n <div class=\"mapa-report-socio__skill-copy\">\n @if (skill.concept) {\n <section class=\"mapa-report-socio__copy-block\">\n <h5>{{ i18n.texts.report.conceptTitle }}</h5>\n <div\n class=\"mapa-report-socio__concept\"\n [innerHTML]=\"skill.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (skill.description) {\n <section class=\"mapa-report-socio__copy-block\">\n <h5>{{ i18n.texts.report.resultTitle }}</h5>\n <div\n class=\"mapa-report-socio__description\"\n [innerHTML]=\"skill.description | safeHtml\"\n ></div>\n </section>\n }\n </div>\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n\n @if (data().vulnerabilities.length) {\n <section class=\"mapa-report-socio__vulnerabilities\">\n @if (data().vulnerabilityLegend) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"data().vulnerabilityLegend?.expanded ?? false\"\n [groups]=\"data().vulnerabilityLegend?.groups ?? []\"\n [groupsTitle]=\"data().vulnerabilityLegend?.groupsTitle\"\n [intro]=\"data().vulnerabilityLegend?.intro\"\n [title]=\"data().vulnerabilityLegend?.title\"\n />\n }\n\n @for (scale of data().vulnerabilities; track scale.id) {\n <section class=\"mapa-report-socio__vulnerability-scale\">\n <header class=\"mapa-report-socio__vulnerability-heading\">\n <h3>{{ scale.name }}</h3>\n @if (scale.concept) {\n <div\n class=\"mapa-report-socio__vulnerability-copy\"\n [innerHTML]=\"scale.concept | safeHtml\"\n ></div>\n }\n </header>\n\n <div\n class=\"mapa-report-socio__vulnerability-table\"\n role=\"table\"\n [attr.aria-label]=\"scale.name\"\n >\n <div class=\"mapa-report-socio__vulnerability-head\" role=\"row\">\n <span role=\"columnheader\">{{\n i18n.texts.report.dimensionTitle\n }}</span>\n <span role=\"columnheader\">{{\n i18n.texts.report.classificationTitle\n }}</span>\n <span role=\"columnheader\">{{\n i18n.texts.report.resultReadingTitle\n }}</span>\n </div>\n\n @for (item of vulnerabilityDimensions(scale); track item.id) {\n <article class=\"mapa-report-socio__vulnerability-row\" role=\"row\">\n <div\n class=\"mapa-report-socio__vulnerability-dimension\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.dimensionTitle }}</span\n >\n <h4\n [attr.aria-label]=\"\n skillHeadingLabel(item.name, item.direction)\n \"\n >\n <span>{{ item.name }}</span>\n <span\n class=\"mapa-direction-indicator\"\n aria-hidden=\"true\"\n >{{ directionArrow(item.direction) }}</span\n >\n </h4>\n </div>\n\n <div\n class=\"mapa-report-socio__vulnerability-classification\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.classificationTitle }}</span\n >\n <mapa-classification-tag\n appearance=\"solid\"\n casing=\"natural\"\n shape=\"rounded\"\n size=\"large\"\n [classification]=\"item.classification\"\n />\n </div>\n\n <div\n class=\"mapa-report-socio__vulnerability-reading\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.resultReadingTitle }}</span\n >\n <div class=\"mapa-report-socio__vulnerability-reading-grid\">\n @if (item.concept) {\n <section class=\"mapa-report-socio__copy-block\">\n <h4>{{ i18n.texts.report.conceptTitle }}</h4>\n <div\n class=\"mapa-report-socio__concept\"\n [innerHTML]=\"item.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (item.description) {\n <section class=\"mapa-report-socio__copy-block\">\n <h4>{{ i18n.texts.report.resultTitle }}</h4>\n <div\n class=\"mapa-report-socio__description\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n </section>\n }\n </div>\n </div>\n </article>\n }\n </div>\n </section>\n }\n </section>\n }\n\n @if (!data().competencies.length && !data().vulnerabilities.length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-socio__competencies{display:grid;gap:28px}.mapa-report-socio__competence{display:grid;gap:12px}.mapa-report-socio__competence-heading{display:grid;gap:5px}.mapa-report-socio__competence-heading h3{font-size:20px;font-weight:500;margin:0}.mapa-report-socio__competence-description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin:0}.mapa-report-socio__competence-description ::ng-deep ol,.mapa-report-socio__competence-description ::ng-deep p,.mapa-report-socio__competence-description ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__competence-description ::ng-deep ol,.mapa-report-socio__competence-description ::ng-deep ul{padding-left:20px}.mapa-report-socio__competence-description ::ng-deep li{margin:0 0 3px}.mapa-report-socio__competence-description ::ng-deep b,.mapa-report-socio__competence-description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__competence-description ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__skills,.mapa-report-socio__vulnerabilities{display:grid;gap:10px}.mapa-report-socio__skill{align-items:stretch;border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);display:grid;gap:22px;grid-template-columns:210px minmax(0,1fr);padding:18px}.mapa-report-socio__skill-visual{align-content:start;display:grid;gap:10px;min-width:0}.mapa-report-socio__skill-visual>h4{align-items:center;display:inline-flex;font-size:14px;gap:8px;margin:0}.mapa-report-socio__skill-copy{align-content:center;display:grid;gap:16px;min-width:0}.mapa-report-socio__copy-block{display:grid;gap:4px}.mapa-report-socio__copy-block h5{color:var(--mapa-report-text);font-size:11px;font-weight:700;margin:0}.mapa-report-socio__concept{color:var(--mapa-report-text);font-size:12px;line-height:1.5}.mapa-report-socio__concept ::ng-deep ol,.mapa-report-socio__concept ::ng-deep p,.mapa-report-socio__concept ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__concept ::ng-deep ol,.mapa-report-socio__concept ::ng-deep ul{padding-left:20px}.mapa-report-socio__concept ::ng-deep li{margin:0 0 3px}.mapa-report-socio__concept ::ng-deep b,.mapa-report-socio__concept ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__concept ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__description{color:var(--mapa-report-muted);font-size:11px;line-height:1.5}.mapa-report-socio__description ::ng-deep ol,.mapa-report-socio__description ::ng-deep p,.mapa-report-socio__description ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__description ::ng-deep ol,.mapa-report-socio__description ::ng-deep ul{padding-left:20px}.mapa-report-socio__description ::ng-deep li{margin:0 0 3px}.mapa-report-socio__description ::ng-deep b,.mapa-report-socio__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__vulnerability-copy ::ng-deep ol,.mapa-report-socio__vulnerability-copy ::ng-deep p,.mapa-report-socio__vulnerability-copy ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__vulnerability-copy ::ng-deep ol,.mapa-report-socio__vulnerability-copy ::ng-deep ul{padding-left:20px}.mapa-report-socio__vulnerability-copy ::ng-deep li{margin:0 0 3px}.mapa-report-socio__vulnerability-copy ::ng-deep b,.mapa-report-socio__vulnerability-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__vulnerability-copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__vulnerabilities{gap:24px;margin-top:20px}.mapa-report-socio__vulnerability-scale{display:grid;gap:12px}.mapa-report-socio__vulnerability-heading{display:grid;gap:5px}.mapa-report-socio__vulnerability-heading h3{font-size:20px;font-weight:500;margin:0}.mapa-report-socio__vulnerability-heading>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5}.mapa-report-socio__vulnerability-table{border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);overflow:hidden}.mapa-report-socio__vulnerability-head,.mapa-report-socio__vulnerability-row{align-items:center;display:grid;gap:18px;grid-template-columns:minmax(180px,.72fr) minmax(105px,.42fr) minmax(0,2fr)}.mapa-report-socio__vulnerability-head{background:var(--mapa-report-surface-muted);border-bottom:1px solid var(--mapa-report-border);color:var(--mapa-report-muted);font-size:10px;font-weight:600;letter-spacing:.03em;padding:10px 16px;text-transform:uppercase}.mapa-report-socio__vulnerability-row{min-height:118px;padding:16px}.mapa-report-socio__vulnerability-row+.mapa-report-socio__vulnerability-row{border-top:1px solid var(--mapa-report-border)}.mapa-report-socio__vulnerability-dimension{min-width:0}.mapa-report-socio__vulnerability-dimension h4{align-items:center;display:flex;font-size:14px;gap:8px;margin:0}.mapa-report-socio__vulnerability-classification{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);min-width:0}.mapa-report-socio__vulnerability-reading{min-width:0}.mapa-report-socio__vulnerability-reading-grid{display:grid;gap:18px;grid-template-columns:minmax(140px,.72fr) minmax(0,1.28fr)}.mapa-report-socio__vulnerability-reading-grid>.mapa-report-socio__copy-block{border-left:1px solid var(--mapa-report-border);min-width:0;padding-left:13px}.mapa-report-socio__cell-label{display:none}.mapa-report-gauge{display:grid;justify-items:center;width:190px}.mapa-report-gauge__visual{height:104px;position:relative;width:180px}.mapa-report-gauge__arc{display:block;height:104px;width:180px}.mapa-report-gauge__segment{stroke:#dfe5e7;stroke-linecap:round;stroke-width:5}.mapa-report-gauge__segment--active{stroke:var(--mapa-gauge-color)}.mapa-report-gauge__reading{bottom:8px;color:var(--mapa-report-text);display:grid;justify-items:center;left:50%;line-height:1.1;position:absolute;transform:translate(-50%)}.mapa-report-gauge__reading strong{font-size:16px;font-weight:600}.mapa-report-gauge__reading span{color:var(--mapa-report-muted);font-size:11px;margin-top:2px}.mapa-report-gauge__extremes{color:var(--mapa-report-muted);display:flex;font-size:10px;justify-content:space-between;line-height:1.15;margin-top:3px;width:190px}.mapa-report-gauge__extremes span{max-width:68px}.mapa-report-gauge__extremes span:last-child{text-align:right}@media(max-width:760px){.mapa-report-socio__skill{grid-template-columns:1fr}.mapa-report-socio__skill-copy{align-content:start}.mapa-report-socio__vulnerability-head{display:none}.mapa-report-socio__vulnerability-row{align-items:start;gap:14px;grid-template-columns:1fr;min-height:0;padding:15px}.mapa-report-socio__vulnerability-dimension,.mapa-report-socio__vulnerability-classification,.mapa-report-socio__vulnerability-reading{display:grid;gap:6px}.mapa-report-socio__vulnerability-reading-grid{gap:10px;grid-template-columns:1fr}.mapa-report-socio__vulnerability-reading-grid>.mapa-report-socio__copy-block{border-left:0;border-top:1px solid var(--mapa-report-border);padding-left:0;padding-top:10px}.mapa-report-socio__cell-label{color:var(--mapa-report-muted);display:block;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}}\n"] }]
|
|
8834
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (data().legend) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"data().legend?.expanded ?? false\"\n [groups]=\"data().legend?.groups ?? []\"\n [groupsTitle]=\"data().legend?.groupsTitle\"\n [intro]=\"data().legend?.intro\"\n [title]=\"data().legend?.title\"\n />\n }\n\n @if (data().competencies.length) {\n <div class=\"mapa-report-socio__competencies\">\n @for (competence of data().competencies; track competence.id) {\n <section class=\"mapa-report-socio__competence\">\n <header class=\"mapa-report-socio__competence-heading\">\n <h3>{{ competence.name }}</h3>\n @if (competence.description) {\n <div\n class=\"mapa-report-socio__competence-description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n </header>\n\n <div class=\"mapa-report-socio__skills\">\n @for (skill of competence.skills; track skill.id) {\n <article class=\"mapa-report-socio__skill\">\n <div class=\"mapa-report-socio__skill-visual\">\n <h4\n [attr.aria-label]=\"\n skillHeadingLabel(skill.name, skill.direction)\n \"\n >\n <span\n class=\"mapa-direction-indicator\"\n aria-hidden=\"true\"\n >{{ directionArrow(skill.direction) }}</span\n >\n <span>{{ skill.name }}</span>\n </h4>\n <div class=\"mapa-report-gauge\">\n <div\n class=\"mapa-report-gauge__visual\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"clamp(skill.value)\"\n [attr.aria-valuetext]=\"\n gaugeValueText(skill.value, skill.classification)\n \"\n [attr.aria-label]=\"\n i18n.texts.report.gaugeLabel(\n skill.name,\n clamp(skill.value)\n )\n \"\n [style.--mapa-gauge-color]=\"\n gaugeColor(skill.classification)\n \"\n >\n <svg\n class=\"mapa-report-gauge__arc\"\n viewBox=\"0 0 180 104\"\n aria-hidden=\"true\"\n >\n @for (\n segment of gaugeSegments;\n track segment.index\n ) {\n <line\n class=\"mapa-report-gauge__segment\"\n [class.mapa-report-gauge__segment--active]=\"\n segment.index <\n activeSegmentCount(skill.value)\n \"\n [attr.x1]=\"segment.x1\"\n [attr.y1]=\"segment.y1\"\n [attr.x2]=\"segment.x2\"\n [attr.y2]=\"segment.y2\"\n />\n }\n </svg>\n <div\n class=\"mapa-report-gauge__reading\"\n aria-hidden=\"true\"\n >\n <strong>{{ clamp(skill.value) }}</strong>\n <span>{{\n classificationLabel(skill.classification)\n }}</span>\n </div>\n </div>\n <div class=\"mapa-report-gauge__extremes\">\n <span>{{\n i18n.texts.report.lowerIntensityLabel\n }}</span>\n <span>{{\n i18n.texts.report.higherIntensityLabel\n }}</span>\n </div>\n </div>\n </div>\n <div class=\"mapa-report-socio__skill-copy\">\n @if (skill.concept) {\n <section class=\"mapa-report-socio__copy-block\">\n <h5>{{ i18n.texts.report.conceptTitle }}</h5>\n <div\n class=\"mapa-report-socio__concept\"\n [innerHTML]=\"skill.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (skill.description) {\n <section class=\"mapa-report-socio__copy-block\">\n <h5>{{ i18n.texts.report.resultTitle }}</h5>\n <div\n class=\"mapa-report-socio__description\"\n [innerHTML]=\"skill.description | safeHtml\"\n ></div>\n </section>\n }\n </div>\n </article>\n }\n </div>\n </section>\n }\n </div>\n }\n\n @if (data().vulnerabilities.length) {\n <section class=\"mapa-report-socio__vulnerabilities\">\n @if (data().vulnerabilityLegend) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [expanded]=\"data().vulnerabilityLegend?.expanded ?? false\"\n [groups]=\"data().vulnerabilityLegend?.groups ?? []\"\n [groupsTitle]=\"data().vulnerabilityLegend?.groupsTitle\"\n [intro]=\"data().vulnerabilityLegend?.intro\"\n [title]=\"data().vulnerabilityLegend?.title\"\n />\n }\n\n @for (scale of data().vulnerabilities; track scale.id) {\n <section class=\"mapa-report-socio__vulnerability-scale\">\n <header class=\"mapa-report-socio__vulnerability-heading\">\n <h3>{{ scale.name }}</h3>\n @if (scale.concept) {\n <div\n class=\"mapa-report-socio__vulnerability-copy\"\n [innerHTML]=\"scale.concept | safeHtml\"\n ></div>\n }\n </header>\n\n <div\n class=\"mapa-report-socio__vulnerability-table\"\n role=\"table\"\n [attr.aria-label]=\"scale.name\"\n >\n <div class=\"mapa-report-socio__vulnerability-head\" role=\"row\">\n <span role=\"columnheader\">{{\n i18n.texts.report.dimensionTitle\n }}</span>\n <span role=\"columnheader\">{{\n i18n.texts.report.classificationTitle\n }}</span>\n <span role=\"columnheader\">{{\n i18n.texts.report.resultReadingTitle\n }}</span>\n </div>\n\n @for (item of vulnerabilityDimensions(scale); track item.id) {\n <article class=\"mapa-report-socio__vulnerability-row\" role=\"row\">\n <div\n class=\"mapa-report-socio__vulnerability-dimension\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.dimensionTitle }}</span\n >\n <h4\n [attr.aria-label]=\"\n skillHeadingLabel(item.name, item.direction)\n \"\n >\n <span>{{ item.name }}</span>\n <span\n class=\"mapa-direction-indicator\"\n aria-hidden=\"true\"\n >{{ directionArrow(item.direction) }}</span\n >\n </h4>\n </div>\n\n <div\n class=\"mapa-report-socio__vulnerability-classification\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.classificationTitle }}</span\n >\n <mapa-classification-tag\n appearance=\"solid\"\n casing=\"natural\"\n shape=\"rounded\"\n size=\"large\"\n [classification]=\"item.classification\"\n />\n </div>\n\n <div\n class=\"mapa-report-socio__vulnerability-reading\"\n role=\"cell\"\n >\n <span\n class=\"mapa-report-socio__cell-label\"\n aria-hidden=\"true\"\n >{{ i18n.texts.report.resultReadingTitle }}</span\n >\n <div class=\"mapa-report-socio__vulnerability-reading-grid\">\n @if (item.concept) {\n <section class=\"mapa-report-socio__copy-block\">\n <h4>{{ i18n.texts.report.conceptTitle }}</h4>\n <div\n class=\"mapa-report-socio__concept\"\n [innerHTML]=\"item.concept | safeHtml\"\n ></div>\n </section>\n }\n @if (item.description) {\n <section class=\"mapa-report-socio__copy-block\">\n <h4>{{ i18n.texts.report.resultTitle }}</h4>\n <div\n class=\"mapa-report-socio__description\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n </section>\n }\n </div>\n </div>\n </article>\n }\n </div>\n </section>\n }\n </section>\n }\n\n @if (!data().competencies.length && !data().vulnerabilities.length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-socio__competencies{display:grid;gap:28px}.mapa-report-socio__competence{display:grid;gap:12px}.mapa-report-socio__competence-heading{display:grid;gap:5px}.mapa-report-socio__competence-heading h3{font-size:20px;font-weight:500;margin:0}.mapa-report-socio__competence-description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin:0}.mapa-report-socio__competence-description ::ng-deep ol,.mapa-report-socio__competence-description ::ng-deep p,.mapa-report-socio__competence-description ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__competence-description ::ng-deep ol,.mapa-report-socio__competence-description ::ng-deep ul{padding-left:20px}.mapa-report-socio__competence-description ::ng-deep li{margin:0 0 3px}.mapa-report-socio__competence-description ::ng-deep b,.mapa-report-socio__competence-description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__competence-description ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__skills,.mapa-report-socio__vulnerabilities{display:grid;gap:10px}.mapa-report-socio__skill{align-items:stretch;border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);display:grid;gap:22px;grid-template-columns:210px minmax(0,1fr);padding:18px}.mapa-report-socio__skill-visual{align-content:start;display:grid;gap:10px;min-width:0}.mapa-report-socio__skill-visual>h4{align-items:center;display:inline-flex;font-size:14px;gap:8px;margin:0}.mapa-report-socio__skill-copy{align-content:center;display:grid;gap:16px;min-width:0}.mapa-report-socio__copy-block{display:grid;gap:4px}.mapa-report-socio__copy-block h5{color:var(--mapa-report-text);font-size:11px;font-weight:700;margin:0}.mapa-report-socio__concept{color:var(--mapa-report-text);font-size:12px;line-height:1.5}.mapa-report-socio__concept ::ng-deep ol,.mapa-report-socio__concept ::ng-deep p,.mapa-report-socio__concept ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__concept ::ng-deep ol,.mapa-report-socio__concept ::ng-deep ul{padding-left:20px}.mapa-report-socio__concept ::ng-deep li{margin:0 0 3px}.mapa-report-socio__concept ::ng-deep b,.mapa-report-socio__concept ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__concept ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__description{color:var(--mapa-report-muted);font-size:11px;line-height:1.5}.mapa-report-socio__description ::ng-deep ol,.mapa-report-socio__description ::ng-deep p,.mapa-report-socio__description ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__description ::ng-deep ol,.mapa-report-socio__description ::ng-deep ul{padding-left:20px}.mapa-report-socio__description ::ng-deep li{margin:0 0 3px}.mapa-report-socio__description ::ng-deep b,.mapa-report-socio__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__vulnerability-copy ::ng-deep ol,.mapa-report-socio__vulnerability-copy ::ng-deep p,.mapa-report-socio__vulnerability-copy ::ng-deep ul{margin:0 0 8px}.mapa-report-socio__vulnerability-copy ::ng-deep ol,.mapa-report-socio__vulnerability-copy ::ng-deep ul{padding-left:20px}.mapa-report-socio__vulnerability-copy ::ng-deep li{margin:0 0 3px}.mapa-report-socio__vulnerability-copy ::ng-deep b,.mapa-report-socio__vulnerability-copy ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-socio__vulnerability-copy ::ng-deep :last-child{margin-bottom:0}.mapa-report-socio__vulnerabilities{gap:24px;margin-top:20px}.mapa-report-socio__vulnerability-scale{display:grid;gap:12px}.mapa-report-socio__vulnerability-heading{display:grid;gap:5px}.mapa-report-socio__vulnerability-heading h3{font-size:20px;font-weight:500;margin:0}.mapa-report-socio__vulnerability-heading>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5}.mapa-report-socio__vulnerability-table{border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-radius);overflow:hidden}.mapa-report-socio__vulnerability-head,.mapa-report-socio__vulnerability-row{align-items:center;display:grid;gap:18px;grid-template-columns:minmax(180px,.72fr) minmax(105px,.42fr) minmax(0,2fr)}.mapa-report-socio__vulnerability-head{background:var(--mapa-report-surface-muted);border-bottom:1px solid var(--mapa-report-border);color:var(--mapa-report-muted);font-size:10px;font-weight:600;letter-spacing:.03em;padding:10px 16px;text-transform:uppercase}.mapa-report-socio__vulnerability-row{min-height:118px;padding:16px}.mapa-report-socio__vulnerability-row+.mapa-report-socio__vulnerability-row{border-top:1px solid var(--mapa-report-border)}.mapa-report-socio__vulnerability-dimension{min-width:0}.mapa-report-socio__vulnerability-dimension h4{align-items:center;display:flex;font-size:14px;gap:8px;margin:0}.mapa-report-socio__vulnerability-classification{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);min-width:0}.mapa-report-socio__vulnerability-reading{min-width:0}.mapa-report-socio__vulnerability-reading-grid{display:grid;gap:18px;grid-template-columns:minmax(140px,.72fr) minmax(0,1.28fr)}.mapa-report-socio__vulnerability-reading-grid>.mapa-report-socio__copy-block{border-left:1px solid var(--mapa-report-border);min-width:0;padding-left:13px}.mapa-report-socio__cell-label{display:none}.mapa-report-gauge{display:grid;justify-items:center;width:190px}.mapa-report-gauge__visual{height:104px;position:relative;width:180px}.mapa-report-gauge__arc{display:block;height:104px;width:180px}.mapa-report-gauge__segment{stroke:#dfe5e7;stroke-linecap:round;stroke-width:5}.mapa-report-gauge__segment--active{stroke:var(--mapa-gauge-color)}.mapa-report-gauge__reading{bottom:8px;color:var(--mapa-report-text);display:grid;justify-items:center;left:50%;line-height:1.1;position:absolute;transform:translate(-50%)}.mapa-report-gauge__reading strong{font-size:16px;font-weight:600}.mapa-report-gauge__reading span{color:var(--mapa-report-muted);font-size:11px;margin-top:2px}.mapa-report-gauge__extremes{color:var(--mapa-report-muted);display:flex;font-size:10px;justify-content:space-between;line-height:1.15;margin-top:3px;width:190px}.mapa-report-gauge__extremes span{max-width:68px}.mapa-report-gauge__extremes span:last-child{text-align:right}@media(max-width:760px){.mapa-report-socio__skill{grid-template-columns:1fr}.mapa-report-socio__skill-copy{align-content:start}.mapa-report-socio__vulnerability-head{display:none}.mapa-report-socio__vulnerability-row{align-items:start;gap:14px;grid-template-columns:1fr;min-height:0;padding:15px}.mapa-report-socio__vulnerability-dimension,.mapa-report-socio__vulnerability-classification,.mapa-report-socio__vulnerability-reading{display:grid;gap:6px}.mapa-report-socio__vulnerability-reading-grid{gap:10px;grid-template-columns:1fr}.mapa-report-socio__vulnerability-reading-grid>.mapa-report-socio__copy-block{border-left:0;border-top:1px solid var(--mapa-report-border);padding-left:0;padding-top:10px}.mapa-report-socio__cell-label{color:var(--mapa-report-muted);display:block;font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}}\n"] }]
|
|
8834
8835
|
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }] } });
|
|
8835
8836
|
|
|
8836
8837
|
class MapaReportPsychosocialWidgetComponent {
|
|
@@ -8853,7 +8854,7 @@ class MapaReportPsychosocialWidgetComponent {
|
|
|
8853
8854
|
: this.i18n.texts.report.positiveDirectionLabel;
|
|
8854
8855
|
}
|
|
8855
8856
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportPsychosocialWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportPsychosocialWidgetComponent, isStandalone: true, selector: "mapa-report-psychosocial-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (data().legendGroups?.length || data().readingIntro) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [intro]=\"data().readingIntro\"\n [groups]=\"data().legendGroups || []\"\n />\n }\n\n @if (data().globalAverage !== undefined) {\n <section class=\"mapa-report-psychosocial__global\">\n <h3>{{ i18n.texts.report.globalAverageTitle }}</h3>\n <mapa-result-track\n [name]=\"i18n.texts.report.globalAverageTitle\"\n [value]=\"data().globalAverage || 0\"\n />\n @if (data().globalDescription) {\n <div\n class=\"mapa-report-psychosocial__global-description\"\n [innerHTML]=\"data().globalDescription | safeHtml\"\n ></div>\n }\n </section>\n }\n\n @if (data().factors?.length) {\n <div class=\"mapa-report-psychosocial__factors\">\n @for (group of data().factors; track group.id) {\n <section class=\"mapa-report-psychosocial__group\">\n <h3>{{ group.name }}</h3>\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-psychosocial__factor\">\n <header>\n <h4>{{ indicator.name }}</h4>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"indicator.name\"\n [value]=\"indicator.value ?? 0\"\n [direction]=\"indicator.direction || 'positive'\"\n [color]=\"color(indicator)\"\n />\n <strong>{{ indicator.value ?? 0 }}%</strong>\n </header>\n\n @if (indicator.concept) {\n <section class=\"mapa-report-psychosocial__concept\">\n <h5>{{ i18n.texts.report.scaleConceptTitle }}</h5>\n <div\n class=\"mapa-report-psychosocial__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </section>\n }\n\n @if (indicator.description) {\n <div\n class=\"mapa-report-psychosocial__description\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n }\n\n @if (indicator.dimensions?.length) {\n <section class=\"mapa-report-psychosocial__dimensions\">\n <h5>{{ i18n.texts.report.psychosocialFactorsTitle }}</h5>\n <div class=\"mapa-report-psychosocial__dimension-list\">\n @for (dimension of indicator.dimensions; track dimension.id) {\n <div class=\"mapa-report-psychosocial__dimension\">\n <span class=\"mapa-report-psychosocial__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(\n dimension.direction || indicator.direction\n )\n \"\n >{{\n directionArrow(\n dimension.direction || indicator.direction\n )\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"dimension.name\"\n [value]=\"dimension.value ?? 0\"\n [direction]=\"\n dimension.direction ||\n indicator.direction ||\n 'positive'\n \"\n [color]=\"\n dimension.classification?.classificationColor ||\n color(indicator)\n \"\n />\n <strong>{{ dimension.value ?? 0 }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n </article>\n }\n </section>\n }\n </div>\n } @else if (data().globalAverage === undefined) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-psychosocial__global{align-items:center;background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;display:grid;gap:12px 24px;grid-template-columns:minmax(180px,.62fr) minmax(260px,1.38fr);padding:16px 18px}.mapa-report-psychosocial__global h3{font-size:14px;margin:0}.mapa-report-psychosocial__global>div{color:var(--mapa-report-muted);font-size:12px;grid-column:1/-1;line-height:1.55}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep p,.mapa-report-psychosocial__global>div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__global>div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__global>div ::ng-deep b,.mapa-report-psychosocial__global>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__global>div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__factors,.mapa-report-psychosocial__group{display:grid}.mapa-report-psychosocial__factors{gap:28px}.mapa-report-psychosocial__group{gap:12px}.mapa-report-psychosocial__group>h3{align-items:center;border-bottom:1px solid var(--mapa-report-border);color:var(--mapa-report-text);display:flex;font-size:18px;font-weight:600;gap:11px;line-height:1.25;margin:0;padding:2px 2px 12px}.mapa-report-psychosocial__group>h3:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px}.mapa-report-psychosocial__factor{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:13px;overflow:hidden}.mapa-report-psychosocial__factor>header{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(180px,1fr) minmax(260px,1.2fr) auto;padding:17px 18px 14px}.mapa-report-psychosocial__factor>header h4{color:#274866;font-size:17px;font-weight:500;line-height:1.25;margin:0}.mapa-report-psychosocial__factor>header>strong{color:var(--mapa-report-text);font-size:18px;text-align:right}.mapa-report-psychosocial__concept{background:#f8f9fa;border-radius:10px;margin:0 18px;padding:13px 14px}.mapa-report-psychosocial__concept div{color:var(--mapa-report-muted);font-size:12px;line-height:1.6}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep p,.mapa-report-psychosocial__concept div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__concept div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__concept div ::ng-deep b,.mapa-report-psychosocial__concept div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__concept div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.55;padding:14px 18px 0}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep p,.mapa-report-psychosocial__description ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__description ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__description ::ng-deep b,.mapa-report-psychosocial__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__concept h5,.mapa-report-psychosocial__dimensions h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;margin:0 0 8px;text-transform:uppercase}.mapa-report-psychosocial__concept h5:after,.mapa-report-psychosocial__dimensions h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-psychosocial__dimensions{padding:16px 18px 18px}.mapa-report-psychosocial__dimensions h5{margin-bottom:10px}.mapa-report-psychosocial__dimension-list{display:grid}.mapa-report-psychosocial__dimension{align-items:center;display:grid;gap:14px;grid-template-columns:212px minmax(220px,1fr) 45px;min-height:34px;padding:5px 0}.mapa-report-psychosocial__dimension+.mapa-report-psychosocial__dimension{border-top:1px solid #edf0f2}.mapa-report-psychosocial__dimension>strong{color:var(--mapa-report-muted);font-size:11px;text-align:right}.mapa-report-psychosocial__dimension-name{align-items:center;color:#3f5870;display:flex;font-size:12px;gap:7px;min-width:0}.mapa-report-psychosocial__dimension-name>span:last-child{overflow-wrap:anywhere}@media(max-width:760px){.mapa-report-psychosocial__global,.mapa-report-psychosocial__factor>header,.mapa-report-psychosocial__dimension{grid-template-columns:1fr}.mapa-report-psychosocial__factor>header{gap:8px}.mapa-report-psychosocial__factor>header>strong{text-align:left}.mapa-report-psychosocial__dimension{gap:4px}.mapa-report-psychosocial__dimension>strong{text-align:left}.mapa-report-psychosocial__concept{margin:0 14px}.mapa-report-psychosocial__dimensions{padding:14px}}\n"], dependencies: [{ kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportPsychosocialWidgetComponent, isStandalone: true, selector: "mapa-report-psychosocial-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (data().legendGroups?.length || data().readingIntro) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [intro]=\"data().readingIntro\"\n [groups]=\"data().legendGroups || []\"\n />\n }\n\n @if (data().globalAverage !== undefined) {\n <section class=\"mapa-report-psychosocial__global\">\n <h3>{{ i18n.texts.report.globalAverageTitle }}</h3>\n <mapa-result-track\n [name]=\"i18n.texts.report.globalAverageTitle\"\n [value]=\"data().globalAverage || 0\"\n />\n @if (data().globalDescription) {\n <div\n class=\"mapa-report-psychosocial__global-description\"\n [innerHTML]=\"data().globalDescription | safeHtml\"\n ></div>\n }\n </section>\n }\n\n @if (data().factors?.length) {\n <div class=\"mapa-report-psychosocial__factors\">\n @for (group of data().factors; track group.id) {\n <section class=\"mapa-report-psychosocial__group\">\n <h3>{{ group.name }}</h3>\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-psychosocial__factor\">\n <header>\n <h4>{{ indicator.name }}</h4>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"indicator.name\"\n [value]=\"indicator.value ?? 0\"\n [direction]=\"indicator.direction || 'positive'\"\n [color]=\"color(indicator)\"\n />\n <strong>{{ indicator.value ?? 0 }}%</strong>\n </header>\n\n @if (indicator.concept) {\n <section class=\"mapa-report-psychosocial__concept\">\n <h5>{{ i18n.texts.report.scaleConceptTitle }}</h5>\n <div\n class=\"mapa-report-psychosocial__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </section>\n }\n\n @if (indicator.description) {\n <div\n class=\"mapa-report-psychosocial__description\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n }\n\n @if (indicator.dimensions?.length) {\n <section class=\"mapa-report-psychosocial__dimensions\">\n <h5>{{ i18n.texts.report.psychosocialFactorsTitle }}</h5>\n <div class=\"mapa-report-psychosocial__dimension-list\">\n @for (dimension of indicator.dimensions; track dimension.id) {\n <div class=\"mapa-report-psychosocial__dimension\">\n <span class=\"mapa-report-psychosocial__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(\n dimension.direction || indicator.direction\n )\n \"\n >{{\n directionArrow(\n dimension.direction || indicator.direction\n )\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"dimension.name\"\n [value]=\"dimension.value ?? 0\"\n [direction]=\"\n dimension.direction ||\n indicator.direction ||\n 'positive'\n \"\n [color]=\"\n dimension.classification?.classificationColor ||\n color(indicator)\n \"\n />\n <strong>{{ dimension.value ?? 0 }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n </article>\n }\n </section>\n }\n </div>\n } @else if (data().globalAverage === undefined) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-psychosocial__global{align-items:center;background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;display:grid;gap:12px 24px;grid-template-columns:minmax(180px,.62fr) minmax(260px,1.38fr);padding:16px 18px}.mapa-report-psychosocial__global h3{font-size:14px;margin:0}.mapa-report-psychosocial__global>div{color:var(--mapa-report-muted);font-size:12px;grid-column:1/-1;line-height:1.55}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep p,.mapa-report-psychosocial__global>div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__global>div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__global>div ::ng-deep b,.mapa-report-psychosocial__global>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__global>div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__factors,.mapa-report-psychosocial__group{display:grid}.mapa-report-psychosocial__factors{gap:28px}.mapa-report-psychosocial__group{gap:12px}.mapa-report-psychosocial__group>h3{align-items:center;border-bottom:1px solid var(--mapa-report-border);color:var(--mapa-report-text);display:flex;font-size:18px;font-weight:600;gap:11px;line-height:1.25;margin:0;padding:2px 2px 12px}.mapa-report-psychosocial__group>h3:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px}.mapa-report-psychosocial__factor{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:13px;overflow:hidden}.mapa-report-psychosocial__factor>header{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(180px,1fr) minmax(260px,1.2fr) auto;padding:17px 18px 14px}.mapa-report-psychosocial__factor>header h4{color:#274866;font-size:17px;font-weight:500;line-height:1.25;margin:0}.mapa-report-psychosocial__factor>header>strong{color:var(--mapa-report-text);font-size:18px;text-align:right}.mapa-report-psychosocial__concept{background:#f8f9fa;border-radius:10px;margin:0 18px;padding:13px 14px}.mapa-report-psychosocial__concept div{color:var(--mapa-report-muted);font-size:12px;line-height:1.6}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep p,.mapa-report-psychosocial__concept div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__concept div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__concept div ::ng-deep b,.mapa-report-psychosocial__concept div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__concept div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.55;padding:14px 18px 0}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep p,.mapa-report-psychosocial__description ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__description ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__description ::ng-deep b,.mapa-report-psychosocial__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__concept h5,.mapa-report-psychosocial__dimensions h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;margin:0 0 8px;text-transform:uppercase}.mapa-report-psychosocial__concept h5:after,.mapa-report-psychosocial__dimensions h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-psychosocial__dimensions{padding:16px 18px 18px}.mapa-report-psychosocial__dimensions h5{margin-bottom:10px}.mapa-report-psychosocial__dimension-list{display:grid}.mapa-report-psychosocial__dimension{align-items:center;display:grid;gap:14px;grid-template-columns:212px minmax(220px,1fr) 45px;min-height:34px;padding:5px 0}.mapa-report-psychosocial__dimension+.mapa-report-psychosocial__dimension{border-top:1px solid #edf0f2}.mapa-report-psychosocial__dimension>strong{color:var(--mapa-report-muted);font-size:11px;text-align:right}.mapa-report-psychosocial__dimension-name{align-items:center;color:#3f5870;display:flex;font-size:12px;gap:7px;min-width:0}.mapa-report-psychosocial__dimension-name>span:last-child{overflow-wrap:anywhere}@media(max-width:760px){.mapa-report-psychosocial__global,.mapa-report-psychosocial__factor>header,.mapa-report-psychosocial__dimension{grid-template-columns:1fr}.mapa-report-psychosocial__factor>header{gap:8px}.mapa-report-psychosocial__factor>header>strong{text-align:left}.mapa-report-psychosocial__dimension{gap:4px}.mapa-report-psychosocial__dimension>strong{text-align:left}.mapa-report-psychosocial__concept{margin:0 14px}.mapa-report-psychosocial__dimensions{padding:14px}}\n"], dependencies: [{ kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8857
8858
|
}
|
|
8858
8859
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportPsychosocialWidgetComponent, decorators: [{
|
|
8859
8860
|
type: Component,
|
|
@@ -8861,7 +8862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
8861
8862
|
MapaReportLegendComponent,
|
|
8862
8863
|
MapaResultTrackComponent,
|
|
8863
8864
|
SafeHtmlPipe,
|
|
8864
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (data().legendGroups?.length || data().readingIntro) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [intro]=\"data().readingIntro\"\n [groups]=\"data().legendGroups || []\"\n />\n }\n\n @if (data().globalAverage !== undefined) {\n <section class=\"mapa-report-psychosocial__global\">\n <h3>{{ i18n.texts.report.globalAverageTitle }}</h3>\n <mapa-result-track\n [name]=\"i18n.texts.report.globalAverageTitle\"\n [value]=\"data().globalAverage || 0\"\n />\n @if (data().globalDescription) {\n <div\n class=\"mapa-report-psychosocial__global-description\"\n [innerHTML]=\"data().globalDescription | safeHtml\"\n ></div>\n }\n </section>\n }\n\n @if (data().factors?.length) {\n <div class=\"mapa-report-psychosocial__factors\">\n @for (group of data().factors; track group.id) {\n <section class=\"mapa-report-psychosocial__group\">\n <h3>{{ group.name }}</h3>\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-psychosocial__factor\">\n <header>\n <h4>{{ indicator.name }}</h4>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"indicator.name\"\n [value]=\"indicator.value ?? 0\"\n [direction]=\"indicator.direction || 'positive'\"\n [color]=\"color(indicator)\"\n />\n <strong>{{ indicator.value ?? 0 }}%</strong>\n </header>\n\n @if (indicator.concept) {\n <section class=\"mapa-report-psychosocial__concept\">\n <h5>{{ i18n.texts.report.scaleConceptTitle }}</h5>\n <div\n class=\"mapa-report-psychosocial__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </section>\n }\n\n @if (indicator.description) {\n <div\n class=\"mapa-report-psychosocial__description\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n }\n\n @if (indicator.dimensions?.length) {\n <section class=\"mapa-report-psychosocial__dimensions\">\n <h5>{{ i18n.texts.report.psychosocialFactorsTitle }}</h5>\n <div class=\"mapa-report-psychosocial__dimension-list\">\n @for (dimension of indicator.dimensions; track dimension.id) {\n <div class=\"mapa-report-psychosocial__dimension\">\n <span class=\"mapa-report-psychosocial__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(\n dimension.direction || indicator.direction\n )\n \"\n >{{\n directionArrow(\n dimension.direction || indicator.direction\n )\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"dimension.name\"\n [value]=\"dimension.value ?? 0\"\n [direction]=\"\n dimension.direction ||\n indicator.direction ||\n 'positive'\n \"\n [color]=\"\n dimension.classification?.classificationColor ||\n color(indicator)\n \"\n />\n <strong>{{ dimension.value ?? 0 }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n </article>\n }\n </section>\n }\n </div>\n } @else if (data().globalAverage === undefined) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-psychosocial__global{align-items:center;background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;display:grid;gap:12px 24px;grid-template-columns:minmax(180px,.62fr) minmax(260px,1.38fr);padding:16px 18px}.mapa-report-psychosocial__global h3{font-size:14px;margin:0}.mapa-report-psychosocial__global>div{color:var(--mapa-report-muted);font-size:12px;grid-column:1/-1;line-height:1.55}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep p,.mapa-report-psychosocial__global>div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__global>div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__global>div ::ng-deep b,.mapa-report-psychosocial__global>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__global>div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__factors,.mapa-report-psychosocial__group{display:grid}.mapa-report-psychosocial__factors{gap:28px}.mapa-report-psychosocial__group{gap:12px}.mapa-report-psychosocial__group>h3{align-items:center;border-bottom:1px solid var(--mapa-report-border);color:var(--mapa-report-text);display:flex;font-size:18px;font-weight:600;gap:11px;line-height:1.25;margin:0;padding:2px 2px 12px}.mapa-report-psychosocial__group>h3:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px}.mapa-report-psychosocial__factor{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:13px;overflow:hidden}.mapa-report-psychosocial__factor>header{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(180px,1fr) minmax(260px,1.2fr) auto;padding:17px 18px 14px}.mapa-report-psychosocial__factor>header h4{color:#274866;font-size:17px;font-weight:500;line-height:1.25;margin:0}.mapa-report-psychosocial__factor>header>strong{color:var(--mapa-report-text);font-size:18px;text-align:right}.mapa-report-psychosocial__concept{background:#f8f9fa;border-radius:10px;margin:0 18px;padding:13px 14px}.mapa-report-psychosocial__concept div{color:var(--mapa-report-muted);font-size:12px;line-height:1.6}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep p,.mapa-report-psychosocial__concept div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__concept div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__concept div ::ng-deep b,.mapa-report-psychosocial__concept div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__concept div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.55;padding:14px 18px 0}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep p,.mapa-report-psychosocial__description ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__description ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__description ::ng-deep b,.mapa-report-psychosocial__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__concept h5,.mapa-report-psychosocial__dimensions h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;margin:0 0 8px;text-transform:uppercase}.mapa-report-psychosocial__concept h5:after,.mapa-report-psychosocial__dimensions h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-psychosocial__dimensions{padding:16px 18px 18px}.mapa-report-psychosocial__dimensions h5{margin-bottom:10px}.mapa-report-psychosocial__dimension-list{display:grid}.mapa-report-psychosocial__dimension{align-items:center;display:grid;gap:14px;grid-template-columns:212px minmax(220px,1fr) 45px;min-height:34px;padding:5px 0}.mapa-report-psychosocial__dimension+.mapa-report-psychosocial__dimension{border-top:1px solid #edf0f2}.mapa-report-psychosocial__dimension>strong{color:var(--mapa-report-muted);font-size:11px;text-align:right}.mapa-report-psychosocial__dimension-name{align-items:center;color:#3f5870;display:flex;font-size:12px;gap:7px;min-width:0}.mapa-report-psychosocial__dimension-name>span:last-child{overflow-wrap:anywhere}@media(max-width:760px){.mapa-report-psychosocial__global,.mapa-report-psychosocial__factor>header,.mapa-report-psychosocial__dimension{grid-template-columns:1fr}.mapa-report-psychosocial__factor>header{gap:8px}.mapa-report-psychosocial__factor>header>strong{text-align:left}.mapa-report-psychosocial__dimension{gap:4px}.mapa-report-psychosocial__dimension>strong{text-align:left}.mapa-report-psychosocial__concept{margin:0 14px}.mapa-report-psychosocial__dimensions{padding:14px}}\n"] }]
|
|
8865
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (data().legendGroups?.length || data().readingIntro) {\n <mapa-report-legend\n appearance=\"psychosocial\"\n [intro]=\"data().readingIntro\"\n [groups]=\"data().legendGroups || []\"\n />\n }\n\n @if (data().globalAverage !== undefined) {\n <section class=\"mapa-report-psychosocial__global\">\n <h3>{{ i18n.texts.report.globalAverageTitle }}</h3>\n <mapa-result-track\n [name]=\"i18n.texts.report.globalAverageTitle\"\n [value]=\"data().globalAverage || 0\"\n />\n @if (data().globalDescription) {\n <div\n class=\"mapa-report-psychosocial__global-description\"\n [innerHTML]=\"data().globalDescription | safeHtml\"\n ></div>\n }\n </section>\n }\n\n @if (data().factors?.length) {\n <div class=\"mapa-report-psychosocial__factors\">\n @for (group of data().factors; track group.id) {\n <section class=\"mapa-report-psychosocial__group\">\n <h3>{{ group.name }}</h3>\n @for (indicator of group.indicators; track indicator.id) {\n <article class=\"mapa-report-psychosocial__factor\">\n <header>\n <h4>{{ indicator.name }}</h4>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"indicator.name\"\n [value]=\"indicator.value ?? 0\"\n [direction]=\"indicator.direction || 'positive'\"\n [color]=\"color(indicator)\"\n />\n <strong>{{ indicator.value ?? 0 }}%</strong>\n </header>\n\n @if (indicator.concept) {\n <section class=\"mapa-report-psychosocial__concept\">\n <h5>{{ i18n.texts.report.scaleConceptTitle }}</h5>\n <div\n class=\"mapa-report-psychosocial__copy\"\n [innerHTML]=\"indicator.concept | safeHtml\"\n ></div>\n </section>\n }\n\n @if (indicator.description) {\n <div\n class=\"mapa-report-psychosocial__description\"\n [innerHTML]=\"indicator.description | safeHtml\"\n ></div>\n }\n\n @if (indicator.dimensions?.length) {\n <section class=\"mapa-report-psychosocial__dimensions\">\n <h5>{{ i18n.texts.report.psychosocialFactorsTitle }}</h5>\n <div class=\"mapa-report-psychosocial__dimension-list\">\n @for (dimension of indicator.dimensions; track dimension.id) {\n <div class=\"mapa-report-psychosocial__dimension\">\n <span class=\"mapa-report-psychosocial__dimension-name\">\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(\n dimension.direction || indicator.direction\n )\n \"\n >{{\n directionArrow(\n dimension.direction || indicator.direction\n )\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n <mapa-result-track\n mode=\"diverging\"\n [name]=\"dimension.name\"\n [value]=\"dimension.value ?? 0\"\n [direction]=\"\n dimension.direction ||\n indicator.direction ||\n 'positive'\n \"\n [color]=\"\n dimension.classification?.classificationColor ||\n color(indicator)\n \"\n />\n <strong>{{ dimension.value ?? 0 }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n </article>\n }\n </section>\n }\n </div>\n } @else if (data().globalAverage === undefined) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-psychosocial__global{align-items:center;background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:12px;display:grid;gap:12px 24px;grid-template-columns:minmax(180px,.62fr) minmax(260px,1.38fr);padding:16px 18px}.mapa-report-psychosocial__global h3{font-size:14px;margin:0}.mapa-report-psychosocial__global>div{color:var(--mapa-report-muted);font-size:12px;grid-column:1/-1;line-height:1.55}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep p,.mapa-report-psychosocial__global>div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__global>div ::ng-deep ol,.mapa-report-psychosocial__global>div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__global>div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__global>div ::ng-deep b,.mapa-report-psychosocial__global>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__global>div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__factors,.mapa-report-psychosocial__group{display:grid}.mapa-report-psychosocial__factors{gap:28px}.mapa-report-psychosocial__group{gap:12px}.mapa-report-psychosocial__group>h3{align-items:center;border-bottom:1px solid var(--mapa-report-border);color:var(--mapa-report-text);display:flex;font-size:18px;font-weight:600;gap:11px;line-height:1.25;margin:0;padding:2px 2px 12px}.mapa-report-psychosocial__group>h3:before{background:var(--mapa-report-accent);border-radius:4px;content:\"\";flex:0 0 4px;height:24px}.mapa-report-psychosocial__factor{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:13px;overflow:hidden}.mapa-report-psychosocial__factor>header{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(180px,1fr) minmax(260px,1.2fr) auto;padding:17px 18px 14px}.mapa-report-psychosocial__factor>header h4{color:#274866;font-size:17px;font-weight:500;line-height:1.25;margin:0}.mapa-report-psychosocial__factor>header>strong{color:var(--mapa-report-text);font-size:18px;text-align:right}.mapa-report-psychosocial__concept{background:#f8f9fa;border-radius:10px;margin:0 18px;padding:13px 14px}.mapa-report-psychosocial__concept div{color:var(--mapa-report-muted);font-size:12px;line-height:1.6}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep p,.mapa-report-psychosocial__concept div ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__concept div ::ng-deep ol,.mapa-report-psychosocial__concept div ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__concept div ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__concept div ::ng-deep b,.mapa-report-psychosocial__concept div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__concept div ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.55;padding:14px 18px 0}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep p,.mapa-report-psychosocial__description ::ng-deep ul{margin:0 0 8px}.mapa-report-psychosocial__description ::ng-deep ol,.mapa-report-psychosocial__description ::ng-deep ul{padding-left:20px}.mapa-report-psychosocial__description ::ng-deep li{margin:0 0 3px}.mapa-report-psychosocial__description ::ng-deep b,.mapa-report-psychosocial__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-psychosocial__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-psychosocial__concept h5,.mapa-report-psychosocial__dimensions h5{align-items:center;color:#53646e;display:flex;font-size:10px;font-weight:800;gap:10px;letter-spacing:.06em;margin:0 0 8px;text-transform:uppercase}.mapa-report-psychosocial__concept h5:after,.mapa-report-psychosocial__dimensions h5:after{background:var(--mapa-report-border);content:\"\";flex:1;height:1px}.mapa-report-psychosocial__dimensions{padding:16px 18px 18px}.mapa-report-psychosocial__dimensions h5{margin-bottom:10px}.mapa-report-psychosocial__dimension-list{display:grid}.mapa-report-psychosocial__dimension{align-items:center;display:grid;gap:14px;grid-template-columns:212px minmax(220px,1fr) 45px;min-height:34px;padding:5px 0}.mapa-report-psychosocial__dimension+.mapa-report-psychosocial__dimension{border-top:1px solid #edf0f2}.mapa-report-psychosocial__dimension>strong{color:var(--mapa-report-muted);font-size:11px;text-align:right}.mapa-report-psychosocial__dimension-name{align-items:center;color:#3f5870;display:flex;font-size:12px;gap:7px;min-width:0}.mapa-report-psychosocial__dimension-name>span:last-child{overflow-wrap:anywhere}@media(max-width:760px){.mapa-report-psychosocial__global,.mapa-report-psychosocial__factor>header,.mapa-report-psychosocial__dimension{grid-template-columns:1fr}.mapa-report-psychosocial__factor>header{gap:8px}.mapa-report-psychosocial__factor>header>strong{text-align:left}.mapa-report-psychosocial__dimension{gap:4px}.mapa-report-psychosocial__dimension>strong{text-align:left}.mapa-report-psychosocial__concept{margin:0 14px}.mapa-report-psychosocial__dimensions{padding:14px}}\n"] }]
|
|
8865
8866
|
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }] } });
|
|
8866
8867
|
|
|
8867
8868
|
class MapaReportPointsWidgetComponent {
|
|
@@ -8879,11 +8880,11 @@ class MapaReportPointsWidgetComponent {
|
|
|
8879
8880
|
return this.i18n.texts.report.itemCountLabel(count);
|
|
8880
8881
|
}
|
|
8881
8882
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportPointsWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8882
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportPointsWidgetComponent, isStandalone: true, selector: "mapa-report-points-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle\n value=\"summarized\"\n [aria-label]=\"i18n.texts.report.summarized\"\n >\n <mat-icon aria-hidden=\"true\">view_list</mat-icon>\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle\n value=\"detailed\"\n [aria-label]=\"i18n.texts.report.detailed\"\n >\n <mat-icon aria-hidden=\"true\">article</mat-icon>\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (!data().strong.length && !data().attention.length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <div\n class=\"mapa-report-points\"\n [class.mapa-report-points--detailed]=\"mode() === 'detailed'\"\n >\n <section\n class=\"mapa-report-points__group mapa-report-points__group--strong\"\n >\n <header class=\"mapa-report-points__group-header\">\n <div>\n <h3>\n {{\n data().strongHeading?.title ||\n i18n.texts.report.strongPointsTitle\n }}\n </h3>\n @if (data().strongHeading?.description) {\n <div\n class=\"mapa-report-points__group-description\"\n [innerHTML]=\"data().strongHeading?.description | safeHtml\"\n ></div>\n }\n </div>\n <span class=\"mapa-report-points__count\">{{\n countLabel(data().strong.length)\n }}</span>\n </header>\n <div class=\"mapa-report-points__items\">\n @for (item of data().strong; track item.id) {\n @if (mode() === \"summarized\") {\n <details class=\"mapa-report-point\">\n <summary>\n <span class=\"mapa-report-point__label\">\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#2c93dc')\"\n ></span>\n <span>{{ item.name }}</span>\n </span>\n <mat-icon class=\"mapa-report-point__arrow\" aria-hidden=\"true\"\n >expand_more</mat-icon\n >\n </summary>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </details>\n } @else {\n <article class=\"mapa-report-point mapa-report-point--card\">\n <h4>\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#2c93dc')\"\n ></span\n >{{ item.name }}\n </h4>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </article>\n }\n }\n </div>\n </section>\n\n <section\n class=\"mapa-report-points__group mapa-report-points__group--attention\"\n >\n <header class=\"mapa-report-points__group-header\">\n <div>\n <h3>\n {{\n data().attentionHeading?.title ||\n i18n.texts.report.attentionPointsTitle\n }}\n </h3>\n @if (data().attentionHeading?.description) {\n <div\n class=\"mapa-report-points__group-description\"\n [innerHTML]=\"data().attentionHeading?.description | safeHtml\"\n ></div>\n }\n </div>\n <span class=\"mapa-report-points__count\">{{\n countLabel(data().attention.length)\n }}</span>\n </header>\n <div class=\"mapa-report-points__items\">\n @for (item of data().attention; track item.id) {\n @if (mode() === \"summarized\") {\n <details class=\"mapa-report-point\">\n <summary>\n <span class=\"mapa-report-point__label\">\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#e84d68')\"\n ></span>\n <span>{{ item.name }}</span>\n </span>\n <mat-icon class=\"mapa-report-point__arrow\" aria-hidden=\"true\"\n >expand_more</mat-icon\n >\n </summary>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </details>\n } @else {\n <article class=\"mapa-report-point mapa-report-point--card\">\n <h4>\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#e84d68')\"\n ></span\n >{{ item.name }}\n </h4>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </article>\n }\n }\n </div>\n </section>\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-report-points{display:grid;gap:22px}.mapa-report-points__group{display:grid;gap:17px;padding:20px;border:1px solid;border-radius:13px}.mapa-report-points__group--strong{background:#f8faff;border-color:#cbd9ff}.mapa-report-points__group--strong .mapa-report-points__count{background:#f1f5ff;border-color:#c7d7ff;color:#315fcc}.mapa-report-points__group--attention{background:#fffaf9;border-color:#ffd0ca}.mapa-report-points__group--attention .mapa-report-points__count{background:#fff5f3;border-color:#ffc9c3;color:#d94d43}.mapa-report-points__group-header{align-items:flex-end;column-gap:15px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-points__group-header>div{display:contents}.mapa-report-points__group-header h3{font-size:16px;font-weight:500;grid-column:1;grid-row:1;margin:0}.mapa-report-points__group-description{color:var(--mapa-report-muted);font-size:12px;grid-column:1/-1;grid-row:2;line-height:1.35;margin:5px 0 0}.mapa-report-points__group-description ::ng-deep ol,.mapa-report-points__group-description ::ng-deep p,.mapa-report-points__group-description ::ng-deep ul{margin:0 0 8px}.mapa-report-points__group-description ::ng-deep ol,.mapa-report-points__group-description ::ng-deep ul{padding-left:20px}.mapa-report-points__group-description ::ng-deep li{margin:0 0 3px}.mapa-report-points__group-description ::ng-deep b,.mapa-report-points__group-description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-points__group-description ::ng-deep :last-child{margin-bottom:0}.mapa-report-points__count{align-self:end;border:1px solid;border-radius:999px;font-size:10px;font-weight:600;grid-column:2;grid-row:1;padding:5px 10px}.mapa-report-points__items{display:grid;gap:9px 12px;grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-point{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:9px;overflow:hidden}.mapa-report-point[open]{border-color:#b9c9d3;box-shadow:0 5px 14px #233d4e0f}.mapa-report-point[open] .mapa-report-point__arrow{transform:rotate(180deg)}.mapa-report-point summary{align-items:center;cursor:pointer;display:flex;font-size:13px;gap:12px;justify-content:space-between;list-style:none;min-height:43px;padding:10px 12px}.mapa-report-point summary::-webkit-details-marker{display:none}.mapa-report-point summary:focus-visible{outline:3px solid rgba(255,86,11,.28);outline-offset:-3px}.mapa-report-point>div{border-top:1px solid #e8eef1;color:var(--mapa-report-muted);font-size:11px;line-height:1.5;padding:10px 12px 12px 28px}.mapa-report-point>div ::ng-deep ol,.mapa-report-point>div ::ng-deep p,.mapa-report-point>div ::ng-deep ul{margin:0 0 8px}.mapa-report-point>div ::ng-deep ol,.mapa-report-point>div ::ng-deep ul{padding-left:20px}.mapa-report-point>div ::ng-deep li{margin:0 0 3px}.mapa-report-point>div ::ng-deep b,.mapa-report-point>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-point>div ::ng-deep :last-child{margin-bottom:0}.mapa-report-point--card{background:var(--mapa-report-surface);padding:14px}.mapa-report-point--card h4{align-items:center;display:flex;font-size:12px;gap:9px;margin:0}.mapa-report-point--card>div{padding:8px 0 0 16px}.mapa-report-point__dot{border-radius:50%;flex:0 0 7px;height:7px;width:7px}.mapa-report-point__label{align-items:center;display:flex;gap:9px;min-width:0}.mapa-report-point__label span:last-child{overflow-wrap:anywhere}.mapa-report-point__arrow{color:#788a95;flex:0 0 16px;font-size:16px;height:16px;transition:transform .18s cubic-bezier(.25,1,.5,1);width:16px}@media(max-width:760px){.mapa-report-points__items{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8883
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportPointsWidgetComponent, isStandalone: true, selector: "mapa-report-points-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle\n value=\"summarized\"\n [aria-label]=\"i18n.texts.report.summarized\"\n >\n <mat-icon aria-hidden=\"true\">view_list</mat-icon>\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle\n value=\"detailed\"\n [aria-label]=\"i18n.texts.report.detailed\"\n >\n <mat-icon aria-hidden=\"true\">article</mat-icon>\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (!data().strong.length && !data().attention.length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <div\n class=\"mapa-report-points\"\n [class.mapa-report-points--detailed]=\"mode() === 'detailed'\"\n >\n <section\n class=\"mapa-report-points__group mapa-report-points__group--strong\"\n >\n <header class=\"mapa-report-points__group-header\">\n <div>\n <h3>\n {{\n data().strongHeading?.title ||\n i18n.texts.report.strongPointsTitle\n }}\n </h3>\n @if (data().strongHeading?.description) {\n <div\n class=\"mapa-report-points__group-description\"\n [innerHTML]=\"data().strongHeading?.description | safeHtml\"\n ></div>\n }\n </div>\n <span class=\"mapa-report-points__count\">{{\n countLabel(data().strong.length)\n }}</span>\n </header>\n <div class=\"mapa-report-points__items\">\n @for (item of data().strong; track item.id) {\n @if (mode() === \"summarized\") {\n <details class=\"mapa-report-point\">\n <summary>\n <span class=\"mapa-report-point__label\">\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#2c93dc')\"\n ></span>\n <span>{{ item.name }}</span>\n </span>\n <mat-icon class=\"mapa-report-point__arrow\" aria-hidden=\"true\"\n >expand_more</mat-icon\n >\n </summary>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </details>\n } @else {\n <article class=\"mapa-report-point mapa-report-point--card\">\n <h4>\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#2c93dc')\"\n ></span\n >{{ item.name }}\n </h4>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </article>\n }\n }\n </div>\n </section>\n\n <section\n class=\"mapa-report-points__group mapa-report-points__group--attention\"\n >\n <header class=\"mapa-report-points__group-header\">\n <div>\n <h3>\n {{\n data().attentionHeading?.title ||\n i18n.texts.report.attentionPointsTitle\n }}\n </h3>\n @if (data().attentionHeading?.description) {\n <div\n class=\"mapa-report-points__group-description\"\n [innerHTML]=\"data().attentionHeading?.description | safeHtml\"\n ></div>\n }\n </div>\n <span class=\"mapa-report-points__count\">{{\n countLabel(data().attention.length)\n }}</span>\n </header>\n <div class=\"mapa-report-points__items\">\n @for (item of data().attention; track item.id) {\n @if (mode() === \"summarized\") {\n <details class=\"mapa-report-point\">\n <summary>\n <span class=\"mapa-report-point__label\">\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#e84d68')\"\n ></span>\n <span>{{ item.name }}</span>\n </span>\n <mat-icon class=\"mapa-report-point__arrow\" aria-hidden=\"true\"\n >expand_more</mat-icon\n >\n </summary>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </details>\n } @else {\n <article class=\"mapa-report-point mapa-report-point--card\">\n <h4>\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#e84d68')\"\n ></span\n >{{ item.name }}\n </h4>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </article>\n }\n }\n </div>\n </section>\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-report-points{display:grid;gap:22px}.mapa-report-points__group{display:grid;gap:17px;padding:20px;border:1px solid;border-radius:13px}.mapa-report-points__group--strong{background:#f8faff;border-color:#cbd9ff}.mapa-report-points__group--strong .mapa-report-points__count{background:#f1f5ff;border-color:#c7d7ff;color:#315fcc}.mapa-report-points__group--attention{background:#fffaf9;border-color:#ffd0ca}.mapa-report-points__group--attention .mapa-report-points__count{background:#fff5f3;border-color:#ffc9c3;color:#d94d43}.mapa-report-points__group-header{align-items:flex-end;column-gap:15px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-points__group-header>div{display:contents}.mapa-report-points__group-header h3{font-size:16px;font-weight:500;grid-column:1;grid-row:1;margin:0}.mapa-report-points__group-description{color:var(--mapa-report-muted);font-size:12px;grid-column:1/-1;grid-row:2;line-height:1.35;margin:5px 0 0}.mapa-report-points__group-description ::ng-deep ol,.mapa-report-points__group-description ::ng-deep p,.mapa-report-points__group-description ::ng-deep ul{margin:0 0 8px}.mapa-report-points__group-description ::ng-deep ol,.mapa-report-points__group-description ::ng-deep ul{padding-left:20px}.mapa-report-points__group-description ::ng-deep li{margin:0 0 3px}.mapa-report-points__group-description ::ng-deep b,.mapa-report-points__group-description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-points__group-description ::ng-deep :last-child{margin-bottom:0}.mapa-report-points__count{align-self:end;border:1px solid;border-radius:999px;font-size:10px;font-weight:600;grid-column:2;grid-row:1;padding:5px 10px}.mapa-report-points__items{display:grid;gap:9px 12px;grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-point{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:9px;overflow:hidden}.mapa-report-point[open]{border-color:#b9c9d3;box-shadow:0 5px 14px #233d4e0f}.mapa-report-point[open] .mapa-report-point__arrow{transform:rotate(180deg)}.mapa-report-point summary{align-items:center;cursor:pointer;display:flex;font-size:13px;gap:12px;justify-content:space-between;list-style:none;min-height:43px;padding:10px 12px}.mapa-report-point summary::-webkit-details-marker{display:none}.mapa-report-point summary:focus-visible{outline:3px solid rgba(255,86,11,.28);outline-offset:-3px}.mapa-report-point>div{border-top:1px solid #e8eef1;color:var(--mapa-report-muted);font-size:11px;line-height:1.5;padding:10px 12px 12px 28px}.mapa-report-point>div ::ng-deep ol,.mapa-report-point>div ::ng-deep p,.mapa-report-point>div ::ng-deep ul{margin:0 0 8px}.mapa-report-point>div ::ng-deep ol,.mapa-report-point>div ::ng-deep ul{padding-left:20px}.mapa-report-point>div ::ng-deep li{margin:0 0 3px}.mapa-report-point>div ::ng-deep b,.mapa-report-point>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-point>div ::ng-deep :last-child{margin-bottom:0}.mapa-report-point--card{background:var(--mapa-report-surface);padding:14px}.mapa-report-point--card h4{align-items:center;display:flex;font-size:12px;gap:9px;margin:0}.mapa-report-point--card>div{padding:8px 0 0 16px}.mapa-report-point__dot{border-radius:50%;flex:0 0 7px;height:7px;width:7px}.mapa-report-point__label{align-items:center;display:flex;gap:9px;min-width:0}.mapa-report-point__label span:last-child{overflow-wrap:anywhere}.mapa-report-point__arrow{color:#788a95;flex:0 0 16px;font-size:16px;height:16px;transition:transform .18s cubic-bezier(.25,1,.5,1);width:16px}@media(max-width:760px){.mapa-report-points__items{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8883
8884
|
}
|
|
8884
8885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportPointsWidgetComponent, decorators: [{
|
|
8885
8886
|
type: Component,
|
|
8886
|
-
args: [{ selector: 'mapa-report-points-widget', standalone: true, imports: [MatButtonToggleModule, MatIconModule, SafeHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle\n value=\"summarized\"\n [aria-label]=\"i18n.texts.report.summarized\"\n >\n <mat-icon aria-hidden=\"true\">view_list</mat-icon>\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle\n value=\"detailed\"\n [aria-label]=\"i18n.texts.report.detailed\"\n >\n <mat-icon aria-hidden=\"true\">article</mat-icon>\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (!data().strong.length && !data().attention.length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <div\n class=\"mapa-report-points\"\n [class.mapa-report-points--detailed]=\"mode() === 'detailed'\"\n >\n <section\n class=\"mapa-report-points__group mapa-report-points__group--strong\"\n >\n <header class=\"mapa-report-points__group-header\">\n <div>\n <h3>\n {{\n data().strongHeading?.title ||\n i18n.texts.report.strongPointsTitle\n }}\n </h3>\n @if (data().strongHeading?.description) {\n <div\n class=\"mapa-report-points__group-description\"\n [innerHTML]=\"data().strongHeading?.description | safeHtml\"\n ></div>\n }\n </div>\n <span class=\"mapa-report-points__count\">{{\n countLabel(data().strong.length)\n }}</span>\n </header>\n <div class=\"mapa-report-points__items\">\n @for (item of data().strong; track item.id) {\n @if (mode() === \"summarized\") {\n <details class=\"mapa-report-point\">\n <summary>\n <span class=\"mapa-report-point__label\">\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#2c93dc')\"\n ></span>\n <span>{{ item.name }}</span>\n </span>\n <mat-icon class=\"mapa-report-point__arrow\" aria-hidden=\"true\"\n >expand_more</mat-icon\n >\n </summary>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </details>\n } @else {\n <article class=\"mapa-report-point mapa-report-point--card\">\n <h4>\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#2c93dc')\"\n ></span\n >{{ item.name }}\n </h4>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </article>\n }\n }\n </div>\n </section>\n\n <section\n class=\"mapa-report-points__group mapa-report-points__group--attention\"\n >\n <header class=\"mapa-report-points__group-header\">\n <div>\n <h3>\n {{\n data().attentionHeading?.title ||\n i18n.texts.report.attentionPointsTitle\n }}\n </h3>\n @if (data().attentionHeading?.description) {\n <div\n class=\"mapa-report-points__group-description\"\n [innerHTML]=\"data().attentionHeading?.description | safeHtml\"\n ></div>\n }\n </div>\n <span class=\"mapa-report-points__count\">{{\n countLabel(data().attention.length)\n }}</span>\n </header>\n <div class=\"mapa-report-points__items\">\n @for (item of data().attention; track item.id) {\n @if (mode() === \"summarized\") {\n <details class=\"mapa-report-point\">\n <summary>\n <span class=\"mapa-report-point__label\">\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#e84d68')\"\n ></span>\n <span>{{ item.name }}</span>\n </span>\n <mat-icon class=\"mapa-report-point__arrow\" aria-hidden=\"true\"\n >expand_more</mat-icon\n >\n </summary>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </details>\n } @else {\n <article class=\"mapa-report-point mapa-report-point--card\">\n <h4>\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#e84d68')\"\n ></span\n >{{ item.name }}\n </h4>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </article>\n }\n }\n </div>\n </section>\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-report-points{display:grid;gap:22px}.mapa-report-points__group{display:grid;gap:17px;padding:20px;border:1px solid;border-radius:13px}.mapa-report-points__group--strong{background:#f8faff;border-color:#cbd9ff}.mapa-report-points__group--strong .mapa-report-points__count{background:#f1f5ff;border-color:#c7d7ff;color:#315fcc}.mapa-report-points__group--attention{background:#fffaf9;border-color:#ffd0ca}.mapa-report-points__group--attention .mapa-report-points__count{background:#fff5f3;border-color:#ffc9c3;color:#d94d43}.mapa-report-points__group-header{align-items:flex-end;column-gap:15px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-points__group-header>div{display:contents}.mapa-report-points__group-header h3{font-size:16px;font-weight:500;grid-column:1;grid-row:1;margin:0}.mapa-report-points__group-description{color:var(--mapa-report-muted);font-size:12px;grid-column:1/-1;grid-row:2;line-height:1.35;margin:5px 0 0}.mapa-report-points__group-description ::ng-deep ol,.mapa-report-points__group-description ::ng-deep p,.mapa-report-points__group-description ::ng-deep ul{margin:0 0 8px}.mapa-report-points__group-description ::ng-deep ol,.mapa-report-points__group-description ::ng-deep ul{padding-left:20px}.mapa-report-points__group-description ::ng-deep li{margin:0 0 3px}.mapa-report-points__group-description ::ng-deep b,.mapa-report-points__group-description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-points__group-description ::ng-deep :last-child{margin-bottom:0}.mapa-report-points__count{align-self:end;border:1px solid;border-radius:999px;font-size:10px;font-weight:600;grid-column:2;grid-row:1;padding:5px 10px}.mapa-report-points__items{display:grid;gap:9px 12px;grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-point{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:9px;overflow:hidden}.mapa-report-point[open]{border-color:#b9c9d3;box-shadow:0 5px 14px #233d4e0f}.mapa-report-point[open] .mapa-report-point__arrow{transform:rotate(180deg)}.mapa-report-point summary{align-items:center;cursor:pointer;display:flex;font-size:13px;gap:12px;justify-content:space-between;list-style:none;min-height:43px;padding:10px 12px}.mapa-report-point summary::-webkit-details-marker{display:none}.mapa-report-point summary:focus-visible{outline:3px solid rgba(255,86,11,.28);outline-offset:-3px}.mapa-report-point>div{border-top:1px solid #e8eef1;color:var(--mapa-report-muted);font-size:11px;line-height:1.5;padding:10px 12px 12px 28px}.mapa-report-point>div ::ng-deep ol,.mapa-report-point>div ::ng-deep p,.mapa-report-point>div ::ng-deep ul{margin:0 0 8px}.mapa-report-point>div ::ng-deep ol,.mapa-report-point>div ::ng-deep ul{padding-left:20px}.mapa-report-point>div ::ng-deep li{margin:0 0 3px}.mapa-report-point>div ::ng-deep b,.mapa-report-point>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-point>div ::ng-deep :last-child{margin-bottom:0}.mapa-report-point--card{background:var(--mapa-report-surface);padding:14px}.mapa-report-point--card h4{align-items:center;display:flex;font-size:12px;gap:9px;margin:0}.mapa-report-point--card>div{padding:8px 0 0 16px}.mapa-report-point__dot{border-radius:50%;flex:0 0 7px;height:7px;width:7px}.mapa-report-point__label{align-items:center;display:flex;gap:9px;min-width:0}.mapa-report-point__label span:last-child{overflow-wrap:anywhere}.mapa-report-point__arrow{color:#788a95;flex:0 0 16px;font-size:16px;height:16px;transition:transform .18s cubic-bezier(.25,1,.5,1);width:16px}@media(max-width:760px){.mapa-report-points__items{grid-template-columns:1fr}}\n"] }]
|
|
8887
|
+
args: [{ selector: 'mapa-report-points-widget', standalone: true, imports: [MatButtonToggleModule, MatIconModule, SafeHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle\n value=\"summarized\"\n [aria-label]=\"i18n.texts.report.summarized\"\n >\n <mat-icon aria-hidden=\"true\">view_list</mat-icon>\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle\n value=\"detailed\"\n [aria-label]=\"i18n.texts.report.detailed\"\n >\n <mat-icon aria-hidden=\"true\">article</mat-icon>\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </header>\n\n @if (!data().strong.length && !data().attention.length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <div\n class=\"mapa-report-points\"\n [class.mapa-report-points--detailed]=\"mode() === 'detailed'\"\n >\n <section\n class=\"mapa-report-points__group mapa-report-points__group--strong\"\n >\n <header class=\"mapa-report-points__group-header\">\n <div>\n <h3>\n {{\n data().strongHeading?.title ||\n i18n.texts.report.strongPointsTitle\n }}\n </h3>\n @if (data().strongHeading?.description) {\n <div\n class=\"mapa-report-points__group-description\"\n [innerHTML]=\"data().strongHeading?.description | safeHtml\"\n ></div>\n }\n </div>\n <span class=\"mapa-report-points__count\">{{\n countLabel(data().strong.length)\n }}</span>\n </header>\n <div class=\"mapa-report-points__items\">\n @for (item of data().strong; track item.id) {\n @if (mode() === \"summarized\") {\n <details class=\"mapa-report-point\">\n <summary>\n <span class=\"mapa-report-point__label\">\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#2c93dc')\"\n ></span>\n <span>{{ item.name }}</span>\n </span>\n <mat-icon class=\"mapa-report-point__arrow\" aria-hidden=\"true\"\n >expand_more</mat-icon\n >\n </summary>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </details>\n } @else {\n <article class=\"mapa-report-point mapa-report-point--card\">\n <h4>\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#2c93dc')\"\n ></span\n >{{ item.name }}\n </h4>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </article>\n }\n }\n </div>\n </section>\n\n <section\n class=\"mapa-report-points__group mapa-report-points__group--attention\"\n >\n <header class=\"mapa-report-points__group-header\">\n <div>\n <h3>\n {{\n data().attentionHeading?.title ||\n i18n.texts.report.attentionPointsTitle\n }}\n </h3>\n @if (data().attentionHeading?.description) {\n <div\n class=\"mapa-report-points__group-description\"\n [innerHTML]=\"data().attentionHeading?.description | safeHtml\"\n ></div>\n }\n </div>\n <span class=\"mapa-report-points__count\">{{\n countLabel(data().attention.length)\n }}</span>\n </header>\n <div class=\"mapa-report-points__items\">\n @for (item of data().attention; track item.id) {\n @if (mode() === \"summarized\") {\n <details class=\"mapa-report-point\">\n <summary>\n <span class=\"mapa-report-point__label\">\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#e84d68')\"\n ></span>\n <span>{{ item.name }}</span>\n </span>\n <mat-icon class=\"mapa-report-point__arrow\" aria-hidden=\"true\"\n >expand_more</mat-icon\n >\n </summary>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </details>\n } @else {\n <article class=\"mapa-report-point mapa-report-point--card\">\n <h4>\n <span\n class=\"mapa-report-point__dot\"\n [style.background]=\"color(item, '#e84d68')\"\n ></span\n >{{ item.name }}\n </h4>\n @if (item.description) {\n <div\n class=\"mapa-report-point__copy\"\n [innerHTML]=\"item.description | safeHtml\"\n ></div>\n }\n </article>\n }\n }\n </div>\n </section>\n </div>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-report-points{display:grid;gap:22px}.mapa-report-points__group{display:grid;gap:17px;padding:20px;border:1px solid;border-radius:13px}.mapa-report-points__group--strong{background:#f8faff;border-color:#cbd9ff}.mapa-report-points__group--strong .mapa-report-points__count{background:#f1f5ff;border-color:#c7d7ff;color:#315fcc}.mapa-report-points__group--attention{background:#fffaf9;border-color:#ffd0ca}.mapa-report-points__group--attention .mapa-report-points__count{background:#fff5f3;border-color:#ffc9c3;color:#d94d43}.mapa-report-points__group-header{align-items:flex-end;column-gap:15px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-points__group-header>div{display:contents}.mapa-report-points__group-header h3{font-size:16px;font-weight:500;grid-column:1;grid-row:1;margin:0}.mapa-report-points__group-description{color:var(--mapa-report-muted);font-size:12px;grid-column:1/-1;grid-row:2;line-height:1.35;margin:5px 0 0}.mapa-report-points__group-description ::ng-deep ol,.mapa-report-points__group-description ::ng-deep p,.mapa-report-points__group-description ::ng-deep ul{margin:0 0 8px}.mapa-report-points__group-description ::ng-deep ol,.mapa-report-points__group-description ::ng-deep ul{padding-left:20px}.mapa-report-points__group-description ::ng-deep li{margin:0 0 3px}.mapa-report-points__group-description ::ng-deep b,.mapa-report-points__group-description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-points__group-description ::ng-deep :last-child{margin-bottom:0}.mapa-report-points__count{align-self:end;border:1px solid;border-radius:999px;font-size:10px;font-weight:600;grid-column:2;grid-row:1;padding:5px 10px}.mapa-report-points__items{display:grid;gap:9px 12px;grid-template-columns:repeat(2,minmax(0,1fr))}.mapa-report-point{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:9px;overflow:hidden}.mapa-report-point[open]{border-color:#b9c9d3;box-shadow:0 5px 14px #233d4e0f}.mapa-report-point[open] .mapa-report-point__arrow{transform:rotate(180deg)}.mapa-report-point summary{align-items:center;cursor:pointer;display:flex;font-size:13px;gap:12px;justify-content:space-between;list-style:none;min-height:43px;padding:10px 12px}.mapa-report-point summary::-webkit-details-marker{display:none}.mapa-report-point summary:focus-visible{outline:3px solid rgba(255,86,11,.28);outline-offset:-3px}.mapa-report-point>div{border-top:1px solid #e8eef1;color:var(--mapa-report-muted);font-size:11px;line-height:1.5;padding:10px 12px 12px 28px}.mapa-report-point>div ::ng-deep ol,.mapa-report-point>div ::ng-deep p,.mapa-report-point>div ::ng-deep ul{margin:0 0 8px}.mapa-report-point>div ::ng-deep ol,.mapa-report-point>div ::ng-deep ul{padding-left:20px}.mapa-report-point>div ::ng-deep li{margin:0 0 3px}.mapa-report-point>div ::ng-deep b,.mapa-report-point>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-point>div ::ng-deep :last-child{margin-bottom:0}.mapa-report-point--card{background:var(--mapa-report-surface);padding:14px}.mapa-report-point--card h4{align-items:center;display:flex;font-size:12px;gap:9px;margin:0}.mapa-report-point--card>div{padding:8px 0 0 16px}.mapa-report-point__dot{border-radius:50%;flex:0 0 7px;height:7px;width:7px}.mapa-report-point__label{align-items:center;display:flex;gap:9px;min-width:0}.mapa-report-point__label span:last-child{overflow-wrap:anywhere}.mapa-report-point__arrow{color:#788a95;flex:0 0 16px;font-size:16px;height:16px;transition:transform .18s cubic-bezier(.25,1,.5,1);width:16px}@media(max-width:760px){.mapa-report-points__items{grid-template-columns:1fr}}\n"] }]
|
|
8887
8888
|
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }] } });
|
|
8888
8889
|
|
|
8889
8890
|
class MapaReportRankingTableWidgetComponent {
|
|
@@ -8901,6 +8902,9 @@ class MapaReportRankingTableWidgetComponent {
|
|
|
8901
8902
|
this.note = input(...(ngDevMode ? [undefined, { debugName: "note" }] : []));
|
|
8902
8903
|
/** Header of the average column; defaults to the i18n text. */
|
|
8903
8904
|
this.averageLabel = input(...(ngDevMode ? [undefined, { debugName: "averageLabel" }] : []));
|
|
8905
|
+
this.exportLabel = input(...(ngDevMode ? [undefined, { debugName: "exportLabel" }] : []));
|
|
8906
|
+
this.exporting = input(false, ...(ngDevMode ? [{ debugName: "exporting" }] : []));
|
|
8907
|
+
this.exportRequested = output();
|
|
8904
8908
|
this.sort = signal({
|
|
8905
8909
|
active: '',
|
|
8906
8910
|
direction: '',
|
|
@@ -9018,7 +9022,7 @@ class MapaReportRankingTableWidgetComponent {
|
|
|
9018
9022
|
return name.trim().toLowerCase();
|
|
9019
9023
|
}
|
|
9020
9024
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportRankingTableWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9021
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportRankingTableWidgetComponent, isStandalone: true, selector: "mapa-report-ranking-table-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, showAverage: { classPropertyName: "showAverage", publicName: "showAverage", isSignal: true, isRequired: false, transformFunction: null }, entryColumnLabel: { classPropertyName: "entryColumnLabel", publicName: "entryColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, averageLabel: { classPropertyName: "averageLabel", publicName: "averageLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n @if (heading() || visibleViews().length > 1) {\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n @if (heading(); as head) {\n <h2>{{ head.title }}</h2>\n @if (head.description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"head.description | safeHtml\"\n ></div>\n }\n }\n </div>\n @if (visibleViews().length > 1) {\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"activeView().id\"\n (change)=\"selectView($event.value)\"\n >\n @for (item of visibleViews(); track item.id) {\n <mat-button-toggle [value]=\"item.id\">\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n }\n {{ item.label }}\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n }\n </header>\n }\n\n @if (!rows().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <mapa-table\n class=\"mapa-report-ranking-table__table\"\n [columns]=\"columns()\"\n [data]=\"rows()\"\n [finished]=\"true\"\n [caption]=\"heading()?.title ?? ''\"\n (sortChange)=\"handleSortChange($event)\"\n >\n <ng-template mapaTableCell=\"name\" let-row>\n <div class=\"mapa-report-ranking-table__entry\">\n <strong>{{ $any(row).name }}</strong>\n @if ($any(row).description) {\n <small [innerHTML]=\"$any(row).description | safeHtml\"></small>\n }\n </div>\n </ng-template>\n\n @if (showAverage()) {\n <ng-template mapaTableCell=\"average\" let-row>\n <span class=\"mapa-report-ranking-table__average\">{{\n averageOf($any(row))\n }}</span>\n </ng-template>\n }\n\n @for (column of columns(); track trackColumn($index, column)) {\n @if (column.key !== \"name\" && column.key !== \"average\") {\n <ng-template [mapaTableCell]=\"column.key\" let-row>\n <div class=\"mapa-report-ranking-table__cell\">\n @if (hasClassification($any(row), column.key)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"classification($any(row), column.key)\"\n />\n } @else {\n <span\n class=\"mapa-report-ranking-table__score mapa-report-ranking-table__score--visible\"\n >\n @if (direction($any(row), column.key)) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel($any(row), column.key)\"\n >{{ directionArrow($any(row), column.key) }}</span\n >\n }\n {{ value($any(row), column.key) }}\n </span>\n }\n </div>\n </ng-template>\n }\n }\n </mapa-table>\n\n @if (note()) {\n <p class=\"mapa-report-ranking-table__note\">{{ note() }}</p>\n }\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-ranking-table__table{display:block;min-width:0;--mapa-classification-tag-min-width: 92px}.mapa-report-ranking-table__entry{display:grid}.mapa-report-ranking-table__entry strong{color:var(--mapa-report-text);font-size:13px;font-weight:500;line-height:1.35;white-space:nowrap}.mapa-report-ranking-table__entry small{color:var(--mapa-report-muted);font-size:11px;line-height:1.35;white-space:nowrap}.mapa-report-ranking-table__average{font-size:13px;font-weight:500}.mapa-report-ranking-table__cell{display:grid;justify-items:center;place-items:center}.mapa-report-ranking-table__score{align-items:center;color:var(--mapa-report-text);display:none;font-size:13px;font-weight:500;gap:6px;white-space:nowrap}.mapa-report-ranking-table__score .mapa-direction-indicator{flex:0 0 18px;font-size:10px;height:18px;width:18px}.mapa-report-ranking-table__score--visible{display:inline-flex}.mapa-report-ranking-table__note{color:var(--mapa-report-muted);font-size:11px;margin:0}\n"], dependencies: [{ kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "directive", type: MapaTableCellDirective, selector: "ng-template[mapaTableCell]", inputs: ["mapaTableCell"] }, { kind: "component", type: MapaTableComponent, selector: "mapa-table", inputs: ["columns", "data", "rowKey", "caption", "selectable", "showSelectAll", "selectedKeys", "selectionLabelKey", "checkbox", "selection", "loading", "finished", "error", "emptyTitle", "emptySubtitle", "errorTitle", "errorSubtitle", "retryLabel", "status", "empty", "pagination", "pageIndex", "pageSize", "totalCount", "pageSizeOptions", "totalPages", "showPaginator", "paginatorShowFirstButton", "paginatorShowLastButton", "paginatorRenderButtonsNumber", "paginatorHideDefaultArrows", "sortActive", "sortDirection", "actions", "menuItems", "menu", "filterControl"], outputs: ["pageChange", "sortChange", "selectionChange", "retry", "onChangePage", "onSortChange", "selectedRows", "rowClick"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9025
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportRankingTableWidgetComponent, isStandalone: true, selector: "mapa-report-ranking-table-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, showAverage: { classPropertyName: "showAverage", publicName: "showAverage", isSignal: true, isRequired: false, transformFunction: null }, entryColumnLabel: { classPropertyName: "entryColumnLabel", publicName: "entryColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, averageLabel: { classPropertyName: "averageLabel", publicName: "averageLabel", isSignal: true, isRequired: false, transformFunction: null }, exportLabel: { classPropertyName: "exportLabel", publicName: "exportLabel", isSignal: true, isRequired: false, transformFunction: null }, exporting: { classPropertyName: "exporting", publicName: "exporting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", exportRequested: "exportRequested" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n @if (heading() || exportLabel()) {\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n @if (heading(); as head) {\n <h2>{{ head.title }}</h2>\n @if (head.description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"head.description | safeHtml\"\n ></div>\n }\n }\n </div>\n @if (exportLabel(); as label) {\n <button\n type=\"button\"\n class=\"mapa-report-ranking-table__export\"\n [disabled]=\"exporting()\"\n (click)=\"exportRequested.emit()\"\n >\n <mat-icon aria-hidden=\"true\">download</mat-icon>\n {{ label }}\n </button>\n }\n </header>\n }\n\n <ng-content select=\"[mapaReportRankingLegend]\"></ng-content>\n\n @if (visibleViews().length > 1) {\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes mapa-report-widget__modes--standalone\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"activeView().id\"\n (change)=\"selectView($event.value)\"\n >\n @for (item of visibleViews(); track item.id) {\n <mat-button-toggle [value]=\"item.id\">\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n }\n {{ item.label }}\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n }\n\n @if (!rows().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <mapa-table\n class=\"mapa-report-ranking-table__table\"\n [columns]=\"columns()\"\n [data]=\"rows()\"\n [finished]=\"true\"\n [caption]=\"heading()?.title ?? ''\"\n (sortChange)=\"handleSortChange($event)\"\n >\n <ng-template mapaTableCell=\"name\" let-row>\n <div class=\"mapa-report-ranking-table__entry\">\n <strong>{{ $any(row).name }}</strong>\n @if ($any(row).description) {\n <small [innerHTML]=\"$any(row).description | safeHtml\"></small>\n }\n </div>\n </ng-template>\n\n @if (showAverage()) {\n <ng-template mapaTableCell=\"average\" let-row>\n <span class=\"mapa-report-ranking-table__average\">{{\n averageOf($any(row))\n }}</span>\n </ng-template>\n }\n\n @for (column of columns(); track trackColumn($index, column)) {\n @if (column.key !== \"name\" && column.key !== \"average\") {\n <ng-template [mapaTableCell]=\"column.key\" let-row>\n <div class=\"mapa-report-ranking-table__cell\">\n @if (hasClassification($any(row), column.key)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"classification($any(row), column.key)\"\n />\n } @else {\n <span\n class=\"mapa-report-ranking-table__score mapa-report-ranking-table__score--visible\"\n >\n @if (direction($any(row), column.key)) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel($any(row), column.key)\"\n >{{ directionArrow($any(row), column.key) }}</span\n >\n }\n {{ value($any(row), column.key) }}\n </span>\n }\n </div>\n </ng-template>\n }\n }\n </mapa-table>\n\n @if (note()) {\n <p class=\"mapa-report-ranking-table__note\">{{ note() }}</p>\n }\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-ranking-table__export{align-items:center;background:var(--mapa-report-accent);border:0;border-radius:var(--mapa-report-radius);color:var(--mapa-report-surface);cursor:pointer;display:inline-flex;font:600 13px/1 var(--mapa-font-body, \"Asap\", sans-serif);gap:6px;min-height:36px;padding:7px 12px}.mapa-report-ranking-table__export:disabled{cursor:default;opacity:.6}.mapa-report-ranking-table__export:focus-visible{outline:2px solid var(--mapa-report-text);outline-offset:2px}.mapa-report-ranking-table__export mat-icon{font-size:18px;height:18px;width:18px}.mapa-report-ranking-table__table{display:block;min-width:0;--mapa-classification-tag-min-width: 92px}.mapa-report-ranking-table__entry{display:grid}.mapa-report-ranking-table__entry strong{color:var(--mapa-report-text);font-size:13px;font-weight:500;line-height:1.35;white-space:nowrap}.mapa-report-ranking-table__entry small{color:var(--mapa-report-muted);font-size:11px;line-height:1.35;white-space:nowrap}.mapa-report-ranking-table__average{font-size:13px;font-weight:500}.mapa-report-ranking-table__cell{display:grid;justify-items:center;place-items:center}.mapa-report-ranking-table__score{align-items:center;color:var(--mapa-report-text);display:none;font-size:13px;font-weight:500;gap:6px;white-space:nowrap}.mapa-report-ranking-table__score .mapa-direction-indicator{flex:0 0 18px;font-size:10px;height:18px;width:18px}.mapa-report-ranking-table__score--visible{display:inline-flex}.mapa-report-ranking-table__note{color:var(--mapa-report-muted);font-size:11px;margin:0}\n"], dependencies: [{ kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "directive", type: MapaTableCellDirective, selector: "ng-template[mapaTableCell]", inputs: ["mapaTableCell"] }, { kind: "component", type: MapaTableComponent, selector: "mapa-table", inputs: ["columns", "data", "rowKey", "caption", "selectable", "showSelectAll", "selectedKeys", "selectionLabelKey", "checkbox", "selection", "loading", "finished", "error", "emptyTitle", "emptySubtitle", "errorTitle", "errorSubtitle", "retryLabel", "status", "empty", "pagination", "pageIndex", "pageSize", "totalCount", "pageSizeOptions", "totalPages", "showPaginator", "paginatorShowFirstButton", "paginatorShowLastButton", "paginatorRenderButtonsNumber", "paginatorHideDefaultArrows", "sortActive", "sortDirection", "actions", "menuItems", "menu", "filterControl"], outputs: ["pageChange", "sortChange", "selectionChange", "retry", "onChangePage", "onSortChange", "selectedRows", "rowClick"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9022
9026
|
}
|
|
9023
9027
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportRankingTableWidgetComponent, decorators: [{
|
|
9024
9028
|
type: Component,
|
|
@@ -9029,8 +9033,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
9029
9033
|
MatButtonToggleModule,
|
|
9030
9034
|
MatIconModule,
|
|
9031
9035
|
SafeHtmlPipe,
|
|
9032
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n @if (heading() ||
|
|
9033
|
-
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], showAverage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAverage", required: false }] }], entryColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "entryColumnLabel", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], averageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "averageLabel", required: false }] }] } });
|
|
9036
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n @if (heading() || exportLabel()) {\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n @if (heading(); as head) {\n <h2>{{ head.title }}</h2>\n @if (head.description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"head.description | safeHtml\"\n ></div>\n }\n }\n </div>\n @if (exportLabel(); as label) {\n <button\n type=\"button\"\n class=\"mapa-report-ranking-table__export\"\n [disabled]=\"exporting()\"\n (click)=\"exportRequested.emit()\"\n >\n <mat-icon aria-hidden=\"true\">download</mat-icon>\n {{ label }}\n </button>\n }\n </header>\n }\n\n <ng-content select=\"[mapaReportRankingLegend]\"></ng-content>\n\n @if (visibleViews().length > 1) {\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes mapa-report-widget__modes--standalone\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"activeView().id\"\n (change)=\"selectView($event.value)\"\n >\n @for (item of visibleViews(); track item.id) {\n <mat-button-toggle [value]=\"item.id\">\n @if (item.icon) {\n <mat-icon aria-hidden=\"true\">{{ item.icon }}</mat-icon>\n }\n {{ item.label }}\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n }\n\n @if (!rows().length) {\n <p class=\"mapa-report-widget__empty\">{{ i18n.texts.report.emptyState }}</p>\n } @else {\n <mapa-table\n class=\"mapa-report-ranking-table__table\"\n [columns]=\"columns()\"\n [data]=\"rows()\"\n [finished]=\"true\"\n [caption]=\"heading()?.title ?? ''\"\n (sortChange)=\"handleSortChange($event)\"\n >\n <ng-template mapaTableCell=\"name\" let-row>\n <div class=\"mapa-report-ranking-table__entry\">\n <strong>{{ $any(row).name }}</strong>\n @if ($any(row).description) {\n <small [innerHTML]=\"$any(row).description | safeHtml\"></small>\n }\n </div>\n </ng-template>\n\n @if (showAverage()) {\n <ng-template mapaTableCell=\"average\" let-row>\n <span class=\"mapa-report-ranking-table__average\">{{\n averageOf($any(row))\n }}</span>\n </ng-template>\n }\n\n @for (column of columns(); track trackColumn($index, column)) {\n @if (column.key !== \"name\" && column.key !== \"average\") {\n <ng-template [mapaTableCell]=\"column.key\" let-row>\n <div class=\"mapa-report-ranking-table__cell\">\n @if (hasClassification($any(row), column.key)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"classification($any(row), column.key)\"\n />\n } @else {\n <span\n class=\"mapa-report-ranking-table__score mapa-report-ranking-table__score--visible\"\n >\n @if (direction($any(row), column.key)) {\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"directionLabel($any(row), column.key)\"\n >{{ directionArrow($any(row), column.key) }}</span\n >\n }\n {{ value($any(row), column.key) }}\n </span>\n }\n </div>\n </ng-template>\n }\n }\n </mapa-table>\n\n @if (note()) {\n <p class=\"mapa-report-ranking-table__note\">{{ note() }}</p>\n }\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}.mapa-report-ranking-table__export{align-items:center;background:var(--mapa-report-accent);border:0;border-radius:var(--mapa-report-radius);color:var(--mapa-report-surface);cursor:pointer;display:inline-flex;font:600 13px/1 var(--mapa-font-body, \"Asap\", sans-serif);gap:6px;min-height:36px;padding:7px 12px}.mapa-report-ranking-table__export:disabled{cursor:default;opacity:.6}.mapa-report-ranking-table__export:focus-visible{outline:2px solid var(--mapa-report-text);outline-offset:2px}.mapa-report-ranking-table__export mat-icon{font-size:18px;height:18px;width:18px}.mapa-report-ranking-table__table{display:block;min-width:0;--mapa-classification-tag-min-width: 92px}.mapa-report-ranking-table__entry{display:grid}.mapa-report-ranking-table__entry strong{color:var(--mapa-report-text);font-size:13px;font-weight:500;line-height:1.35;white-space:nowrap}.mapa-report-ranking-table__entry small{color:var(--mapa-report-muted);font-size:11px;line-height:1.35;white-space:nowrap}.mapa-report-ranking-table__average{font-size:13px;font-weight:500}.mapa-report-ranking-table__cell{display:grid;justify-items:center;place-items:center}.mapa-report-ranking-table__score{align-items:center;color:var(--mapa-report-text);display:none;font-size:13px;font-weight:500;gap:6px;white-space:nowrap}.mapa-report-ranking-table__score .mapa-direction-indicator{flex:0 0 18px;font-size:10px;height:18px;width:18px}.mapa-report-ranking-table__score--visible{display:inline-flex}.mapa-report-ranking-table__note{color:var(--mapa-report-muted);font-size:11px;margin:0}\n"] }]
|
|
9037
|
+
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], showAverage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAverage", required: false }] }], entryColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "entryColumnLabel", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], averageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "averageLabel", required: false }] }], exportLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportLabel", required: false }] }], exporting: [{ type: i0.Input, args: [{ isSignal: true, alias: "exporting", required: false }] }], exportRequested: [{ type: i0.Output, args: ["exportRequested"] }] } });
|
|
9034
9038
|
|
|
9035
9039
|
class MapaReportParameterizationWidgetComponent {
|
|
9036
9040
|
constructor() {
|
|
@@ -9139,7 +9143,7 @@ class MapaReportParameterizationWidgetComponent {
|
|
|
9139
9143
|
return typeof value === 'number' && Number.isFinite(value);
|
|
9140
9144
|
}
|
|
9141
9145
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportParameterizationWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9142
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportParameterizationWidgetComponent, isStandalone: true, selector: "mapa-report-parameterization-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n @if (content() !== \"ranking\") {\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n }\n </header>\n\n @if (content() !== \"ranking\") {\n <section class=\"mapa-parameterization-overview\">\n <div class=\"mapa-parameterization-overview__headline\">\n <div>\n <span class=\"mapa-parameterization-overview__eyebrow\">{{\n heading().title\n }}</span>\n <h3>{{ data().name }}</h3>\n </div>\n\n <div class=\"mapa-parameterization-overview__score\">\n <span>{{ i18n.texts.report.overallPercentageTitle }}</span>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thick'\"\n [name]=\"data().name\"\n [value]=\"data().value\"\n />\n </div>\n </div>\n\n @if (finalClassification(); as final) {\n <div class=\"mapa-parameterization-overview__classification\">\n <span class=\"mapa-parameterization-overview__classification-tag\">{{\n final.label\n }}</span>\n @if (final.description) {\n <p>{{ final.description }}</p>\n }\n </div>\n }\n </section>\n\n @if (legend().length) {\n <mapa-report-legend\n class=\"mapa-parameterization-legend\"\n appearance=\"psychosocial\"\n [expanded]=\"true\"\n [groups]=\"legend()\"\n />\n }\n\n @if (mode() === \"summarized\" && summaryRows().length) {\n <section class=\"mapa-parameterization-summary\">\n <h3>{{ i18n.texts.report.summarizedReportTitle }}</h3>\n <div class=\"mapa-parameterization-summary__rows\">\n @for (row of summaryRows(); track row.id) {\n <div class=\"mapa-parameterization-summary__row\">\n <span>{{ row.name }}</span>\n <span\n class=\"mapa-parameterization-summary__track\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(row.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(row.name, safeValue(row.value))\n \"\n >\n <i\n [style.width.%]=\"safeValue(row.value)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <strong>{{ safeValue(row.value) }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n\n @if (mode() === \"detailed\" && data().sections.length) {\n <section class=\"mapa-parameterization-detail\">\n <h3>{{ i18n.texts.report.detailedReportTitle }}</h3>\n\n <div class=\"mapa-parameterization-detail__sections\">\n @for (section of data().sections; track section.id) {\n <section class=\"mapa-parameterization-group\">\n @if (section.name || section.value !== undefined) {\n <header class=\"mapa-parameterization-group__header\">\n <div>\n @if (section.name) {\n <h4>{{ section.name }}</h4>\n }\n @if (section.description) {\n <div [innerHTML]=\"section.description | safeHtml\"></div>\n }\n </div>\n @if (section.value !== undefined) {\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"section.name || i18n.texts.report.groupsTitle\"\n [value]=\"safeValue(section.value)\"\n />\n }\n </header>\n }\n\n @if (section.competences.length) {\n <div class=\"mapa-parameterization-group__label\">\n {{ i18n.texts.report.competenciesAndDimensionsTitle }}\n </div>\n\n <div class=\"mapa-parameterization-group__grid\">\n @for (\n competence of section.competences;\n track competence.id\n ) {\n <article class=\"mapa-parameterization-competence\">\n <header class=\"mapa-parameterization-competence__header\">\n <h5>{{ competence.name }}</h5>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"competence.name\"\n [value]=\"safeValue(competence.value)\"\n />\n </header>\n\n @if (competence.description) {\n <div\n class=\"mapa-parameterization-competence__description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n\n @if (competence.dimensions?.length) {\n <ul class=\"mapa-parameterization-dimensions\">\n @for (\n dimension of competence.dimensions;\n track dimension.id\n ) {\n <li>\n <span\n class=\"mapa-parameterization-dimensions__name\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(dimension.direction)\n \"\n >{{\n directionArrow(dimension.direction)\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n @if (hasClassification(dimension)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n }\n @if (dimension.description) {\n <div\n class=\"mapa-parameterization-dimensions__description\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n }\n </section>\n }\n </div>\n </section>\n }\n }\n\n @if (content() !== \"report\" && rankingViews().length) {\n <section class=\"mapa-parameterization-ranking\">\n @if (content() === \"all\") {\n <h3>{{ i18n.texts.report.parameterizationRankingTitle }}</h3>\n }\n <mapa-report-ranking-table-widget\n [palette]=\"palette()\"\n [showAverage]=\"false\"\n [views]=\"rankingViews()\"\n />\n </section>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-parameterization-accent: #59636a;--mapa-parameterization-rail: #dfe4ea;--mapa-parameterization-line: #e7ebee;--mapa-report-card-radius: 10px;--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc}.mapa-parameterization-overview{border:1px solid var(--mapa-report-border);border-radius:16px;display:grid;gap:22px;padding:24px}.mapa-parameterization-overview__headline{align-items:start;display:grid;gap:24px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-overview__eyebrow{color:#8a95a5;display:block;font-size:12px;line-height:1.3;margin-bottom:6px;text-transform:uppercase}.mapa-parameterization-overview h3{color:#2c2e3a;font-size:24px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__score{display:grid;gap:7px;min-width:290px}.mapa-parameterization-overview__score mapa-result-track{display:block;min-width:0;width:100%}.mapa-parameterization-overview__score>span{color:#8a95a5;font-size:12px;text-transform:uppercase}.mapa-parameterization-overview__classification{display:grid;gap:8px;justify-items:start}.mapa-parameterization-overview__classification p{color:#59636a;font-size:14px;line-height:1.5;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__classification-tag{background:#fff;border:1px solid var(--mapa-report-border);border-radius:999px;color:#2c2e3a;font-size:13px;font-weight:650;line-height:1.3;padding:5px 13px}.mapa-parameterization-overview__metadata{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin:0}.mapa-parameterization-overview__metadata div{border:1px solid var(--mapa-report-border);border-radius:12px;min-width:0;padding:13px 15px}.mapa-parameterization-overview__metadata dt{color:#8a95a5;font-size:11px;line-height:1.3;margin-bottom:8px;text-transform:uppercase}.mapa-parameterization-overview__metadata dd{color:#2c2e3a;font-size:15px;font-weight:650;line-height:1.35;margin:0;overflow-wrap:anywhere}.mapa-parameterization-legend{--mapa-classification-tag-min-width: var(--mapa-report-pill-width)}.mapa-parameterization-summary,.mapa-parameterization-detail,.mapa-parameterization-ranking{display:grid;gap:16px;min-width:0}.mapa-parameterization-summary>h3,.mapa-parameterization-detail>h3,.mapa-parameterization-ranking>h3{color:#596575;font-size:18px;font-weight:650;line-height:1.3;margin:0}.mapa-parameterization-summary__rows{border:1px solid var(--mapa-report-border);border-radius:14px;padding:16px 20px}.mapa-parameterization-summary__row{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(200px,36%) minmax(140px,1fr) 48px;min-height:48px}.mapa-parameterization-summary__row+.mapa-parameterization-summary__row{border-top:1px solid var(--mapa-parameterization-line)}.mapa-parameterization-summary__row>span:first-child{color:#4f5d70;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.mapa-parameterization-summary__row>strong{color:#596575;font-size:14px;text-align:right}.mapa-parameterization-summary__track{background:var(--mapa-parameterization-rail);border-radius:999px;display:block;height:14px;overflow:hidden}.mapa-parameterization-summary__track i{background:var(--mapa-parameterization-accent);border-radius:inherit;display:block;height:100%}@media(max-width:900px){.mapa-parameterization-overview__headline,.mapa-parameterization-group__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-overview__score,mapa-result-track{min-width:0}.mapa-parameterization-group__header>mapa-result-track{justify-self:start}.mapa-parameterization-dimensions li{grid-template-columns:minmax(150px,1fr) auto}.mapa-parameterization-dimensions__description{grid-column:1/-1;padding-left:28px}}@media(max-width:600px){.mapa-parameterization-overview,.mapa-parameterization-group{padding:16px}.mapa-parameterization-overview h3{font-size:20px}.mapa-parameterization-summary__rows{padding:8px 14px}.mapa-parameterization-summary__row{gap:9px;grid-template-columns:minmax(0,1fr) 44px;padding:10px 0}.mapa-parameterization-summary__row .mapa-parameterization-summary__track{grid-column:1/-1;grid-row:2}.mapa-parameterization-summary__row>strong{grid-column:2;grid-row:1}.mapa-parameterization-dimensions li{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-dimensions__description{grid-column:auto;padding-left:28px}}@media print{.mapa-parameterization-overview,.mapa-parameterization-group,.mapa-parameterization-competence{break-inside:avoid}}\n", ".mapa-parameterization-detail__sections{display:grid;gap:22px}.mapa-parameterization-group{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);border:1px solid var(--mapa-report-border);border-radius:14px;min-width:0;padding:18px}.mapa-parameterization-group__header{align-items:start;display:grid;gap:20px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-group__header>mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-group__header h4{color:#2c2e3a;font-size:20px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-group__header>div:first-child>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:5px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep p,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{padding-left:20px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep li{margin:0 0 3px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep b,.mapa-parameterization-group__header>div:first-child>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-group__header>div:first-child>div ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-group__label{background:#f1f4f8;border:1px solid var(--mapa-report-border);border-radius:7px;color:#405064;font-size:13px;font-weight:650;margin-top:16px;padding:7px 10px}.mapa-parameterization-group__grid{display:grid;column-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;row-gap:14px}.mapa-parameterization-dimensions mapa-classification-tag{flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-parameterization-competence{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0;padding:16px 14px 13px}.mapa-parameterization-competence__header{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-competence__header mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-competence__header h5{color:#2c2e3a;font-size:16px;font-weight:650;line-height:1.3;margin:0;overflow-wrap:anywhere}.mapa-parameterization-competence__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:12px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep p,.mapa-parameterization-competence__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-competence__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-competence__description ::ng-deep b,.mapa-parameterization-competence__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-competence__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:14px 0 0;padding:12px 0 0}.mapa-parameterization-dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.mapa-parameterization-dimensions__name{align-items:center;color:#4f5d70;display:flex;font-size:12px;gap:8px;line-height:1.4;min-width:0}.mapa-parameterization-dimensions__name span:last-child{overflow-wrap:anywhere}.mapa-parameterization-dimensions__description{color:var(--mapa-report-muted);font-size:11px;grid-column:1/-1;line-height:1.45;padding-left:28px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep p,.mapa-parameterization-dimensions__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-dimensions__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-dimensions__description ::ng-deep b,.mapa-parameterization-dimensions__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-dimensions__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-ranking mapa-report-ranking-table-widget{display:block;min-width:0}@media(max-width:1100px){.mapa-parameterization-group__grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.mapa-parameterization-competence__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-competence__header mapa-result-track{justify-self:start}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaReportRankingTableWidgetComponent, selector: "mapa-report-ranking-table-widget", inputs: ["heading", "views", "view", "palette", "showAverage", "entryColumnLabel", "note", "averageLabel"], outputs: ["viewChange"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9146
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaReportParameterizationWidgetComponent, isStandalone: true, selector: "mapa-report-parameterization-widget", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange" }, ngImport: i0, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (content() !== \"ranking\") {\n @if (legend().length) {\n <mapa-report-legend\n class=\"mapa-parameterization-legend\"\n appearance=\"psychosocial\"\n [expanded]=\"true\"\n [groups]=\"legend()\"\n />\n }\n\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes mapa-report-widget__modes--standalone\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <section class=\"mapa-parameterization-overview\">\n <div class=\"mapa-parameterization-overview__headline\">\n <div>\n <span class=\"mapa-parameterization-overview__eyebrow\">{{\n heading().title\n }}</span>\n <h3>{{ data().name }}</h3>\n </div>\n\n <div class=\"mapa-parameterization-overview__score\">\n <span>{{ i18n.texts.report.overallPercentageTitle }}</span>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thick'\"\n [name]=\"data().name\"\n [value]=\"data().value\"\n />\n </div>\n </div>\n\n @if (finalClassification(); as final) {\n <div class=\"mapa-parameterization-overview__classification\">\n <span class=\"mapa-parameterization-overview__classification-tag\">{{\n final.label\n }}</span>\n @if (final.description) {\n <p>{{ final.description }}</p>\n }\n </div>\n }\n </section>\n\n @if (mode() === \"summarized\" && summaryRows().length) {\n <section class=\"mapa-parameterization-summary\">\n <h3>{{ i18n.texts.report.summarizedReportTitle }}</h3>\n <div class=\"mapa-parameterization-summary__rows\">\n @for (row of summaryRows(); track row.id) {\n <div class=\"mapa-parameterization-summary__row\">\n <span>{{ row.name }}</span>\n <span\n class=\"mapa-parameterization-summary__track\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(row.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(row.name, safeValue(row.value))\n \"\n >\n <i\n [style.width.%]=\"safeValue(row.value)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <strong>{{ safeValue(row.value) }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n\n @if (mode() === \"detailed\" && data().sections.length) {\n <section class=\"mapa-parameterization-detail\">\n <h3>{{ i18n.texts.report.detailedReportTitle }}</h3>\n\n <div class=\"mapa-parameterization-detail__sections\">\n @for (section of data().sections; track section.id) {\n <section class=\"mapa-parameterization-group\">\n @if (section.name || section.value !== undefined) {\n <header class=\"mapa-parameterization-group__header\">\n <div>\n @if (section.name) {\n <h4>{{ section.name }}</h4>\n }\n @if (section.description) {\n <div [innerHTML]=\"section.description | safeHtml\"></div>\n }\n </div>\n @if (section.value !== undefined) {\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"section.name || i18n.texts.report.groupsTitle\"\n [value]=\"safeValue(section.value)\"\n />\n }\n </header>\n }\n\n @if (section.competences.length) {\n <div class=\"mapa-parameterization-group__label\">\n {{ i18n.texts.report.competenciesAndDimensionsTitle }}\n </div>\n\n <div class=\"mapa-parameterization-group__grid\">\n @for (\n competence of section.competences;\n track competence.id\n ) {\n <article class=\"mapa-parameterization-competence\">\n <header class=\"mapa-parameterization-competence__header\">\n <h5>{{ competence.name }}</h5>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"competence.name\"\n [value]=\"safeValue(competence.value)\"\n />\n </header>\n\n @if (competence.description) {\n <div\n class=\"mapa-parameterization-competence__description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n\n @if (competence.dimensions?.length) {\n <ul class=\"mapa-parameterization-dimensions\">\n @for (\n dimension of competence.dimensions;\n track dimension.id\n ) {\n <li>\n <span\n class=\"mapa-parameterization-dimensions__name\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(dimension.direction)\n \"\n >{{\n directionArrow(dimension.direction)\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n @if (hasClassification(dimension)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n }\n @if (dimension.description) {\n <div\n class=\"mapa-parameterization-dimensions__description\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n }\n </section>\n }\n </div>\n </section>\n }\n }\n\n @if (content() !== \"report\" && rankingViews().length) {\n <section class=\"mapa-parameterization-ranking\">\n @if (content() === \"all\") {\n <h3>{{ i18n.texts.report.parameterizationRankingTitle }}</h3>\n }\n <mapa-report-ranking-table-widget\n [palette]=\"palette()\"\n [showAverage]=\"false\"\n [views]=\"rankingViews()\"\n />\n </section>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-parameterization-accent: #59636a;--mapa-parameterization-rail: #dfe4ea;--mapa-parameterization-line: #e7ebee;--mapa-report-card-radius: 10px;--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc}.mapa-parameterization-overview{border:1px solid var(--mapa-report-border);border-radius:16px;display:grid;gap:22px;padding:24px}.mapa-parameterization-overview__headline{align-items:start;display:grid;gap:24px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-overview__eyebrow{color:#8a95a5;display:block;font-size:12px;line-height:1.3;margin-bottom:6px;text-transform:uppercase}.mapa-parameterization-overview h3{color:#2c2e3a;font-size:24px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__score{display:grid;gap:7px;min-width:290px}.mapa-parameterization-overview__score mapa-result-track{display:block;min-width:0;width:100%}.mapa-parameterization-overview__score>span{color:#8a95a5;font-size:12px;text-transform:uppercase}.mapa-parameterization-overview__classification{display:grid;gap:8px;justify-items:start}.mapa-parameterization-overview__classification p{color:#59636a;font-size:14px;line-height:1.5;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__classification-tag{background:#fff;border:1px solid var(--mapa-report-border);border-radius:999px;color:#2c2e3a;font-size:13px;font-weight:650;line-height:1.3;padding:5px 13px}.mapa-parameterization-overview__metadata{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin:0}.mapa-parameterization-overview__metadata div{border:1px solid var(--mapa-report-border);border-radius:12px;min-width:0;padding:13px 15px}.mapa-parameterization-overview__metadata dt{color:#8a95a5;font-size:11px;line-height:1.3;margin-bottom:8px;text-transform:uppercase}.mapa-parameterization-overview__metadata dd{color:#2c2e3a;font-size:15px;font-weight:650;line-height:1.35;margin:0;overflow-wrap:anywhere}.mapa-parameterization-legend{--mapa-classification-tag-min-width: var(--mapa-report-pill-width)}.mapa-parameterization-summary,.mapa-parameterization-detail,.mapa-parameterization-ranking{display:grid;gap:16px;min-width:0}.mapa-parameterization-summary>h3,.mapa-parameterization-detail>h3,.mapa-parameterization-ranking>h3{color:#596575;font-size:18px;font-weight:650;line-height:1.3;margin:0}.mapa-parameterization-summary__rows{border:1px solid var(--mapa-report-border);border-radius:14px;padding:16px 20px}.mapa-parameterization-summary__row{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(200px,36%) minmax(140px,1fr) 48px;min-height:48px}.mapa-parameterization-summary__row+.mapa-parameterization-summary__row{border-top:1px solid var(--mapa-parameterization-line)}.mapa-parameterization-summary__row>span:first-child{color:#4f5d70;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.mapa-parameterization-summary__row>strong{color:#596575;font-size:14px;text-align:right}.mapa-parameterization-summary__track{background:var(--mapa-parameterization-rail);border-radius:999px;display:block;height:14px;overflow:hidden}.mapa-parameterization-summary__track i{background:var(--mapa-parameterization-accent);border-radius:inherit;display:block;height:100%}@media(max-width:900px){.mapa-parameterization-overview__headline,.mapa-parameterization-group__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-overview__score,mapa-result-track{min-width:0}.mapa-parameterization-group__header>mapa-result-track{justify-self:start}.mapa-parameterization-dimensions li{grid-template-columns:minmax(150px,1fr) auto}.mapa-parameterization-dimensions__description{grid-column:1/-1;padding-left:28px}}@media(max-width:600px){.mapa-parameterization-overview,.mapa-parameterization-group{padding:16px}.mapa-parameterization-overview h3{font-size:20px}.mapa-parameterization-summary__rows{padding:8px 14px}.mapa-parameterization-summary__row{gap:9px;grid-template-columns:minmax(0,1fr) 44px;padding:10px 0}.mapa-parameterization-summary__row .mapa-parameterization-summary__track{grid-column:1/-1;grid-row:2}.mapa-parameterization-summary__row>strong{grid-column:2;grid-row:1}.mapa-parameterization-dimensions li{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-dimensions__description{grid-column:auto;padding-left:28px}}@media print{.mapa-parameterization-overview,.mapa-parameterization-group,.mapa-parameterization-competence{break-inside:avoid}}\n", ".mapa-parameterization-detail__sections{display:grid;gap:22px}.mapa-parameterization-group{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);border:1px solid var(--mapa-report-border);border-radius:14px;min-width:0;padding:18px}.mapa-parameterization-group__header{align-items:start;display:grid;gap:20px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-group__header>mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-group__header h4{color:#2c2e3a;font-size:20px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-group__header>div:first-child>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:5px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep p,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{padding-left:20px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep li{margin:0 0 3px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep b,.mapa-parameterization-group__header>div:first-child>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-group__header>div:first-child>div ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-group__label{background:#f1f4f8;border:1px solid var(--mapa-report-border);border-radius:7px;color:#405064;font-size:13px;font-weight:650;margin-top:16px;padding:7px 10px}.mapa-parameterization-group__grid{display:grid;column-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;row-gap:14px}.mapa-parameterization-dimensions mapa-classification-tag{flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-parameterization-competence{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0;padding:16px 14px 13px}.mapa-parameterization-competence__header{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-competence__header mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-competence__header h5{color:#2c2e3a;font-size:16px;font-weight:650;line-height:1.3;margin:0;overflow-wrap:anywhere}.mapa-parameterization-competence__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:12px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep p,.mapa-parameterization-competence__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-competence__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-competence__description ::ng-deep b,.mapa-parameterization-competence__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-competence__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:14px 0 0;padding:12px 0 0}.mapa-parameterization-dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.mapa-parameterization-dimensions__name{align-items:center;color:#4f5d70;display:flex;font-size:12px;gap:8px;line-height:1.4;min-width:0}.mapa-parameterization-dimensions__name span:last-child{overflow-wrap:anywhere}.mapa-parameterization-dimensions__description{color:var(--mapa-report-muted);font-size:11px;grid-column:1/-1;line-height:1.45;padding-left:28px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep p,.mapa-parameterization-dimensions__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-dimensions__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-dimensions__description ::ng-deep b,.mapa-parameterization-dimensions__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-dimensions__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-ranking mapa-report-ranking-table-widget{display:block;min-width:0}@media(max-width:1100px){.mapa-parameterization-group__grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.mapa-parameterization-competence__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-competence__header mapa-result-track{justify-self:start}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MapaClassificationTagComponent, selector: "mapa-classification-tag", inputs: ["classification", "size", "appearance", "shape", "casing", "fallbackLabel"] }, { kind: "component", type: MapaReportLegendComponent, selector: "mapa-report-legend", inputs: ["title", "intro", "groupsTitle", "groups", "expanded", "appearance"] }, { kind: "component", type: MapaReportRankingTableWidgetComponent, selector: "mapa-report-ranking-table-widget", inputs: ["heading", "views", "view", "palette", "showAverage", "entryColumnLabel", "note", "averageLabel", "exportLabel", "exporting"], outputs: ["viewChange", "exportRequested"] }, { kind: "component", type: MapaResultTrackComponent, selector: "mapa-result-track", inputs: ["name", "value", "color", "mode", "appearance", "style", "direction", "showValue", "ariaLabel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9143
9147
|
}
|
|
9144
9148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportParameterizationWidgetComponent, decorators: [{
|
|
9145
9149
|
type: Component,
|
|
@@ -9150,7 +9154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
|
|
|
9150
9154
|
MapaReportRankingTableWidgetComponent,
|
|
9151
9155
|
MapaResultTrackComponent,
|
|
9152
9156
|
SafeHtmlPipe,
|
|
9153
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n @if (content() !== \"ranking\") {\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n }\n </header>\n\n @if (content() !== \"ranking\") {\n <section class=\"mapa-parameterization-overview\">\n <div class=\"mapa-parameterization-overview__headline\">\n <div>\n <span class=\"mapa-parameterization-overview__eyebrow\">{{\n heading().title\n }}</span>\n <h3>{{ data().name }}</h3>\n </div>\n\n <div class=\"mapa-parameterization-overview__score\">\n <span>{{ i18n.texts.report.overallPercentageTitle }}</span>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thick'\"\n [name]=\"data().name\"\n [value]=\"data().value\"\n />\n </div>\n </div>\n\n @if (finalClassification(); as final) {\n <div class=\"mapa-parameterization-overview__classification\">\n <span class=\"mapa-parameterization-overview__classification-tag\">{{\n final.label\n }}</span>\n @if (final.description) {\n <p>{{ final.description }}</p>\n }\n </div>\n }\n </section>\n\n @if (legend().length) {\n <mapa-report-legend\n class=\"mapa-parameterization-legend\"\n appearance=\"psychosocial\"\n [expanded]=\"true\"\n [groups]=\"legend()\"\n />\n }\n\n @if (mode() === \"summarized\" && summaryRows().length) {\n <section class=\"mapa-parameterization-summary\">\n <h3>{{ i18n.texts.report.summarizedReportTitle }}</h3>\n <div class=\"mapa-parameterization-summary__rows\">\n @for (row of summaryRows(); track row.id) {\n <div class=\"mapa-parameterization-summary__row\">\n <span>{{ row.name }}</span>\n <span\n class=\"mapa-parameterization-summary__track\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(row.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(row.name, safeValue(row.value))\n \"\n >\n <i\n [style.width.%]=\"safeValue(row.value)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <strong>{{ safeValue(row.value) }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n\n @if (mode() === \"detailed\" && data().sections.length) {\n <section class=\"mapa-parameterization-detail\">\n <h3>{{ i18n.texts.report.detailedReportTitle }}</h3>\n\n <div class=\"mapa-parameterization-detail__sections\">\n @for (section of data().sections; track section.id) {\n <section class=\"mapa-parameterization-group\">\n @if (section.name || section.value !== undefined) {\n <header class=\"mapa-parameterization-group__header\">\n <div>\n @if (section.name) {\n <h4>{{ section.name }}</h4>\n }\n @if (section.description) {\n <div [innerHTML]=\"section.description | safeHtml\"></div>\n }\n </div>\n @if (section.value !== undefined) {\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"section.name || i18n.texts.report.groupsTitle\"\n [value]=\"safeValue(section.value)\"\n />\n }\n </header>\n }\n\n @if (section.competences.length) {\n <div class=\"mapa-parameterization-group__label\">\n {{ i18n.texts.report.competenciesAndDimensionsTitle }}\n </div>\n\n <div class=\"mapa-parameterization-group__grid\">\n @for (\n competence of section.competences;\n track competence.id\n ) {\n <article class=\"mapa-parameterization-competence\">\n <header class=\"mapa-parameterization-competence__header\">\n <h5>{{ competence.name }}</h5>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"competence.name\"\n [value]=\"safeValue(competence.value)\"\n />\n </header>\n\n @if (competence.description) {\n <div\n class=\"mapa-parameterization-competence__description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n\n @if (competence.dimensions?.length) {\n <ul class=\"mapa-parameterization-dimensions\">\n @for (\n dimension of competence.dimensions;\n track dimension.id\n ) {\n <li>\n <span\n class=\"mapa-parameterization-dimensions__name\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(dimension.direction)\n \"\n >{{\n directionArrow(dimension.direction)\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n @if (hasClassification(dimension)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n }\n @if (dimension.description) {\n <div\n class=\"mapa-parameterization-dimensions__description\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n }\n </section>\n }\n </div>\n </section>\n }\n }\n\n @if (content() !== \"report\" && rankingViews().length) {\n <section class=\"mapa-parameterization-ranking\">\n @if (content() === \"all\") {\n <h3>{{ i18n.texts.report.parameterizationRankingTitle }}</h3>\n }\n <mapa-report-ranking-table-widget\n [palette]=\"palette()\"\n [showAverage]=\"false\"\n [views]=\"rankingViews()\"\n />\n </section>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-parameterization-accent: #59636a;--mapa-parameterization-rail: #dfe4ea;--mapa-parameterization-line: #e7ebee;--mapa-report-card-radius: 10px;--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc}.mapa-parameterization-overview{border:1px solid var(--mapa-report-border);border-radius:16px;display:grid;gap:22px;padding:24px}.mapa-parameterization-overview__headline{align-items:start;display:grid;gap:24px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-overview__eyebrow{color:#8a95a5;display:block;font-size:12px;line-height:1.3;margin-bottom:6px;text-transform:uppercase}.mapa-parameterization-overview h3{color:#2c2e3a;font-size:24px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__score{display:grid;gap:7px;min-width:290px}.mapa-parameterization-overview__score mapa-result-track{display:block;min-width:0;width:100%}.mapa-parameterization-overview__score>span{color:#8a95a5;font-size:12px;text-transform:uppercase}.mapa-parameterization-overview__classification{display:grid;gap:8px;justify-items:start}.mapa-parameterization-overview__classification p{color:#59636a;font-size:14px;line-height:1.5;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__classification-tag{background:#fff;border:1px solid var(--mapa-report-border);border-radius:999px;color:#2c2e3a;font-size:13px;font-weight:650;line-height:1.3;padding:5px 13px}.mapa-parameterization-overview__metadata{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin:0}.mapa-parameterization-overview__metadata div{border:1px solid var(--mapa-report-border);border-radius:12px;min-width:0;padding:13px 15px}.mapa-parameterization-overview__metadata dt{color:#8a95a5;font-size:11px;line-height:1.3;margin-bottom:8px;text-transform:uppercase}.mapa-parameterization-overview__metadata dd{color:#2c2e3a;font-size:15px;font-weight:650;line-height:1.35;margin:0;overflow-wrap:anywhere}.mapa-parameterization-legend{--mapa-classification-tag-min-width: var(--mapa-report-pill-width)}.mapa-parameterization-summary,.mapa-parameterization-detail,.mapa-parameterization-ranking{display:grid;gap:16px;min-width:0}.mapa-parameterization-summary>h3,.mapa-parameterization-detail>h3,.mapa-parameterization-ranking>h3{color:#596575;font-size:18px;font-weight:650;line-height:1.3;margin:0}.mapa-parameterization-summary__rows{border:1px solid var(--mapa-report-border);border-radius:14px;padding:16px 20px}.mapa-parameterization-summary__row{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(200px,36%) minmax(140px,1fr) 48px;min-height:48px}.mapa-parameterization-summary__row+.mapa-parameterization-summary__row{border-top:1px solid var(--mapa-parameterization-line)}.mapa-parameterization-summary__row>span:first-child{color:#4f5d70;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.mapa-parameterization-summary__row>strong{color:#596575;font-size:14px;text-align:right}.mapa-parameterization-summary__track{background:var(--mapa-parameterization-rail);border-radius:999px;display:block;height:14px;overflow:hidden}.mapa-parameterization-summary__track i{background:var(--mapa-parameterization-accent);border-radius:inherit;display:block;height:100%}@media(max-width:900px){.mapa-parameterization-overview__headline,.mapa-parameterization-group__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-overview__score,mapa-result-track{min-width:0}.mapa-parameterization-group__header>mapa-result-track{justify-self:start}.mapa-parameterization-dimensions li{grid-template-columns:minmax(150px,1fr) auto}.mapa-parameterization-dimensions__description{grid-column:1/-1;padding-left:28px}}@media(max-width:600px){.mapa-parameterization-overview,.mapa-parameterization-group{padding:16px}.mapa-parameterization-overview h3{font-size:20px}.mapa-parameterization-summary__rows{padding:8px 14px}.mapa-parameterization-summary__row{gap:9px;grid-template-columns:minmax(0,1fr) 44px;padding:10px 0}.mapa-parameterization-summary__row .mapa-parameterization-summary__track{grid-column:1/-1;grid-row:2}.mapa-parameterization-summary__row>strong{grid-column:2;grid-row:1}.mapa-parameterization-dimensions li{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-dimensions__description{grid-column:auto;padding-left:28px}}@media print{.mapa-parameterization-overview,.mapa-parameterization-group,.mapa-parameterization-competence{break-inside:avoid}}\n", ".mapa-parameterization-detail__sections{display:grid;gap:22px}.mapa-parameterization-group{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);border:1px solid var(--mapa-report-border);border-radius:14px;min-width:0;padding:18px}.mapa-parameterization-group__header{align-items:start;display:grid;gap:20px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-group__header>mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-group__header h4{color:#2c2e3a;font-size:20px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-group__header>div:first-child>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:5px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep p,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{padding-left:20px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep li{margin:0 0 3px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep b,.mapa-parameterization-group__header>div:first-child>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-group__header>div:first-child>div ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-group__label{background:#f1f4f8;border:1px solid var(--mapa-report-border);border-radius:7px;color:#405064;font-size:13px;font-weight:650;margin-top:16px;padding:7px 10px}.mapa-parameterization-group__grid{display:grid;column-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;row-gap:14px}.mapa-parameterization-dimensions mapa-classification-tag{flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-parameterization-competence{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0;padding:16px 14px 13px}.mapa-parameterization-competence__header{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-competence__header mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-competence__header h5{color:#2c2e3a;font-size:16px;font-weight:650;line-height:1.3;margin:0;overflow-wrap:anywhere}.mapa-parameterization-competence__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:12px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep p,.mapa-parameterization-competence__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-competence__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-competence__description ::ng-deep b,.mapa-parameterization-competence__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-competence__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:14px 0 0;padding:12px 0 0}.mapa-parameterization-dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.mapa-parameterization-dimensions__name{align-items:center;color:#4f5d70;display:flex;font-size:12px;gap:8px;line-height:1.4;min-width:0}.mapa-parameterization-dimensions__name span:last-child{overflow-wrap:anywhere}.mapa-parameterization-dimensions__description{color:var(--mapa-report-muted);font-size:11px;grid-column:1/-1;line-height:1.45;padding-left:28px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep p,.mapa-parameterization-dimensions__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-dimensions__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-dimensions__description ::ng-deep b,.mapa-parameterization-dimensions__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-dimensions__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-ranking mapa-report-ranking-table-widget{display:block;min-width:0}@media(max-width:1100px){.mapa-parameterization-group__grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.mapa-parameterization-competence__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-competence__header mapa-result-track{justify-self:start}}\n"] }]
|
|
9157
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mapa-report-widget\" [attr.data-palette]=\"palette()\">\n <header class=\"mapa-report-widget__header\">\n <div class=\"mapa-report-widget__heading\">\n <h2>{{ heading().title }}</h2>\n @if (heading().description) {\n <div\n class=\"mapa-report-widget__description\"\n [innerHTML]=\"heading().description | safeHtml\"\n ></div>\n }\n </div>\n </header>\n\n @if (content() !== \"ranking\") {\n @if (legend().length) {\n <mapa-report-legend\n class=\"mapa-parameterization-legend\"\n appearance=\"psychosocial\"\n [expanded]=\"true\"\n [groups]=\"legend()\"\n />\n }\n\n <mat-button-toggle-group\n class=\"mapa-report-widget__modes mapa-report-widget__modes--standalone\"\n hideSingleSelectionIndicator\n [attr.aria-label]=\"i18n.texts.report.viewModeLabel\"\n [value]=\"mode()\"\n (change)=\"mode.set($event.value)\"\n >\n <mat-button-toggle value=\"summarized\">\n {{ i18n.texts.report.summarized }}\n </mat-button-toggle>\n <mat-button-toggle value=\"detailed\">\n {{ i18n.texts.report.detailed }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n\n <section class=\"mapa-parameterization-overview\">\n <div class=\"mapa-parameterization-overview__headline\">\n <div>\n <span class=\"mapa-parameterization-overview__eyebrow\">{{\n heading().title\n }}</span>\n <h3>{{ data().name }}</h3>\n </div>\n\n <div class=\"mapa-parameterization-overview__score\">\n <span>{{ i18n.texts.report.overallPercentageTitle }}</span>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thick'\"\n [name]=\"data().name\"\n [value]=\"data().value\"\n />\n </div>\n </div>\n\n @if (finalClassification(); as final) {\n <div class=\"mapa-parameterization-overview__classification\">\n <span class=\"mapa-parameterization-overview__classification-tag\">{{\n final.label\n }}</span>\n @if (final.description) {\n <p>{{ final.description }}</p>\n }\n </div>\n }\n </section>\n\n @if (mode() === \"summarized\" && summaryRows().length) {\n <section class=\"mapa-parameterization-summary\">\n <h3>{{ i18n.texts.report.summarizedReportTitle }}</h3>\n <div class=\"mapa-parameterization-summary__rows\">\n @for (row of summaryRows(); track row.id) {\n <div class=\"mapa-parameterization-summary__row\">\n <span>{{ row.name }}</span>\n <span\n class=\"mapa-parameterization-summary__track\"\n role=\"meter\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n [attr.aria-valuenow]=\"safeValue(row.value)\"\n [attr.aria-label]=\"\n i18n.texts.report.meterLabel(row.name, safeValue(row.value))\n \"\n >\n <i\n [style.width.%]=\"safeValue(row.value)\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <strong>{{ safeValue(row.value) }}%</strong>\n </div>\n }\n </div>\n </section>\n }\n\n @if (mode() === \"detailed\" && data().sections.length) {\n <section class=\"mapa-parameterization-detail\">\n <h3>{{ i18n.texts.report.detailedReportTitle }}</h3>\n\n <div class=\"mapa-parameterization-detail__sections\">\n @for (section of data().sections; track section.id) {\n <section class=\"mapa-parameterization-group\">\n @if (section.name || section.value !== undefined) {\n <header class=\"mapa-parameterization-group__header\">\n <div>\n @if (section.name) {\n <h4>{{ section.name }}</h4>\n }\n @if (section.description) {\n <div [innerHTML]=\"section.description | safeHtml\"></div>\n }\n </div>\n @if (section.value !== undefined) {\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"section.name || i18n.texts.report.groupsTitle\"\n [value]=\"safeValue(section.value)\"\n />\n }\n </header>\n }\n\n @if (section.competences.length) {\n <div class=\"mapa-parameterization-group__label\">\n {{ i18n.texts.report.competenciesAndDimensionsTitle }}\n </div>\n\n <div class=\"mapa-parameterization-group__grid\">\n @for (\n competence of section.competences;\n track competence.id\n ) {\n <article class=\"mapa-parameterization-competence\">\n <header class=\"mapa-parameterization-competence__header\">\n <h5>{{ competence.name }}</h5>\n <mapa-result-track\n appearance=\"stepped\"\n color=\"#59636a\"\n [style]=\"'thin'\"\n [name]=\"competence.name\"\n [value]=\"safeValue(competence.value)\"\n />\n </header>\n\n @if (competence.description) {\n <div\n class=\"mapa-parameterization-competence__description\"\n [innerHTML]=\"competence.description | safeHtml\"\n ></div>\n }\n\n @if (competence.dimensions?.length) {\n <ul class=\"mapa-parameterization-dimensions\">\n @for (\n dimension of competence.dimensions;\n track dimension.id\n ) {\n <li>\n <span\n class=\"mapa-parameterization-dimensions__name\"\n >\n <span\n class=\"mapa-direction-indicator\"\n [attr.aria-label]=\"\n directionLabel(dimension.direction)\n \"\n >{{\n directionArrow(dimension.direction)\n }}</span\n >\n <span>{{ dimension.name }}</span>\n </span>\n @if (hasClassification(dimension)) {\n <mapa-classification-tag\n appearance=\"solid\"\n [classification]=\"dimension.classification\"\n />\n }\n @if (dimension.description) {\n <div\n class=\"mapa-parameterization-dimensions__description\"\n [innerHTML]=\"dimension.description | safeHtml\"\n ></div>\n }\n </li>\n }\n </ul>\n }\n </article>\n }\n </div>\n }\n </section>\n }\n </div>\n </section>\n }\n }\n\n @if (content() !== \"report\" && rankingViews().length) {\n <section class=\"mapa-parameterization-ranking\">\n @if (content() === \"all\") {\n <h3>{{ i18n.texts.report.parameterizationRankingTitle }}</h3>\n }\n <mapa-report-ranking-table-widget\n [palette]=\"palette()\"\n [showAverage]=\"false\"\n [views]=\"rankingViews()\"\n />\n </section>\n }\n</section>\n", styles: [":host{--mapa-report-accent: #ff560b;--mapa-report-accent-soft: #fff0e9;--mapa-report-surface: #fff;--mapa-report-surface-muted: #eef2f3;--mapa-report-border: #e1e5e7;--mapa-report-text: #263238;--mapa-report-muted: #68747a;--mapa-report-pill-width: 104px;--mapa-report-radius: 8px;--mapa-report-space: 20px;color:var(--mapa-report-text);display:block;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", sans-serif)}.mapa-report-widget{display:grid;gap:var(--mapa-report-space)}.mapa-report-widget__header{align-items:flex-start;column-gap:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}.mapa-report-widget__heading{display:contents}.mapa-report-widget__heading h2{color:var(--mapa-report-accent);font-size:20px;font-weight:650;grid-column:1;grid-row:1;line-height:1.25;margin:0}.mapa-report-widget__description{color:var(--mapa-report-muted);font-size:13px;grid-column:1/-1;grid-row:2;line-height:1.5;margin:5px 0 0}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep p,.mapa-report-widget__description ::ng-deep ul{margin:0 0 8px}.mapa-report-widget__description ::ng-deep ol,.mapa-report-widget__description ::ng-deep ul{padding-left:20px}.mapa-report-widget__description ::ng-deep li{margin:0 0 3px}.mapa-report-widget__description ::ng-deep b,.mapa-report-widget__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-report-widget__description ::ng-deep :last-child{margin-bottom:0}.mapa-report-widget__modes{--mat-button-toggle-background-color: var(--mapa-report-surface);--mat-button-toggle-divider-color: #cbd5da;--mat-button-toggle-height: 32px;--mat-button-toggle-label-text-font: var( --mapa-font-body, \"Asap\", sans-serif );--mat-button-toggle-label-text-size: 13px;--mat-button-toggle-label-text-weight: 500;--mat-button-toggle-selected-state-background-color: #59636a;--mat-button-toggle-selected-state-text-color: #fffaf7;--mat-button-toggle-shape: 4px;--mat-button-toggle-text-color: #344b5e;border:1px solid #cbd5da;border-radius:4px;grid-column:2;grid-row:1;overflow:hidden}.mapa-report-widget__modes mat-button-toggle{font:500 13px/1 var(--mapa-font-body, \"Asap\", sans-serif)}.mapa-report-widget__modes mat-icon{font-size:14px;height:14px;margin-right:5px;width:14px}.mapa-report-widget__modes--standalone{grid-column:1;grid-row:auto;justify-self:start}.mapa-report-widget__empty{color:var(--mapa-report-muted);margin:0;padding:24px 0;text-align:center}@media(max-width:760px){.mapa-report-widget__header{align-items:stretch;grid-template-columns:minmax(0,1fr)}.mapa-report-widget__modes{grid-column:1;grid-row:3;justify-self:start;margin-top:12px}.mapa-report-widget__modes--standalone{grid-row:auto;margin-top:0}}.mapa-direction-indicator{background:var(--mapa-report-surface, var(--mapa-color-surface, #fafbfc));border:1px solid currentColor;border-radius:50%;box-sizing:border-box;color:var(--mapa-report-muted, var(--mapa-color-text-subtle, #68747a));display:inline-grid;flex:0 0 20px;font-size:11px;font-weight:700;height:20px;line-height:1;place-items:center;width:20px}:host{--mapa-parameterization-accent: #59636a;--mapa-parameterization-rail: #dfe4ea;--mapa-parameterization-line: #e7ebee;--mapa-report-card-radius: 10px;--mapa-report-line-soft: #edf1f3;--mapa-report-surface-soft: #fafbfc}.mapa-parameterization-overview{border:1px solid var(--mapa-report-border);border-radius:16px;display:grid;gap:22px;padding:24px}.mapa-parameterization-overview__headline{align-items:start;display:grid;gap:24px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-overview__eyebrow{color:#8a95a5;display:block;font-size:12px;line-height:1.3;margin-bottom:6px;text-transform:uppercase}.mapa-parameterization-overview h3{color:#2c2e3a;font-size:24px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__score{display:grid;gap:7px;min-width:290px}.mapa-parameterization-overview__score mapa-result-track{display:block;min-width:0;width:100%}.mapa-parameterization-overview__score>span{color:#8a95a5;font-size:12px;text-transform:uppercase}.mapa-parameterization-overview__classification{display:grid;gap:8px;justify-items:start}.mapa-parameterization-overview__classification p{color:#59636a;font-size:14px;line-height:1.5;margin:0;overflow-wrap:anywhere}.mapa-parameterization-overview__classification-tag{background:#fff;border:1px solid var(--mapa-report-border);border-radius:999px;color:#2c2e3a;font-size:13px;font-weight:650;line-height:1.3;padding:5px 13px}.mapa-parameterization-overview__metadata{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin:0}.mapa-parameterization-overview__metadata div{border:1px solid var(--mapa-report-border);border-radius:12px;min-width:0;padding:13px 15px}.mapa-parameterization-overview__metadata dt{color:#8a95a5;font-size:11px;line-height:1.3;margin-bottom:8px;text-transform:uppercase}.mapa-parameterization-overview__metadata dd{color:#2c2e3a;font-size:15px;font-weight:650;line-height:1.35;margin:0;overflow-wrap:anywhere}.mapa-parameterization-legend{--mapa-classification-tag-min-width: var(--mapa-report-pill-width)}.mapa-parameterization-summary,.mapa-parameterization-detail,.mapa-parameterization-ranking{display:grid;gap:16px;min-width:0}.mapa-parameterization-summary>h3,.mapa-parameterization-detail>h3,.mapa-parameterization-ranking>h3{color:#596575;font-size:18px;font-weight:650;line-height:1.3;margin:0}.mapa-parameterization-summary__rows{border:1px solid var(--mapa-report-border);border-radius:14px;padding:16px 20px}.mapa-parameterization-summary__row{align-items:center;display:grid;gap:20px;grid-template-columns:minmax(200px,36%) minmax(140px,1fr) 48px;min-height:48px}.mapa-parameterization-summary__row+.mapa-parameterization-summary__row{border-top:1px solid var(--mapa-parameterization-line)}.mapa-parameterization-summary__row>span:first-child{color:#4f5d70;font-size:14px;line-height:1.35;overflow-wrap:anywhere}.mapa-parameterization-summary__row>strong{color:#596575;font-size:14px;text-align:right}.mapa-parameterization-summary__track{background:var(--mapa-parameterization-rail);border-radius:999px;display:block;height:14px;overflow:hidden}.mapa-parameterization-summary__track i{background:var(--mapa-parameterization-accent);border-radius:inherit;display:block;height:100%}@media(max-width:900px){.mapa-parameterization-overview__headline,.mapa-parameterization-group__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-overview__score,mapa-result-track{min-width:0}.mapa-parameterization-group__header>mapa-result-track{justify-self:start}.mapa-parameterization-dimensions li{grid-template-columns:minmax(150px,1fr) auto}.mapa-parameterization-dimensions__description{grid-column:1/-1;padding-left:28px}}@media(max-width:600px){.mapa-parameterization-overview,.mapa-parameterization-group{padding:16px}.mapa-parameterization-overview h3{font-size:20px}.mapa-parameterization-summary__rows{padding:8px 14px}.mapa-parameterization-summary__row{gap:9px;grid-template-columns:minmax(0,1fr) 44px;padding:10px 0}.mapa-parameterization-summary__row .mapa-parameterization-summary__track{grid-column:1/-1;grid-row:2}.mapa-parameterization-summary__row>strong{grid-column:2;grid-row:1}.mapa-parameterization-dimensions li{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-dimensions__description{grid-column:auto;padding-left:28px}}@media print{.mapa-parameterization-overview,.mapa-parameterization-group,.mapa-parameterization-competence{break-inside:avoid}}\n", ".mapa-parameterization-detail__sections{display:grid;gap:22px}.mapa-parameterization-group{--mapa-classification-tag-min-width: var(--mapa-report-pill-width);border:1px solid var(--mapa-report-border);border-radius:14px;min-width:0;padding:18px}.mapa-parameterization-group__header{align-items:start;display:grid;gap:20px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-group__header>mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-group__header h4{color:#2c2e3a;font-size:20px;font-weight:650;line-height:1.25;margin:0;overflow-wrap:anywhere}.mapa-parameterization-group__header>div:first-child>div{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:5px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep p,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep ol,.mapa-parameterization-group__header>div:first-child>div ::ng-deep ul{padding-left:20px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep li{margin:0 0 3px}.mapa-parameterization-group__header>div:first-child>div ::ng-deep b,.mapa-parameterization-group__header>div:first-child>div ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-group__header>div:first-child>div ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-group__label{background:#f1f4f8;border:1px solid var(--mapa-report-border);border-radius:7px;color:#405064;font-size:13px;font-weight:650;margin-top:16px;padding:7px 10px}.mapa-parameterization-group__grid{display:grid;column-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;row-gap:14px}.mapa-parameterization-dimensions mapa-classification-tag{flex:0 0 auto;max-width:var(--mapa-report-pill-width)}.mapa-parameterization-competence{background:var(--mapa-report-surface);border:1px solid var(--mapa-report-border);border-radius:var(--mapa-report-card-radius);min-width:0;padding:16px 14px 13px}.mapa-parameterization-competence__header{align-items:center;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto}.mapa-parameterization-competence__header mapa-result-track{display:block;justify-self:end;max-width:100%;width:max-content}.mapa-parameterization-competence__header h5{color:#2c2e3a;font-size:16px;font-weight:650;line-height:1.3;margin:0;overflow-wrap:anywhere}.mapa-parameterization-competence__description{color:var(--mapa-report-muted);font-size:12px;line-height:1.5;margin-top:12px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep p,.mapa-parameterization-competence__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-competence__description ::ng-deep ol,.mapa-parameterization-competence__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-competence__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-competence__description ::ng-deep b,.mapa-parameterization-competence__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-competence__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-dimensions{border-top:1px solid var(--mapa-report-line-soft);display:grid;gap:7px;list-style:none;margin:14px 0 0;padding:12px 0 0}.mapa-parameterization-dimensions li{align-items:center;background:var(--mapa-report-surface-soft);border:1px solid var(--mapa-report-line-soft);border-radius:9px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}.mapa-parameterization-dimensions__name{align-items:center;color:#4f5d70;display:flex;font-size:12px;gap:8px;line-height:1.4;min-width:0}.mapa-parameterization-dimensions__name span:last-child{overflow-wrap:anywhere}.mapa-parameterization-dimensions__description{color:var(--mapa-report-muted);font-size:11px;grid-column:1/-1;line-height:1.45;padding-left:28px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep p,.mapa-parameterization-dimensions__description ::ng-deep ul{margin:0 0 8px}.mapa-parameterization-dimensions__description ::ng-deep ol,.mapa-parameterization-dimensions__description ::ng-deep ul{padding-left:20px}.mapa-parameterization-dimensions__description ::ng-deep li{margin:0 0 3px}.mapa-parameterization-dimensions__description ::ng-deep b,.mapa-parameterization-dimensions__description ::ng-deep strong{color:var(--mapa-report-text, inherit);font-weight:600}.mapa-parameterization-dimensions__description ::ng-deep :last-child{margin-bottom:0}.mapa-parameterization-ranking mapa-report-ranking-table-widget{display:block;min-width:0}@media(max-width:1100px){.mapa-parameterization-group__grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.mapa-parameterization-competence__header{grid-template-columns:minmax(0,1fr)}.mapa-parameterization-competence__header mapa-result-track{justify-self:start}}\n"] }]
|
|
9154
9158
|
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }] } });
|
|
9155
9159
|
|
|
9156
9160
|
class MapaProgressbarComponent {
|