mapa-library-ui 2.1.0 → 2.1.1

package/fesm2022/mapa-library-ui.mjs

@@ -32,19 +32,15 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { NgxsmkDatepickerComponent } from 'ngxsmk-datepicker';
 import * as i1$4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogConfig } from '@angular/material/dialog';
-import * as i2$4 from '@angular/material/icon';
+import * as i1$5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i3$2 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i3$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i4 from '@angular/material/sort';
-import { MatSortModule, MatSort } from '@angular/material/sort';
-import * as i3$4 from '@angular/material/table';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import * as i3$5 from '@angular/material/menu';
+import * as i3$4 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import * as i1$5 from '@angular/common/http';
+import * as i1$6 from '@angular/common/http';
 
 class ElementBase {
     constructor(options = {}) {
@@ -6883,7 +6879,7 @@ class MapaDialogComponent {
         this.dataEmitter.emit(this.dialogData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$4.MatDialogRef }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaDialogComponent, isStandalone: true, selector: "mapa-dialog", inputs: { isReportRegistration: "isReportRegistration" }, outputs: { dataEmitter: "dataEmitter" }, ngImport: i0, template: "<div class=\"mapa-dialog\">\n  <div class=\"dialog-icon\">\n    <mat-icon (click)=\"close()\">close</mat-icon>\n  </div> \n  <mat-dialog-content>\n    <img *ngIf=\"imgBase64\" [src]=\"imgBase64\" />\n    <h2>\n      {{ dialogData.title }}\n    </h2>\n    <p [innerHTML]=\"htmlDescription | safeHtml\"></p>\n  </mat-dialog-content>\n  <div *ngIf=\"dialogData.isReportRegistration\">\n    <mapa-button color=\"accent\" (click)=\"emitData()\">\n      {{ dialogData.button }}\n    </mapa-button>\n  </div>\n  <mat-dialog-actions *ngIf=\"!dialogData.isReportRegistration\" class=\"mapa-dialog__actions\">\n    <mapa-button color=\"basic\" (click)=\"close()\" *ngIf=\"dialogData.actions.close\">\n      {{ dialogData.actions.close }}\n    </mapa-button>\n    <mapa-button color=\"primary\" (click)=\"save()\" *ngIf=\"dialogData.actions.save\">\n      {{ dialogData.actions.save }}\n    </mapa-button>\n  </mat-dialog-actions>\n</div>\n\n", styles: [".mapa-dialog{background-color:#f6f7f7!important;border-radius:8px!important;padding:42px!important}.mapa-dialog .dialog-icon{display:flex;margin-left:95%}.mapa-dialog .mat-icon{cursor:pointer;display:flex;position:relative;align-self:flex-end}.mapa-dialog h2{color:#181818;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:24px;font-style:normal;font-weight:400;line-height:32px}.mapa-dialog img{padding:39px 11px;width:100%;border-radius:8px;border:1px solid #CDCDCD;background:#fff;margin:30px 0}.mapa-dialog p{color:#50575e;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px}.mapa-dialog__actions{justify-content:end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaDialogComponent, isStandalone: true, selector: "mapa-dialog", inputs: { isReportRegistration: "isReportRegistration" }, outputs: { dataEmitter: "dataEmitter" }, ngImport: i0, template: "<div class=\"mapa-dialog\">\n  <div class=\"dialog-icon\">\n    <mat-icon (click)=\"close()\">close</mat-icon>\n  </div> \n  <mat-dialog-content>\n    <img *ngIf=\"imgBase64\" [src]=\"imgBase64\" />\n    <h2>\n      {{ dialogData.title }}\n    </h2>\n    <p [innerHTML]=\"htmlDescription | safeHtml\"></p>\n  </mat-dialog-content>\n  <div *ngIf=\"dialogData.isReportRegistration\">\n    <mapa-button color=\"accent\" (click)=\"emitData()\">\n      {{ dialogData.button }}\n    </mapa-button>\n  </div>\n  <mat-dialog-actions *ngIf=\"!dialogData.isReportRegistration\" class=\"mapa-dialog__actions\">\n    <mapa-button color=\"basic\" (click)=\"close()\" *ngIf=\"dialogData.actions.close\">\n      {{ dialogData.actions.close }}\n    </mapa-button>\n    <mapa-button color=\"primary\" (click)=\"save()\" *ngIf=\"dialogData.actions.save\">\n      {{ dialogData.actions.save }}\n    </mapa-button>\n  </mat-dialog-actions>\n</div>\n\n", styles: [".mapa-dialog{background-color:#f6f7f7!important;border-radius:8px!important;padding:42px!important}.mapa-dialog .dialog-icon{display:flex;margin-left:95%}.mapa-dialog .mat-icon{cursor:pointer;display:flex;position:relative;align-self:flex-end}.mapa-dialog h2{color:#181818;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:24px;font-style:normal;font-weight:400;line-height:32px}.mapa-dialog img{padding:39px 11px;width:100%;border-radius:8px;border:1px solid #CDCDCD;background:#fff;margin:30px 0}.mapa-dialog p{color:#50575e;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px}.mapa-dialog__actions{justify-content:end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDialogComponent, decorators: [{
             type: Component,
@@ -7051,7 +7047,7 @@ class MapaInputComponent {
                 useExisting: forwardRef(() => MapaInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-input__label\">\n  {{ element.label }}\n</label>\n<div class=\"mapa-form--inline\">\n  <mat-form-field\n    class=\"mapa-input\"\n    [class.mapa-input--autosize]=\"element.autosize\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n  >\n    <mat-icon *ngIf=\"element.prefix\" class=\"mapa-input--prefix\" matPrefix>\n      {{ element.prefix }}\n    </mat-icon>\n    <input\n      *ngIf=\"element.autosize\"\n      matInput\n      matInputAutosize\n      [matInputAutosizeMinWidth]=\"element.autosizeMinWidth!\"\n      [matInputAutosizeMaxWidth]=\"element.autosizeMaxWidth!\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      thousandSeparator=\".\"\n      decimalMarker=\",\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <input\n      matInput\n      *ngIf=\"!element.autosize\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <button\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      type=\"button\"\n      tabindex=\"-1\"\n      matSuffix\n      aria-label=\"Limpar\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n    >\n      &times;\n    </button>\n    <mat-icon\n      *ngIf=\"element.suffix\"\n      class=\"mapa-input--suffix\"\n      matSuffix\n      (click)=\"suffix.emit()\"\n    >\n      {{ element.suffix }}\n    </mat-icon>\n    <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n    <mat-error>\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </mat-error>\n  </mat-form-field>\n\n  <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n    <mapa-button\n      color=\"basic\"\n      (clicked)=\"element.actionButton.action.emit(true)\"\n    >\n      {{ element.actionButton.label }}\n    </mapa-button>\n  </div>\n</div>\n", styles: [":host{display:inline-block;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input{width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input--autosize{width:auto;--mapa-input-autosize-preferred-width: 310px}.mapa-input__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-input--autosize .mat-mdc-form-field-infix{overflow:hidden}:host ::ng-deep .mapa-input .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-error:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint{display:block;margin:8px 0 0;padding-left:4px;color:var(--mapa-color-muted, #555555);font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}:host ::ng-deep .mapa-input .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:var(--mapa-color-surface, #ffffff);border-radius:var(--mapa-radius-sm, 12px);height:48px}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-input .mdc-notched-outline{background-color:transparent;border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-input .mdc-text-field--outlined .mat-mdc-form-field-infix{padding-bottom:12px;padding-top:16px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-input .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-input .mdc-notched-outline__leading,:host ::ng-deep .mapa-input .mdc-notched-outline__notch,:host ::ng-deep .mapa-input .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close{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-input .mat-mdc-form-field-icon-suffix .mapa-input--close:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:last-child{margin-right:12px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--suffix{padding:0 0 0 8px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mat-icon:last-child{padding-right:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: MatInputAutosizeDirective, selector: "[matInputAutosize]", inputs: ["matInputAutosizeMaxWidth", "matInputAutosizeMinWidth", "matInputAutosizeFontStyle"] }, { kind: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
+        ], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-input__label\">\n  {{ element.label }}\n</label>\n<div class=\"mapa-form--inline\">\n  <mat-form-field\n    class=\"mapa-input\"\n    [class.mapa-input--autosize]=\"element.autosize\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n  >\n    <mat-icon *ngIf=\"element.prefix\" class=\"mapa-input--prefix\" matPrefix>\n      {{ element.prefix }}\n    </mat-icon>\n    <input\n      *ngIf=\"element.autosize\"\n      matInput\n      matInputAutosize\n      [matInputAutosizeMinWidth]=\"element.autosizeMinWidth!\"\n      [matInputAutosizeMaxWidth]=\"element.autosizeMaxWidth!\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      thousandSeparator=\".\"\n      decimalMarker=\",\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <input\n      matInput\n      *ngIf=\"!element.autosize\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <button\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      type=\"button\"\n      tabindex=\"-1\"\n      matSuffix\n      aria-label=\"Limpar\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n    >\n      &times;\n    </button>\n    <mat-icon\n      *ngIf=\"element.suffix\"\n      class=\"mapa-input--suffix\"\n      matSuffix\n      (click)=\"suffix.emit()\"\n    >\n      {{ element.suffix }}\n    </mat-icon>\n    <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n    <mat-error>\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </mat-error>\n  </mat-form-field>\n\n  <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n    <mapa-button\n      color=\"basic\"\n      (clicked)=\"element.actionButton.action.emit(true)\"\n    >\n      {{ element.actionButton.label }}\n    </mapa-button>\n  </div>\n</div>\n", styles: [":host{display:inline-block;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input{width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input--autosize{width:auto;--mapa-input-autosize-preferred-width: 310px}.mapa-input__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-input--autosize .mat-mdc-form-field-infix{overflow:hidden}:host ::ng-deep .mapa-input .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-error:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint{display:block;margin:8px 0 0;padding-left:4px;color:var(--mapa-color-muted, #555555);font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}:host ::ng-deep .mapa-input .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:var(--mapa-color-surface, #ffffff);border-radius:var(--mapa-radius-sm, 12px);height:48px}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-input .mdc-notched-outline{background-color:transparent;border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-input .mdc-text-field--outlined .mat-mdc-form-field-infix{padding-bottom:12px;padding-top:16px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-input .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-input .mdc-notched-outline__leading,:host ::ng-deep .mapa-input .mdc-notched-outline__notch,:host ::ng-deep .mapa-input .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close{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-input .mat-mdc-form-field-icon-suffix .mapa-input--close:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:last-child{margin-right:12px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--suffix{padding:0 0 0 8px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mat-icon:last-child{padding-right:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: MatInputAutosizeDirective, selector: "[matInputAutosize]", inputs: ["matInputAutosizeMaxWidth", "matInputAutosizeMinWidth", "matInputAutosizeFontStyle"] }, { kind: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaInputComponent, decorators: [{
             type: Component,
@@ -7351,477 +7347,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
  * Public API Surface of mapa-library-ui form
  */
 
-class MapaGroupReportComponent {
-    constructor() {
-        this.groupReport = [];
-        this.showGroupReportGeneral = false;
-        this.onSortChange = new EventEmitter();
-        this.dataSource = new MatTableDataSource([]);
-        this.displayedColumns = [];
-        this.columns = [];
-        this.data = [];
-    }
-    ngAfterViewInit() {
-        this.dataSource.sort = this.sort;
-    }
-    ngOnChanges(changes) {
-        if (changes["groupReport"] || changes["showGroupReportGeneral"]) {
-            this.refreshTableState();
-        }
-    }
-    trackColumn(index, column) {
-        return `${index}:${column.key}`;
-    }
-    handleSortChange(sort) {
-        this.onSortChange.emit(sort);
-    }
-    getDimensionCell(row, key) {
-        const cell = row[key];
-        return this.isGroupReportDimensionCell(cell) ? cell : undefined;
-    }
-    getDimensionClassification(row, key) {
-        return this.getDimensionCell(row, key)?.value?.classification;
-    }
-    getDimensionLabel(row, key) {
-        return this.getDimensionCell(row, key)?.value?.label ?? "-";
-    }
-    getGeneralValue(row) {
-        return typeof row.general === "number" ? row.general : null;
-    }
-    refreshTableState() {
-        this.columns = this.generateColumns();
-        this.data = this.generateGroupData();
-        this.displayedColumns = this.columns.map((column) => column.key);
-        this.dataSource.data = this.data;
-        this.dataSource.sortingDataAccessor = (row, columnKey) => this.getSortValue(row, columnKey);
-        if (this.sort) {
-            this.dataSource.sort = this.sort;
-        }
-    }
-    getSortValue(row, columnKey) {
-        const cell = row[columnKey];
-        if (this.isGroupReportDimensionCell(cell)) {
-            return cell.value?.classification?.classificationId ?? 0;
-        }
-        return typeof cell === "number" || typeof cell === "string" ? cell : "";
-    }
-    isGroupReportDimensionCell(value) {
-        return typeof value === "object" && value !== null && "direction" in value;
-    }
-    generateColumns() {
-        const columns = [{ key: "name", label: "", sort: false }];
-        const existingKeys = new Set(["name"]);
-        if (this.showGroupReportGeneral) {
-            columns.push({ key: "general", label: "% Geral", sort: false });
-            existingKeys.add("general");
-        }
-        this.groupReport.forEach((reportItem) => {
-            reportItem.dimensions?.forEach((dimension) => {
-                const key = this.getColumnKey(dimension.dimensionName);
-                if (!existingKeys.has(key)) {
-                    columns.push({
-                        key,
-                        label: dimension.dimensionName,
-                        classification: dimension.classification,
-                        sort: true,
-                    });
-                    existingKeys.add(key);
-                }
-            });
-        });
-        return columns;
-    }
-    generateGroupData() {
-        return this.groupReport.map((item) => {
-            const dataItem = {
-                name: item.candidate.name,
-                cpf: item.candidate.cpf,
-                general: item.candidate.general,
-            };
-            item.dimensions?.forEach((dimension) => {
-                dataItem[this.getColumnKey(dimension.dimensionName)] = {
-                    value: {
-                        label: this.getDimensionDisplayValue(dimension),
-                        classification: this.getDimensionClassificationFromDimension(dimension),
-                    },
-                    direction: dimension.direction,
-                };
-            });
-            return dataItem;
-        });
-    }
-    getColumnKey(dimensionName) {
-        return dimensionName.toLowerCase();
-    }
-    getDimensionDisplayValue(dimension) {
-        return (dimension.escoreT ??
-            dimension.average ??
-            dimension.percentil ??
-            dimension.percentage ??
-            dimension.count);
-    }
-    getDimensionClassificationFromDimension(dimension) {
-        if (dimension.classification) {
-            return dimension.classification;
-        }
-        if (dimension.classificationId === undefined &&
-            !dimension.classificationName &&
-            !dimension.classificationColor) {
-            return undefined;
-        }
-        return {
-            classificationId: dimension.classificationId,
-            classificationName: dimension.classificationName,
-            classificationColor: dimension.classificationColor,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaGroupReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaGroupReportComponent, isStandalone: true, selector: "mapa-group-report", inputs: { groupReport: "groupReport", showGroupReportGeneral: "showGroupReportGeneral" }, outputs: { onSortChange: "onSortChange" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"mapa-group-report\">\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"handleSortChange($event)\"\n  >\n    @for (column of columns; track trackColumn($index, column)) {\n      <ng-container [matColumnDef]=\"column.key\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [disabled]=\"!column.sort\"\n        >\n          <div\n            [ngTemplateOutlet]=\"tableHeader\"\n            [ngTemplateOutletContext]=\"{ column: column }\"\n          ></div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n          <div\n            class=\"mapa-group-report__column\"\n            [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n          >\n            <div class=\"mapa-group-report__content\">\n              @if (column.key === \"name\") {\n                <div class=\"mapa-group-report__content--value\">\n                  <div class=\"mapa-group-report__content--title\">\n                    {{ row.name }}<br />\n                  </div>\n                  <div class=\"mapa-group-report__content--subtitle\">\n                    {{ row.cpf }}\n                  </div>\n                </div>\n              } @else if (column.key === \"general\") {\n                <div class=\"general\">\n                  {{ getGeneralValue(row) | currency:'':'' }}%\n                </div>\n              } @else {\n                <div class=\"mapa-group-report__hover\">\n                  <span class=\"mapa-group-report__hover--main\">\n                    <div\n                      class=\"mapa__tag--bg\"\n                      [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n                      [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n                    >\n                      {{\n                        getDimensionClassification(row, column.key)?.classificationName ||\n                          \"-\"\n                      }}\n                    </div>\n                  </span>\n                  <span class=\"mapa-group-report__hover--hidden\">\n                    {{ getDimensionLabel(row, column.key) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n  <div class=\"mapa-group-report__header\">\n    {{ column.label }}\n    @if (column.sort) {\n      <div>\n        <mat-icon>filter_list</mat-icon>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__header{font-size:14px!important;justify-content:flex-start!important;gap:10px}:host ::ng-deep .mapa-group-report__header mat-icon{font-size:16px!important;height:16px!important;width:16px!important;margin-left:8px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i1$2.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+function customPaginatorFactory(i18n, injector) {
+    const customPaginatorIntl = new MatPaginatorIntl();
+    effect(() => {
+        const paginatorTexts = i18n.textsSignal().paginator;
+        customPaginatorIntl.itemsPerPageLabel = paginatorTexts.itemsPerPage;
+        customPaginatorIntl.nextPageLabel = paginatorTexts.nextPage;
+        customPaginatorIntl.previousPageLabel = paginatorTexts.previousPage;
+        customPaginatorIntl.getRangeLabel = paginatorTexts.showingRangeLabel;
+        customPaginatorIntl.changes.next();
+    }, { injector });
+    return customPaginatorIntl;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaGroupReportComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mapa-group-report", changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, MatTableModule, MatSortModule], standalone: true, template: "<section class=\"mapa-group-report\">\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"handleSortChange($event)\"\n  >\n    @for (column of columns; track trackColumn($index, column)) {\n      <ng-container [matColumnDef]=\"column.key\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [disabled]=\"!column.sort\"\n        >\n          <div\n            [ngTemplateOutlet]=\"tableHeader\"\n            [ngTemplateOutletContext]=\"{ column: column }\"\n          ></div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n          <div\n            class=\"mapa-group-report__column\"\n            [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n          >\n            <div class=\"mapa-group-report__content\">\n              @if (column.key === \"name\") {\n                <div class=\"mapa-group-report__content--value\">\n                  <div class=\"mapa-group-report__content--title\">\n                    {{ row.name }}<br />\n                  </div>\n                  <div class=\"mapa-group-report__content--subtitle\">\n                    {{ row.cpf }}\n                  </div>\n                </div>\n              } @else if (column.key === \"general\") {\n                <div class=\"general\">\n                  {{ getGeneralValue(row) | currency:'':'' }}%\n                </div>\n              } @else {\n                <div class=\"mapa-group-report__hover\">\n                  <span class=\"mapa-group-report__hover--main\">\n                    <div\n                      class=\"mapa__tag--bg\"\n                      [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n                      [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n                    >\n                      {{\n                        getDimensionClassification(row, column.key)?.classificationName ||\n                          \"-\"\n                      }}\n                    </div>\n                  </span>\n                  <span class=\"mapa-group-report__hover--hidden\">\n                    {{ getDimensionLabel(row, column.key) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n  <div class=\"mapa-group-report__header\">\n    {{ column.label }}\n    @if (column.sort) {\n      <div>\n        <mat-icon>filter_list</mat-icon>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__header{font-size:14px!important;justify-content:flex-start!important;gap:10px}:host ::ng-deep .mapa-group-report__header mat-icon{font-size:16px!important;height:16px!important;width:16px!important;margin-left:8px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
-        }], propDecorators: { groupReport: [{
-                type: Input
-            }], showGroupReportGeneral: [{
-                type: Input
-            }], onSortChange: [{
-                type: Output
-            }], sort: [{
-                type: ViewChild,
-                args: [MatSort]
-            }] } });
 
-class IconComponent {
-    constructor(matIconRegistry, domSanitizer) {
-        this.matIconRegistry = matIconRegistry;
-        this.domSanitizer = domSanitizer;
+class MapaSvgIconComponent {
+    constructor(httpClient, cdr) {
+        this.httpClient = httpClient;
+        this.cdr = cdr;
+        this.svgIcon = "";
+        this.destroyRef = inject(DestroyRef);
     }
     ngOnChanges() {
-        this.registerCustomIcons(this.svg);
-    }
-    registerCustomIcons(svg) {
-        this.matIconRegistry.addSvgIcon(svg, this.domSanitizer.bypassSecurityTrustResourceUrl(`../../../../assets/${svg}.svg`));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: IconComponent, deps: [{ token: i2$4.MatIconRegistry }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: IconComponent, isStandalone: true, selector: "mapa-icon", inputs: { svg: "svg" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon *ngIf=\"svg\" [svgIcon]=\"svg\"></mat-icon>\n<mat-icon *ngIf=\"!svg\"><ng-content></ng-content></mat-icon>\n", styles: [".mat-icon{color:#f5704b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mapa-icon', standalone: true, imports: [CommonModule, MatIconModule], template: "<mat-icon *ngIf=\"svg\" [svgIcon]=\"svg\"></mat-icon>\n<mat-icon *ngIf=\"!svg\"><ng-content></ng-content></mat-icon>\n", styles: [".mat-icon{color:#f5704b}\n"] }]
-        }], ctorParameters: () => [{ type: i2$4.MatIconRegistry }, { type: i1$3.DomSanitizer }], propDecorators: { svg: [{
-                type: Input
-            }] } });
-
-/*
- * Public API Surface of mapa-library-ui icon
- */
-
-class MapaMenuComponent {
-    constructor() {
-        this.items = [];
-        this.emitMenu = new EventEmitter();
-    }
-    toggleMenu() {
-        this.trigger.openMenu();
+        if (!this.name) {
+            this.svgIcon = "";
+            return;
+        }
+        if (this.color) {
+            this.httpClient
+                .get(`images/icons/${this.name}.svg`, { responseType: 'text' })
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((value) => {
+                this.svgIcon = this.applyColor(value);
+                this.cdr.markForCheck();
+            });
+            return;
+        }
+        this.svgIcon = `<img src="images/icons/${this.name}.svg" alt="${this.name}" />`;
+        this.cdr.markForCheck();
     }
-    clickMenu(item) {
-        this.emitMenu.emit({ action: item.action, data: this.data });
+    applyColor(value) {
+        if (!this.color) {
+            return value;
+        }
+        return value
+            .replaceAll('fill="#50575E"', `fill="${this.color}"`)
+            .replaceAll('fill="#181818"', `fill="${this.color}"`)
+            .replaceAll('fill="#7def7b"', `fill="${this.color}"`)
+            .replaceAll('stroke="#50575E"', `stroke="${this.color}"`)
+            .replaceAll('stroke="#181818"', `stroke="${this.color}"`)
+            .replaceAll('stroke="#7def7b"', `stroke="${this.color}"`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaMenuComponent, isStandalone: true, selector: "mapa-menu", inputs: { items: "items", data: "data" }, outputs: { emitMenu: "emitMenu" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" class=\"mapa-menu\">\n  <button\n    *ngFor=\"let item of items\"\n    mat-menu-item\n    (click)=\"clickMenu(item)\"\n    class=\"mapa-menu__item\"\n    [class.mapa-menu__item--disabled]=\"item.disabled\"\n  >\n    <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n    <img *ngIf=\"item.image\" [src]=\"item.image\" />\n    <span>{{item.text}}</span>\n  </button>\n</mat-menu>\n\n<img\n  class=\"outside-menu-icon\"\n  src=\"assets/images/icons/ThreePoints.svg\"\n  (click)=\"toggleMenu()\"\n  [matMenuTriggerFor]=\"menu\"\n/>\n", styles: [".outside-menu-icon{color:#50575e;display:flex;align-items:center;justify-content:center}.mat-mdc-menu-content mat-icon{color:var(--Grey-Grey-60, #50575e);font-size:16px;line-height:28px}.mapa-menu__item{display:flex;align-items:center}.mapa-menu__item img{margin-right:8px}.mapa-menu__item--disabled{opacity:.45;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaSvgIconComponent, deps: [{ token: i1$6.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaSvgIconComponent, isStandalone: true, selector: "mapa-svg-icon", inputs: { name: "name", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"svgIcon\" class=\"mapa__svg-icon\" [innerHTML]=\"svgIcon | safeHtml\"></span>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaSvgIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-menu", imports: [CommonModule, MatIconModule, MatMenuModule], standalone: true, template: "<mat-menu #menu=\"matMenu\" class=\"mapa-menu\">\n  <button\n    *ngFor=\"let item of items\"\n    mat-menu-item\n    (click)=\"clickMenu(item)\"\n    class=\"mapa-menu__item\"\n    [class.mapa-menu__item--disabled]=\"item.disabled\"\n  >\n    <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n    <img *ngIf=\"item.image\" [src]=\"item.image\" />\n    <span>{{item.text}}</span>\n  </button>\n</mat-menu>\n\n<img\n  class=\"outside-menu-icon\"\n  src=\"assets/images/icons/ThreePoints.svg\"\n  (click)=\"toggleMenu()\"\n  [matMenuTriggerFor]=\"menu\"\n/>\n", styles: [".outside-menu-icon{color:#50575e;display:flex;align-items:center;justify-content:center}.mat-mdc-menu-content mat-icon{color:var(--Grey-Grey-60, #50575e);font-size:16px;line-height:28px}.mapa-menu__item{display:flex;align-items:center}.mapa-menu__item img{margin-right:8px}.mapa-menu__item--disabled{opacity:.45;cursor:not-allowed}\n"] }]
-        }], propDecorators: { items: [{
+            args: [{ selector: "mapa-svg-icon", standalone: true, imports: [CommonModule, SafeHtmlPipe], template: "<span *ngIf=\"svgIcon\" class=\"mapa__svg-icon\" [innerHTML]=\"svgIcon | safeHtml\"></span>\n" }]
+        }], ctorParameters: () => [{ type: i1$6.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { name: [{
                 type: Input
-            }], data: [{
+            }], color: [{
                 type: Input
-            }], emitMenu: [{
-                type: Output
-            }], trigger: [{
-                type: ViewChild,
-                args: [MatMenuTrigger]
             }] } });
 
 /*
- * Public API Surface of mapa-library-ui menu
+ * Public API Surface of mapa-library-ui svg-icon
  */
 
-class MapaNavListComponent {
+class MapaTableCellDirective {
     constructor() {
-        this.clicked = new EventEmitter();
+        this.templateRef = inject(TemplateRef);
     }
-    emit(option) {
-        this.selected = option;
-        this.clicked.emit(option);
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaNavListComponent, isStandalone: true, selector: "mapa-nav-list", inputs: { options: "options", label: "label" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<nav class=\"mapa-nav-list\">\n  {{ label }}\n  <ul>\n    <li\n      *ngFor=\"let option of options\"\n      (click)=\"emit(option)\"\n      [class.selected]=\"selected === option\"\n    >\n      <span>{{ option.value }}</span>\n    </li>\n  </ul>\n</nav>\n", styles: [".mapa-nav-list{display:flex;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px}.mapa-nav-list ul{list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.mapa-nav-list ul li{cursor:pointer;display:inline;margin-left:33px}.mapa-nav-list ul li span{padding:0 4px}.mapa-nav-list ul li:hover span,.mapa-nav-list ul li.selected span{border-bottom:4px solid #ea561d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.21", type: MapaTableCellDirective, isStandalone: true, selector: "ng-template[mapaTableCell]", inputs: { columnKey: ["mapaTableCell", "columnKey"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaNavListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mapa-nav-list', standalone: true, imports: [CommonModule], template: "<nav class=\"mapa-nav-list\">\n  {{ label }}\n  <ul>\n    <li\n      *ngFor=\"let option of options\"\n      (click)=\"emit(option)\"\n      [class.selected]=\"selected === option\"\n    >\n      <span>{{ option.value }}</span>\n    </li>\n  </ul>\n</nav>\n", styles: [".mapa-nav-list{display:flex;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px}.mapa-nav-list ul{list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.mapa-nav-list ul li{cursor:pointer;display:inline;margin-left:33px}.mapa-nav-list ul li span{padding:0 4px}.mapa-nav-list ul li:hover span,.mapa-nav-list ul li.selected span{border-bottom:4px solid #ea561d}\n"] }]
-        }], propDecorators: { options: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], clicked: [{
-                type: Output
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[mapaTableCell]',
+                    standalone: true,
+                }]
+        }], propDecorators: { columnKey: [{
+                type: Input,
+                args: [{ required: true, alias: 'mapaTableCell' }]
             }] } });
-
-/*
- * Public API Surface of mapa-library-ui nav-list
- */
-
-class ReportItemComponent {
-    constructor() {
-        this.menuItems = [];
-        this.clicked = new EventEmitter();
-        this.emitMenu = new EventEmitter();
-        this.id = '';
-        this.description = '';
-        this.icon = '';
-    }
-    get item() {
-        if (Array.isArray(this.itemData)) {
-            return this.itemData[0];
-        }
-        return this.itemData;
-    }
-    get resolvedMenuItems() {
-        if (this.item?.menu && this.item.menu.length > 0) {
-            return this.item.menu;
-        }
-        return this.menuItems;
-    }
-    ngOnChanges(changes) {
-        if (changes['itemData']) {
-            this.syncItemData();
-        }
-    }
-    syncItemData() {
-        const data = this.item;
-        if (!data) {
-            return;
-        }
-        this.id = data.id;
-        this.description = data.description;
-        this.icon = data.icon;
-    }
-    onClick(action) {
-        const item = this.item;
-        if (!item) {
-            return;
-        }
-        this.emitMenu.emit({
-            action,
-            data: item,
-        });
-        this.clicked.emit(item.id);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ReportItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: ReportItemComponent, isStandalone: true, selector: "mapa-report-item", inputs: { itemData: "itemData", menuItems: "menuItems" }, outputs: { clicked: "clicked", emitMenu: "emitMenu" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"report-item\">\n  <div class=\"report-icon\">\n    <mat-icon class=\"material-icons\">{{ icon }}</mat-icon>\n  </div>\n  <div class=\"report-text\">\n    <h1>\n      {{ description }}\n    </h1>\n  </div>\n  <div class=\"report-button\">\n    <div class=\"report-circle\" *ngIf=\"resolvedMenuItems.length > 0\">\n      <mat-icon [matMenuTriggerFor]=\"menu\">more_vert</mat-icon>\n      <mat-menu #menu=\"matMenu\">\n        <button\n          mat-menu-item\n          *ngFor=\"let item of resolvedMenuItems\"\n          (click)=\"onClick(item.action)\"\n        >\n          <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n          <img *ngIf=\"item.image\" [src]=\"item.image\" />\n          <span>{{ item.text }}</span>\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n</div>\n", styles: [".report-item{margin:24px 48px;height:161px;display:flex;border-radius:16px;border:1px solid #CDCDCD}.report-item .report-icon{width:25%;border-radius:16px 0 0 16px;background:#fdefea}.report-item .report-icon .mat-icon{width:123px;height:123px;font-size:123px;color:#ea561d;padding:20px 42px}.report-item .report-text{background:var(--GlobalColors-Neutral-20, #F9F9F9);width:100%;padding:0 16px}.report-item .report-text h1{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:28px;margin-top:25px}.report-item .report-text li{color:var #000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px;margin-top:10px}.report-item .report-button{width:4vw;align-items:flex-end;border-radius:50%;margin-top:10px}.report-item .report-button .report-circle{background-color:#fff;border-radius:50%;display:flex;align-items:center;margin-right:10px}.report-item .report-button .mat-icon{width:20px;height:20px;font-size:20px;margin:5px;color:#ea561d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ReportItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mapa-report-item', imports: [CommonModule, MatIconModule, MatMenuModule], standalone: true, template: "<div class=\"report-item\">\n  <div class=\"report-icon\">\n    <mat-icon class=\"material-icons\">{{ icon }}</mat-icon>\n  </div>\n  <div class=\"report-text\">\n    <h1>\n      {{ description }}\n    </h1>\n  </div>\n  <div class=\"report-button\">\n    <div class=\"report-circle\" *ngIf=\"resolvedMenuItems.length > 0\">\n      <mat-icon [matMenuTriggerFor]=\"menu\">more_vert</mat-icon>\n      <mat-menu #menu=\"matMenu\">\n        <button\n          mat-menu-item\n          *ngFor=\"let item of resolvedMenuItems\"\n          (click)=\"onClick(item.action)\"\n        >\n          <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n          <img *ngIf=\"item.image\" [src]=\"item.image\" />\n          <span>{{ item.text }}</span>\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n</div>\n", styles: [".report-item{margin:24px 48px;height:161px;display:flex;border-radius:16px;border:1px solid #CDCDCD}.report-item .report-icon{width:25%;border-radius:16px 0 0 16px;background:#fdefea}.report-item .report-icon .mat-icon{width:123px;height:123px;font-size:123px;color:#ea561d;padding:20px 42px}.report-item .report-text{background:var(--GlobalColors-Neutral-20, #F9F9F9);width:100%;padding:0 16px}.report-item .report-text h1{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:28px;margin-top:25px}.report-item .report-text li{color:var #000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px;margin-top:10px}.report-item .report-button{width:4vw;align-items:flex-end;border-radius:50%;margin-top:10px}.report-item .report-button .report-circle{background-color:#fff;border-radius:50%;display:flex;align-items:center;margin-right:10px}.report-item .report-button .mat-icon{width:20px;height:20px;font-size:20px;margin:5px;color:#ea561d}\n"] }]
-        }], propDecorators: { itemData: [{
-                type: Input
-            }], menuItems: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }], emitMenu: [{
-                type: Output
-            }] } });
-
-/*
- * Public API Surface of mapa-library-ui report-item
- */
-
-class MapaProgressbarComponent {
-    constructor() {
-        this.showInterval = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaProgressbarComponent, isStandalone: true, selector: "mapa-progressbar", inputs: { data: "data", showInterval: "showInterval" }, ngImport: i0, template: "<div class=\"progress-bar\">\n  <div class=\"progress-bar--bg\">\n    <div\n      class=\"progress-bar--filled\"\n      [style.width.%]=\"data.interval\"\n      [style.backgroundColor]=\"data.classification?.classificationColor\"\n    ></div>\n  </div>\n  <div class=\"progress-bar--interval\" *ngIf=\"showInterval\">\n    {{data.interval}}%\n  </div>\n</div>\n", styles: [".progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px;gap:20px}.progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.progress-bar--filled{position:absolute;top:0;left:0;background-color:#c6c6c6;border-radius:6px;height:8px}.progress-bar--interval{color:#2e2a2a;text-align:center;font-size:24px;font-style:normal;font-weight:400;line-height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaProgressbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mapa-progressbar", imports: [CommonModule], standalone: true, template: "<div class=\"progress-bar\">\n  <div class=\"progress-bar--bg\">\n    <div\n      class=\"progress-bar--filled\"\n      [style.width.%]=\"data.interval\"\n      [style.backgroundColor]=\"data.classification?.classificationColor\"\n    ></div>\n  </div>\n  <div class=\"progress-bar--interval\" *ngIf=\"showInterval\">\n    {{data.interval}}%\n  </div>\n</div>\n", styles: [".progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px;gap:20px}.progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.progress-bar--filled{position:absolute;top:0;left:0;background-color:#c6c6c6;border-radius:6px;height:8px}.progress-bar--interval{color:#2e2a2a;text-align:center;font-size:24px;font-style:normal;font-weight:400;line-height:32px}\n"] }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], showInterval: [{
-                type: Input
-            }] } });
-
-class MapaScaleComponent {
-    constructor(i18n) {
-        this.i18n = i18n;
-        this.showProgressbar = true;
-    }
-    get texts() {
-        return this.i18n.textsSignal();
-    }
-    get conceptTitle() {
-        return this.texts.capability.conceptTitle;
-    }
-    getProgressbarData(scale) {
-        return {
-            interval: scale.interval,
-            classification: scale.classification,
-        };
-    }
-    getIntervalbarData(scale) {
-        return {
-            interval: scale.interval,
-            classificationBg: scale.classification?.classificationBg,
-            items: scale.dimensions,
-        };
-    }
-    isPositive(dimension) {
-        return dimension.direction === "Positiva";
-    }
-    showSummarized(scale) {
-        return scale?.scaleConcept === undefined;
-    }
-    getCompetenceImg(competence) {
-        let img = "";
-        if (competence.competenceName.includes("Gestão")) {
-            img = "UsersThree";
-        }
-        if (competence.competenceName.includes("Autogestão")) {
-            img = "Brain";
-        }
-        if (competence.competenceName.includes("Relacionamento")) {
-            img = "Handshake";
-        }
-        if (competence.competenceName.includes("Atividade")) {
-            img = "ListCheck";
-        }
-        if (competence.competenceName.includes("Corporais")) {
-            img = "Warning";
-        }
-        return `assets/images/icons/${img}.svg`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaScaleComponent, isStandalone: true, selector: "mapa-scale", inputs: { data: "data", showProgressbar: "showProgressbar" }, ngImport: i0, template: "@for (competence of data; track competence) {\n  <section class=\"mapa__card competence\">\n    <header class=\"competence__header\">\n      <img [src]=\"getCompetenceImg(competence)\" />\n      {{ competence.competenceName }}\n    </header>\n    <section\n      class=\"scales\"\n      [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n      [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n    >\n      @for (scale of competence.scales; track scale) {\n        <section class=\"mapa__card scale-details\">\n          <section class=\"scale-details__top\">\n            <header class=\"scale-details__header\">\n              <div class=\"scale-details__header--title mapa--display-m\">\n                {{ scale.scaleName }}\n                @if (scale.classification) {\n                  <div\n                    class=\"mapa__tag--bg\"\n                    [style.backgroundColor]=\"scale.classification.classificationColor\"\n                    [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n                  >\n                    <span class=\"mapa__tag--text\">\n                      {{ scale.classification.classificationName }}\n                    </span>\n                  </div>\n                }\n              </div>\n              @if (showProgressbar) {\n                <div class=\"scale__header--progressbar\">\n                  @if (!scale.classification?.classificationBg) {\n                    <mapa-progressbar\n                      [data]=\"getProgressbarData(scale)\"\n                    ></mapa-progressbar>\n                  } @else {\n                    <mapa-capability-interval-bar\n                      [data]=\"getIntervalbarData(scale)\"\n                      [showInterval]=\"true\"\n                    ></mapa-capability-interval-bar>\n                  }\n                </div>\n              }\n            </header>\n            @if (scale.scaleConcept) {\n              <article class=\"scale-details__concept\">\n                <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n              </article>\n            }\n          </section>\n          <section\n            class=\"scale-details__dimensions\"\n            [class.dimension--full-sized]=\"!showSummarized(scale)\"\n            [class.dimension--summarized]=\"showSummarized(scale)\"\n          >\n            @for (dimension of scale.dimensions; track dimension) {\n              <article class=\"mapa__card--sm dimension\">\n                <nav class=\"dimension__main\">\n                  <div class=\"dimension__title\">\n                    <div class=\"dimension__title--direction\">\n                      @if (isPositive(dimension)) {\n                        <span>&uarr;</span>\n                      } @else {\n                        <span>&darr;</span>\n                      }\n                    </div>\n                    <div class=\"dimension__title--label\">\n                      {{ dimension.dimensionName }}\n                    </div>\n                  </div>\n                  <div class=\"dimension--classification\">\n                    @if (dimension.classification) {\n                      <div\n                        class=\"mapa__tag--bg\"\n                        [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                        [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n                      >\n                        <span class=\"mapa__tag--text\">\n                          {{ dimension.classification.classificationName }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </nav>\n                @if (dimension.dimensionClassificationMessage) {\n                  <div class=\"dimension__concept\">\n                    {{ dimension.dimensionClassificationMessage }}\n                  </div>\n                }\n              </article>\n            }\n          </section>\n        </section>\n      }\n    </section>\n  </section>\n}\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}@media(max-width:768px){.competence .scales--summarized{grid-template-columns:1fr}}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin-bottom:20px;gap:18px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}@media(max-width:768px){.competence .scale-details .dimension--full-sized .dimension__main{width:auto;flex-direction:column;justify-content:start;gap:26px}}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}@media(max-width:768px){.competence{overflow-x:auto;width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: MapaProgressbarComponent, selector: "mapa-progressbar", inputs: ["data", "showInterval"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mapa-scale", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        MapaCapabilityIntervalBarComponent,
-                        MapaProgressbarComponent,
-                    ], standalone: true, template: "@for (competence of data; track competence) {\n  <section class=\"mapa__card competence\">\n    <header class=\"competence__header\">\n      <img [src]=\"getCompetenceImg(competence)\" />\n      {{ competence.competenceName }}\n    </header>\n    <section\n      class=\"scales\"\n      [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n      [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n    >\n      @for (scale of competence.scales; track scale) {\n        <section class=\"mapa__card scale-details\">\n          <section class=\"scale-details__top\">\n            <header class=\"scale-details__header\">\n              <div class=\"scale-details__header--title mapa--display-m\">\n                {{ scale.scaleName }}\n                @if (scale.classification) {\n                  <div\n                    class=\"mapa__tag--bg\"\n                    [style.backgroundColor]=\"scale.classification.classificationColor\"\n                    [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n                  >\n                    <span class=\"mapa__tag--text\">\n                      {{ scale.classification.classificationName }}\n                    </span>\n                  </div>\n                }\n              </div>\n              @if (showProgressbar) {\n                <div class=\"scale__header--progressbar\">\n                  @if (!scale.classification?.classificationBg) {\n                    <mapa-progressbar\n                      [data]=\"getProgressbarData(scale)\"\n                    ></mapa-progressbar>\n                  } @else {\n                    <mapa-capability-interval-bar\n                      [data]=\"getIntervalbarData(scale)\"\n                      [showInterval]=\"true\"\n                    ></mapa-capability-interval-bar>\n                  }\n                </div>\n              }\n            </header>\n            @if (scale.scaleConcept) {\n              <article class=\"scale-details__concept\">\n                <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n              </article>\n            }\n          </section>\n          <section\n            class=\"scale-details__dimensions\"\n            [class.dimension--full-sized]=\"!showSummarized(scale)\"\n            [class.dimension--summarized]=\"showSummarized(scale)\"\n          >\n            @for (dimension of scale.dimensions; track dimension) {\n              <article class=\"mapa__card--sm dimension\">\n                <nav class=\"dimension__main\">\n                  <div class=\"dimension__title\">\n                    <div class=\"dimension__title--direction\">\n                      @if (isPositive(dimension)) {\n                        <span>&uarr;</span>\n                      } @else {\n                        <span>&darr;</span>\n                      }\n                    </div>\n                    <div class=\"dimension__title--label\">\n                      {{ dimension.dimensionName }}\n                    </div>\n                  </div>\n                  <div class=\"dimension--classification\">\n                    @if (dimension.classification) {\n                      <div\n                        class=\"mapa__tag--bg\"\n                        [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                        [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n                      >\n                        <span class=\"mapa__tag--text\">\n                          {{ dimension.classification.classificationName }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </nav>\n                @if (dimension.dimensionClassificationMessage) {\n                  <div class=\"dimension__concept\">\n                    {{ dimension.dimensionClassificationMessage }}\n                  </div>\n                }\n              </article>\n            }\n          </section>\n        </section>\n      }\n    </section>\n  </section>\n}\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}@media(max-width:768px){.competence .scales--summarized{grid-template-columns:1fr}}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin-bottom:20px;gap:18px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}@media(max-width:768px){.competence .scale-details .dimension--full-sized .dimension__main{width:auto;flex-direction:column;justify-content:start;gap:26px}}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}@media(max-width:768px){.competence{overflow-x:auto;width:auto}}\n"] }]
-        }], ctorParameters: () => [{ type: MapaI18nService }], propDecorators: { data: [{
-                type: Input
-            }], showProgressbar: [{
-                type: Input
-            }] } });
-
-class MapaDetailsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaDetailsComponent, isStandalone: true, selector: "mapa-details", ngImport: i0, template: "<ng-container></ng-container>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDetailsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mapa-details", standalone: true, template: "<ng-container></ng-container>\n" }]
-        }] });
-
-/*
- * Public API Surface of mapa-library-ui scale
- */
-
-class MapaSvgIconComponent {
-    constructor(httpClient, cdr) {
-        this.httpClient = httpClient;
-        this.cdr = cdr;
-        this.svgIcon = "";
-        this.destroyRef = inject(DestroyRef);
-    }
-    ngOnChanges() {
-        if (!this.name) {
-            this.svgIcon = "";
-            return;
-        }
-        if (this.color) {
-            this.httpClient
-                .get(`images/icons/${this.name}.svg`, { responseType: 'text' })
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe((value) => {
-                this.svgIcon = this.applyColor(value);
-                this.cdr.markForCheck();
-            });
-            return;
-        }
-        this.svgIcon = `<img src="images/icons/${this.name}.svg" alt="${this.name}" />`;
-        this.cdr.markForCheck();
-    }
-    applyColor(value) {
-        if (!this.color) {
-            return value;
-        }
-        return value
-            .replaceAll('fill="#50575E"', `fill="${this.color}"`)
-            .replaceAll('fill="#181818"', `fill="${this.color}"`)
-            .replaceAll('fill="#7def7b"', `fill="${this.color}"`)
-            .replaceAll('stroke="#50575E"', `stroke="${this.color}"`)
-            .replaceAll('stroke="#181818"', `stroke="${this.color}"`)
-            .replaceAll('stroke="#7def7b"', `stroke="${this.color}"`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaSvgIconComponent, deps: [{ token: i1$5.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaSvgIconComponent, isStandalone: true, selector: "mapa-svg-icon", inputs: { name: "name", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"svgIcon\" class=\"mapa__svg-icon\" [innerHTML]=\"svgIcon | safeHtml\"></span>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaSvgIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mapa-svg-icon", standalone: true, imports: [CommonModule, SafeHtmlPipe], template: "<span *ngIf=\"svgIcon\" class=\"mapa__svg-icon\" [innerHTML]=\"svgIcon | safeHtml\"></span>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { name: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-
-/*
- * Public API Surface of mapa-library-ui svg-icon
- */
-
-function customPaginatorFactory(i18n, injector) {
-    const customPaginatorIntl = new MatPaginatorIntl();
-    effect(() => {
-        const paginatorTexts = i18n.textsSignal().paginator;
-        customPaginatorIntl.itemsPerPageLabel = paginatorTexts.itemsPerPage;
-        customPaginatorIntl.nextPageLabel = paginatorTexts.nextPage;
-        customPaginatorIntl.previousPageLabel = paginatorTexts.previousPage;
-        customPaginatorIntl.getRangeLabel = paginatorTexts.showingRangeLabel;
-        customPaginatorIntl.changes.next();
-    }, { injector });
-    return customPaginatorIntl;
-}
-
-class MapaTableCellDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static ngTemplateContextGuard(_directive, context) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.21", type: MapaTableCellDirective, isStandalone: true, selector: "ng-template[mapaTableCell]", inputs: { columnKey: ["mapaTableCell", "columnKey"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableCellDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[mapaTableCell]',
-                    standalone: true,
-                }]
-        }], propDecorators: { columnKey: [{
-                type: Input,
-                args: [{ required: true, alias: 'mapaTableCell' }]
-            }] } });
-class MapaTableComponent {
+class MapaTableComponent {
     constructor() {
         this.columns = [];
         this.data = [];
@@ -8200,7 +7812,7 @@ class MapaTableComponent {
                 useFactory: customPaginatorFactory,
                 deps: [MapaI18nService, Injector],
             },
-        ], queries: [{ propertyName: "projectedCells", predicate: MapaTableCellDirective, isSignal: true }], ngImport: i0, template: "<section\n  class=\"mapa-data-table\"\n  [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n  <div class=\"mapa-data-table__frame\">\n    @if (isLoading) {\n      <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\"></th>\n            }\n            @for (column of columns; track column.key) {\n              <th [style.width]=\"skeletonColumnWidth(column)\">\n                {{ column.label }}\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of skeletonRows; track row) {\n            <tr>\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <span\n                    class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n                  ></span>\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td [style.width]=\"skeletonColumnWidth(column)\">\n                  <span class=\"mapa-data-table__skeleton\"></span>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      <span class=\"mapa-data-table__sr-only\" role=\"status\">\n        {{ texts.table.loading }}\n      </span>\n    } @else if (error) {\n      <div class=\"mapa-data-table__state\" role=\"alert\">\n        <strong>{{ resolvedErrorTitle }}</strong>\n        @if (resolvedErrorSubtitle) {\n          <span>{{ resolvedErrorSubtitle }}</span>\n        }\n        @if (retry.observed) {\n          <button type=\"button\" (click)=\"retry.emit()\">\n            {{ resolvedRetryLabel }}\n          </button>\n        }\n      </div>\n    } @else if (visibleData.length > 0) {\n      <table class=\"mapa-data-table__table\">\n        @if (caption) {\n          <caption class=\"mapa-data-table__sr-only\">\n            {{\n              caption\n            }}\n          </caption>\n        }\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\">\n                @if (showSelectAll) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"allVisibleSelected()\"\n                    [indeterminate]=\"someVisibleSelected()\"\n                    [aria-label]=\"texts.table.selectAllVisible\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleVisibleRows($event.checked)\"\n                  />\n                } @else {\n                  <span class=\"mapa-data-table__sr-only\">\n                    {{ texts.table.selectionColumn }}\n                  </span>\n                }\n              </th>\n            }\n            @for (column of columns; track column.key) {\n              <th\n                [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n                [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                [style.width]=\"columnWidth(column)\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (isSortable(column)) {\n                  <button\n                    type=\"button\"\n                    class=\"mapa-data-table__sort\"\n                    (click)=\"changeSort(column)\"\n                  >\n                    <span [innerHTML]=\"column.label | safeHtml\"></span>\n                    <mat-icon aria-hidden=\"true\">{{\n                      sortIcon(column)\n                    }}</mat-icon>\n                  </button>\n                } @else {\n                  <span [innerHTML]=\"column.label | safeHtml\"></span>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of visibleData; track rowIdentity(row, $index)) {\n            <tr\n              [class.mapa-data-table__row--selected]=\"isSelected(row)\"\n              [class.mapa-data-table__row--interactive]=\"rowClick.observed\"\n              [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n              (click)=\"emitRowInteraction($event, row)\"\n              (keydown)=\"emitRowKeyboard($event, row)\"\n            >\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"isSelected(row)\"\n                    [aria-label]=\"selectionLabel(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleRow(row, $event.checked)\"\n                  />\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td\n                  [attr.data-label]=\"column.label\"\n                  [class.mapa-data-table__cell--center]=\"\n                    isCenterAligned(column)\n                  \"\n                  [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                  [style.width]=\"columnWidth(column)\"\n                >\n                  <div\n                    class=\"mapa-data-table__cell-content\"\n                    [ngClass]=\"cellClasses(column, row)\"\n                  >\n                    @if (cellTemplate(column.key); as template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          column,\n                        }\"\n                      ></ng-container>\n                    } @else if (column.key === \"actions\") {\n                      <div class=\"mapa-data-table__actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (route(item); as actionRoute) {\n                            <a\n                              class=\"mapa-data-table__action\"\n                              [class.mapa-data-table__action--disabled]=\"\n                                item.disabled\n                              \"\n                              [attr.aria-disabled]=\"\n                                item.disabled ? 'true' : null\n                              \"\n                              [attr.tabindex]=\"item.disabled ? -1 : null\"\n                              [title]=\"item.text\"\n                              [routerLink]=\"item.disabled ? null : actionRoute\"\n                              [queryParams]=\"queryParams(item)\"\n                              (click)=\"$event.stopPropagation()\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"mapa-data-table__action\"\n                              [disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              (click)=\"emitAction(row, item, $event)\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    } @else if (column.key === \"menu\") {\n                      @if (getMenuItems(row).length > 0) {\n                        <button\n                          type=\"button\"\n                          class=\"mapa-data-table__menu-trigger\"\n                          [matMenuTriggerFor]=\"rowMenu\"\n                          [attr.aria-label]=\"column.label\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <mat-icon aria-hidden=\"true\">more_vert</mat-icon>\n                        </button>\n                        <mat-menu #rowMenu=\"matMenu\">\n                          @for (item of getMenuItems(row); track item) {\n                            @if (route(item); as menuRoute) {\n                              <a\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                [routerLink]=\"item.disabled ? null : menuRoute\"\n                                [queryParams]=\"queryParams(item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </a>\n                            } @else {\n                              <button\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                (click)=\"emitAction(row, item, $event)\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </button>\n                            }\n                          }\n                        </mat-menu>\n                      }\n                    } @else if (dateFormat(column); as format) {\n                      @if (dateValue(row, column); as value) {\n                        {{ value | date: format }}\n                      } @else {\n                        {{ column.fallback ?? \"-\" }}\n                      }\n                    } @else if (column.status) {\n                      <span\n                        class=\"mapa-data-table__status\"\n                        [class.mapa-data-table__status--round]=\"\n                          column.status.style === 'round'\n                        \"\n                        [style.background-color]=\"statusBackground(column, row)\"\n                        [style.color]=\"statusTextColor(column, row)\"\n                        [innerHTML]=\"statusLabel(column, row) | safeHtml\"\n                      ></span>\n                    } @else {\n                      <span\n                        [innerHTML]=\"cellValue(row, column) | safeHtml\"\n                      ></span>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    } @else if (isFinished) {\n      <div class=\"mapa-data-table__state\">\n        <strong>{{ resolvedEmptyTitle }}</strong>\n        @if (resolvedEmptySubtitle) {\n          <span>{{ resolvedEmptySubtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  @if (shouldShowPaginator) {\n    <mat-paginator\n      class=\"mapa-data-table__paginator\"\n      appBubblePagination\n      [appCustomLength]=\"totalCount\"\n      [bubblePageIndex]=\"zeroBasedPageIndex\"\n      [pageIndex]=\"zeroBasedPageIndex\"\n      [showFirstButton]=\"paginatorShowFirstButton\"\n      [showLastButton]=\"paginatorShowLastButton\"\n      [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n      [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n      [bubblePageSize]=\"pageSize\"\n      [length]=\"totalCount\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      (page)=\"handlePage($event)\"\n    />\n  }\n</section>\n", styles: [":host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table__frame{background:var(--mapa-color-surface, #fff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:14px;overflow-x:auto}.mapa-data-table__table{border-collapse:collapse;width:100%}.mapa-data-table th,.mapa-data-table td{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));box-sizing:border-box;font-family:inherit;font-size:13px;font-weight:400;padding:.875rem 1rem;text-align:left;vertical-align:middle}.mapa-data-table th{background:var(--mapa-color-surface-muted, #fafbfc);color:var(--mapa-color-text-subtle, #555);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.mapa-data-table td{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table tbody tr:last-child td{border-bottom:0}.mapa-data-table tbody tr:hover,.mapa-data-table__row--selected{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__row--interactive{cursor:pointer}.mapa-data-table__row--interactive:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:-3px}.mapa-data-table__selection-cell{width:4.5rem}.mapa-data-table__cell--center{text-align:center}.mapa-data-table__cell--end{text-align:right}.mapa-data-table__cell-content{min-width:0}.mapa-data-table__cell--ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapa-data-table__cell--no-wrap{white-space:nowrap}.mapa-data-table__cell--wrap{white-space:pre-wrap}.mapa-data-table__sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;padding:0;text-transform:inherit}.mapa-data-table__sort:focus-visible,.mapa-data-table__state button:focus-visible,.mapa-data-table__action:focus-visible,.mapa-data-table__menu-trigger:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:3px}.mapa-data-table__sort mat-icon{font-size:1rem;height:1rem;width:1rem}.mapa-data-table__actions{align-items:center;display:inline-flex;gap:.5rem}.mapa-data-table__action,.mapa-data-table__menu-trigger{align-items:center;background:transparent;border:0;border-radius:6px;color:var(--mapa-color-primary-dark, #50575E);cursor:pointer;display:inline-flex;font:inherit;gap:.375rem;justify-content:center;min-height:36px;min-width:36px;padding:.375rem;text-decoration:none}.mapa-data-table__action:hover,.mapa-data-table__menu-trigger:hover{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__action:disabled,.mapa-data-table__action--disabled{cursor:not-allowed;opacity:.45}.mapa-data-table__action img,.mapa-data-table__menu-trigger img{height:1.25rem;width:1.25rem}.mapa-data-table__status{border-radius:4px;display:inline-flex;padding:.25rem .5rem;white-space:nowrap}.mapa-data-table__status--round{border-radius:999px}.mapa-data-table__state{align-items:center;color:var(--mapa-color-text-subtle, #555);display:flex;flex-direction:column;gap:.625rem;justify-content:center;min-height:150px;padding:1.5rem;text-align:center}.mapa-data-table__state strong{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__state button{background:var(--mapa-color-surface-warm, #fffaf6);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:10px;color:var(--mapa-color-text, #1a1a1a);cursor:pointer;font:inherit;min-height:40px;padding:.5rem .875rem}.mapa-data-table__skeleton{animation:mapa-data-table-shimmer 1.2s linear infinite;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;border-radius:8px;display:block;height:1rem;max-width:14rem}.mapa-data-table__skeleton--checkbox{border-radius:3px;height:1.125rem;width:1.125rem}.mapa-data-table__sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host ::ng-deep .mapa-data-table__paginator{background:transparent;color:var(--mapa-color-text-subtle, #555);font-family:var(--mapa-font-body, Asap, sans-serif)}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{justify-content:space-between;min-height:72px}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:min(10vw,8rem)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-container,:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{align-items:center;display:flex;justify-content:flex-end}:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{gap:.5rem}:host ::ng-deep .mapa-data-table__paginator .g-bubble{align-items:center;background:transparent;border:0;border-radius:4px;color:var(--mapa-color-text-subtle, #555);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:24px;min-width:24px;padding:1px 6px}:host ::ng-deep .mapa-data-table__paginator .g-bubble:hover{background:var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}:host ::ng-deep .mapa-data-table__paginator .g-bubble:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:2px}:host ::ng-deep .mapa-data-table__paginator .g-bubble__active{background:var(--mapa-color-primary-dark, #cf482b);color:var(--mapa-color-surface, #fff)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-counter{color:var(--mapa-color-text-subtle, #555);margin:0 .25rem 0 .625rem;white-space:nowrap}@media(max-width:760px){.mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table thead{display:none}.mapa-data-table tbody{display:grid;gap:.75rem}.mapa-data-table tr{border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table td:not(.mapa-data-table__selection-cell):before{color:var(--mapa-color-text-subtle, #555);content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase}.mapa-data-table__selection-cell{grid-column:1;grid-row:1/span 20;width:auto}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container,:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-actions{justify-content:center}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{gap:.75rem;padding:.75rem 0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-label{padding:.5rem 0;text-align:center;width:100%}}@media(prefers-reduced-motion:reduce){.mapa-data-table__skeleton{animation:none}}@keyframes mapa-data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "directive", type: BubblePaginationDirective, selector: "[appBubblePagination], [appStylePaginatorMv]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows", "bubblePageIndex", "bubblePageSize"], outputs: ["pageIndexChangeEmitter"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MapaSvgIconComponent, selector: "mapa-svg-icon", inputs: ["name", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "projectedCells", predicate: MapaTableCellDirective, isSignal: true }], ngImport: i0, template: "<section\n  class=\"mapa-data-table\"\n  [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n  <div class=\"mapa-data-table__frame\">\n    @if (isLoading) {\n      <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\"></th>\n            }\n            @for (column of columns; track column.key) {\n              <th [style.width]=\"skeletonColumnWidth(column)\">\n                {{ column.label }}\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of skeletonRows; track row) {\n            <tr>\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <span\n                    class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n                  ></span>\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td [style.width]=\"skeletonColumnWidth(column)\">\n                  <span class=\"mapa-data-table__skeleton\"></span>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      <span class=\"mapa-data-table__sr-only\" role=\"status\">\n        {{ texts.table.loading }}\n      </span>\n    } @else if (error) {\n      <div class=\"mapa-data-table__state\" role=\"alert\">\n        <strong>{{ resolvedErrorTitle }}</strong>\n        @if (resolvedErrorSubtitle) {\n          <span>{{ resolvedErrorSubtitle }}</span>\n        }\n        @if (retry.observed) {\n          <button type=\"button\" (click)=\"retry.emit()\">\n            {{ resolvedRetryLabel }}\n          </button>\n        }\n      </div>\n    } @else if (visibleData.length > 0) {\n      <table class=\"mapa-data-table__table\">\n        @if (caption) {\n          <caption class=\"mapa-data-table__sr-only\">\n            {{\n              caption\n            }}\n          </caption>\n        }\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\">\n                @if (showSelectAll) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"allVisibleSelected()\"\n                    [indeterminate]=\"someVisibleSelected()\"\n                    [aria-label]=\"texts.table.selectAllVisible\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleVisibleRows($event.checked)\"\n                  />\n                } @else {\n                  <span class=\"mapa-data-table__sr-only\">\n                    {{ texts.table.selectionColumn }}\n                  </span>\n                }\n              </th>\n            }\n            @for (column of columns; track column.key) {\n              <th\n                [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n                [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                [style.width]=\"columnWidth(column)\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (isSortable(column)) {\n                  <button\n                    type=\"button\"\n                    class=\"mapa-data-table__sort\"\n                    (click)=\"changeSort(column)\"\n                  >\n                    <span [innerHTML]=\"column.label | safeHtml\"></span>\n                    <mat-icon aria-hidden=\"true\">{{\n                      sortIcon(column)\n                    }}</mat-icon>\n                  </button>\n                } @else {\n                  <span [innerHTML]=\"column.label | safeHtml\"></span>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of visibleData; track rowIdentity(row, $index)) {\n            <tr\n              [class.mapa-data-table__row--selected]=\"isSelected(row)\"\n              [class.mapa-data-table__row--interactive]=\"rowClick.observed\"\n              [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n              (click)=\"emitRowInteraction($event, row)\"\n              (keydown)=\"emitRowKeyboard($event, row)\"\n            >\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"isSelected(row)\"\n                    [aria-label]=\"selectionLabel(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleRow(row, $event.checked)\"\n                  />\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td\n                  [attr.data-label]=\"column.label\"\n                  [class.mapa-data-table__cell--center]=\"\n                    isCenterAligned(column)\n                  \"\n                  [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                  [style.width]=\"columnWidth(column)\"\n                >\n                  <div\n                    class=\"mapa-data-table__cell-content\"\n                    [ngClass]=\"cellClasses(column, row)\"\n                  >\n                    @if (cellTemplate(column.key); as template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          column,\n                        }\"\n                      ></ng-container>\n                    } @else if (column.key === \"actions\") {\n                      <div class=\"mapa-data-table__actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (route(item); as actionRoute) {\n                            <a\n                              class=\"mapa-data-table__action\"\n                              [class.mapa-data-table__action--disabled]=\"\n                                item.disabled\n                              \"\n                              [attr.aria-disabled]=\"\n                                item.disabled ? 'true' : null\n                              \"\n                              [attr.tabindex]=\"item.disabled ? -1 : null\"\n                              [title]=\"item.text\"\n                              [routerLink]=\"item.disabled ? null : actionRoute\"\n                              [queryParams]=\"queryParams(item)\"\n                              (click)=\"$event.stopPropagation()\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"mapa-data-table__action\"\n                              [disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              (click)=\"emitAction(row, item, $event)\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    } @else if (column.key === \"menu\") {\n                      @if (getMenuItems(row).length > 0) {\n                        <button\n                          type=\"button\"\n                          class=\"mapa-data-table__menu-trigger\"\n                          [matMenuTriggerFor]=\"rowMenu\"\n                          [attr.aria-label]=\"column.label\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <mat-icon aria-hidden=\"true\">more_vert</mat-icon>\n                        </button>\n                        <mat-menu #rowMenu=\"matMenu\">\n                          @for (item of getMenuItems(row); track item) {\n                            @if (route(item); as menuRoute) {\n                              <a\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                [routerLink]=\"item.disabled ? null : menuRoute\"\n                                [queryParams]=\"queryParams(item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </a>\n                            } @else {\n                              <button\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                (click)=\"emitAction(row, item, $event)\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </button>\n                            }\n                          }\n                        </mat-menu>\n                      }\n                    } @else if (dateFormat(column); as format) {\n                      @if (dateValue(row, column); as value) {\n                        {{ value | date: format }}\n                      } @else {\n                        {{ column.fallback ?? \"-\" }}\n                      }\n                    } @else if (column.status) {\n                      <span\n                        class=\"mapa-data-table__status\"\n                        [class.mapa-data-table__status--round]=\"\n                          column.status.style === 'round'\n                        \"\n                        [style.background-color]=\"statusBackground(column, row)\"\n                        [style.color]=\"statusTextColor(column, row)\"\n                        [innerHTML]=\"statusLabel(column, row) | safeHtml\"\n                      ></span>\n                    } @else {\n                      <span\n                        [innerHTML]=\"cellValue(row, column) | safeHtml\"\n                      ></span>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    } @else if (isFinished) {\n      <div class=\"mapa-data-table__state\">\n        <strong>{{ resolvedEmptyTitle }}</strong>\n        @if (resolvedEmptySubtitle) {\n          <span>{{ resolvedEmptySubtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  @if (shouldShowPaginator) {\n    <mat-paginator\n      class=\"mapa-data-table__paginator\"\n      appBubblePagination\n      [appCustomLength]=\"totalCount\"\n      [bubblePageIndex]=\"zeroBasedPageIndex\"\n      [pageIndex]=\"zeroBasedPageIndex\"\n      [showFirstButton]=\"paginatorShowFirstButton\"\n      [showLastButton]=\"paginatorShowLastButton\"\n      [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n      [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n      [bubblePageSize]=\"pageSize\"\n      [length]=\"totalCount\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      (page)=\"handlePage($event)\"\n    />\n  }\n</section>\n", styles: [":host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table__frame{background:var(--mapa-color-surface, #fff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:14px;overflow-x:auto}.mapa-data-table__table{border-collapse:collapse;width:100%}.mapa-data-table th,.mapa-data-table td{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));box-sizing:border-box;font-family:inherit;font-size:13px;font-weight:400;padding:.875rem 1rem;text-align:left;vertical-align:middle}.mapa-data-table th{background:var(--mapa-color-surface-muted, #fafbfc);color:var(--mapa-color-text-subtle, #555);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.mapa-data-table td{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table tbody tr:last-child td{border-bottom:0}.mapa-data-table tbody tr:hover,.mapa-data-table__row--selected{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__row--interactive{cursor:pointer}.mapa-data-table__row--interactive:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:-3px}.mapa-data-table__selection-cell{width:4.5rem}.mapa-data-table__cell--center{text-align:center}.mapa-data-table__cell--end{text-align:right}.mapa-data-table__cell-content{min-width:0}.mapa-data-table__cell--ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapa-data-table__cell--no-wrap{white-space:nowrap}.mapa-data-table__cell--wrap{white-space:pre-wrap}.mapa-data-table__sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;padding:0;text-transform:inherit}.mapa-data-table__sort:focus-visible,.mapa-data-table__state button:focus-visible,.mapa-data-table__action:focus-visible,.mapa-data-table__menu-trigger:focus-visible{outline:2px solid var(--mapa-color-primary-dark, #50575E);outline-offset:3px}.mapa-data-table__sort mat-icon{font-size:1rem;height:1rem;width:1rem}.mapa-data-table__actions{align-items:center;display:inline-flex;gap:.5rem}.mapa-data-table__action,.mapa-data-table__menu-trigger{align-items:center;background:transparent;border:0;border-radius:6px;color:var(--mapa-color-primary-dark, #50575E);cursor:pointer;display:inline-flex;font:inherit;gap:.375rem;justify-content:center;min-height:36px;min-width:36px;padding:.375rem;text-decoration:none}.mapa-data-table__action:hover,.mapa-data-table__menu-trigger:hover{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__action:disabled,.mapa-data-table__action--disabled{cursor:not-allowed;opacity:.45}.mapa-data-table__action img,.mapa-data-table__menu-trigger img{height:1.25rem;width:1.25rem}.mapa-data-table__status{border-radius:4px;display:inline-flex;padding:.25rem .5rem;white-space:nowrap}.mapa-data-table__status--round{border-radius:999px}.mapa-data-table__state{align-items:center;color:var(--mapa-color-text-subtle, #555);display:flex;flex-direction:column;gap:.625rem;justify-content:center;min-height:150px;padding:1.5rem;text-align:center}.mapa-data-table__state strong{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__state button{background:var(--mapa-color-surface-warm, #fffaf6);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:10px;color:var(--mapa-color-text, #1a1a1a);cursor:pointer;font:inherit;min-height:40px;padding:.5rem .875rem}.mapa-data-table__skeleton{animation:mapa-data-table-shimmer 1.2s linear infinite;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;border-radius:8px;display:block;height:1rem;max-width:14rem}.mapa-data-table__skeleton--checkbox{border-radius:3px;height:1.125rem;width:1.125rem}.mapa-data-table__sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host ::ng-deep .mapa-data-table__paginator{background:transparent;color:var(--mapa-color-text-subtle, #555);font-family:var(--mapa-font-body, Asap, sans-serif)}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{justify-content:space-between;min-height:72px}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:min(10vw,8rem)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-container,:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{align-items:center;display:flex;justify-content:flex-end}:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{gap:.5rem}:host ::ng-deep .mapa-data-table__paginator .g-bubble{align-items:center;background:transparent;border:0;border-radius:4px;color:var(--mapa-color-text-subtle, #555);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:24px;min-width:24px;padding:1px 6px}:host ::ng-deep .mapa-data-table__paginator .g-bubble:hover{background:var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}:host ::ng-deep .mapa-data-table__paginator .g-bubble:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:2px}:host ::ng-deep .mapa-data-table__paginator .g-bubble__active{background:var(--mapa-color-primary-dark, #cf482b);color:var(--mapa-color-surface, #fff)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-counter{color:var(--mapa-color-text-subtle, #555);margin:0 .25rem 0 .625rem;white-space:nowrap}@media(max-width:760px){.mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table thead{display:none}.mapa-data-table tbody{display:grid;gap:.75rem}.mapa-data-table tr{border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table td:not(.mapa-data-table__selection-cell):before{color:var(--mapa-color-text-subtle, #555);content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase}.mapa-data-table__selection-cell{grid-column:1;grid-row:1/span 20;width:auto}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container,:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-actions{justify-content:center}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{gap:.75rem;padding:.75rem 0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-label{padding:.5rem 0;text-align:center;width:100%}}@media(prefers-reduced-motion:reduce){.mapa-data-table__skeleton{animation:none}}@keyframes mapa-data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "directive", type: BubblePaginationDirective, selector: "[appBubblePagination], [appStylePaginatorMv]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows", "bubblePageIndex", "bubblePageSize"], outputs: ["pageIndexChangeEmitter"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MapaSvgIconComponent, selector: "mapa-svg-icon", inputs: ["name", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTableComponent, decorators: [{
             type: Component,
@@ -8222,7 +7834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                             useFactory: customPaginatorFactory,
                             deps: [MapaI18nService, Injector],
                         },
-                    ], standalone: true, template: "<section\n  class=\"mapa-data-table\"\n  [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n  <div class=\"mapa-data-table__frame\">\n    @if (isLoading) {\n      <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\"></th>\n            }\n            @for (column of columns; track column.key) {\n              <th [style.width]=\"skeletonColumnWidth(column)\">\n                {{ column.label }}\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of skeletonRows; track row) {\n            <tr>\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <span\n                    class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n                  ></span>\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td [style.width]=\"skeletonColumnWidth(column)\">\n                  <span class=\"mapa-data-table__skeleton\"></span>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      <span class=\"mapa-data-table__sr-only\" role=\"status\">\n        {{ texts.table.loading }}\n      </span>\n    } @else if (error) {\n      <div class=\"mapa-data-table__state\" role=\"alert\">\n        <strong>{{ resolvedErrorTitle }}</strong>\n        @if (resolvedErrorSubtitle) {\n          <span>{{ resolvedErrorSubtitle }}</span>\n        }\n        @if (retry.observed) {\n          <button type=\"button\" (click)=\"retry.emit()\">\n            {{ resolvedRetryLabel }}\n          </button>\n        }\n      </div>\n    } @else if (visibleData.length > 0) {\n      <table class=\"mapa-data-table__table\">\n        @if (caption) {\n          <caption class=\"mapa-data-table__sr-only\">\n            {{\n              caption\n            }}\n          </caption>\n        }\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\">\n                @if (showSelectAll) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"allVisibleSelected()\"\n                    [indeterminate]=\"someVisibleSelected()\"\n                    [aria-label]=\"texts.table.selectAllVisible\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleVisibleRows($event.checked)\"\n                  />\n                } @else {\n                  <span class=\"mapa-data-table__sr-only\">\n                    {{ texts.table.selectionColumn }}\n                  </span>\n                }\n              </th>\n            }\n            @for (column of columns; track column.key) {\n              <th\n                [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n                [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                [style.width]=\"columnWidth(column)\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (isSortable(column)) {\n                  <button\n                    type=\"button\"\n                    class=\"mapa-data-table__sort\"\n                    (click)=\"changeSort(column)\"\n                  >\n                    <span [innerHTML]=\"column.label | safeHtml\"></span>\n                    <mat-icon aria-hidden=\"true\">{{\n                      sortIcon(column)\n                    }}</mat-icon>\n                  </button>\n                } @else {\n                  <span [innerHTML]=\"column.label | safeHtml\"></span>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of visibleData; track rowIdentity(row, $index)) {\n            <tr\n              [class.mapa-data-table__row--selected]=\"isSelected(row)\"\n              [class.mapa-data-table__row--interactive]=\"rowClick.observed\"\n              [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n              (click)=\"emitRowInteraction($event, row)\"\n              (keydown)=\"emitRowKeyboard($event, row)\"\n            >\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"isSelected(row)\"\n                    [aria-label]=\"selectionLabel(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleRow(row, $event.checked)\"\n                  />\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td\n                  [attr.data-label]=\"column.label\"\n                  [class.mapa-data-table__cell--center]=\"\n                    isCenterAligned(column)\n                  \"\n                  [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                  [style.width]=\"columnWidth(column)\"\n                >\n                  <div\n                    class=\"mapa-data-table__cell-content\"\n                    [ngClass]=\"cellClasses(column, row)\"\n                  >\n                    @if (cellTemplate(column.key); as template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          column,\n                        }\"\n                      ></ng-container>\n                    } @else if (column.key === \"actions\") {\n                      <div class=\"mapa-data-table__actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (route(item); as actionRoute) {\n                            <a\n                              class=\"mapa-data-table__action\"\n                              [class.mapa-data-table__action--disabled]=\"\n                                item.disabled\n                              \"\n                              [attr.aria-disabled]=\"\n                                item.disabled ? 'true' : null\n                              \"\n                              [attr.tabindex]=\"item.disabled ? -1 : null\"\n                              [title]=\"item.text\"\n                              [routerLink]=\"item.disabled ? null : actionRoute\"\n                              [queryParams]=\"queryParams(item)\"\n                              (click)=\"$event.stopPropagation()\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"mapa-data-table__action\"\n                              [disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              (click)=\"emitAction(row, item, $event)\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    } @else if (column.key === \"menu\") {\n                      @if (getMenuItems(row).length > 0) {\n                        <button\n                          type=\"button\"\n                          class=\"mapa-data-table__menu-trigger\"\n                          [matMenuTriggerFor]=\"rowMenu\"\n                          [attr.aria-label]=\"column.label\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <mat-icon aria-hidden=\"true\">more_vert</mat-icon>\n                        </button>\n                        <mat-menu #rowMenu=\"matMenu\">\n                          @for (item of getMenuItems(row); track item) {\n                            @if (route(item); as menuRoute) {\n                              <a\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                [routerLink]=\"item.disabled ? null : menuRoute\"\n                                [queryParams]=\"queryParams(item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </a>\n                            } @else {\n                              <button\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                (click)=\"emitAction(row, item, $event)\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </button>\n                            }\n                          }\n                        </mat-menu>\n                      }\n                    } @else if (dateFormat(column); as format) {\n                      @if (dateValue(row, column); as value) {\n                        {{ value | date: format }}\n                      } @else {\n                        {{ column.fallback ?? \"-\" }}\n                      }\n                    } @else if (column.status) {\n                      <span\n                        class=\"mapa-data-table__status\"\n                        [class.mapa-data-table__status--round]=\"\n                          column.status.style === 'round'\n                        \"\n                        [style.background-color]=\"statusBackground(column, row)\"\n                        [style.color]=\"statusTextColor(column, row)\"\n                        [innerHTML]=\"statusLabel(column, row) | safeHtml\"\n                      ></span>\n                    } @else {\n                      <span\n                        [innerHTML]=\"cellValue(row, column) | safeHtml\"\n                      ></span>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    } @else if (isFinished) {\n      <div class=\"mapa-data-table__state\">\n        <strong>{{ resolvedEmptyTitle }}</strong>\n        @if (resolvedEmptySubtitle) {\n          <span>{{ resolvedEmptySubtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  @if (shouldShowPaginator) {\n    <mat-paginator\n      class=\"mapa-data-table__paginator\"\n      appBubblePagination\n      [appCustomLength]=\"totalCount\"\n      [bubblePageIndex]=\"zeroBasedPageIndex\"\n      [pageIndex]=\"zeroBasedPageIndex\"\n      [showFirstButton]=\"paginatorShowFirstButton\"\n      [showLastButton]=\"paginatorShowLastButton\"\n      [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n      [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n      [bubblePageSize]=\"pageSize\"\n      [length]=\"totalCount\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      (page)=\"handlePage($event)\"\n    />\n  }\n</section>\n", styles: [":host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table__frame{background:var(--mapa-color-surface, #fff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:14px;overflow-x:auto}.mapa-data-table__table{border-collapse:collapse;width:100%}.mapa-data-table th,.mapa-data-table td{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));box-sizing:border-box;font-family:inherit;font-size:13px;font-weight:400;padding:.875rem 1rem;text-align:left;vertical-align:middle}.mapa-data-table th{background:var(--mapa-color-surface-muted, #fafbfc);color:var(--mapa-color-text-subtle, #555);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.mapa-data-table td{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table tbody tr:last-child td{border-bottom:0}.mapa-data-table tbody tr:hover,.mapa-data-table__row--selected{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__row--interactive{cursor:pointer}.mapa-data-table__row--interactive:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:-3px}.mapa-data-table__selection-cell{width:4.5rem}.mapa-data-table__cell--center{text-align:center}.mapa-data-table__cell--end{text-align:right}.mapa-data-table__cell-content{min-width:0}.mapa-data-table__cell--ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapa-data-table__cell--no-wrap{white-space:nowrap}.mapa-data-table__cell--wrap{white-space:pre-wrap}.mapa-data-table__sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;padding:0;text-transform:inherit}.mapa-data-table__sort:focus-visible,.mapa-data-table__state button:focus-visible,.mapa-data-table__action:focus-visible,.mapa-data-table__menu-trigger:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:3px}.mapa-data-table__sort mat-icon{font-size:1rem;height:1rem;width:1rem}.mapa-data-table__actions{align-items:center;display:inline-flex;gap:.5rem}.mapa-data-table__action,.mapa-data-table__menu-trigger{align-items:center;background:transparent;border:0;border-radius:6px;color:var(--mapa-color-primary-dark, #50575E);cursor:pointer;display:inline-flex;font:inherit;gap:.375rem;justify-content:center;min-height:36px;min-width:36px;padding:.375rem;text-decoration:none}.mapa-data-table__action:hover,.mapa-data-table__menu-trigger:hover{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__action:disabled,.mapa-data-table__action--disabled{cursor:not-allowed;opacity:.45}.mapa-data-table__action img,.mapa-data-table__menu-trigger img{height:1.25rem;width:1.25rem}.mapa-data-table__status{border-radius:4px;display:inline-flex;padding:.25rem .5rem;white-space:nowrap}.mapa-data-table__status--round{border-radius:999px}.mapa-data-table__state{align-items:center;color:var(--mapa-color-text-subtle, #555);display:flex;flex-direction:column;gap:.625rem;justify-content:center;min-height:150px;padding:1.5rem;text-align:center}.mapa-data-table__state strong{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__state button{background:var(--mapa-color-surface-warm, #fffaf6);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:10px;color:var(--mapa-color-text, #1a1a1a);cursor:pointer;font:inherit;min-height:40px;padding:.5rem .875rem}.mapa-data-table__skeleton{animation:mapa-data-table-shimmer 1.2s linear infinite;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;border-radius:8px;display:block;height:1rem;max-width:14rem}.mapa-data-table__skeleton--checkbox{border-radius:3px;height:1.125rem;width:1.125rem}.mapa-data-table__sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host ::ng-deep .mapa-data-table__paginator{background:transparent;color:var(--mapa-color-text-subtle, #555);font-family:var(--mapa-font-body, Asap, sans-serif)}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{justify-content:space-between;min-height:72px}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:min(10vw,8rem)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-container,:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{align-items:center;display:flex;justify-content:flex-end}:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{gap:.5rem}:host ::ng-deep .mapa-data-table__paginator .g-bubble{align-items:center;background:transparent;border:0;border-radius:4px;color:var(--mapa-color-text-subtle, #555);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:24px;min-width:24px;padding:1px 6px}:host ::ng-deep .mapa-data-table__paginator .g-bubble:hover{background:var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}:host ::ng-deep .mapa-data-table__paginator .g-bubble:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:2px}:host ::ng-deep .mapa-data-table__paginator .g-bubble__active{background:var(--mapa-color-primary-dark, #cf482b);color:var(--mapa-color-surface, #fff)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-counter{color:var(--mapa-color-text-subtle, #555);margin:0 .25rem 0 .625rem;white-space:nowrap}@media(max-width:760px){.mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table thead{display:none}.mapa-data-table tbody{display:grid;gap:.75rem}.mapa-data-table tr{border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table td:not(.mapa-data-table__selection-cell):before{color:var(--mapa-color-text-subtle, #555);content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase}.mapa-data-table__selection-cell{grid-column:1;grid-row:1/span 20;width:auto}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container,:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-actions{justify-content:center}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{gap:.75rem;padding:.75rem 0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-label{padding:.5rem 0;text-align:center;width:100%}}@media(prefers-reduced-motion:reduce){.mapa-data-table__skeleton{animation:none}}@keyframes mapa-data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+                    ], standalone: true, template: "<section\n  class=\"mapa-data-table\"\n  [class.mapa-data-table--selectable]=\"isSelectable\"\n>\n  <div class=\"mapa-data-table__frame\">\n    @if (isLoading) {\n      <table class=\"mapa-data-table__table\" aria-hidden=\"true\">\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\"></th>\n            }\n            @for (column of columns; track column.key) {\n              <th [style.width]=\"skeletonColumnWidth(column)\">\n                {{ column.label }}\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of skeletonRows; track row) {\n            <tr>\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <span\n                    class=\"mapa-data-table__skeleton mapa-data-table__skeleton--checkbox\"\n                  ></span>\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td [style.width]=\"skeletonColumnWidth(column)\">\n                  <span class=\"mapa-data-table__skeleton\"></span>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n      <span class=\"mapa-data-table__sr-only\" role=\"status\">\n        {{ texts.table.loading }}\n      </span>\n    } @else if (error) {\n      <div class=\"mapa-data-table__state\" role=\"alert\">\n        <strong>{{ resolvedErrorTitle }}</strong>\n        @if (resolvedErrorSubtitle) {\n          <span>{{ resolvedErrorSubtitle }}</span>\n        }\n        @if (retry.observed) {\n          <button type=\"button\" (click)=\"retry.emit()\">\n            {{ resolvedRetryLabel }}\n          </button>\n        }\n      </div>\n    } @else if (visibleData.length > 0) {\n      <table class=\"mapa-data-table__table\">\n        @if (caption) {\n          <caption class=\"mapa-data-table__sr-only\">\n            {{\n              caption\n            }}\n          </caption>\n        }\n        <thead>\n          <tr>\n            @if (isSelectable) {\n              <th class=\"mapa-data-table__selection-cell\">\n                @if (showSelectAll) {\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"allVisibleSelected()\"\n                    [indeterminate]=\"someVisibleSelected()\"\n                    [aria-label]=\"texts.table.selectAllVisible\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleVisibleRows($event.checked)\"\n                  />\n                } @else {\n                  <span class=\"mapa-data-table__sr-only\">\n                    {{ texts.table.selectionColumn }}\n                  </span>\n                }\n              </th>\n            }\n            @for (column of columns; track column.key) {\n              <th\n                [class.mapa-data-table__cell--center]=\"isCenterAligned(column)\"\n                [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                [style.width]=\"columnWidth(column)\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (isSortable(column)) {\n                  <button\n                    type=\"button\"\n                    class=\"mapa-data-table__sort\"\n                    (click)=\"changeSort(column)\"\n                  >\n                    <span [innerHTML]=\"column.label | safeHtml\"></span>\n                    <mat-icon aria-hidden=\"true\">{{\n                      sortIcon(column)\n                    }}</mat-icon>\n                  </button>\n                } @else {\n                  <span [innerHTML]=\"column.label | safeHtml\"></span>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of visibleData; track rowIdentity(row, $index)) {\n            <tr\n              [class.mapa-data-table__row--selected]=\"isSelected(row)\"\n              [class.mapa-data-table__row--interactive]=\"rowClick.observed\"\n              [attr.tabindex]=\"rowClick.observed ? 0 : null\"\n              (click)=\"emitRowInteraction($event, row)\"\n              (keydown)=\"emitRowKeyboard($event, row)\"\n            >\n              @if (isSelectable) {\n                <td class=\"mapa-data-table__selection-cell\">\n                  <mat-checkbox\n                    color=\"primary\"\n                    [checked]=\"isSelected(row)\"\n                    [aria-label]=\"selectionLabel(row)\"\n                    (click)=\"$event.stopPropagation()\"\n                    (change)=\"toggleRow(row, $event.checked)\"\n                  />\n                </td>\n              }\n              @for (column of columns; track column.key) {\n                <td\n                  [attr.data-label]=\"column.label\"\n                  [class.mapa-data-table__cell--center]=\"\n                    isCenterAligned(column)\n                  \"\n                  [class.mapa-data-table__cell--end]=\"isEndAligned(column)\"\n                  [style.width]=\"columnWidth(column)\"\n                >\n                  <div\n                    class=\"mapa-data-table__cell-content\"\n                    [ngClass]=\"cellClasses(column, row)\"\n                  >\n                    @if (cellTemplate(column.key); as template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                          $implicit: row,\n                          row,\n                          column,\n                        }\"\n                      ></ng-container>\n                    } @else if (column.key === \"actions\") {\n                      <div class=\"mapa-data-table__actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (route(item); as actionRoute) {\n                            <a\n                              class=\"mapa-data-table__action\"\n                              [class.mapa-data-table__action--disabled]=\"\n                                item.disabled\n                              \"\n                              [attr.aria-disabled]=\"\n                                item.disabled ? 'true' : null\n                              \"\n                              [attr.tabindex]=\"item.disabled ? -1 : null\"\n                              [title]=\"item.text\"\n                              [routerLink]=\"item.disabled ? null : actionRoute\"\n                              [queryParams]=\"queryParams(item)\"\n                              (click)=\"$event.stopPropagation()\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"mapa-data-table__action\"\n                              [disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              (click)=\"emitAction(row, item, $event)\"\n                            >\n                              @if (item.icon) {\n                                <mat-icon aria-hidden=\"true\">{{\n                                  item.icon\n                                }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" alt=\"\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"svgName(item.svg)\" />\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              } @else {\n                                <span class=\"mapa-data-table__sr-only\">{{\n                                  item.text\n                                }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    } @else if (column.key === \"menu\") {\n                      @if (getMenuItems(row).length > 0) {\n                        <button\n                          type=\"button\"\n                          class=\"mapa-data-table__menu-trigger\"\n                          [matMenuTriggerFor]=\"rowMenu\"\n                          [attr.aria-label]=\"column.label\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <mat-icon aria-hidden=\"true\">more_vert</mat-icon>\n                        </button>\n                        <mat-menu #rowMenu=\"matMenu\">\n                          @for (item of getMenuItems(row); track item) {\n                            @if (route(item); as menuRoute) {\n                              <a\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                [routerLink]=\"item.disabled ? null : menuRoute\"\n                                [queryParams]=\"queryParams(item)\"\n                                (click)=\"$event.stopPropagation()\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </a>\n                            } @else {\n                              <button\n                                mat-menu-item\n                                [disabled]=\"item.disabled\"\n                                (click)=\"emitAction(row, item, $event)\"\n                              >\n                                @if (item.icon) {\n                                  <mat-icon aria-hidden=\"true\">{{\n                                    item.icon\n                                  }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" alt=\"\" />\n                                }\n                                <span>{{ item.text }}</span>\n                              </button>\n                            }\n                          }\n                        </mat-menu>\n                      }\n                    } @else if (dateFormat(column); as format) {\n                      @if (dateValue(row, column); as value) {\n                        {{ value | date: format }}\n                      } @else {\n                        {{ column.fallback ?? \"-\" }}\n                      }\n                    } @else if (column.status) {\n                      <span\n                        class=\"mapa-data-table__status\"\n                        [class.mapa-data-table__status--round]=\"\n                          column.status.style === 'round'\n                        \"\n                        [style.background-color]=\"statusBackground(column, row)\"\n                        [style.color]=\"statusTextColor(column, row)\"\n                        [innerHTML]=\"statusLabel(column, row) | safeHtml\"\n                      ></span>\n                    } @else {\n                      <span\n                        [innerHTML]=\"cellValue(row, column) | safeHtml\"\n                      ></span>\n                    }\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    } @else if (isFinished) {\n      <div class=\"mapa-data-table__state\">\n        <strong>{{ resolvedEmptyTitle }}</strong>\n        @if (resolvedEmptySubtitle) {\n          <span>{{ resolvedEmptySubtitle }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  @if (shouldShowPaginator) {\n    <mat-paginator\n      class=\"mapa-data-table__paginator\"\n      appBubblePagination\n      [appCustomLength]=\"totalCount\"\n      [bubblePageIndex]=\"zeroBasedPageIndex\"\n      [pageIndex]=\"zeroBasedPageIndex\"\n      [showFirstButton]=\"paginatorShowFirstButton\"\n      [showLastButton]=\"paginatorShowLastButton\"\n      [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n      [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n      [bubblePageSize]=\"pageSize\"\n      [length]=\"totalCount\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      (page)=\"handlePage($event)\"\n    />\n  }\n</section>\n", styles: [":host{display:block}.mapa-data-table{color:var(--mapa-color-text, #1a1a1a);font-family:var(--mapa-font-body, Asap, sans-serif)}.mapa-data-table__frame{background:var(--mapa-color-surface, #fff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:14px;overflow-x:auto}.mapa-data-table__table{border-collapse:collapse;width:100%}.mapa-data-table th,.mapa-data-table td{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));box-sizing:border-box;font-family:inherit;font-size:13px;font-weight:400;padding:.875rem 1rem;text-align:left;vertical-align:middle}.mapa-data-table th{background:var(--mapa-color-surface-muted, #fafbfc);color:var(--mapa-color-text-subtle, #555);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.mapa-data-table td{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table tbody tr:last-child td{border-bottom:0}.mapa-data-table tbody tr:hover,.mapa-data-table__row--selected{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__row--interactive{cursor:pointer}.mapa-data-table__row--interactive:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:-3px}.mapa-data-table__selection-cell{width:4.5rem}.mapa-data-table__cell--center{text-align:center}.mapa-data-table__cell--end{text-align:right}.mapa-data-table__cell-content{min-width:0}.mapa-data-table__cell--ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapa-data-table__cell--no-wrap{white-space:nowrap}.mapa-data-table__cell--wrap{white-space:pre-wrap}.mapa-data-table__sort{align-items:center;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:.25rem;padding:0;text-transform:inherit}.mapa-data-table__sort:focus-visible,.mapa-data-table__state button:focus-visible,.mapa-data-table__action:focus-visible,.mapa-data-table__menu-trigger:focus-visible{outline:2px solid var(--mapa-color-primary-dark, #50575E);outline-offset:3px}.mapa-data-table__sort mat-icon{font-size:1rem;height:1rem;width:1rem}.mapa-data-table__actions{align-items:center;display:inline-flex;gap:.5rem}.mapa-data-table__action,.mapa-data-table__menu-trigger{align-items:center;background:transparent;border:0;border-radius:6px;color:var(--mapa-color-primary-dark, #50575E);cursor:pointer;display:inline-flex;font:inherit;gap:.375rem;justify-content:center;min-height:36px;min-width:36px;padding:.375rem;text-decoration:none}.mapa-data-table__action:hover,.mapa-data-table__menu-trigger:hover{background:var(--mapa-color-primary-soft, #FFF8F4)}.mapa-data-table__action:disabled,.mapa-data-table__action--disabled{cursor:not-allowed;opacity:.45}.mapa-data-table__action img,.mapa-data-table__menu-trigger img{height:1.25rem;width:1.25rem}.mapa-data-table__status{border-radius:4px;display:inline-flex;padding:.25rem .5rem;white-space:nowrap}.mapa-data-table__status--round{border-radius:999px}.mapa-data-table__state{align-items:center;color:var(--mapa-color-text-subtle, #555);display:flex;flex-direction:column;gap:.625rem;justify-content:center;min-height:150px;padding:1.5rem;text-align:center}.mapa-data-table__state strong{color:var(--mapa-color-text, #1a1a1a)}.mapa-data-table__state button{background:var(--mapa-color-surface-warm, #fffaf6);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:10px;color:var(--mapa-color-text, #1a1a1a);cursor:pointer;font:inherit;min-height:40px;padding:.5rem .875rem}.mapa-data-table__skeleton{animation:mapa-data-table-shimmer 1.2s linear infinite;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;border-radius:8px;display:block;height:1rem;max-width:14rem}.mapa-data-table__skeleton--checkbox{border-radius:3px;height:1.125rem;width:1.125rem}.mapa-data-table__sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host ::ng-deep .mapa-data-table__paginator{background:transparent;color:var(--mapa-color-text-subtle, #555);font-family:var(--mapa-font-body, Asap, sans-serif)}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{justify-content:space-between;min-height:72px}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:min(10vw,8rem)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-container,:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{align-items:center;display:flex;justify-content:flex-end}:host ::ng-deep .mapa-data-table__paginator .g-bubble-container{gap:.5rem}:host ::ng-deep .mapa-data-table__paginator .g-bubble{align-items:center;background:transparent;border:0;border-radius:4px;color:var(--mapa-color-text-subtle, #555);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:24px;min-width:24px;padding:1px 6px}:host ::ng-deep .mapa-data-table__paginator .g-bubble:hover{background:var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}:host ::ng-deep .mapa-data-table__paginator .g-bubble:focus-visible{outline:2px solid var(--mapa-color-primary, #ff560b);outline-offset:2px}:host ::ng-deep .mapa-data-table__paginator .g-bubble__active{background:var(--mapa-color-primary-dark, #cf482b);color:var(--mapa-color-surface, #fff)}:host ::ng-deep .mapa-data-table__paginator .custom-paginator-counter{color:var(--mapa-color-text-subtle, #555);margin:0 .25rem 0 .625rem;white-space:nowrap}@media(max-width:760px){.mapa-data-table__frame{border:0;overflow:visible}.mapa-data-table thead{display:none}.mapa-data-table tbody{display:grid;gap:.75rem}.mapa-data-table tr{border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .12));border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.mapa-data-table--selectable tr{grid-template-columns:auto minmax(0,1fr)}.mapa-data-table td{border:0;grid-column:1;padding:.375rem .5rem;text-align:left;width:auto}.mapa-data-table--selectable td:not(.mapa-data-table__selection-cell){grid-column:2}.mapa-data-table td:not(.mapa-data-table__selection-cell):before{color:var(--mapa-color-text-subtle, #555);content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase}.mapa-data-table__selection-cell{grid-column:1;grid-row:1/span 20;width:auto}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container,:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-actions{justify-content:center}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-container{gap:.75rem;padding:.75rem 0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-page-size{margin-right:0}:host ::ng-deep .mapa-data-table__paginator .mat-mdc-paginator-range-label{padding:.5rem 0;text-align:center;width:100%}}@media(prefers-reduced-motion:reduce){.mapa-data-table__skeleton{animation:none}}@keyframes mapa-data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
@@ -8319,6 +7931,397 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
  * Public API Surface of mapa-library-ui table
  */
 
+class MapaGroupReportComponent {
+    constructor() {
+        this.groupReport = [];
+        this.showGroupReportGeneral = false;
+        this.onSortChange = new EventEmitter();
+        this.displayedColumns = [];
+        this.columns = [];
+        this.data = [];
+        this.activeSort = { active: '', direction: '' };
+    }
+    ngOnChanges(changes) {
+        if (changes['groupReport'] || changes['showGroupReportGeneral']) {
+            this.refreshTableState();
+        }
+    }
+    trackColumn(index, column) {
+        return `${index}:${column.key}`;
+    }
+    handleSortChange(sort) {
+        this.activeSort = sort;
+        this.data = this.sortData(this.generateGroupData(), sort);
+        this.onSortChange.emit(sort);
+    }
+    getDimensionCell(row, key) {
+        const cell = row[key];
+        return this.isGroupReportDimensionCell(cell) ? cell : undefined;
+    }
+    getDimensionClassification(row, key) {
+        return this.getDimensionCell(row, key)?.value?.classification;
+    }
+    getDimensionLabel(row, key) {
+        return this.getDimensionCell(row, key)?.value?.label ?? '-';
+    }
+    getGeneralValue(row) {
+        return typeof row.general === 'number' ? row.general : null;
+    }
+    refreshTableState() {
+        this.columns = this.generateColumns();
+        this.data = this.sortData(this.generateGroupData(), this.activeSort);
+        this.displayedColumns = this.columns.map((column) => column.key);
+    }
+    sortData(data, sort) {
+        if (!sort.active || !sort.direction) {
+            return data;
+        }
+        const multiplier = sort.direction === 'asc' ? 1 : -1;
+        return [...data].sort((left, right) => {
+            const leftValue = this.getSortValue(left, sort.active);
+            const rightValue = this.getSortValue(right, sort.active);
+            return (String(leftValue).localeCompare(String(rightValue), undefined, {
+                numeric: true,
+                sensitivity: 'base',
+            }) * multiplier);
+        });
+    }
+    getSortValue(row, columnKey) {
+        const cell = row[columnKey];
+        if (this.isGroupReportDimensionCell(cell)) {
+            return cell.value?.classification?.classificationId ?? 0;
+        }
+        return typeof cell === 'number' || typeof cell === 'string' ? cell : '';
+    }
+    isGroupReportDimensionCell(value) {
+        return typeof value === 'object' && value !== null && 'direction' in value;
+    }
+    generateColumns() {
+        const columns = [
+            { key: 'name', label: '', sortable: false },
+        ];
+        const existingKeys = new Set(['name']);
+        if (this.showGroupReportGeneral) {
+            columns.push({ key: 'general', label: '% Geral', sortable: false });
+            existingKeys.add('general');
+        }
+        this.groupReport.forEach((reportItem) => {
+            reportItem.dimensions?.forEach((dimension) => {
+                const key = this.getColumnKey(dimension.dimensionName);
+                if (!existingKeys.has(key)) {
+                    columns.push({
+                        key,
+                        label: dimension.dimensionName,
+                        classification: dimension.classification,
+                        sortable: true,
+                    });
+                    existingKeys.add(key);
+                }
+            });
+        });
+        return columns;
+    }
+    generateGroupData() {
+        return this.groupReport.map((item) => {
+            const dataItem = {
+                name: item.candidate.name,
+                cpf: item.candidate.cpf,
+                general: item.candidate.general,
+            };
+            item.dimensions?.forEach((dimension) => {
+                dataItem[this.getColumnKey(dimension.dimensionName)] = {
+                    value: {
+                        label: this.getDimensionDisplayValue(dimension),
+                        classification: this.getDimensionClassificationFromDimension(dimension),
+                    },
+                    direction: dimension.direction,
+                };
+            });
+            return dataItem;
+        });
+    }
+    getColumnKey(dimensionName) {
+        return dimensionName.toLowerCase();
+    }
+    getDimensionDisplayValue(dimension) {
+        return (dimension.escoreT ??
+            dimension.average ??
+            dimension.percentil ??
+            dimension.percentage ??
+            dimension.count);
+    }
+    getDimensionClassificationFromDimension(dimension) {
+        if (dimension.classification) {
+            return dimension.classification;
+        }
+        if (dimension.classificationId === undefined &&
+            !dimension.classificationName &&
+            !dimension.classificationColor) {
+            return undefined;
+        }
+        return {
+            classificationId: dimension.classificationId,
+            classificationName: dimension.classificationName,
+            classificationColor: dimension.classificationColor,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaGroupReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaGroupReportComponent, isStandalone: true, selector: "mapa-group-report", inputs: { groupReport: "groupReport", showGroupReportGeneral: "showGroupReportGeneral" }, outputs: { onSortChange: "onSortChange" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"mapa-group-report\">\n  <mapa-table\n    [columns]=\"columns\"\n    [data]=\"data\"\n    [finished]=\"true\"\n    caption=\"Relat\u00F3rio de grupo por dimens\u00E3o\"\n    (sortChange)=\"handleSortChange($event)\"\n  >\n    <ng-template mapaTableCell=\"name\" let-row>\n      <div class=\"mapa-group-report__content--value\">\n        <div class=\"mapa-group-report__content--title\">\n          {{ $any(row).name }}\n        </div>\n        <div class=\"mapa-group-report__content--subtitle\">\n          {{ $any(row).cpf }}\n        </div>\n      </div>\n    </ng-template>\n\n    @if (showGroupReportGeneral) {\n      <ng-template mapaTableCell=\"general\" let-row>\n        <div\n          class=\"mapa-group-report__column mapa-group-report__column--center-cell\"\n        >\n          <div class=\"general\">\n            {{ getGeneralValue($any(row)) | currency: \"\" : \"\" }}%\n          </div>\n        </div>\n      </ng-template>\n    }\n\n    @for (column of columns; track trackColumn($index, column)) {\n      @if (column.key !== \"name\" && column.key !== \"general\") {\n        <ng-template [mapaTableCell]=\"column.key\" let-row>\n          <div\n            class=\"mapa-group-report__column mapa-group-report__column--center-cell\"\n          >\n            <div class=\"mapa-group-report__hover\">\n              <span class=\"mapa-group-report__hover--main\">\n                <span\n                  class=\"mapa__tag--bg\"\n                  [class.mapa__tag--contrast]=\"\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationId === 1\n                  \"\n                  [style.backgroundColor]=\"\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationColor\n                  \"\n                >\n                  {{\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationName || \"-\"\n                  }}\n                </span>\n              </span>\n              <span class=\"mapa-group-report__hover--hidden\">\n                {{ getDimensionLabel($any(row), column.key) }}\n              </span>\n            </div>\n          </div>\n        </ng-template>\n      }\n    }\n  </mapa-table>\n</section>\n", styles: [":host{display:block}.mapa-group-report{width:100%}.mapa-group-report mapa-table{display:block;width:100%}.mapa-group-report__column{display:flex;align-items:center}.mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}.mapa-group-report__content--value{margin-right:40px}.mapa-group-report__content--title{color:var(--mapa-color-text, #1a1a1a);text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-group-report__hover--hidden{display:none}.mapa-group-report__hover:hover .mapa-group-report__hover--main,.mapa-group-report__hover:focus-within .mapa-group-report__hover--main{display:none}.mapa-group-report__hover:hover .mapa-group-report__hover--hidden,.mapa-group-report__hover:focus-within .mapa-group-report__hover--hidden{display:flex}.mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "pipe", type: i1$2.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaGroupReportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-group-report', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MapaTableCellDirective, MapaTableComponent], standalone: true, template: "<section class=\"mapa-group-report\">\n  <mapa-table\n    [columns]=\"columns\"\n    [data]=\"data\"\n    [finished]=\"true\"\n    caption=\"Relat\u00F3rio de grupo por dimens\u00E3o\"\n    (sortChange)=\"handleSortChange($event)\"\n  >\n    <ng-template mapaTableCell=\"name\" let-row>\n      <div class=\"mapa-group-report__content--value\">\n        <div class=\"mapa-group-report__content--title\">\n          {{ $any(row).name }}\n        </div>\n        <div class=\"mapa-group-report__content--subtitle\">\n          {{ $any(row).cpf }}\n        </div>\n      </div>\n    </ng-template>\n\n    @if (showGroupReportGeneral) {\n      <ng-template mapaTableCell=\"general\" let-row>\n        <div\n          class=\"mapa-group-report__column mapa-group-report__column--center-cell\"\n        >\n          <div class=\"general\">\n            {{ getGeneralValue($any(row)) | currency: \"\" : \"\" }}%\n          </div>\n        </div>\n      </ng-template>\n    }\n\n    @for (column of columns; track trackColumn($index, column)) {\n      @if (column.key !== \"name\" && column.key !== \"general\") {\n        <ng-template [mapaTableCell]=\"column.key\" let-row>\n          <div\n            class=\"mapa-group-report__column mapa-group-report__column--center-cell\"\n          >\n            <div class=\"mapa-group-report__hover\">\n              <span class=\"mapa-group-report__hover--main\">\n                <span\n                  class=\"mapa__tag--bg\"\n                  [class.mapa__tag--contrast]=\"\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationId === 1\n                  \"\n                  [style.backgroundColor]=\"\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationColor\n                  \"\n                >\n                  {{\n                    getDimensionClassification($any(row), column.key)\n                      ?.classificationName || \"-\"\n                  }}\n                </span>\n              </span>\n              <span class=\"mapa-group-report__hover--hidden\">\n                {{ getDimensionLabel($any(row), column.key) }}\n              </span>\n            </div>\n          </div>\n        </ng-template>\n      }\n    }\n  </mapa-table>\n</section>\n", styles: [":host{display:block}.mapa-group-report{width:100%}.mapa-group-report mapa-table{display:block;width:100%}.mapa-group-report__column{display:flex;align-items:center}.mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}.mapa-group-report__content--value{margin-right:40px}.mapa-group-report__content--title{color:var(--mapa-color-text, #1a1a1a);text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}.mapa-group-report__hover--hidden{display:none}.mapa-group-report__hover:hover .mapa-group-report__hover--main,.mapa-group-report__hover:focus-within .mapa-group-report__hover--main{display:none}.mapa-group-report__hover:hover .mapa-group-report__hover--hidden,.mapa-group-report__hover:focus-within .mapa-group-report__hover--hidden{display:flex}.mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
+        }], propDecorators: { groupReport: [{
+                type: Input
+            }], showGroupReportGeneral: [{
+                type: Input
+            }], onSortChange: [{
+                type: Output
+            }] } });
+
+class IconComponent {
+    constructor(matIconRegistry, domSanitizer) {
+        this.matIconRegistry = matIconRegistry;
+        this.domSanitizer = domSanitizer;
+    }
+    ngOnChanges() {
+        this.registerCustomIcons(this.svg);
+    }
+    registerCustomIcons(svg) {
+        this.matIconRegistry.addSvgIcon(svg, this.domSanitizer.bypassSecurityTrustResourceUrl(`../../../../assets/${svg}.svg`));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: IconComponent, deps: [{ token: i1$5.MatIconRegistry }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: IconComponent, isStandalone: true, selector: "mapa-icon", inputs: { svg: "svg" }, usesOnChanges: true, ngImport: i0, template: "<mat-icon *ngIf=\"svg\" [svgIcon]=\"svg\"></mat-icon>\n<mat-icon *ngIf=\"!svg\"><ng-content></ng-content></mat-icon>\n", styles: [".mat-icon{color:#f5704b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-icon', standalone: true, imports: [CommonModule, MatIconModule], template: "<mat-icon *ngIf=\"svg\" [svgIcon]=\"svg\"></mat-icon>\n<mat-icon *ngIf=\"!svg\"><ng-content></ng-content></mat-icon>\n", styles: [".mat-icon{color:#f5704b}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.MatIconRegistry }, { type: i1$3.DomSanitizer }], propDecorators: { svg: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui icon
+ */
+
+class MapaMenuComponent {
+    constructor() {
+        this.items = [];
+        this.emitMenu = new EventEmitter();
+    }
+    toggleMenu() {
+        this.trigger.openMenu();
+    }
+    clickMenu(item) {
+        this.emitMenu.emit({ action: item.action, data: this.data });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaMenuComponent, isStandalone: true, selector: "mapa-menu", inputs: { items: "items", data: "data" }, outputs: { emitMenu: "emitMenu" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" class=\"mapa-menu\">\n  <button\n    *ngFor=\"let item of items\"\n    mat-menu-item\n    (click)=\"clickMenu(item)\"\n    class=\"mapa-menu__item\"\n    [class.mapa-menu__item--disabled]=\"item.disabled\"\n  >\n    <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n    <img *ngIf=\"item.image\" [src]=\"item.image\" />\n    <span>{{item.text}}</span>\n  </button>\n</mat-menu>\n\n<img\n  class=\"outside-menu-icon\"\n  src=\"assets/images/icons/ThreePoints.svg\"\n  (click)=\"toggleMenu()\"\n  [matMenuTriggerFor]=\"menu\"\n/>\n", styles: [".outside-menu-icon{color:#50575e;display:flex;align-items:center;justify-content:center}.mat-mdc-menu-content mat-icon{color:var(--Grey-Grey-60, #50575e);font-size:16px;line-height:28px}.mapa-menu__item{display:flex;align-items:center}.mapa-menu__item img{margin-right:8px}.mapa-menu__item--disabled{opacity:.45;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-menu", imports: [CommonModule, MatIconModule, MatMenuModule], standalone: true, template: "<mat-menu #menu=\"matMenu\" class=\"mapa-menu\">\n  <button\n    *ngFor=\"let item of items\"\n    mat-menu-item\n    (click)=\"clickMenu(item)\"\n    class=\"mapa-menu__item\"\n    [class.mapa-menu__item--disabled]=\"item.disabled\"\n  >\n    <mat-icon *ngIf=\"item.icon\">{{item.icon}}</mat-icon>\n    <img *ngIf=\"item.image\" [src]=\"item.image\" />\n    <span>{{item.text}}</span>\n  </button>\n</mat-menu>\n\n<img\n  class=\"outside-menu-icon\"\n  src=\"assets/images/icons/ThreePoints.svg\"\n  (click)=\"toggleMenu()\"\n  [matMenuTriggerFor]=\"menu\"\n/>\n", styles: [".outside-menu-icon{color:#50575e;display:flex;align-items:center;justify-content:center}.mat-mdc-menu-content mat-icon{color:var(--Grey-Grey-60, #50575e);font-size:16px;line-height:28px}.mapa-menu__item{display:flex;align-items:center}.mapa-menu__item img{margin-right:8px}.mapa-menu__item--disabled{opacity:.45;cursor:not-allowed}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], emitMenu: [{
+                type: Output
+            }], trigger: [{
+                type: ViewChild,
+                args: [MatMenuTrigger]
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui menu
+ */
+
+class MapaNavListComponent {
+    constructor() {
+        this.clicked = new EventEmitter();
+    }
+    emit(option) {
+        this.selected = option;
+        this.clicked.emit(option);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaNavListComponent, isStandalone: true, selector: "mapa-nav-list", inputs: { options: "options", label: "label" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<nav class=\"mapa-nav-list\">\n  {{ label }}\n  <ul>\n    <li\n      *ngFor=\"let option of options\"\n      (click)=\"emit(option)\"\n      [class.selected]=\"selected === option\"\n    >\n      <span>{{ option.value }}</span>\n    </li>\n  </ul>\n</nav>\n", styles: [".mapa-nav-list{display:flex;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px}.mapa-nav-list ul{list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.mapa-nav-list ul li{cursor:pointer;display:inline;margin-left:33px}.mapa-nav-list ul li span{padding:0 4px}.mapa-nav-list ul li:hover span,.mapa-nav-list ul li.selected span{border-bottom:4px solid #ea561d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaNavListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-nav-list', standalone: true, imports: [CommonModule], template: "<nav class=\"mapa-nav-list\">\n  {{ label }}\n  <ul>\n    <li\n      *ngFor=\"let option of options\"\n      (click)=\"emit(option)\"\n      [class.selected]=\"selected === option\"\n    >\n      <span>{{ option.value }}</span>\n    </li>\n  </ul>\n</nav>\n", styles: [".mapa-nav-list{display:flex;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px}.mapa-nav-list ul{list-style-type:none;margin-block-start:0px;margin-block-end:0px;padding-inline-start:0px}.mapa-nav-list ul li{cursor:pointer;display:inline;margin-left:33px}.mapa-nav-list ul li span{padding:0 4px}.mapa-nav-list ul li:hover span,.mapa-nav-list ul li.selected span{border-bottom:4px solid #ea561d}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui nav-list
+ */
+
+class ReportItemComponent {
+    constructor() {
+        this.menuItems = [];
+        this.clicked = new EventEmitter();
+        this.emitMenu = new EventEmitter();
+        this.id = '';
+        this.description = '';
+        this.icon = '';
+    }
+    get item() {
+        if (Array.isArray(this.itemData)) {
+            return this.itemData[0];
+        }
+        return this.itemData;
+    }
+    get resolvedMenuItems() {
+        if (this.item?.menu && this.item.menu.length > 0) {
+            return this.item.menu;
+        }
+        return this.menuItems;
+    }
+    ngOnChanges(changes) {
+        if (changes['itemData']) {
+            this.syncItemData();
+        }
+    }
+    syncItemData() {
+        const data = this.item;
+        if (!data) {
+            return;
+        }
+        this.id = data.id;
+        this.description = data.description;
+        this.icon = data.icon;
+    }
+    onClick(action) {
+        const item = this.item;
+        if (!item) {
+            return;
+        }
+        this.emitMenu.emit({
+            action,
+            data: item,
+        });
+        this.clicked.emit(item.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ReportItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: ReportItemComponent, isStandalone: true, selector: "mapa-report-item", inputs: { itemData: "itemData", menuItems: "menuItems" }, outputs: { clicked: "clicked", emitMenu: "emitMenu" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"report-item\">\n  <div class=\"report-icon\">\n    <mat-icon class=\"material-icons\">{{ icon }}</mat-icon>\n  </div>\n  <div class=\"report-text\">\n    <h1>\n      {{ description }}\n    </h1>\n  </div>\n  <div class=\"report-button\">\n    <div class=\"report-circle\" *ngIf=\"resolvedMenuItems.length > 0\">\n      <mat-icon [matMenuTriggerFor]=\"menu\">more_vert</mat-icon>\n      <mat-menu #menu=\"matMenu\">\n        <button\n          mat-menu-item\n          *ngFor=\"let item of resolvedMenuItems\"\n          (click)=\"onClick(item.action)\"\n        >\n          <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n          <img *ngIf=\"item.image\" [src]=\"item.image\" />\n          <span>{{ item.text }}</span>\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n</div>\n", styles: [".report-item{margin:24px 48px;height:161px;display:flex;border-radius:16px;border:1px solid #CDCDCD}.report-item .report-icon{width:25%;border-radius:16px 0 0 16px;background:#fdefea}.report-item .report-icon .mat-icon{width:123px;height:123px;font-size:123px;color:#ea561d;padding:20px 42px}.report-item .report-text{background:var(--GlobalColors-Neutral-20, #F9F9F9);width:100%;padding:0 16px}.report-item .report-text h1{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:28px;margin-top:25px}.report-item .report-text li{color:var #000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px;margin-top:10px}.report-item .report-button{width:4vw;align-items:flex-end;border-radius:50%;margin-top:10px}.report-item .report-button .report-circle{background-color:#fff;border-radius:50%;display:flex;align-items:center;margin-right:10px}.report-item .report-button .mat-icon{width:20px;height:20px;font-size:20px;margin:5px;color:#ea561d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ReportItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapa-report-item', imports: [CommonModule, MatIconModule, MatMenuModule], standalone: true, template: "<div class=\"report-item\">\n  <div class=\"report-icon\">\n    <mat-icon class=\"material-icons\">{{ icon }}</mat-icon>\n  </div>\n  <div class=\"report-text\">\n    <h1>\n      {{ description }}\n    </h1>\n  </div>\n  <div class=\"report-button\">\n    <div class=\"report-circle\" *ngIf=\"resolvedMenuItems.length > 0\">\n      <mat-icon [matMenuTriggerFor]=\"menu\">more_vert</mat-icon>\n      <mat-menu #menu=\"matMenu\">\n        <button\n          mat-menu-item\n          *ngFor=\"let item of resolvedMenuItems\"\n          (click)=\"onClick(item.action)\"\n        >\n          <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n          <img *ngIf=\"item.image\" [src]=\"item.image\" />\n          <span>{{ item.text }}</span>\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n</div>\n", styles: [".report-item{margin:24px 48px;height:161px;display:flex;border-radius:16px;border:1px solid #CDCDCD}.report-item .report-icon{width:25%;border-radius:16px 0 0 16px;background:#fdefea}.report-item .report-icon .mat-icon{width:123px;height:123px;font-size:123px;color:#ea561d;padding:20px 42px}.report-item .report-text{background:var(--GlobalColors-Neutral-20, #F9F9F9);width:100%;padding:0 16px}.report-item .report-text h1{color:#000;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400;line-height:28px;margin-top:25px}.report-item .report-text li{color:var #000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px;margin-top:10px}.report-item .report-button{width:4vw;align-items:flex-end;border-radius:50%;margin-top:10px}.report-item .report-button .report-circle{background-color:#fff;border-radius:50%;display:flex;align-items:center;margin-right:10px}.report-item .report-button .mat-icon{width:20px;height:20px;font-size:20px;margin:5px;color:#ea561d}\n"] }]
+        }], propDecorators: { itemData: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], emitMenu: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of mapa-library-ui report-item
+ */
+
+class MapaProgressbarComponent {
+    constructor() {
+        this.showInterval = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaProgressbarComponent, isStandalone: true, selector: "mapa-progressbar", inputs: { data: "data", showInterval: "showInterval" }, ngImport: i0, template: "<div class=\"progress-bar\">\n  <div class=\"progress-bar--bg\">\n    <div\n      class=\"progress-bar--filled\"\n      [style.width.%]=\"data.interval\"\n      [style.backgroundColor]=\"data.classification?.classificationColor\"\n    ></div>\n  </div>\n  <div class=\"progress-bar--interval\" *ngIf=\"showInterval\">\n    {{data.interval}}%\n  </div>\n</div>\n", styles: [".progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px;gap:20px}.progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.progress-bar--filled{position:absolute;top:0;left:0;background-color:#c6c6c6;border-radius:6px;height:8px}.progress-bar--interval{color:#2e2a2a;text-align:center;font-size:24px;font-style:normal;font-weight:400;line-height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaProgressbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-progressbar", imports: [CommonModule], standalone: true, template: "<div class=\"progress-bar\">\n  <div class=\"progress-bar--bg\">\n    <div\n      class=\"progress-bar--filled\"\n      [style.width.%]=\"data.interval\"\n      [style.backgroundColor]=\"data.classification?.classificationColor\"\n    ></div>\n  </div>\n  <div class=\"progress-bar--interval\" *ngIf=\"showInterval\">\n    {{data.interval}}%\n  </div>\n</div>\n", styles: [".progress-bar{display:flex;align-items:center;justify-content:space-between;color:#2e2a2a;font-size:18px;font-style:normal;font-weight:400;width:310px;gap:20px}.progress-bar--bg{position:relative;background-color:#eee;border-radius:6px;height:8px;width:247px}.progress-bar--filled{position:absolute;top:0;left:0;background-color:#c6c6c6;border-radius:6px;height:8px}.progress-bar--interval{color:#2e2a2a;text-align:center;font-size:24px;font-style:normal;font-weight:400;line-height:32px}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], showInterval: [{
+                type: Input
+            }] } });
+
+class MapaScaleComponent {
+    constructor(i18n) {
+        this.i18n = i18n;
+        this.showProgressbar = true;
+    }
+    get texts() {
+        return this.i18n.textsSignal();
+    }
+    get conceptTitle() {
+        return this.texts.capability.conceptTitle;
+    }
+    getProgressbarData(scale) {
+        return {
+            interval: scale.interval,
+            classification: scale.classification,
+        };
+    }
+    getIntervalbarData(scale) {
+        return {
+            interval: scale.interval,
+            classificationBg: scale.classification?.classificationBg,
+            items: scale.dimensions,
+        };
+    }
+    isPositive(dimension) {
+        return dimension.direction === "Positiva";
+    }
+    showSummarized(scale) {
+        return scale?.scaleConcept === undefined;
+    }
+    getCompetenceImg(competence) {
+        let img = "";
+        if (competence.competenceName.includes("Gestão")) {
+            img = "UsersThree";
+        }
+        if (competence.competenceName.includes("Autogestão")) {
+            img = "Brain";
+        }
+        if (competence.competenceName.includes("Relacionamento")) {
+            img = "Handshake";
+        }
+        if (competence.competenceName.includes("Atividade")) {
+            img = "ListCheck";
+        }
+        if (competence.competenceName.includes("Corporais")) {
+            img = "Warning";
+        }
+        return `assets/images/icons/${img}.svg`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaScaleComponent, isStandalone: true, selector: "mapa-scale", inputs: { data: "data", showProgressbar: "showProgressbar" }, ngImport: i0, template: "@for (competence of data; track competence) {\n  <section class=\"mapa__card competence\">\n    <header class=\"competence__header\">\n      <img [src]=\"getCompetenceImg(competence)\" />\n      {{ competence.competenceName }}\n    </header>\n    <section\n      class=\"scales\"\n      [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n      [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n    >\n      @for (scale of competence.scales; track scale) {\n        <section class=\"mapa__card scale-details\">\n          <section class=\"scale-details__top\">\n            <header class=\"scale-details__header\">\n              <div class=\"scale-details__header--title mapa--display-m\">\n                {{ scale.scaleName }}\n                @if (scale.classification) {\n                  <div\n                    class=\"mapa__tag--bg\"\n                    [style.backgroundColor]=\"scale.classification.classificationColor\"\n                    [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n                  >\n                    <span class=\"mapa__tag--text\">\n                      {{ scale.classification.classificationName }}\n                    </span>\n                  </div>\n                }\n              </div>\n              @if (showProgressbar) {\n                <div class=\"scale__header--progressbar\">\n                  @if (!scale.classification?.classificationBg) {\n                    <mapa-progressbar\n                      [data]=\"getProgressbarData(scale)\"\n                    ></mapa-progressbar>\n                  } @else {\n                    <mapa-capability-interval-bar\n                      [data]=\"getIntervalbarData(scale)\"\n                      [showInterval]=\"true\"\n                    ></mapa-capability-interval-bar>\n                  }\n                </div>\n              }\n            </header>\n            @if (scale.scaleConcept) {\n              <article class=\"scale-details__concept\">\n                <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n              </article>\n            }\n          </section>\n          <section\n            class=\"scale-details__dimensions\"\n            [class.dimension--full-sized]=\"!showSummarized(scale)\"\n            [class.dimension--summarized]=\"showSummarized(scale)\"\n          >\n            @for (dimension of scale.dimensions; track dimension) {\n              <article class=\"mapa__card--sm dimension\">\n                <nav class=\"dimension__main\">\n                  <div class=\"dimension__title\">\n                    <div class=\"dimension__title--direction\">\n                      @if (isPositive(dimension)) {\n                        <span>&uarr;</span>\n                      } @else {\n                        <span>&darr;</span>\n                      }\n                    </div>\n                    <div class=\"dimension__title--label\">\n                      {{ dimension.dimensionName }}\n                    </div>\n                  </div>\n                  <div class=\"dimension--classification\">\n                    @if (dimension.classification) {\n                      <div\n                        class=\"mapa__tag--bg\"\n                        [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                        [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n                      >\n                        <span class=\"mapa__tag--text\">\n                          {{ dimension.classification.classificationName }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </nav>\n                @if (dimension.dimensionClassificationMessage) {\n                  <div class=\"dimension__concept\">\n                    {{ dimension.dimensionClassificationMessage }}\n                  </div>\n                }\n              </article>\n            }\n          </section>\n        </section>\n      }\n    </section>\n  </section>\n}\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}@media(max-width:768px){.competence .scales--summarized{grid-template-columns:1fr}}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin-bottom:20px;gap:18px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}@media(max-width:768px){.competence .scale-details .dimension--full-sized .dimension__main{width:auto;flex-direction:column;justify-content:start;gap:26px}}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}@media(max-width:768px){.competence{overflow-x:auto;width:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapaCapabilityIntervalBarComponent, selector: "mapa-capability-interval-bar", inputs: ["data", "expanded", "showInterval"], outputs: ["clicked"] }, { kind: "component", type: MapaProgressbarComponent, selector: "mapa-progressbar", inputs: ["data", "showInterval"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaScaleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-scale", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        MapaCapabilityIntervalBarComponent,
+                        MapaProgressbarComponent,
+                    ], standalone: true, template: "@for (competence of data; track competence) {\n  <section class=\"mapa__card competence\">\n    <header class=\"competence__header\">\n      <img [src]=\"getCompetenceImg(competence)\" />\n      {{ competence.competenceName }}\n    </header>\n    <section\n      class=\"scales\"\n      [class.scales--full-sized]=\"!showSummarized(competence.scales[0])\"\n      [class.scales--summarized]=\"showSummarized(competence.scales[0])\"\n    >\n      @for (scale of competence.scales; track scale) {\n        <section class=\"mapa__card scale-details\">\n          <section class=\"scale-details__top\">\n            <header class=\"scale-details__header\">\n              <div class=\"scale-details__header--title mapa--display-m\">\n                {{ scale.scaleName }}\n                @if (scale.classification) {\n                  <div\n                    class=\"mapa__tag--bg\"\n                    [style.backgroundColor]=\"scale.classification.classificationColor\"\n                    [class.mapa__tag--contrast]=\"scale.classification.classificationId === 1\"\n                  >\n                    <span class=\"mapa__tag--text\">\n                      {{ scale.classification.classificationName }}\n                    </span>\n                  </div>\n                }\n              </div>\n              @if (showProgressbar) {\n                <div class=\"scale__header--progressbar\">\n                  @if (!scale.classification?.classificationBg) {\n                    <mapa-progressbar\n                      [data]=\"getProgressbarData(scale)\"\n                    ></mapa-progressbar>\n                  } @else {\n                    <mapa-capability-interval-bar\n                      [data]=\"getIntervalbarData(scale)\"\n                      [showInterval]=\"true\"\n                    ></mapa-capability-interval-bar>\n                  }\n                </div>\n              }\n            </header>\n            @if (scale.scaleConcept) {\n              <article class=\"scale-details__concept\">\n                <strong>{{ conceptTitle }}:</strong> {{ scale.scaleConcept }}\n              </article>\n            }\n          </section>\n          <section\n            class=\"scale-details__dimensions\"\n            [class.dimension--full-sized]=\"!showSummarized(scale)\"\n            [class.dimension--summarized]=\"showSummarized(scale)\"\n          >\n            @for (dimension of scale.dimensions; track dimension) {\n              <article class=\"mapa__card--sm dimension\">\n                <nav class=\"dimension__main\">\n                  <div class=\"dimension__title\">\n                    <div class=\"dimension__title--direction\">\n                      @if (isPositive(dimension)) {\n                        <span>&uarr;</span>\n                      } @else {\n                        <span>&darr;</span>\n                      }\n                    </div>\n                    <div class=\"dimension__title--label\">\n                      {{ dimension.dimensionName }}\n                    </div>\n                  </div>\n                  <div class=\"dimension--classification\">\n                    @if (dimension.classification) {\n                      <div\n                        class=\"mapa__tag--bg\"\n                        [style.backgroundColor]=\"dimension.classification.classificationColor\"\n                        [class.mapa__tag--contrast]=\"dimension.classification.classificationId === 1\"\n                      >\n                        <span class=\"mapa__tag--text\">\n                          {{ dimension.classification.classificationName }}\n                        </span>\n                      </div>\n                    }\n                  </div>\n                </nav>\n                @if (dimension.dimensionClassificationMessage) {\n                  <div class=\"dimension__concept\">\n                    {{ dimension.dimensionClassificationMessage }}\n                  </div>\n                }\n              </article>\n            }\n          </section>\n        </section>\n      }\n    </section>\n  </section>\n}\n", styles: [".competence{display:flex;gap:24px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:fit-content}.competence__header{display:flex;align-items:center;color:#ea561d;font-size:32px;font-weight:400;line-height:40px;width:100%}.competence__header img{margin-right:16px}.competence .scales--summarized{display:grid;gap:24px;grid-template-columns:1fr 1fr 1fr}@media(max-width:768px){.competence .scales--summarized{grid-template-columns:1fr}}.competence .scale-details{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:wrap;gap:16px;width:fit-content;height:fit-content}.competence .scale-details__top{border-bottom:2px solid #8c8f94;width:100%}.competence .scale-details__header{display:flex;align-items:center;justify-content:space-between;width:100%;color:#181818;font-size:24px;font-style:normal;font-weight:500;line-height:32px;margin-bottom:20px;gap:18px}.competence .scale-details__header--title{display:flex;align-items:center;gap:24px}.competence .scale-details__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px;padding-bottom:16px}.competence .scale-details__concept strong{color:#181818;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.competence .scale-details__dimensions{display:flex;flex-wrap:wrap;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension{display:flex;justify-content:flex-start;gap:24px;width:100%;height:fit-content}.competence .scale-details .dimension__main{display:flex;justify-content:space-between;width:100%}.competence .scale-details .dimension--full-sized .dimension{display:flex;gap:32px;width:100%}.competence .scale-details .dimension--full-sized .dimension__main{width:35%}@media(max-width:768px){.competence .scale-details .dimension--full-sized .dimension__main{width:auto;flex-direction:column;justify-content:start;gap:26px}}.competence .scale-details .dimension--full-sized .dimension__concept{width:65%}.competence .scale-details .dimension__title{display:flex;align-items:center;justify-content:center;color:#181818;font-size:16px;font-style:normal;font-weight:400;line-height:24px;gap:8px}.competence .scale-details .dimension--classification{display:flex;align-items:center;justify-content:center}.competence .scale-details .dimension__concept{color:#50575e;font-size:16px;font-style:normal;font-weight:400;line-height:24px}@media(max-width:768px){.competence{overflow-x:auto;width:auto}}\n"] }]
+        }], ctorParameters: () => [{ type: MapaI18nService }], propDecorators: { data: [{
+                type: Input
+            }], showProgressbar: [{
+                type: Input
+            }] } });
+
+class MapaDetailsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaDetailsComponent, isStandalone: true, selector: "mapa-details", ngImport: i0, template: "<ng-container></ng-container>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mapa-details", standalone: true, template: "<ng-container></ng-container>\n" }]
+        }] });
+
+/*
+ * Public API Surface of mapa-library-ui scale
+ */
+
 class MapaWarningComponent {
     constructor(i18n) {
         this.i18n = i18n;