mapa-library-ui 2.5.4 → 2.5.6

package/fesm2022/mapa-library-ui.mjs

@@ -7,7 +7,7 @@ import * as i2 from '@angular/forms';
 import { NgControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, FormsModule } from '@angular/forms';
 import { NgxMaskDirective, NgxMaskService, provideNgxMask } from 'ngx-mask';
 import { filter, map, startWith } from 'rxjs/operators';
-import { fromEvent, merge } from 'rxjs';
+import { fromEvent, merge, EMPTY } from 'rxjs';
 import * as i1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$1 from '@angular/material/paginator';
@@ -6046,7 +6046,7 @@ class MapaDropdownComponent {
     set formControl(control) {
         this.formControlChanges?.unsubscribe();
         this.formControlValue = control;
-        this.formControlChanges = merge(control.valueChanges, control.statusChanges)
+        this.formControlChanges = merge(control.events, control.parent?.events ?? EMPTY)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.cdr.markForCheck());
     }
@@ -6593,7 +6593,7 @@ class MapaDatepicker {
         this.control.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((value) => this.applyExternal(value));
-        this.control.statusChanges
+        merge(this.control.events, this.formGroup.events)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.cdr.markForCheck());
         this.formDisplay.valueChanges
@@ -7016,7 +7016,7 @@ class MapaDatepicker {
         this.openedChange.emit(isOpen);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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\">&ndash;</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                &times;\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                &times;\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 }); }
+    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\">&ndash;</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                &times;\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                &times;\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, decorators: [{
             type: Component,
@@ -7033,7 +7033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         CdkOverlayOrigin,
                         NgxsmkDatepickerComponent,
                         MapaFormErrorsComponent,
-                    ], 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\">&ndash;</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                &times;\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                &times;\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"] }]
+                    ], 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\">&ndash;</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                &times;\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                &times;\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"] }]
         }], propDecorators: { formGroup: [{
                 type: Input,
                 args: [{ required: true }]
@@ -8895,12 +8895,6 @@ class MapaReportRankingTableWidgetComponent {
         this.view = model(...(ngDevMode ? [undefined, { debugName: "view" }] : []));
         this.palette = input('current', ...(ngDevMode ? [{ debugName: "palette" }] : []));
         this.showAverage = input(false, ...(ngDevMode ? [{ debugName: "showAverage" }] : []));
-        /**
-         * Swaps the classification chip for the raw score and direction while the
-         * cell is hovered or focused. Off by default — the chip already carries the
-         * reading, so the swap only makes the table jump under the cursor.
-         */
-        this.showScoreOnHover = input(false, ...(ngDevMode ? [{ debugName: "showScoreOnHover" }] : []));
         /** Header of the first column, per view id. Falls back to the view label. */
         this.entryColumnLabel = input(...(ngDevMode ? [undefined, { debugName: "entryColumnLabel" }] : []));
         /** Footnote under the table. */
@@ -9024,7 +9018,7 @@ class MapaReportRankingTableWidgetComponent {
         return name.trim().toLowerCase();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportRankingTableWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }, showScoreOnHover: { classPropertyName: "showScoreOnHover", publicName: "showScoreOnHover", 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\n              class=\"mapa-report-ranking-table__cell\"\n              [class.mapa-report-ranking-table__cell--swaps]=\"\n                showScoreOnHover() && hasClassification($any(row), column.key)\n              \"\n            >\n              @if (hasClassification($any(row), column.key)) {\n                <span class=\"mapa-report-ranking-table__chip\">\n                  <mapa-classification-tag\n                    appearance=\"solid\"\n                    [classification]=\"classification($any(row), column.key)\"\n                  />\n                </span>\n                @if (showScoreOnHover()) {\n                  <span class=\"mapa-report-ranking-table__score\">\n                    @if (direction($any(row), column.key)) {\n                      <span\n                        class=\"mapa-direction-indicator\"\n                        [attr.aria-label]=\"\n                          directionLabel($any(row), column.key)\n                        \"\n                        >{{ directionArrow($any(row), column.key) }}</span\n                      >\n                    }\n                    {{ value($any(row), column.key) }}\n                  </span>\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__cell--swaps .mapa-report-ranking-table__chip,.mapa-report-ranking-table__cell--swaps .mapa-report-ranking-table__score{grid-area:1/1}.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__cell--swaps:hover .mapa-report-ranking-table__chip,.mapa-report-ranking-table__cell--swaps:focus-within .mapa-report-ranking-table__chip{display:none}.mapa-report-ranking-table__cell--swaps:hover .mapa-report-ranking-table__score,.mapa-report-ranking-table__cell--swaps:focus-within .mapa-report-ranking-table__score{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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportRankingTableWidgetComponent, decorators: [{
             type: Component,
@@ -9035,8 +9029,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         MatButtonToggleModule,
                         MatIconModule,
                         SafeHtmlPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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\n              class=\"mapa-report-ranking-table__cell\"\n              [class.mapa-report-ranking-table__cell--swaps]=\"\n                showScoreOnHover() && hasClassification($any(row), column.key)\n              \"\n            >\n              @if (hasClassification($any(row), column.key)) {\n                <span class=\"mapa-report-ranking-table__chip\">\n                  <mapa-classification-tag\n                    appearance=\"solid\"\n                    [classification]=\"classification($any(row), column.key)\"\n                  />\n                </span>\n                @if (showScoreOnHover()) {\n                  <span class=\"mapa-report-ranking-table__score\">\n                    @if (direction($any(row), column.key)) {\n                      <span\n                        class=\"mapa-direction-indicator\"\n                        [attr.aria-label]=\"\n                          directionLabel($any(row), column.key)\n                        \"\n                        >{{ directionArrow($any(row), column.key) }}</span\n                      >\n                    }\n                    {{ value($any(row), column.key) }}\n                  </span>\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__cell--swaps .mapa-report-ranking-table__chip,.mapa-report-ranking-table__cell--swaps .mapa-report-ranking-table__score{grid-area:1/1}.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__cell--swaps:hover .mapa-report-ranking-table__chip,.mapa-report-ranking-table__cell--swaps:focus-within .mapa-report-ranking-table__chip{display:none}.mapa-report-ranking-table__cell--swaps:hover .mapa-report-ranking-table__score,.mapa-report-ranking-table__cell--swaps:focus-within .mapa-report-ranking-table__score{display:inline-flex}.mapa-report-ranking-table__note{color:var(--mapa-report-muted);font-size:11px;margin:0}\n"] }]
-        }], 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 }] }], showScoreOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScoreOnHover", 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 }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], 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 }] }] } });
 
 class MapaReportParameterizationWidgetComponent {
     constructor() {
@@ -9145,7 +9139,7 @@ class MapaReportParameterizationWidgetComponent {
         return typeof value === 'number' && Number.isFinite(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportParameterizationWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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", "showScoreOnHover", "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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaReportParameterizationWidgetComponent, decorators: [{
             type: Component,