mapa-library-ui 1.2.0 → 1.3.0

package/fesm2022/mapa-library-ui.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, Input, Self, Optional, Directive, EventEmitter, Output, InjectionToken, Injector, signal, Inject, Injectable, Component, SecurityContext, Pipe, ChangeDetectionStrategy, EnvironmentInjector, createComponent, HostListener, ViewChild, effect } from '@angular/core';
+import { inject, DestroyRef, Input, Self, Optional, Directive, EventEmitter, Output, InjectionToken, Injector, signal, Inject, Injectable, Component, SecurityContext, Pipe, ChangeDetectionStrategy, EnvironmentInjector, createComponent, HostListener, ViewChild, forwardRef, effect } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { fromEvent, ReplaySubject } from 'rxjs';
 import * as i1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i2 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl } from '@angular/forms';
 import { map, startWith } from 'rxjs/operators';
 import * as i1$1 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
@@ -20,7 +20,7 @@ import { RouterModule } from '@angular/router';
 import { Md5 } from 'ts-md5';
 import * as i2$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i2$3 from 'ng-apexcharts';
+import * as i3$1 from 'ng-apexcharts';
 import { NgApexchartsModule } from 'ng-apexcharts';
 import * as i4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -31,21 +31,21 @@ import { MatSelectModule, MAT_SELECT_CONFIG } from '@angular/material/select';
 import * as i8 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { provideNativeDateAdapter } from '@angular/material/core';
-import * as i3$1 from '@angular/material/datepicker';
+import * as i3$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import * as i1$5 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogConfig } from '@angular/material/dialog';
-import * as i3$2 from '@angular/material/radio';
+import * as i3$3 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i3$3 from '@angular/material/slide-toggle';
+import * as i3$4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i5 from '@angular/cdk/text-field';
 import * as i4$1 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
-import * as i3$4 from '@angular/material/table';
+import * as i3$5 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule, MatTable } from '@angular/material/table';
-import * as i3$5 from '@angular/material/menu';
+import * as i3$6 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import * as i1$6 from '@angular/common/http';
 import * as i4$2 from '@angular/material/button';
@@ -5250,6 +5250,18 @@ class MapaDropdownComponent {
         this.isChecked = false;
         this.isOptionsGroup = false;
     }
+    writeValue(_value) {
+        // No-op: inner <mat-select [formControl]="formControl"> handles binding.
+    }
+    registerOnChange(_fn) {
+        // No-op.
+    }
+    registerOnTouched(_fn) {
+        // No-op.
+    }
+    setDisabledState(_isDisabled) {
+        // No-op.
+    }
     get texts() {
         return this.i18n.textsSignal();
     }
@@ -5391,6 +5403,11 @@ class MapaDropdownComponent {
                 provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
                 useValue: { appearance: "outline" },
             },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MapaDropdownComponent),
+                multi: true,
+            },
         ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (element) {\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\">\n      {{ element.label }}\n    </label>\n  }\n  <div class=\"mapa-form--inline\">\n    <mat-form-field\n      appearance=\"outline\"\n      class=\"mapa-dropdown\"\n      [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n      [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n      [class.mapa-dropdown--tag]=\"border === 'tag'\"\n      [class.mapa-dropdown--labeled]=\"!!element.label\"\n    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n        (openedChange)=\"triggerOpenedChange($event)\"\n      >\n        @if (element.search) {\n          <mat-option class=\"mapa-dropdown__search\">\n            @if (element.search.formControl) {\n              <ngx-mat-select-search\n                [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n                [formControl]=\"element.search.formControl\"\n                [placeholderLabel]=\"element.search.placeholder || ''\"\n                i18n-placeholderLabel\n                [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n              ></ngx-mat-select-search>\n            }\n          </mat-option>\n        }\n        @if (element.multiple) {\n          <mat-option class=\"mapa-dropdown__option--select-all\">\n            <mat-checkbox\n              class=\"mat-option\"\n              [indeterminate]=\"isIndeterminate\"\n              [checked]=\"isChecked\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"toggleSelectAll($event)\"\n            >\n              {{ selectAllLabel }}\n            </mat-checkbox>\n          </mat-option>\n        }\n        @if (isOptionsGroup) {\n          @if (filteredGroups | async; as groups) {\n            @for (group of groups; track group.label) {\n              <mat-optgroup [label]=\"group.label\">\n                @for (option of group.options; track option.key) {\n                  <mat-option\n                    [value]=\"option\"\n                    [ngClass]=\"[\n                      'mapa-dropdown__option--children-level-' + option.childrenLevel,\n                    ]\"\n                  >\n                    <span [innerHTML]=\"option.value | safeHtml\"></span>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            }\n          }\n        } @else {\n          @if (filteredOptions | async; as options) {\n            @for (option of options; track option.key) {\n              <mat-option\n                [value]=\"option\"\n                [ngClass]=\"[\n                  'mapa-dropdown__option mapa-dropdown__option--children-level-' +\n                    option.childrenLevel,\n                ]\"\n              >\n                <span\n                  class=\"mapa-dropdown__option-value\"\n                  [innerHTML]=\"option.value | safeHtml\"\n                ></span>\n              </mat-option>\n            }\n          }\n        }\n\n        @for (option of selectedOptions; track option.key) {\n          <mat-option\n            hidden\n            [value]=\"option\"\n            [ngClass]=\"[\n              'mapa-dropdown__option--children-level-' + option.childrenLevel,\n            ]\"\n          >\n            <span [innerHTML]=\"option.value | safeHtml\"></span>\n          </mat-option>\n        }\n      </mat-select>\n      @if (element.hint) {\n        <mat-hint>{{ element.hint }}</mat-hint>\n      }\n      <mat-error>\n        <mapa-form-errors\n          [control]=\"formControl\"\n          [errors]=\"element.errors\"\n        ></mapa-form-errors>\n      </mat-error>\n      @if (hasValue() && !formControl.disabled && element.clearValue) {\n        <mat-icon\n          (click)=\"clearValue($event)\"\n          class=\"mapa-input--close\"\n          >close</mat-icon\n        >\n      }\n    </mat-form-field>\n    @if (element.actionButton) {\n      <div class=\"mapa-form--action\">\n        <mapa-button\n          color=\"basic\"\n          (click)=\"element.actionButton.action.emit(true)\"\n        >\n          {{ element.actionButton.label }}\n        </mapa-button>\n      </div>\n    }\n  </div>\n}\n", styles: [":host ::ng-deep .mapa-dropdown{max-width:min-content;min-width:235px}:host ::ng-deep .mapa-dropdown .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:28px!important;top:18px!important;z-index:1}:host ::ng-deep .mapa-dropdown__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-dropdown--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown .mdc-notched-outline{background-color:transparent;border-radius:8px;pointer-events:none;z-index:0}:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px;position:relative}:host ::ng-deep .mapa-dropdown .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-]{height:auto!important;align-items:start!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mdc-list-item__primary-text{height:auto!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mapa-dropdown__option-value{text-wrap:auto}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-1{padding-left:30px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-2{padding-left:50px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-3{padding-left:70px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-4{padding-left:90px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-5{padding-left:100px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-6{padding-left:120px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all{padding-left:5px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search{align-items:flex-start;background:#f6f7f7;height:auto!important;min-height:80px;padding:16px 8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner{background:transparent!important;background-color:transparent!important;border:unset;border-radius:0;box-shadow:none!important;inset:0 auto auto 0;overflow:visible;position:relative;width:100%!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner-row{align-items:center;background:transparent;display:flex;position:relative}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-hidden{background:transparent!important;background-color:transparent!important;border:unset!important;height:0!important;line-height:0!important;padding:0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input{background-color:#fff!important;border:2px solid #a7aaad!important;border-radius:8px!important;height:28px!important;line-height:24px!important;padding:0 48px 0 12px!important;width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-clear{top:50%;transform:translateY(-50%)}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-divider{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search.mat-mdc-option-active,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search:hover{background:#f6f7f7}::ng-deep .mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mdc-checkbox__background{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.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: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownComponent, decorators: [{
@@ -5416,6 +5433,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                             provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
                             useValue: { appearance: "outline" },
                         },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MapaDropdownComponent),
+                            multi: true,
+                        },
                     ], standalone: true, template: "@if (element) {\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\">\n      {{ element.label }}\n    </label>\n  }\n  <div class=\"mapa-form--inline\">\n    <mat-form-field\n      appearance=\"outline\"\n      class=\"mapa-dropdown\"\n      [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n      [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n      [class.mapa-dropdown--tag]=\"border === 'tag'\"\n      [class.mapa-dropdown--labeled]=\"!!element.label\"\n    >\n      <mat-select\n        #dropdown\n        ngDefaultControl\n        [formControl]=\"formControl\"\n        [multiple]=\"element.multiple\"\n        [placeholder]=\"element.placeholder || ''\"\n        [compareWith]=\"compareFn\"\n        (openedChange)=\"triggerOpenedChange($event)\"\n      >\n        @if (element.search) {\n          <mat-option class=\"mapa-dropdown__search\">\n            @if (element.search.formControl) {\n              <ngx-mat-select-search\n                [showToggleAllCheckbox]=\"element.search.toggleAllCheckbox!\"\n                [formControl]=\"element.search.formControl\"\n                [placeholderLabel]=\"element.search.placeholder || ''\"\n                i18n-placeholderLabel\n                [noEntriesFoundLabel]=\"element.search.noEntriesFoundLabel || ''\"\n              ></ngx-mat-select-search>\n            }\n          </mat-option>\n        }\n        @if (element.multiple) {\n          <mat-option class=\"mapa-dropdown__option--select-all\">\n            <mat-checkbox\n              class=\"mat-option\"\n              [indeterminate]=\"isIndeterminate\"\n              [checked]=\"isChecked\"\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"toggleSelectAll($event)\"\n            >\n              {{ selectAllLabel }}\n            </mat-checkbox>\n          </mat-option>\n        }\n        @if (isOptionsGroup) {\n          @if (filteredGroups | async; as groups) {\n            @for (group of groups; track group.label) {\n              <mat-optgroup [label]=\"group.label\">\n                @for (option of group.options; track option.key) {\n                  <mat-option\n                    [value]=\"option\"\n                    [ngClass]=\"[\n                      'mapa-dropdown__option--children-level-' + option.childrenLevel,\n                    ]\"\n                  >\n                    <span [innerHTML]=\"option.value | safeHtml\"></span>\n                  </mat-option>\n                }\n              </mat-optgroup>\n            }\n          }\n        } @else {\n          @if (filteredOptions | async; as options) {\n            @for (option of options; track option.key) {\n              <mat-option\n                [value]=\"option\"\n                [ngClass]=\"[\n                  'mapa-dropdown__option mapa-dropdown__option--children-level-' +\n                    option.childrenLevel,\n                ]\"\n              >\n                <span\n                  class=\"mapa-dropdown__option-value\"\n                  [innerHTML]=\"option.value | safeHtml\"\n                ></span>\n              </mat-option>\n            }\n          }\n        }\n\n        @for (option of selectedOptions; track option.key) {\n          <mat-option\n            hidden\n            [value]=\"option\"\n            [ngClass]=\"[\n              'mapa-dropdown__option--children-level-' + option.childrenLevel,\n            ]\"\n          >\n            <span [innerHTML]=\"option.value | safeHtml\"></span>\n          </mat-option>\n        }\n      </mat-select>\n      @if (element.hint) {\n        <mat-hint>{{ element.hint }}</mat-hint>\n      }\n      <mat-error>\n        <mapa-form-errors\n          [control]=\"formControl\"\n          [errors]=\"element.errors\"\n        ></mapa-form-errors>\n      </mat-error>\n      @if (hasValue() && !formControl.disabled && element.clearValue) {\n        <mat-icon\n          (click)=\"clearValue($event)\"\n          class=\"mapa-input--close\"\n          >close</mat-icon\n        >\n      }\n    </mat-form-field>\n    @if (element.actionButton) {\n      <div class=\"mapa-form--action\">\n        <mapa-button\n          color=\"basic\"\n          (click)=\"element.actionButton.action.emit(true)\"\n        >\n          {{ element.actionButton.label }}\n        </mapa-button>\n      </div>\n    }\n  </div>\n}\n", styles: [":host ::ng-deep .mapa-dropdown{max-width:min-content;min-width:235px}:host ::ng-deep .mapa-dropdown .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown .mat-icon{display:flex;justify-content:center;align-items:center;position:absolute;right:28px!important;top:18px!important;z-index:1}:host ::ng-deep .mapa-dropdown__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-dropdown--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown .mdc-notched-outline{background-color:transparent;border-radius:8px;pointer-events:none;z-index:0}:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px;position:relative}:host ::ng-deep .mapa-dropdown .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center;position:relative;z-index:1}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-dropdown .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-]{height:auto!important;align-items:start!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mat-pseudo-checkbox{margin:7px 7px 7px 0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mdc-list-item__primary-text,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[class*=mapa-dropdown__option--children-level-] .mdc-list-item__primary-text{height:auto!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mapa-dropdown__option-value{text-wrap:auto}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-1{padding-left:30px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-2{padding-left:50px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-3{padding-left:70px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-4{padding-left:90px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-5{padding-left:100px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--children-level-6{padding-left:120px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all{padding-left:5px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option.mapa-dropdown__option--select-all .mat-pseudo-checkbox{display:none!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search{align-items:flex-start;background:#f6f7f7;height:auto!important;min-height:80px;padding:16px 8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner{background:transparent!important;background-color:transparent!important;border:unset;border-radius:0;box-shadow:none!important;inset:0 auto auto 0;overflow:visible;position:relative;width:100%!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-inner-row{align-items:center;background:transparent;display:flex;position:relative}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-hidden{background:transparent!important;background-color:transparent!important;border:unset!important;height:0!important;line-height:0!important;padding:0!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input{background-color:#fff!important;border:2px solid #a7aaad!important;border-radius:8px!important;height:28px!important;line-height:24px!important;padding:0 48px 0 12px!important;width:100%}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-select-search-clear{top:50%;transform:translateY(-50%)}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-divider{margin:0}::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search.mat-mdc-option-active,::ng-deep .mapa-overlay-dropdown .mat-mdc-select-panel .mat-mdc-option[aria-disabled=true].contains-mat-select-search:hover{background:#f6f7f7}::ng-deep .mapa-overlay-dropdown .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown .mdc-checkbox__background{border-color:#c3c4c7!important}\n"] }]
         }], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formControl: [{
                 type: Input
@@ -5532,11 +5554,11 @@ class MapaChartComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaChartComponent, isStandalone: true, selector: "mapa-chart", inputs: { options: "options" }, usesOnChanges: true, ngImport: i0, template: "<section>\n  <div class=\"chart\" *ngIf=\"chartOptions\">\n    <div class=\"chart__dropdown\" *ngIf=\"options.dropdown\">\n      <mapa-dropdown\n        [formControl]=\"options.dropdown.formControl\"\n        [element]=\"options.dropdown.element\"\n      ></mapa-dropdown>\n    </div>\n    <apx-chart\n      [series]=\"chartOptions.series!\"\n      [chart]=\"chartOptions.chart!\"\n      [xaxis]=\"chartOptions.xaxis!\"\n      [yaxis]=\"chartOptions.yaxis!\"\n      [stroke]=\"chartOptions.stroke!\"\n      [markers]=\"chartOptions.markers!\"\n      [fill]=\"chartOptions.fill!\"\n      [title]=\"chartOptions.title!\"\n      [legend]=\"chartOptions.legend!\"\n      [responsive]=\"chartOptions.responsive!\"width\n    ></apx-chart>\n  </div>\n</section>\n", styles: [".chart{margin:35px auto}.chart__dropdown{position:absolute;z-index:999}:host ::ng-deep .chart .apexcharts-legend.apx-legend-position-right{justify-content:center!important}:host ::ng-deep .chart apx-chart .apexcharts-canvas{display:flex;align-items:center;justify-content:center;width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgApexchartsModule }, { kind: "component", type: i2$3.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "parsing", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"], outputs: ["chartReady"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaChartComponent, isStandalone: true, selector: "mapa-chart", inputs: { options: "options" }, usesOnChanges: true, ngImport: i0, template: "<section>\n  <div class=\"chart\" *ngIf=\"chartOptions\">\n    <div class=\"chart__dropdown\" *ngIf=\"options.dropdown\">\n      <mapa-dropdown\n        [formControl]=\"options.dropdown.formControl\"\n        [element]=\"options.dropdown.element\"\n      ></mapa-dropdown>\n    </div>\n    <apx-chart\n      [series]=\"chartOptions.series!\"\n      [chart]=\"chartOptions.chart!\"\n      [xaxis]=\"chartOptions.xaxis!\"\n      [yaxis]=\"chartOptions.yaxis!\"\n      [stroke]=\"chartOptions.stroke!\"\n      [markers]=\"chartOptions.markers!\"\n      [fill]=\"chartOptions.fill!\"\n      [title]=\"chartOptions.title!\"\n      [legend]=\"chartOptions.legend!\"\n      [responsive]=\"chartOptions.responsive!\"width\n    ></apx-chart>\n  </div>\n</section>\n", styles: [".chart{margin:35px auto}.chart__dropdown{position:absolute;z-index:999}:host ::ng-deep .chart .apexcharts-legend.apx-legend-position-right{justify-content:center!important}:host ::ng-deep .chart apx-chart .apexcharts-canvas{display:flex;align-items:center;justify-content:center;width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgApexchartsModule }, { kind: "component", type: i3$1.ChartComponent, selector: "apx-chart", inputs: ["chart", "annotations", "colors", "dataLabels", "series", "stroke", "labels", "legend", "markers", "noData", "parsing", "fill", "tooltip", "plotOptions", "responsive", "xaxis", "yaxis", "forecastDataPoints", "grid", "states", "title", "subtitle", "theme", "autoUpdateSeries"], outputs: ["chartReady"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-chart", imports: [CommonModule, NgApexchartsModule, MapaDropdownComponent], standalone: true, template: "<section>\n  <div class=\"chart\" *ngIf=\"chartOptions\">\n    <div class=\"chart__dropdown\" *ngIf=\"options.dropdown\">\n      <mapa-dropdown\n        [formControl]=\"options.dropdown.formControl\"\n        [element]=\"options.dropdown.element\"\n      ></mapa-dropdown>\n    </div>\n    <apx-chart\n      [series]=\"chartOptions.series!\"\n      [chart]=\"chartOptions.chart!\"\n      [xaxis]=\"chartOptions.xaxis!\"\n      [yaxis]=\"chartOptions.yaxis!\"\n      [stroke]=\"chartOptions.stroke!\"\n      [markers]=\"chartOptions.markers!\"\n      [fill]=\"chartOptions.fill!\"\n      [title]=\"chartOptions.title!\"\n      [legend]=\"chartOptions.legend!\"\n      [responsive]=\"chartOptions.responsive!\"width\n    ></apx-chart>\n  </div>\n</section>\n", styles: [".chart{margin:35px auto}.chart__dropdown{position:absolute;z-index:999}:host ::ng-deep .chart .apexcharts-legend.apx-legend-position-right{justify-content:center!important}:host ::ng-deep .chart apx-chart .apexcharts-canvas{display:flex;align-items:center;justify-content:center;width:100%!important}\n"] }]
+            args: [{ selector: "mapa-chart", imports: [CommonModule, ReactiveFormsModule, NgApexchartsModule, MapaDropdownComponent], standalone: true, template: "<section>\n  <div class=\"chart\" *ngIf=\"chartOptions\">\n    <div class=\"chart__dropdown\" *ngIf=\"options.dropdown\">\n      <mapa-dropdown\n        [formControl]=\"options.dropdown.formControl\"\n        [element]=\"options.dropdown.element\"\n      ></mapa-dropdown>\n    </div>\n    <apx-chart\n      [series]=\"chartOptions.series!\"\n      [chart]=\"chartOptions.chart!\"\n      [xaxis]=\"chartOptions.xaxis!\"\n      [yaxis]=\"chartOptions.yaxis!\"\n      [stroke]=\"chartOptions.stroke!\"\n      [markers]=\"chartOptions.markers!\"\n      [fill]=\"chartOptions.fill!\"\n      [title]=\"chartOptions.title!\"\n      [legend]=\"chartOptions.legend!\"\n      [responsive]=\"chartOptions.responsive!\"width\n    ></apx-chart>\n  </div>\n</section>\n", styles: [".chart{margin:35px auto}.chart__dropdown{position:absolute;z-index:999}:host ::ng-deep .chart .apexcharts-legend.apx-legend-position-right{justify-content:center!important}:host ::ng-deep .chart apx-chart .apexcharts-canvas{display:flex;align-items:center;justify-content:center;width:100%!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: Input
             }] } });
@@ -5706,7 +5728,7 @@ class MapaDatepicker {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepicker, isStandalone: true, selector: "mapa-datepicker", inputs: { formGroup: "formGroup", element: "element" }, providers: [
             provideNgxMask(),
             provideNativeDateAdapter(MAPA_DATEPICKER_FORMATS),
-        ], ngImport: i0, template: "@if (element && formGroup) {\n  <section class=\"mapa-datepicker\" [formGroup]=\"formGroup\">\n    @if (element.label) {\n      <label class=\"mapa-datepicker__label\">\n        {{ element.label }}\n      </label>\n    }\n\n    <section class=\"mapa-datepicker__field\" [formGroup]=\"formGroup\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          [formControlName]=\"element.key\"\n          [placeholder]=\"element.placeholder || element.label || ''\"\n          [mask]=\"element.mask\"\n          [readonly]=\"element.readonly\"\n        />\n        <mat-icon *ngIf=\"hasValue()\" matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker touchUi=\"true\" #picker></mat-datepicker>\n        @if (element.hint) {\n          <mat-hint>{{ element.hint }}</mat-hint>\n        }\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    </section>\n\n    <section class=\"mapa-datepicker--hidden\">\n      <mat-form-field [formGroup]=\"formDatepicker\">\n        <input\n          matInput\n          formControlName=\"date\"\n          [min]=\"minDate\"\n          [max]=\"maxDate\"\n          [matDatepicker]=\"picker\"\n          (dateChange)=\"closePicker(picker)\"\n        />\n      </mat-form-field>\n    </section>\n  </section>\n}\n", styles: [":host{display:block;width:100%}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker--hidden{display:none}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$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: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (element && formGroup) {\n  <section class=\"mapa-datepicker\" [formGroup]=\"formGroup\">\n    @if (element.label) {\n      <label class=\"mapa-datepicker__label\">\n        {{ element.label }}\n      </label>\n    }\n\n    <section class=\"mapa-datepicker__field\" [formGroup]=\"formGroup\">\n      <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input\n          matInput\n          [formControlName]=\"element.key\"\n          [placeholder]=\"element.placeholder || element.label || ''\"\n          [mask]=\"element.mask\"\n          [readonly]=\"element.readonly\"\n        />\n        <mat-icon *ngIf=\"hasValue()\" matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n        <mat-datepicker touchUi=\"true\" #picker></mat-datepicker>\n        @if (element.hint) {\n          <mat-hint>{{ element.hint }}</mat-hint>\n        }\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    </section>\n\n    <section class=\"mapa-datepicker--hidden\">\n      <mat-form-field [formGroup]=\"formDatepicker\">\n        <input\n          matInput\n          formControlName=\"date\"\n          [min]=\"minDate\"\n          [max]=\"maxDate\"\n          [matDatepicker]=\"picker\"\n          (dateChange)=\"closePicker(picker)\"\n        />\n      </mat-form-field>\n    </section>\n  </section>\n}\n", styles: [":host{display:block;width:100%}:host ::ng-deep .mapa-datepicker{display:flex;flex-direction:column;gap:8px}:host ::ng-deep .mapa-datepicker__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker .mdc-text-field{padding:0}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker--hidden{display:none}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-subscript-wrapper{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$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: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepicker, decorators: [{
             type: Component,
@@ -5875,7 +5897,7 @@ class MapaDatepickerRange {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaDatepickerRange, isStandalone: true, selector: "mapa-datepicker-range", inputs: { formGroup: "formGroup", element: "element" }, providers: [
             provideNgxMask(),
             provideNativeDateAdapter(MAPA_DATEPICKER_RANGE_FORMATS),
-        ], ngImport: i0, template: "@if (element.label) {\n  <div class=\"mapa-datepicker-range__label\">\n    {{ element.label }}\n  </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__start-date\"\n  >\n    <input\n      matInput\n      formControlName=\"startDate\"\n      [placeholder]=\"startDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n  </mat-form-field>\n  <div class=\"mapa-datepicker-range__divider\">&ndash;</div>\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__end-date\"\n  >\n    <input\n      matInput\n      formControlName=\"endDate\"\n      [placeholder]=\"endDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n    <mat-icon matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n  </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n  <mat-form-field [formGroup]=\"formDatepicker\">\n    <mat-date-range-input [rangePicker]=\"picker\">\n      <input matStartDate formControlName=\"startDate\" />\n      <input matEndDate formControlName=\"endDate\" />\n    </mat-date-range-input>\n  </mat-form-field>\n</section>\n", styles: [":host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-datepicker-range{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;border:2px solid #a7aaad;border-radius:8px;padding:0 .75em;min-height:48px;height:48px;width:310px}:host ::ng-deep .mapa-datepicker-range__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker-range__start-date{width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-text-field-wrapper{width:100px!important}:host ::ng-deep .mapa-datepicker-range__end-date{width:100px!important;min-width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-text-field-wrapper{width:100px!important;min-width:100px!important}:host ::ng-deep .mapa-datepicker-range__divider{margin:0 8px}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px;margin-left:96px;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-icon,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:#fff;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:center;vertical-align:middle}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa--hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (element.label) {\n  <div class=\"mapa-datepicker-range__label\">\n    {{ element.label }}\n  </div>\n}\n<section class=\"mapa-datepicker-range\" [formGroup]=\"formDisplay\">\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__start-date\"\n  >\n    <input\n      matInput\n      formControlName=\"startDate\"\n      [placeholder]=\"startDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n  </mat-form-field>\n  <div class=\"mapa-datepicker-range__divider\">&ndash;</div>\n  <mat-form-field\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n    class=\"mapa-datepicker-range__end-date\"\n  >\n    <input\n      matInput\n      formControlName=\"endDate\"\n      [placeholder]=\"endDatePlaceholder\"\n      mask=\"00/00/0000\"\n    />\n    <mat-icon matSuffix (click)=\"cleanDatepicker()\">close</mat-icon>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-date-range-picker touchUi=\"true\" #picker></mat-date-range-picker>\n  </mat-form-field>\n</section>\n<section class=\"mapa--hidden\">\n  <mat-form-field [formGroup]=\"formDatepicker\">\n    <mat-date-range-input [rangePicker]=\"picker\">\n      <input matStartDate formControlName=\"startDate\" />\n      <input matEndDate formControlName=\"endDate\" />\n    </mat-date-range-input>\n  </mat-form-field>\n</section>\n", styles: [":host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mdc-text-field--outlined{background-color:#fff}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper{min-height:48px!important;height:48px!important}:host ::ng-deep .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-datepicker-range{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;border:2px solid #a7aaad;border-radius:8px;padding:0 .75em;min-height:48px;height:48px;width:310px}:host ::ng-deep .mapa-datepicker-range__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-datepicker-range__start-date{width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__start-date .mat-mdc-text-field-wrapper{width:100px!important}:host ::ng-deep .mapa-datepicker-range__end-date{width:100px!important;min-width:100px!important;display:flex;align-items:center;align-self:stretch}:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-input-element,:host ::ng-deep .mapa-datepicker-range__end-date .mat-mdc-text-field-wrapper{width:100px!important;min-width:100px!important}:host ::ng-deep .mapa-datepicker-range__divider{margin:0 8px}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;align-items:center;gap:4px;margin-left:96px;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-icon,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix .mat-datepicker-toggle{margin:0}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-flex{display:flex;align-items:center;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:#fff;min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:center;vertical-align:middle}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa--hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDatepickerRange, decorators: [{
             type: Component,
@@ -6025,11 +6047,11 @@ class MapaDropdownTreeComponent {
         this.openedChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaDropdownTreeComponent, isStandalone: true, selector: "mapa-dropdown-tree", inputs: { formGroup: "formGroup", element: "element" }, outputs: { openedChange: "openedChange" }, usesOnChanges: true, ngImport: i0, template: "<section *ngIf=\"elementOption && formControl\">\n  <mapa-dropdown\n    [formControl]=\"formControl\"\n    [element]=\"elementOption\"\n    (openedChange)=\"triggerOpenedChange($event)\"\n  ></mapa-dropdown>\n</section>\n", styles: [":host ::ng-deep .mapa-dropdown-tree{min-width:235px;max-width:none;width:100%!important;margin-bottom:24px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown-tree__hint{font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#77838f;margin-bottom:16px}:host ::ng-deep .mapa-dropdown-tree__toggle-all .checklist-leaf-node{padding:16px 0}:host ::ng-deep .mapa-dropdown-tree__label,:host ::ng-deep .mapa-dropdown-tree__checkbox{display:block;font-style:normal;font-weight:400;line-height:16px;width:100%;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label div,:host ::ng-deep .mapa-dropdown-tree__checkbox div{width:100%}:host ::ng-deep .mapa-dropdown-tree__label--checked,:host ::ng-deep .mapa-dropdown-tree__checkbox--checked{background:#0000001f}:host ::ng-deep .mapa-dropdown-tree__checkbox{font-size:16px;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);padding:0!important;font-size:12px!important;font-weight:600!important;margin-bottom:16px;text-transform:uppercase}:host ::ng-deep .mapa-dropdown-tree__dropdown{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;width:100%;border:2px solid #a7aaad;border-radius:8px;padding:10px 12px;margin-bottom:8px}:host ::ng-deep .mapa-dropdown-tree__dropdown--value{flex-grow:1;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:300px}:host ::ng-deep .mapa-dropdown-tree__button{background:#fff;border-top:1px solid #dcdcde!important;color:#ea561d;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px;padding:9px;text-align:left!important;width:100%}:host ::ng-deep .mapa-dropdown-tree__button .mdc-button__label{color:#ea561d!important;padding:4px 8px}:host ::ng-deep .mapa-dropdown-tree__search{display:flex;align-items:center;justify-content:flex-start;background:#f6f7f7;width:100%;padding:10px 0 16px 16px!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-input-element{padding:4px 0}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field{width:94%}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-text-field-wrapper{background:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-infix{border-top:unset!important;min-height:unset!important;padding:.7em 0 .5em}:host ::ng-deep .mapa-dropdown-tree__clean{background:#fff;border-top:1px solid #dcdcde;bottom:0%;height:36px;position:absolute;width:100%;z-index:9999}:host ::ng-deep .mapa-dropdown-tree__clean button{text-align:left;height:36px;width:100%}:host ::ng-deep .mapa-dropdown-tree--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-infix{border-top:unset!important;padding:unset!important;min-height:unset!important;position:relative}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown-tree [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown-tree .mdc-label{color:#77838f!important;font-size:16px!important;font-style:normal;font-weight:400}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-panel{width:100%;max-width:none!important;overflow:hidden}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-content{padding-bottom:unset!important;padding-top:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree{display:flex;gap:8px;flex-direction:column;max-height:260px;padding-bottom:24px;overflow-y:auto}::ng-deep .mapa-overlay-dropdown-tree .mat-tree-node{color:#50575e!important}::ng-deep .mapa-overlay-dropdown-tree ul{padding-inline-start:20px!important;margin-block-start:0px!important;margin-block-end:0px!important;gap:8px}::ng-deep .mapa-overlay-dropdown-tree .tree-toggle{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-focus-indicator{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node{min-height:28px!important;padding:4px 0;flex:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node:hover{background:#0000000a}::ng-deep .mapa-overlay-dropdown-tree .mat-select-tree-hide{display:block!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-autocomplete-panel .mat-mdc-option{padding:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-clear{top:-3px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown-tree .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mdc-checkbox__background{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaDropdownTreeComponent, isStandalone: true, selector: "mapa-dropdown-tree", inputs: { formGroup: "formGroup", element: "element" }, outputs: { openedChange: "openedChange" }, usesOnChanges: true, ngImport: i0, template: "<section *ngIf=\"elementOption && formControl\">\n  <mapa-dropdown\n    [formControl]=\"formControl\"\n    [element]=\"elementOption\"\n    (openedChange)=\"triggerOpenedChange($event)\"\n  ></mapa-dropdown>\n</section>\n", styles: [":host ::ng-deep .mapa-dropdown-tree{min-width:235px;max-width:none;width:100%!important;margin-bottom:24px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown-tree__hint{font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#77838f;margin-bottom:16px}:host ::ng-deep .mapa-dropdown-tree__toggle-all .checklist-leaf-node{padding:16px 0}:host ::ng-deep .mapa-dropdown-tree__label,:host ::ng-deep .mapa-dropdown-tree__checkbox{display:block;font-style:normal;font-weight:400;line-height:16px;width:100%;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label div,:host ::ng-deep .mapa-dropdown-tree__checkbox div{width:100%}:host ::ng-deep .mapa-dropdown-tree__label--checked,:host ::ng-deep .mapa-dropdown-tree__checkbox--checked{background:#0000001f}:host ::ng-deep .mapa-dropdown-tree__checkbox{font-size:16px;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);padding:0!important;font-size:12px!important;font-weight:600!important;margin-bottom:16px;text-transform:uppercase}:host ::ng-deep .mapa-dropdown-tree__dropdown{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;width:100%;border:2px solid #a7aaad;border-radius:8px;padding:10px 12px;margin-bottom:8px}:host ::ng-deep .mapa-dropdown-tree__dropdown--value{flex-grow:1;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:300px}:host ::ng-deep .mapa-dropdown-tree__button{background:#fff;border-top:1px solid #dcdcde!important;color:#ea561d;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px;padding:9px;text-align:left!important;width:100%}:host ::ng-deep .mapa-dropdown-tree__button .mdc-button__label{color:#ea561d!important;padding:4px 8px}:host ::ng-deep .mapa-dropdown-tree__search{display:flex;align-items:center;justify-content:flex-start;background:#f6f7f7;width:100%;padding:10px 0 16px 16px!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-input-element{padding:4px 0}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field{width:94%}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-text-field-wrapper{background:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-infix{border-top:unset!important;min-height:unset!important;padding:.7em 0 .5em}:host ::ng-deep .mapa-dropdown-tree__clean{background:#fff;border-top:1px solid #dcdcde;bottom:0%;height:36px;position:absolute;width:100%;z-index:9999}:host ::ng-deep .mapa-dropdown-tree__clean button{text-align:left;height:36px;width:100%}:host ::ng-deep .mapa-dropdown-tree--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-infix{border-top:unset!important;padding:unset!important;min-height:unset!important;position:relative}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown-tree [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown-tree .mdc-label{color:#77838f!important;font-size:16px!important;font-style:normal;font-weight:400}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-panel{width:100%;max-width:none!important;overflow:hidden}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-content{padding-bottom:unset!important;padding-top:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree{display:flex;gap:8px;flex-direction:column;max-height:260px;padding-bottom:24px;overflow-y:auto}::ng-deep .mapa-overlay-dropdown-tree .mat-tree-node{color:#50575e!important}::ng-deep .mapa-overlay-dropdown-tree ul{padding-inline-start:20px!important;margin-block-start:0px!important;margin-block-end:0px!important;gap:8px}::ng-deep .mapa-overlay-dropdown-tree .tree-toggle{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-focus-indicator{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node{min-height:28px!important;padding:4px 0;flex:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node:hover{background:#0000000a}::ng-deep .mapa-overlay-dropdown-tree .mat-select-tree-hide{display:block!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-autocomplete-panel .mat-mdc-option{padding:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-clear{top:-3px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown-tree .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mdc-checkbox__background{border-color:#c3c4c7!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaDropdownTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-dropdown-tree', imports: [CommonModule, MapaDropdownComponent], standalone: true, template: "<section *ngIf=\"elementOption && formControl\">\n  <mapa-dropdown\n    [formControl]=\"formControl\"\n    [element]=\"elementOption\"\n    (openedChange)=\"triggerOpenedChange($event)\"\n  ></mapa-dropdown>\n</section>\n", styles: [":host ::ng-deep .mapa-dropdown-tree{min-width:235px;max-width:none;width:100%!important;margin-bottom:24px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown-tree__hint{font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#77838f;margin-bottom:16px}:host ::ng-deep .mapa-dropdown-tree__toggle-all .checklist-leaf-node{padding:16px 0}:host ::ng-deep .mapa-dropdown-tree__label,:host ::ng-deep .mapa-dropdown-tree__checkbox{display:block;font-style:normal;font-weight:400;line-height:16px;width:100%;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label div,:host ::ng-deep .mapa-dropdown-tree__checkbox div{width:100%}:host ::ng-deep .mapa-dropdown-tree__label--checked,:host ::ng-deep .mapa-dropdown-tree__checkbox--checked{background:#0000001f}:host ::ng-deep .mapa-dropdown-tree__checkbox{font-size:16px;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);padding:0!important;font-size:12px!important;font-weight:600!important;margin-bottom:16px;text-transform:uppercase}:host ::ng-deep .mapa-dropdown-tree__dropdown{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;width:100%;border:2px solid #a7aaad;border-radius:8px;padding:10px 12px;margin-bottom:8px}:host ::ng-deep .mapa-dropdown-tree__dropdown--value{flex-grow:1;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:300px}:host ::ng-deep .mapa-dropdown-tree__button{background:#fff;border-top:1px solid #dcdcde!important;color:#ea561d;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px;padding:9px;text-align:left!important;width:100%}:host ::ng-deep .mapa-dropdown-tree__button .mdc-button__label{color:#ea561d!important;padding:4px 8px}:host ::ng-deep .mapa-dropdown-tree__search{display:flex;align-items:center;justify-content:flex-start;background:#f6f7f7;width:100%;padding:10px 0 16px 16px!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-input-element{padding:4px 0}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field{width:94%}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-text-field-wrapper{background:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-infix{border-top:unset!important;min-height:unset!important;padding:.7em 0 .5em}:host ::ng-deep .mapa-dropdown-tree__clean{background:#fff;border-top:1px solid #dcdcde;bottom:0%;height:36px;position:absolute;width:100%;z-index:9999}:host ::ng-deep .mapa-dropdown-tree__clean button{text-align:left;height:36px;width:100%}:host ::ng-deep .mapa-dropdown-tree--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-infix{border-top:unset!important;padding:unset!important;min-height:unset!important;position:relative}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown-tree [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown-tree .mdc-label{color:#77838f!important;font-size:16px!important;font-style:normal;font-weight:400}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-panel{width:100%;max-width:none!important;overflow:hidden}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-content{padding-bottom:unset!important;padding-top:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree{display:flex;gap:8px;flex-direction:column;max-height:260px;padding-bottom:24px;overflow-y:auto}::ng-deep .mapa-overlay-dropdown-tree .mat-tree-node{color:#50575e!important}::ng-deep .mapa-overlay-dropdown-tree ul{padding-inline-start:20px!important;margin-block-start:0px!important;margin-block-end:0px!important;gap:8px}::ng-deep .mapa-overlay-dropdown-tree .tree-toggle{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-focus-indicator{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node{min-height:28px!important;padding:4px 0;flex:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node:hover{background:#0000000a}::ng-deep .mapa-overlay-dropdown-tree .mat-select-tree-hide{display:block!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-autocomplete-panel .mat-mdc-option{padding:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-clear{top:-3px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown-tree .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mdc-checkbox__background{border-color:#c3c4c7!important}\n"] }]
+            args: [{ selector: 'mapa-dropdown-tree', imports: [CommonModule, ReactiveFormsModule, MapaDropdownComponent], standalone: true, template: "<section *ngIf=\"elementOption && formControl\">\n  <mapa-dropdown\n    [formControl]=\"formControl\"\n    [element]=\"elementOption\"\n    (openedChange)=\"triggerOpenedChange($event)\"\n  ></mapa-dropdown>\n</section>\n", styles: [":host ::ng-deep .mapa-dropdown-tree{min-width:235px;max-width:none;width:100%!important;margin-bottom:24px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important}:host ::ng-deep .mapa-dropdown-tree__hint{font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#77838f;margin-bottom:16px}:host ::ng-deep .mapa-dropdown-tree__toggle-all .checklist-leaf-node{padding:16px 0}:host ::ng-deep .mapa-dropdown-tree__label,:host ::ng-deep .mapa-dropdown-tree__checkbox{display:block;font-style:normal;font-weight:400;line-height:16px;width:100%;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label div,:host ::ng-deep .mapa-dropdown-tree__checkbox div{width:100%}:host ::ng-deep .mapa-dropdown-tree__label--checked,:host ::ng-deep .mapa-dropdown-tree__checkbox--checked{background:#0000001f}:host ::ng-deep .mapa-dropdown-tree__checkbox{font-size:16px;padding:0 16px}:host ::ng-deep .mapa-dropdown-tree__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);padding:0!important;font-size:12px!important;font-weight:600!important;margin-bottom:16px;text-transform:uppercase}:host ::ng-deep .mapa-dropdown-tree__dropdown{display:flex;align-items:center;justify-content:flex-start;background-color:#fff;width:100%;border:2px solid #a7aaad;border-radius:8px;padding:10px 12px;margin-bottom:8px}:host ::ng-deep .mapa-dropdown-tree__dropdown--value{flex-grow:1;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:300px}:host ::ng-deep .mapa-dropdown-tree__button{background:#fff;border-top:1px solid #dcdcde!important;color:#ea561d;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:500;line-height:28px;padding:9px;text-align:left!important;width:100%}:host ::ng-deep .mapa-dropdown-tree__button .mdc-button__label{color:#ea561d!important;padding:4px 8px}:host ::ng-deep .mapa-dropdown-tree__search{display:flex;align-items:center;justify-content:flex-start;background:#f6f7f7;width:100%;padding:10px 0 16px 16px!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-input-element{padding:4px 0}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field{width:94%}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-text-field-wrapper{background:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree__search .mat-mdc-form-field-infix{border-top:unset!important;min-height:unset!important;padding:.7em 0 .5em}:host ::ng-deep .mapa-dropdown-tree__clean{background:#fff;border-top:1px solid #dcdcde;bottom:0%;height:36px;position:absolute;width:100%;z-index:9999}:host ::ng-deep .mapa-dropdown-tree__clean button{text-align:left;height:36px;width:100%}:host ::ng-deep .mapa-dropdown-tree--highlight .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline{border-radius:16px!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px!important;border-color:#eedb2a!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--highlight .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--soft-border .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mat-mdc-text-field-wrapper{border-radius:16px}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline{border-radius:16px!important;height:42px!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-width:1px!important;border-color:#cdcdcd}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__leading{display:none!important}:host ::ng-deep .mapa-dropdown-tree--tag .mdc-notched-outline .mdc-notched-outline__trailing{border-radius:16px!important;border-left-style:solid!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mapa-dropdown-tree .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-flex{display:flex;align-items:center;height:48px}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-form-field-infix{border-top:unset!important;padding:unset!important;min-height:unset!important;position:relative}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-trigger{min-width:50px;padding-top:unset!important;height:unset!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-value-text{display:block;width:90%}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow-wrapper{transform:none!important;align-items:center}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow{border:unset;color:#50575e}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:before,:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow:after{content:none!important}:host ::ng-deep .mapa-dropdown-tree .mat-mdc-select-arrow svg{display:block!important;fill:currentColor}:host ::ng-deep .mapa-dropdown-tree [aria-expanded=true] .mat-mdc-select-arrow{margin:0}::ng-deep .mapa-overlay-dropdown-tree .mdc-label{color:#77838f!important;font-size:16px!important;font-style:normal;font-weight:400}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-panel{width:100%;max-width:none!important;overflow:hidden}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-menu-content{padding-bottom:unset!important;padding-top:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree{display:flex;gap:8px;flex-direction:column;max-height:260px;padding-bottom:24px;overflow-y:auto}::ng-deep .mapa-overlay-dropdown-tree .mat-tree-node{color:#50575e!important}::ng-deep .mapa-overlay-dropdown-tree ul{padding-inline-start:20px!important;margin-block-start:0px!important;margin-block-end:0px!important;gap:8px}::ng-deep .mapa-overlay-dropdown-tree .tree-toggle{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-focus-indicator{display:none}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node{min-height:28px!important;padding:4px 0;flex:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-tree .mat-tree-node:hover{background:#0000000a}::ng-deep .mapa-overlay-dropdown-tree .mat-select-tree-hide{display:block!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-autocomplete-panel .mat-mdc-option{padding:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel{border-radius:8px;min-width:calc(100% + 24px)!important}::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mat-mdc-option,::ng-deep .mapa-overlay-dropdown-tree .mat-mdc-select-panel .mdc-list-item__primary-text{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;font-size:16px;font-style:normal;font-weight:400;line-height:2em;height:2em;color:#50575e}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option{display:flex;padding:16px 8px!important;flex-direction:column;justify-content:center;align-items:center;gap:10px;align-self:stretch;background:#f6f7f7;height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inside-mat-option{height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-clear{top:-3px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-inner{top:8px;border:2px solid #a7aaad;border-radius:8px!important;width:100%!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-toggle-all-checkbox{padding-left:8px!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input{padding:8px 8px 8px 6px!important;height:unset!important;line-height:unset!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search.mat-mdc-option .mat-select-search-input::placeholder{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mapa-dropdown__search .mdc-list-item__primary-text{width:100%}::ng-deep .mapa-overlay-dropdown-tree .mat-pseudo-checkbox{color:#c3c4c7!important}::ng-deep .mapa-overlay-dropdown-tree .mdc-checkbox__background{border-color:#c3c4c7!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
                 type: Input
             }], element: [{
@@ -6067,17 +6089,38 @@ class MapaInputComponent {
     constructor() {
         this.suffix = new EventEmitter();
     }
+    writeValue(_value) {
+        // No-op: the inner <input> is bound directly to the @Input formControl,
+        // so writes from the parent FormControl already propagate through it.
+    }
+    registerOnChange(_fn) {
+        // No-op: change propagation is handled by the DefaultValueAccessor on the
+        // inner <input matInput [formControl]="formControl"> binding.
+    }
+    registerOnTouched(_fn) {
+        // No-op for the same reason.
+    }
+    setDisabledState(_isDisabled) {
+        // No-op: disabled state is propagated via the @Input formControl directly.
+    }
     hasValue() {
-        return !!this.formControl.value;
+        return !!this.formControl?.value;
     }
     clearValue() {
-        this.formControl.setValue(null);
+        this.formControl?.setValue(null);
     }
     suffixEmit() {
         this.suffix.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaInputComponent, isStandalone: true, selector: "mapa-input", inputs: { formControl: "formControl", element: "element", type: "type" }, outputs: { suffix: "suffix" }, providers: [provideNgxMask()], 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    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    <mat-icon\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n      matSuffix\n      >close</mat-icon\n    >\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: [".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 .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-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-text-field-wrapper{background-color:#fff;border-radius:8px;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:8px}: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: 8px;--mat-form-field-outlined-outline-width: 2px}: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{padding:unset}: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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$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: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaInputComponent, isStandalone: true, selector: "mapa-input", inputs: { formControl: "formControl", element: "element", type: "type" }, outputs: { suffix: "suffix" }, providers: [
+            provideNgxMask(),
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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    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    <mat-icon\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n      matSuffix\n      >close</mat-icon\n    >\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: [".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 .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-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-text-field-wrapper{background-color:#fff;border-radius:8px;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:8px}: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: 8px;--mat-form-field-outlined-outline-width: 2px}: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{padding:unset}: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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$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: "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,
@@ -6092,7 +6135,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         ButtonComponent,
                         MatInputAutosizeDirective,
                         MapaFormErrorsComponent,
-                    ], providers: [provideNgxMask()], standalone: true, 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    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    <mat-icon\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n      matSuffix\n      >close</mat-icon\n    >\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: [".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 .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-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-text-field-wrapper{background-color:#fff;border-radius:8px;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:8px}: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: 8px;--mat-form-field-outlined-outline-width: 2px}: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{padding:unset}: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"] }]
+                    ], providers: [
+                        provideNgxMask(),
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MapaInputComponent),
+                            multi: true,
+                        },
+                    ], standalone: true, 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    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    <mat-icon\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n      matSuffix\n      >close</mat-icon\n    >\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: [".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 .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-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-text-field-wrapper{background-color:#fff;border-radius:8px;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:8px}: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: 8px;--mat-form-field-outlined-outline-width: 2px}: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{padding:unset}: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"] }]
         }], propDecorators: { formControl: [{
                 type: Input
             }], element: [{
@@ -6131,12 +6181,13 @@ class FiltersComponent {
         this.selectedValues.emit(this.form.getRawValue());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: FiltersComponent, deps: [{ token: MapaI18nService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: FiltersComponent, isStandalone: true, selector: "mapa-filters", inputs: { form: "form", elements: "elements" }, outputs: { selectedValues: "selectedValues" }, ngImport: i0, template: "<div class=\"filter\">\n  <div *ngFor=\"let filter of elements\">\n    <div *ngIf=\"filter.controlType === 'checkbox'\" class=\"filter__item--resizable\">\n      <mapa-checkbox [formControl]=\"getFormControl(filter.key)\"></mapa-checkbox>\n    </div>\n    <div *ngIf=\"filter.controlType === 'dropdown'\" class=\"filter__item--resizable\">\n      <mapa-dropdown\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-dropdown>\n    </div>\n    <div *ngIf=\"filter.controlType === 'input'\" class=\"filter__item\">\n      <mapa-input\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-input>\n    </div>\n  </div>\n  <div class=\"filter__item\">\n    <mapa-button [color]=\"'basic'\" (clicked)=\"clearFilters()\">\n      {{ clearFiltersLabel }}\n    </mapa-button>\n    <mapa-button\n      [color]=\"'primary'\"\n      [disabled]=\"!!form.invalid\"\n      (clicked)=\"emitSelectedValues()\"\n    >\n      {{ submitFiltersLabel }}\n    </mapa-button>\n  </div>\n</div>\n\n", styles: [".filter{display:flex;align-items:flex-end;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:100%;gap:30px}.filter__item,.filter__item--resizable{display:flex;align-items:flex-end}.filter .mapa-dropdown{max-width:none;min-width:10vw}\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: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "mapa-checkbox", inputs: ["color", "formControl"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }, { kind: "component", type: MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: FiltersComponent, isStandalone: true, selector: "mapa-filters", inputs: { form: "form", elements: "elements" }, outputs: { selectedValues: "selectedValues" }, ngImport: i0, template: "<div class=\"filter\">\n  <div *ngFor=\"let filter of elements\">\n    <div *ngIf=\"filter.controlType === 'checkbox'\" class=\"filter__item--resizable\">\n      <mapa-checkbox [formControl]=\"getFormControl(filter.key)\"></mapa-checkbox>\n    </div>\n    <div *ngIf=\"filter.controlType === 'dropdown'\" class=\"filter__item--resizable\">\n      <mapa-dropdown\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-dropdown>\n    </div>\n    <div *ngIf=\"filter.controlType === 'input'\" class=\"filter__item\">\n      <mapa-input\n        [formControl]=\"getFormControl(filter.key)\"\n        [element]=\"filter\"\n      ></mapa-input>\n    </div>\n  </div>\n  <div class=\"filter__item\">\n    <mapa-button [color]=\"'basic'\" (clicked)=\"clearFilters()\">\n      {{ clearFiltersLabel }}\n    </mapa-button>\n    <mapa-button\n      [color]=\"'primary'\"\n      [disabled]=\"!!form.invalid\"\n      (clicked)=\"emitSelectedValues()\"\n    >\n      {{ submitFiltersLabel }}\n    </mapa-button>\n  </div>\n</div>\n\n", styles: [".filter{display:flex;align-items:flex-end;flex-wrap:wrap;background-color:#f6f7f7;padding:32px;width:100%;gap:30px}.filter__item,.filter__item--resizable{display:flex;align-items:flex-end}.filter .mapa-dropdown{max-width:none;min-width:10vw}\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: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: CheckboxComponent, selector: "mapa-checkbox", inputs: ["color", "formControl"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }, { kind: "component", type: MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mapa-filters', imports: [
                         CommonModule,
+                        ReactiveFormsModule,
                         ButtonComponent,
                         CheckboxComponent,
                         MapaDropdownComponent,
@@ -6159,6 +6210,18 @@ class RadioButtonComponent {
         this.optionSelected = new EventEmitter();
         this.options = [];
     }
+    writeValue(_value) {
+        // No-op: inner <mat-radio-group [formControl]="formControl"> handles binding.
+    }
+    registerOnChange(_fn) {
+        // No-op.
+    }
+    registerOnTouched(_fn) {
+        // No-op.
+    }
+    setDisabledState(_isDisabled) {
+        // No-op.
+    }
     ngOnInit() {
         this.options = this.element.options;
     }
@@ -6167,16 +6230,28 @@ class RadioButtonComponent {
             this.options = this.element?.options ?? [];
         }
     }
-    onChange(optionValue) {
+    onSelectionChange(optionValue) {
         this.selectedOption = optionValue;
         this.optionSelected.emit(this.selectedOption);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: RadioButtonComponent, isStandalone: true, selector: "mapa-radio-button", inputs: { formControl: "formControl", element: "element" }, outputs: { optionSelected: "optionSelected" }, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-radio-button__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-radio-button\">\n  <mat-radio-group [formControl]=\"formControl\" [value]=\"selectedOption\" (change)=\"onChange($event.value)\">\n    <mat-radio-button\n      *ngFor=\"let option of options\"\n      [value]=\"option\"\n      >\n      {{ option.value }}\n    </mat-radio-button>\n  </mat-radio-group>\n</section>\n", styles: [".mapa-radio-button{--mat-radio-selected-focus-icon-color: #ea561d;--mat-radio-selected-hover-icon-color: #ea561d;--mat-radio-selected-icon-color: #ea561d;--mat-radio-selected-pressed-icon-color: #ea561d;--mat-mdc-radio-ripple-color: #ea561d;--mat-mdc-radio-checked-ripple-color: #ea561d;color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-radio-button__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-radio-button .mat-mdc-radio-button{margin-right:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-form-field{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio{padding:0;flex-shrink:0}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__background,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__outer-circle,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__inner-circle{height:12px;width:12px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-mdc-radio-touch-target{height:24px;width:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-radio-ripple{border-radius:50%;inset:-6px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-label{display:inline-flex;align-items:center;margin:0;min-height:24px}\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: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: RadioButtonComponent, isStandalone: true, selector: "mapa-radio-button", inputs: { formControl: "formControl", element: "element" }, outputs: { optionSelected: "optionSelected" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioButtonComponent),
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-radio-button__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-radio-button\">\n  <mat-radio-group [formControl]=\"formControl\" [value]=\"selectedOption\" (change)=\"onSelectionChange($event.value)\">\n    <mat-radio-button\n      *ngFor=\"let option of options\"\n      [value]=\"option\"\n      >\n      {{ option.value }}\n    </mat-radio-button>\n  </mat-radio-group>\n</section>\n", styles: [".mapa-radio-button{--mat-radio-selected-focus-icon-color: #ea561d;--mat-radio-selected-hover-icon-color: #ea561d;--mat-radio-selected-icon-color: #ea561d;--mat-radio-selected-pressed-icon-color: #ea561d;--mat-mdc-radio-ripple-color: #ea561d;--mat-mdc-radio-checked-ripple-color: #ea561d;color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-radio-button__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-radio-button .mat-mdc-radio-button{margin-right:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-form-field{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio{padding:0;flex-shrink:0}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__background,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__outer-circle,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__inner-circle{height:12px;width:12px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-mdc-radio-touch-target{height:24px;width:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-radio-ripple{border-radius:50%;inset:-6px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-label{display:inline-flex;align-items:center;margin:0;min-height:24px}\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: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-radio-button', imports: [CommonModule, ReactiveFormsModule, MatRadioModule], standalone: true, template: "<label *ngIf=\"element.label\" class=\"mapa-radio-button__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-radio-button\">\n  <mat-radio-group [formControl]=\"formControl\" [value]=\"selectedOption\" (change)=\"onChange($event.value)\">\n    <mat-radio-button\n      *ngFor=\"let option of options\"\n      [value]=\"option\"\n      >\n      {{ option.value }}\n    </mat-radio-button>\n  </mat-radio-group>\n</section>\n", styles: [".mapa-radio-button{--mat-radio-selected-focus-icon-color: #ea561d;--mat-radio-selected-hover-icon-color: #ea561d;--mat-radio-selected-icon-color: #ea561d;--mat-radio-selected-pressed-icon-color: #ea561d;--mat-mdc-radio-ripple-color: #ea561d;--mat-mdc-radio-checked-ripple-color: #ea561d;color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-radio-button__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-radio-button .mat-mdc-radio-button{margin-right:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-form-field{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio{padding:0;flex-shrink:0}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__background,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__outer-circle,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__inner-circle{height:12px;width:12px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-mdc-radio-touch-target{height:24px;width:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-radio-ripple{border-radius:50%;inset:-6px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-label{display:inline-flex;align-items:center;margin:0;min-height:24px}\n"] }]
+            args: [{ selector: 'mapa-radio-button', imports: [CommonModule, ReactiveFormsModule, MatRadioModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioButtonComponent),
+                            multi: true,
+                        },
+                    ], standalone: true, template: "<label *ngIf=\"element.label\" class=\"mapa-radio-button__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-radio-button\">\n  <mat-radio-group [formControl]=\"formControl\" [value]=\"selectedOption\" (change)=\"onSelectionChange($event.value)\">\n    <mat-radio-button\n      *ngFor=\"let option of options\"\n      [value]=\"option\"\n      >\n      {{ option.value }}\n    </mat-radio-button>\n  </mat-radio-group>\n</section>\n", styles: [".mapa-radio-button{--mat-radio-selected-focus-icon-color: #ea561d;--mat-radio-selected-hover-icon-color: #ea561d;--mat-radio-selected-icon-color: #ea561d;--mat-radio-selected-pressed-icon-color: #ea561d;--mat-mdc-radio-ripple-color: #ea561d;--mat-mdc-radio-checked-ripple-color: #ea561d;color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-radio-button__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-radio-button .mat-mdc-radio-button{margin-right:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-form-field{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio{padding:0;flex-shrink:0}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__background,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__outer-circle,:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-radio__inner-circle{height:12px;width:12px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-mdc-radio-touch-target{height:24px;width:24px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mat-radio-ripple{border-radius:50%;inset:-6px}:host ::ng-deep .mapa-radio-button .mat-mdc-radio-button .mdc-label{display:inline-flex;align-items:center;margin:0;min-height:24px}\n"] }]
         }], propDecorators: { formControl: [{
                 type: Input
             }], element: [{
@@ -6194,6 +6269,18 @@ class SlideToggleComponent {
         this.optionSelected = new EventEmitter();
         this.options = [];
     }
+    writeValue(_value) {
+        // No-op: inner <mat-slide-toggle [formControl]="formControl"> handles binding.
+    }
+    registerOnChange(_fn) {
+        // No-op.
+    }
+    registerOnTouched(_fn) {
+        // No-op.
+    }
+    setDisabledState(_isDisabled) {
+        // No-op.
+    }
     ngOnInit() {
         this.options = this.element.options;
     }
@@ -6202,16 +6289,28 @@ class SlideToggleComponent {
             this.options = this.element?.options ?? [];
         }
     }
-    onChange(optionValue) {
+    onSelectionChange(optionValue) {
         this.selectedOption = optionValue;
         this.optionSelected.emit(this.selectedOption);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: SlideToggleComponent, isStandalone: true, selector: "mapa-slide-toggle", inputs: { formControl: "formControl", element: "element" }, outputs: { optionSelected: "optionSelected" }, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl.value ? element.status[1].label :\n    element.status[0].label ) :( formControl.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: SlideToggleComponent, isStandalone: true, selector: "mapa-slide-toggle", inputs: { formControl: "formControl", element: "element" }, outputs: { optionSelected: "optionSelected" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SlideToggleComponent),
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl.value ? element.status[1].label :\n    element.status[0].label ) :( formControl.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: SlideToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-slide-toggle', imports: [CommonModule, ReactiveFormsModule, MatSlideToggleModule], standalone: true, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl.value ? element.status[1].label :\n    element.status[0].label ) :( formControl.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__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}\n"] }]
+            args: [{ selector: 'mapa-slide-toggle', imports: [CommonModule, ReactiveFormsModule, MatSlideToggleModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SlideToggleComponent),
+                            multi: true,
+                        },
+                    ], standalone: true, template: "<label *ngIf=\"element.label\" class=\"mapa-slide-toggle__label\">\n  {{ element.label }}\n</label>\n<section class=\"mapa-slide-toggle\">\n  <mat-slide-toggle [formControl]=\"formControl\" color=\"primary\">\n    {{ element.status ? ( formControl.value ? element.status[1].label :\n    element.status[0].label ) :( formControl.value ? \"Ativo\" : \"Inativo\" ) }}\n  </mat-slide-toggle>\n</section>\n", styles: [".mapa-slide-toggle{color:#000;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:20px}.mapa-slide-toggle__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}\n"] }]
         }], propDecorators: { formControl: [{
                 type: Input
             }], element: [{
@@ -6225,8 +6324,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
  */
 
 class MapaTextareaComponent {
+    writeValue(_value) {
+        // No-op: inner <textarea [formControl]="formControl"> handles binding.
+    }
+    registerOnChange(_fn) {
+        // No-op.
+    }
+    registerOnTouched(_fn) {
+        // No-op.
+    }
+    setDisabledState(_isDisabled) {
+        // No-op.
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaTextareaComponent, isStandalone: true, selector: "mapa-textarea", inputs: { formControl: "formControl", element: "element" }, ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-textarea__label\">\n  {{ element.label }}\n</label>\n<mat-form-field\n  class=\"mapa-textarea\"\n  appearance=\"outline\"\n  subscriptSizing=\"dynamic\"\n>\n  <textarea\n    *ngIf=\"element.autosize\"\n    class=\"mapa-textarea__control mapa-textarea__control--autosize\"\n    matInput\n    cdkTextareaAutosize\n    #autosize=\"cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"element.autosizeMinRow\"\n    [cdkAutosizeMaxRows]=\"element.autosizeMaxRow\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"element.placeholder || ''\"\n  ></textarea>\n  <textarea\n    class=\"mapa-textarea__control mapa-textarea__control--manual\"\n    matInput\n    *ngIf=\"!element.autosize\"\n    [maxlength]=\"element.maxLength\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"element.placeholder || ''\"\n  ></textarea>\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", styles: [":host{display:block}.mapa-textarea{margin-bottom:16px}.mapa-textarea__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-textarea .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .mapa-textarea .mapa-textarea__control{box-sizing:border-box;display:block;margin:0;width:100%}:host ::ng-deep .mapa-textarea .mapa-textarea__control--manual{min-height:99px;resize:vertical!important}:host ::ng-deep .mapa-textarea .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px;min-height:128px;height:auto!important;align-items:stretch!important}:host ::ng-deep .mapa-textarea .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-textarea .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-flex{display:flex;align-items:stretch;flex-direction:column;height:auto!important;min-height:128px;padding:12px 16px!important}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-infix{display:flex;align-items:stretch;padding:unset!important;border-top:unset!important;height:auto!important;min-height:104px!important;width:100%}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-subscript-wrapper{padding:0!important}\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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.21", type: MapaTextareaComponent, isStandalone: true, selector: "mapa-textarea", inputs: { formControl: "formControl", element: "element" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MapaTextareaComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-textarea__label\">\n  {{ element.label }}\n</label>\n<mat-form-field\n  class=\"mapa-textarea\"\n  appearance=\"outline\"\n  subscriptSizing=\"dynamic\"\n>\n  <textarea\n    *ngIf=\"element.autosize\"\n    class=\"mapa-textarea__control mapa-textarea__control--autosize\"\n    matInput\n    cdkTextareaAutosize\n    #autosize=\"cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"element.autosizeMinRow\"\n    [cdkAutosizeMaxRows]=\"element.autosizeMaxRow\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"element.placeholder || ''\"\n  ></textarea>\n  <textarea\n    class=\"mapa-textarea__control mapa-textarea__control--manual\"\n    matInput\n    *ngIf=\"!element.autosize\"\n    [maxlength]=\"element.maxLength\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"element.placeholder || ''\"\n  ></textarea>\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", styles: [":host{display:block}.mapa-textarea{margin-bottom:16px}.mapa-textarea__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-textarea .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .mapa-textarea .mapa-textarea__control{box-sizing:border-box;display:block;margin:0;width:100%}:host ::ng-deep .mapa-textarea .mapa-textarea__control--manual{min-height:99px;resize:vertical!important}:host ::ng-deep .mapa-textarea .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px;min-height:128px;height:auto!important;align-items:stretch!important}:host ::ng-deep .mapa-textarea .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-textarea .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-flex{display:flex;align-items:stretch;flex-direction:column;height:auto!important;min-height:128px;padding:12px 16px!important}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-infix{display:flex;align-items:stretch;padding:unset!important;border-top:unset!important;height:auto!important;min-height:104px!important;width:100%}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-subscript-wrapper{padding:0!important}\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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaTextareaComponent, decorators: [{
             type: Component,
@@ -6237,6 +6354,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         MatFormFieldModule,
                         MatInputModule,
                         MapaFormErrorsComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MapaTextareaComponent),
+                            multi: true,
+                        },
                     ], standalone: true, template: "<label *ngIf=\"element.label\" class=\"mapa-textarea__label\">\n  {{ element.label }}\n</label>\n<mat-form-field\n  class=\"mapa-textarea\"\n  appearance=\"outline\"\n  subscriptSizing=\"dynamic\"\n>\n  <textarea\n    *ngIf=\"element.autosize\"\n    class=\"mapa-textarea__control mapa-textarea__control--autosize\"\n    matInput\n    cdkTextareaAutosize\n    #autosize=\"cdkTextareaAutosize\"\n    [cdkAutosizeMinRows]=\"element.autosizeMinRow\"\n    [cdkAutosizeMaxRows]=\"element.autosizeMaxRow\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"element.placeholder || ''\"\n  ></textarea>\n  <textarea\n    class=\"mapa-textarea__control mapa-textarea__control--manual\"\n    matInput\n    *ngIf=\"!element.autosize\"\n    [maxlength]=\"element.maxLength\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"element.placeholder || ''\"\n  ></textarea>\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", styles: [":host{display:block}.mapa-textarea{margin-bottom:16px}.mapa-textarea__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-textarea .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;line-height:24px}:host ::ng-deep .mapa-textarea .mapa-textarea__control{box-sizing:border-box;display:block;margin:0;width:100%}:host ::ng-deep .mapa-textarea .mapa-textarea__control--manual{min-height:99px;resize:vertical!important}:host ::ng-deep .mapa-textarea .mat-mdc-text-field-wrapper{background-color:#fff;border-radius:8px;min-height:128px;height:auto!important;align-items:stretch!important}:host ::ng-deep .mapa-textarea .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-textarea .mdc-notched-outline{background-color:transparent;border-radius:8px}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-flex{display:flex;align-items:stretch;flex-direction:column;height:auto!important;min-height:128px;padding:12px 16px!important}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-infix{display:flex;align-items:stretch;padding:unset!important;border-top:unset!important;height:auto!important;min-height:104px!important;width:100%}:host ::ng-deep .mapa-textarea .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-textarea .mat-mdc-form-field-subscript-wrapper{padding:0!important}\n"] }]
         }], propDecorators: { formControl: [{
                 type: Input
@@ -6269,12 +6392,13 @@ class MapaFormComponent {
         element.openedChange?.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaFormComponent, isStandalone: true, selector: "mapa-form", inputs: { formGroup: "formGroup", elements: "elements" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<section class=\"mapa-form\">\n  @for (element of elements; track element.key) {\n    <div class=\"mapa-form__element\">\n      <div class=\"mapa-form__element--type\">\n        @switch (element.controlType) {\n          @case (\"input\") {\n            <mapa-input\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (suffix)=\"emitSuffix(element)\"\n            ></mapa-input>\n          }\n          @case (\"dropdown\") {\n            <mapa-dropdown\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (openedChange)=\"triggerOpenedChange(element, $event)\"\n            ></mapa-dropdown>\n          }\n          @case (\"dropdown-tree\") {\n            <mapa-dropdown-tree\n              [formGroup]=\"formGroup\"\n              [element]=\"element\"\n            ></mapa-dropdown-tree>\n          }\n          @case (\"datepicker\") {\n            <mapa-datepicker\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker>\n          }\n          @case (\"datepicker-range\") {\n            <mapa-datepicker-range\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker-range>\n          }\n          @case (\"radio-button\") {\n            <mapa-radio-button\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (optionSelected)=\"onOptionSelected($event)\"\n            ></mapa-radio-button>\n          }\n          @case (\"slide-toggle\") {\n            <mapa-slide-toggle\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-slide-toggle>\n          }\n          @case (\"textarea\") {\n            <mapa-textarea\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-textarea>\n          }\n        }\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host ::ng-deep .mapa-form{display:flex;flex-direction:column;margin-top:40px;gap:24px;width:100%}:host ::ng-deep .mapa-form__element{width:100%}:host ::ng-deep .mapa-form__element--type{width:100%}:host ::ng-deep .mapa-form mapa-input .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-dropdown .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-textarea .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-datepicker .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-datepicker-range .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-form--inline{display:flex;flex-direction:row;align-items:baseline}:host ::ng-deep .mapa-form--action{margin-left:24px}:host ::ng-deep .mapa-form--action button{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MapaDatepicker, selector: "mapa-datepicker", inputs: ["formGroup", "element"] }, { kind: "component", type: MapaDatepickerRange, selector: "mapa-datepicker-range", inputs: ["formGroup", "element"] }, { kind: "component", type: MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }, { kind: "component", type: MapaDropdownTreeComponent, selector: "mapa-dropdown-tree", inputs: ["formGroup", "element"], outputs: ["openedChange"] }, { kind: "component", type: RadioButtonComponent, selector: "mapa-radio-button", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: SlideToggleComponent, selector: "mapa-slide-toggle", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: MapaTextareaComponent, selector: "mapa-textarea", inputs: ["formControl", "element"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaFormComponent, isStandalone: true, selector: "mapa-form", inputs: { formGroup: "formGroup", elements: "elements" }, outputs: { emitter: "emitter" }, ngImport: i0, template: "<section class=\"mapa-form\">\n  @for (element of elements; track element.key) {\n    <div class=\"mapa-form__element\">\n      <div class=\"mapa-form__element--type\">\n        @switch (element.controlType) {\n          @case (\"input\") {\n            <mapa-input\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (suffix)=\"emitSuffix(element)\"\n            ></mapa-input>\n          }\n          @case (\"dropdown\") {\n            <mapa-dropdown\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (openedChange)=\"triggerOpenedChange(element, $event)\"\n            ></mapa-dropdown>\n          }\n          @case (\"dropdown-tree\") {\n            <mapa-dropdown-tree\n              [formGroup]=\"formGroup\"\n              [element]=\"element\"\n            ></mapa-dropdown-tree>\n          }\n          @case (\"datepicker\") {\n            <mapa-datepicker\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker>\n          }\n          @case (\"datepicker-range\") {\n            <mapa-datepicker-range\n              [formGroup]=\"$any(formGroup)\"\n              [element]=\"$any(element)\"\n            ></mapa-datepicker-range>\n          }\n          @case (\"radio-button\") {\n            <mapa-radio-button\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n              (optionSelected)=\"onOptionSelected($event)\"\n            ></mapa-radio-button>\n          }\n          @case (\"slide-toggle\") {\n            <mapa-slide-toggle\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-slide-toggle>\n          }\n          @case (\"textarea\") {\n            <mapa-textarea\n              [formControl]=\"getFormControl(element)\"\n              [element]=\"element\"\n            ></mapa-textarea>\n          }\n        }\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host ::ng-deep .mapa-form{display:flex;flex-direction:column;margin-top:40px;gap:24px;width:100%}:host ::ng-deep .mapa-form__element{width:100%}:host ::ng-deep .mapa-form__element--type{width:100%}:host ::ng-deep .mapa-form mapa-input .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-dropdown .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-textarea .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-datepicker .mat-mdc-form-field,:host ::ng-deep .mapa-form mapa-datepicker-range .mat-mdc-form-field{width:100%;max-width:100%!important}:host ::ng-deep .mapa-form--inline{display:flex;flex-direction:row;align-items:baseline}:host ::ng-deep .mapa-form--action{margin-left:24px}:host ::ng-deep .mapa-form--action button{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MapaDatepicker, selector: "mapa-datepicker", inputs: ["formGroup", "element"] }, { kind: "component", type: MapaDatepickerRange, selector: "mapa-datepicker-range", inputs: ["formGroup", "element"] }, { kind: "component", type: MapaInputComponent, selector: "mapa-input", inputs: ["formControl", "element", "type"], outputs: ["suffix"] }, { kind: "component", type: MapaDropdownComponent, selector: "mapa-dropdown", inputs: ["formControl", "formControlSearch", "element", "border"], outputs: ["openedChange"] }, { kind: "component", type: MapaDropdownTreeComponent, selector: "mapa-dropdown-tree", inputs: ["formGroup", "element"], outputs: ["openedChange"] }, { kind: "component", type: RadioButtonComponent, selector: "mapa-radio-button", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: SlideToggleComponent, selector: "mapa-slide-toggle", inputs: ["formControl", "element"], outputs: ["optionSelected"] }, { kind: "component", type: MapaTextareaComponent, selector: "mapa-textarea", inputs: ["formControl", "element"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaFormComponent, decorators: [{
             type: Component,
             args: [{ selector: "mapa-form", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
+                        ReactiveFormsModule,
                         MapaDatepicker,
                         MapaDatepickerRange,
                         MapaInputComponent,
@@ -6421,7 +6545,7 @@ class MapaGroupReportComponent {
         };
     }
     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-table .mat-mdc-table{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-checkbox{margin:6px 8px 0 0;padding:0}:host ::ng-deep .mapa-table td.mat-mdc-cell{padding:16px 0}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;color:#50575e}:host ::ng-deep .mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-header-cell{border:none;border-bottom:1px solid #eee;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;color:#50575e}:host ::ng-deep .mapa-table .mat-mdc-row,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-header-cell,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:transparent;border-color:#b6b6b6}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{background-color:#ea561d;border-color:#ea561d}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}:host ::ng-deep .mapa-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__label{margin-top:4px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--actions{display:flex}:host ::ng-deep .mapa-group-report__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-group-report__column--actions-item{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--actions-item img{margin-right:8px}:host ::ng-deep .mapa-group-report__column--header{width:100%}:host ::ng-deep .mapa-group-report__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-group-report__column--status{border-radius:4px;padding:4px 8px;margin:auto;text-align:center;width:min-content}:host ::ng-deep .mapa-group-report__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-group-report__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-group-report__column--wrap{white-space:pre-wrap}: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__tag{display:flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;flex-shrink:0;border-radius:12px;color:#181818;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase}: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 .mat-cell{padding:0 24px!important}:host ::ng-deep .mapa-group-report .mat-header-cell{padding:0 16px 0 24px!important;color:#000;font-size:12px;font-style:normal;font-weight:500;line-height:16px}:host ::ng-deep .mapa-group-report .mat-header-cell mat-icon{width:16px;height:16px;font-size:16px}:host ::ng-deep .mapa-group-report .mat-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-group-report .roundCell{border-radius:10px}: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}:host ::ng-deep .mapa-group-report .label_report{color:#181818;text-align:center;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\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: i1$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$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.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 }); }
+    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-table .mat-mdc-table{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-checkbox{margin:6px 8px 0 0;padding:0}:host ::ng-deep .mapa-table td.mat-mdc-cell{padding:16px 0}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;color:#50575e}:host ::ng-deep .mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-header-cell{border:none;border-bottom:1px solid #eee;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;color:#50575e}:host ::ng-deep .mapa-table .mat-mdc-row,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-header-cell,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:transparent;border-color:#b6b6b6}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{background-color:#ea561d;border-color:#ea561d}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}:host ::ng-deep .mapa-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__label{margin-top:4px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--actions{display:flex}:host ::ng-deep .mapa-group-report__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-group-report__column--actions-item{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--actions-item img{margin-right:8px}:host ::ng-deep .mapa-group-report__column--header{width:100%}:host ::ng-deep .mapa-group-report__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-group-report__column--status{border-radius:4px;padding:4px 8px;margin:auto;text-align:center;width:min-content}:host ::ng-deep .mapa-group-report__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-group-report__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-group-report__column--wrap{white-space:pre-wrap}: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__tag{display:flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;flex-shrink:0;border-radius:12px;color:#181818;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase}: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 .mat-cell{padding:0 24px!important}:host ::ng-deep .mapa-group-report .mat-header-cell{padding:0 16px 0 24px!important;color:#000;font-size:12px;font-style:normal;font-weight:500;line-height:16px}:host ::ng-deep .mapa-group-report .mat-header-cell mat-icon{width:16px;height:16px;font-size:16px}:host ::ng-deep .mapa-group-report .mat-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-group-report .roundCell{border-radius:10px}: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}:host ::ng-deep .mapa-group-report .label_report{color:#181818;text-align:center;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\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: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaGroupReportComponent, decorators: [{
             type: Component,
@@ -6474,7 +6598,7 @@ class MapaMenuComponent {
         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$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.ɵ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$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$6.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$6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$6.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,
@@ -6567,7 +6691,7 @@ class ReportItemComponent {
         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$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.ɵ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$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$6.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$6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$6.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,
@@ -7178,7 +7302,7 @@ class MapaTableComponent {
                 useFactory: customPaginatorFactory,
                 deps: [MapaI18nService, Injector],
             },
-        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, read: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (status.loading) {\n  <section class=\"mapa-table mapa-table__skeleton\" aria-hidden=\"true\">\n    <div class=\"mapa-table__skeleton-content mapa__card mapa__card--show-on-desktop\">\n      <div class=\"mapa-table__skeleton-header\">\n        @for (column of columns; track trackColumn($index, column)) {\n          <div\n            class=\"mapa-table__skeleton-cell mapa-table__skeleton-cell--header\"\n            [style.width]=\"getSkeletonColumnWidth(column)\"\n          ></div>\n        }\n      </div>\n      @for (rowIndex of skeletonRows; track rowIndex) {\n        <div class=\"mapa-table__skeleton-row\">\n          @for (column of columns; track trackColumn($index, column)) {\n            <div\n              class=\"mapa-table__skeleton-cell\"\n              [style.width]=\"getSkeletonColumnWidth(column)\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  </section>\n} @else if (dataSource.data.length > 0) {\n  <section class=\"mapa-table\">\n    <div class=\"mapa-table--show-on-mobile\">\n      @if (checkbox) {\n        <div class=\"mapa-table__select-all\">\n          @if (selection) {\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation()\"\n              color=\"primary\"\n            > {{ selectAllLabel }}</mat-checkbox>\n          }\n        </div>\n      }\n      @for (row of dataSource.data; track row) {\n        <div>\n          <div class=\"mapa-table__card mapa__card\">\n            @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n              <div [ngClass]=\"'mapa-table__card--column-' + column.key\">\n                @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                  <strong\n                    class=\"mapa-table__card--header\"\n                    [class.mapa-table__checkbox--header]=\"isFirst && checkbox\"\n                  >\n                    <div\n                      [ngTemplateOutlet]=\"tableHeader\"\n                      [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox: false }\"\n                      class=\"hidden\"\n                    ></div>\n                  </strong>\n                }\n                <div\n                  class=\"mapa-table__card--column\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div>\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n\n                    @if (column.key === \"menu\") {\n                      @if (hasIndividualMenu(row)) {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of getMenuItems(row); track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of menuItems; track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.image)\"></mapa-svg-icon>\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"mapa-table--show-on-desktop\">\n      @if (desktopTableVisible) {\n        <table\n          mat-table\n          [dataSource]=\"dataSource\"\n          matSort\n          [matSortActive]=\"currentSort?.active ?? ''\"\n          [matSortDirection]=\"currentSort?.direction ?? ''\"\n          (matSortChange)=\"sortDataFunction($event)\"\n        >\n          @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n            <ng-container [matColumnDef]=\"column.key\">\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                mat-sort-header\n                [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n              >\n                <div\n                  [ngTemplateOutlet]=\"tableHeader\"\n                  [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n                ></div>\n              </th>\n              <td mat-cell *matCellDef=\"let row\" [style.width]=\"column?.width\">\n                <div\n                  class=\"mapa-table__column\"\n                  (click)=\"emitRowClick(row, '')\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div class=\"mapa-table__column--actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (column.key === \"menu\") {\n                      <div class=\"mapa-table__column--menu\">\n                        @if (hasIndividualMenu(row)) {\n                          <mapa-menu\n                            [items]=\"getMenuItems(row)\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        } @else if (menuItems.length > 0) {\n                          <mapa-menu\n                            [items]=\"menuItems\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        }\n                      </div>\n                    }\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: displayedColumns;\"\n            class=\"row-hover\"\n          ></tr>\n        </table>\n      }\n    </div>\n\n    @if (shouldShowPaginator) {\n      <section>\n        <mat-paginator\n          class=\"mapa-table__paginator\"\n          appBubblePagination\n          [appCustomLength]=\"totalCount\"\n          [bubblePageIndex]=\"paginatorPageIndex\"\n          [pageIndex]=\"paginatorPageIndex\"\n          [showFirstButton]=\"paginatorShowFirstButton\"\n          [showLastButton]=\"paginatorShowLastButton\"\n          [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n          [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n          [bubblePageSize]=\"pageSize\"\n          [length]=\"totalCount\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"[5, 10, 25, 100]\"\n          (page)=\"changePage($event)\"\n        ></mat-paginator>\n      </section>\n    }\n  </section>\n} @else if (status.finished && dataSource.data.length === 0) {\n  <section class=\"mapa-table\">\n    <mapa-empty\n      [title]=\"resolvedEmptyTitle\"\n      [subtitle]=\"resolvedEmptySubtitle\"\n    ></mapa-empty>\n  </section>\n}\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  @if (isFirst && checkbox) {\n    @if (selection) {\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        color=\"primary\"\n      ></mat-checkbox>\n    }\n  }\n  <div>\n    <span [innerHTML]=\"column.label | safeHtml\"></span>\n  </div>\n  @if (column.key !== \"actions\" && column.key !== \"menu\" && column.sort) {\n    <div class=\"mapa-table--show-on-desktop\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #tableContent\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n  let-row=\"row\"\n>\n  @if (isFirst && checkbox) {\n    <mat-checkbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n      [checked]=\"selection?.isSelected(row)\"\n      color=\"primary\"\n      class=\"mapa-table__checkbox\"\n    >\n    </mat-checkbox>\n  }\n  @if (isMaskedData(column, row)) {\n    {{ getValueAsDate(column, row) | date: column.mask }}\n  } @else if (column.status) {\n    <span [innerHTML]=\"getStatusLabel(column, row) | safeHtml\"></span>\n  } @else {\n    <span [innerHTML]=\"getCellContent(row, column.key) | safeHtml\"></span>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .mapa-table .mat-mdc-table{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-checkbox{margin:6px 8px 0 0;padding:0}:host ::ng-deep .mapa-table td.mat-mdc-cell{padding:16px 0}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;color:#50575e}:host ::ng-deep .mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-header-cell{border:none;border-bottom:1px solid #eee;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;color:#50575e}:host ::ng-deep .mapa-table .mat-mdc-row,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-header-cell,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:transparent;border-color:#b6b6b6}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{background-color:#ea561d;border-color:#ea561d}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}:host ::ng-deep .mapa-table__paginator .mat-paginator-container,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-container{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;justify-content:flex-start}:host ::ng-deep .mapa-table__paginator .mat-paginator-page-size,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-page-size{margin-right:10vw}:host ::ng-deep .mapa-table__paginator .custom-paginator-container{justify-content:flex-end}:host ::ng-deep .mapa-table__paginator .g-bubble-container{display:flex;align-items:center;justify-content:flex-end;gap:8px}:host ::ng-deep .mapa-table__paginator .g-bubble{border-radius:4px;outline:none;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;background:transparent;color:#0000008a;cursor:pointer;margin:.4em 0;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mapa-table__paginator .g-bubble:hover{background-color:#dfe3e6}:host ::ng-deep .mapa-table__paginator .g-bubble__active{background-color:#ea561d;color:#fff}:host ::ng-deep .mapa-table__paginator .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-page-size-label,:host ::ng-deep .mapa-table__paginator .custom-paginator-counter{color:#0000008a}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;color:#999}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous[disabled],:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next[disabled]{color:#dfe3e6}:host ::ng-deep .hidden{display:none}:host ::ng-deep .mapa-table{width:100%;white-space:nowrap;overflow-x:auto}:host ::ng-deep .mapa-table .mat-mdc-icon-button{width:unset!important;height:unset!important;line-height:unset!important;justify-content:flex-start}:host ::ng-deep .mapa-table .mat-mdc-icon-button .mat-mdc-button-touch-target,:host ::ng-deep .mapa-table .mat-mdc-icon-button .mdc-button__label{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%!important}@media(min-width:1201px){:host ::ng-deep .mapa-table--show-on-mobile{display:none}:host ::ng-deep .mapa-table--show-on-desktop{display:block}}@media(max-width:1200px){:host ::ng-deep .mapa-table--show-on-mobile{padding:20px}:host ::ng-deep .mapa-table--show-on-mobile .mapa__card{width:unset!important}:host ::ng-deep .mapa-table--show-on-desktop{display:none}}:host ::ng-deep .mapa-table__select-all{display:flex;align-items:center;padding:16px 24px;font-size:12px;text-transform:uppercase}@media(max-width:1200px){:host ::ng-deep .mapa-table__checkbox{margin-right:8px}:host ::ng-deep .mapa-table__checkbox--header{padding-left:24px}}:host ::ng-deep .mapa-table__card{position:relative;padding:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host ::ng-deep .mapa-table__card--floating-content{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:8px}:host ::ng-deep .mapa-table__card--floating-actions{position:absolute;bottom:16px;right:16px;color:#ea561d}:host ::ng-deep .mapa-table__card--header{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;font-size:12px;text-transform:uppercase}:host ::ng-deep .mapa-table__card--header mat-icon{height:16px;width:16px;font-size:16px}:host ::ng-deep .mapa-table__card--column{padding:16px 0}:host ::ng-deep .mapa-table__label{margin-top:4px}:host ::ng-deep .mapa-table__column{padding:15px;align-items:center;display:flex}:host ::ng-deep .mapa-table__column--actions{display:flex}:host ::ng-deep .mapa-table__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-table__column--actions-item{display:flex!important;align-items:center;gap:8px}:host ::ng-deep .mapa-table__column--actions-item span{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-table__column--menu{display:flex;align-items:center;justify-content:center;gap:8px}:host ::ng-deep .mapa-table__column--menu .mapa-table__column--menu-item-text{display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px!important}:host ::ng-deep .mapa-table__column--menu-item{display:flex;align-items:center;width:unset!important;height:unset!important}:host ::ng-deep .mapa-table__column--menu-item img{margin-right:8px}:host ::ng-deep .mapa-table__column--menu-item button{color:#ea561d!important}:host ::ng-deep .mapa-table__column--menu-item button span{font-size:12px;text-transform:uppercase;display:flex}:host ::ng-deep .mapa-table__column--menu-item-disabled{opacity:.45;cursor:not-allowed}:host ::ng-deep .mapa-table__column--header{width:100%}:host ::ng-deep .mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-table__column--status{margin:auto;text-align:center;width:min-content;border-radius:4px;padding:4px 8px}:host ::ng-deep .mapa-table__column--status-round{border-radius:50px}:host ::ng-deep .mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-table__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-table__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-table__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-table--column-actions,:host ::ng-deep .mapa-table--column-menu{width:100%}:host ::ng-deep .mapa-table__content--value{color:#fff;font-weight:500}:host ::ng-deep .mapa-table .mat-sort-header-arrow{color:transparent}:host ::ng-deep .mapa-table .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-table .mat-sort-header-content mat-icon{margin-left:24px}:host ::ng-deep .mapa-table .mat-mdc-cell{padding:0 10px!important}:host ::ng-deep .mapa-table .mat-mdc-header-cell{padding:0 24px!important}:host ::ng-deep .mapa-table .mat-mdc-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-table__skeleton-content{padding:24px}:host ::ng-deep .mapa-table__skeleton-header,:host ::ng-deep .mapa-table__skeleton-row{display:flex;gap:12px}:host ::ng-deep .mapa-table__skeleton-header{margin-bottom:16px}:host ::ng-deep .mapa-table__skeleton-row{margin-bottom:12px}:host ::ng-deep .mapa-table__skeleton-cell{height:16px;border-radius:8px;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;animation:mapa-table-skeleton-shimmer 1.2s infinite linear}:host ::ng-deep .mapa-table__skeleton-cell--header{height:20px}@media(max-width:1000px){:host ::ng-deep .mapa-table .mat-mdc-paginator-range-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host ::ng-deep .mapa-table .mat-mdc-paginator-range-label{padding:16px 0;text-align:center;width:100%}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{justify-content:center}}:host ::ng-deep .mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}:host ::ng-deep .mapa-table .roundCell{border-radius:10px}:host ::ng-deep .mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-table .name{color:#181818;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-table .cpf{color:#77838f;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-table .label_report{color:#181818;text-align:center;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}@keyframes mapa-table-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MapaMenuComponent, selector: "mapa-menu", inputs: ["items", "data"], outputs: ["emitMenu"] }, { kind: "component", type: MapaSvgIconComponent, selector: "mapa-svg-icon", inputs: ["name", "color"] }, { kind: "component", type: MapaEmptyStateComponent, selector: "mapa-empty", inputs: ["title", "subtitle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.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$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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: "directive", type: BubblePaginationDirective, selector: "[appBubblePagination], [appStylePaginatorMv]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows", "bubblePageIndex", "bubblePageSize"], outputs: ["pageIndexChangeEmitter"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, read: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (status.loading) {\n  <section class=\"mapa-table mapa-table__skeleton\" aria-hidden=\"true\">\n    <div class=\"mapa-table__skeleton-content mapa__card mapa__card--show-on-desktop\">\n      <div class=\"mapa-table__skeleton-header\">\n        @for (column of columns; track trackColumn($index, column)) {\n          <div\n            class=\"mapa-table__skeleton-cell mapa-table__skeleton-cell--header\"\n            [style.width]=\"getSkeletonColumnWidth(column)\"\n          ></div>\n        }\n      </div>\n      @for (rowIndex of skeletonRows; track rowIndex) {\n        <div class=\"mapa-table__skeleton-row\">\n          @for (column of columns; track trackColumn($index, column)) {\n            <div\n              class=\"mapa-table__skeleton-cell\"\n              [style.width]=\"getSkeletonColumnWidth(column)\"\n            ></div>\n          }\n        </div>\n      }\n    </div>\n  </section>\n} @else if (dataSource.data.length > 0) {\n  <section class=\"mapa-table\">\n    <div class=\"mapa-table--show-on-mobile\">\n      @if (checkbox) {\n        <div class=\"mapa-table__select-all\">\n          @if (selection) {\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation()\"\n              color=\"primary\"\n            > {{ selectAllLabel }}</mat-checkbox>\n          }\n        </div>\n      }\n      @for (row of dataSource.data; track row) {\n        <div>\n          <div class=\"mapa-table__card mapa__card\">\n            @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n              <div [ngClass]=\"'mapa-table__card--column-' + column.key\">\n                @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                  <strong\n                    class=\"mapa-table__card--header\"\n                    [class.mapa-table__checkbox--header]=\"isFirst && checkbox\"\n                  >\n                    <div\n                      [ngTemplateOutlet]=\"tableHeader\"\n                      [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox: false }\"\n                      class=\"hidden\"\n                    ></div>\n                  </strong>\n                }\n                <div\n                  class=\"mapa-table__card--column\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div>\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n\n                    @if (column.key === \"menu\") {\n                      @if (hasIndividualMenu(row)) {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of getMenuItems(row); track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      } @else {\n                        <div class=\"mapa-table__column--menu\">\n                          @for (item of menuItems; track item) {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--menu-item\"\n                              [class.mapa-table__column--menu-item-disabled]=\"item.disabled\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.image)\"></mapa-svg-icon>\n                              }\n                              <span class=\"mapa-table__column--menu-item-text\">{{ item.text }}</span>\n                            </button>\n                          }\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"mapa-table--show-on-desktop\">\n      @if (desktopTableVisible) {\n        <table\n          mat-table\n          [dataSource]=\"dataSource\"\n          matSort\n          [matSortActive]=\"currentSort?.active ?? ''\"\n          [matSortDirection]=\"currentSort?.direction ?? ''\"\n          (matSortChange)=\"sortDataFunction($event)\"\n        >\n          @for (column of columns; track trackColumn($index, column); let isFirst = $first) {\n            <ng-container [matColumnDef]=\"column.key\">\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                mat-sort-header\n                [disabled]=\"!(column.key !== 'actions' ? column.sort : null)\"\n              >\n                <div\n                  [ngTemplateOutlet]=\"tableHeader\"\n                  [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox }\"\n                ></div>\n              </th>\n              <td mat-cell *matCellDef=\"let row\" [style.width]=\"column?.width\">\n                <div\n                  class=\"mapa-table__column\"\n                  (click)=\"emitRowClick(row, '')\"\n                  [class.mapa-table__column--center-cell]=\"column?.align === 'center'\"\n                >\n                  @if (column.key !== \"actions\" && column.key !== \"menu\") {\n                    <div class=\"mapa-table__content\">\n                      <div\n                        [style.width]=\"column?.width\"\n                        [class.mapa-table__column--ellipsis]=\"column?.collapse === 'overflow'\"\n                        [class.mapa-table__column--no-wrap]=\"column?.collapse === 'no-wrap'\"\n                        [class.mapa-table__column--wrap]=\"column?.collapse === 'wrap'\"\n                        [ngClass]=\"[hasCustomClass(column, row, column.key) ? getCustomClass(column, row, column.key) : '']\"\n                      >\n                        @if (column?.status?.color) {\n                          <div\n                            class=\"mapa-table__column--status\"\n                            [style.backgroundColor]=\"getBackgroundColor(column, row)\"\n                            [style.color]=\"getTextColor(column, row)\"\n                            [class.mapa-table__column--status-round]=\"column.status?.style == 'round'\"\n                          >\n                            <div\n                              [ngTemplateOutlet]=\"tableContent\"\n                              [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                            ></div>\n                          </div>\n                        } @else {\n                          <div\n                            [ngTemplateOutlet]=\"tableContent\"\n                            [ngTemplateOutletContext]=\"{ selection, column, isFirst, checkbox, row }\"\n                          ></div>\n                        }\n                      </div>\n                    </div>\n                  } @else {\n                    @if (column.key === \"actions\" && actions) {\n                      <div class=\"mapa-table__column--actions\">\n                        @for (item of getActionItems(row); track item) {\n                          @if (item.route) {\n                            <a [href]=\"item.route\" [routerLink]=\"item.route\">\n                              <button\n                                class=\"mapa-table__column--actions-item\"\n                                [title]=\"item.text\"\n                                mat-icon-button\n                              >\n                                @if (item.icon) {\n                                  <mat-icon>{{ item.icon }}</mat-icon>\n                                }\n                                @if (item.image) {\n                                  <img [src]=\"item.image\" />\n                                }\n                                @if (item.svg) {\n                                  <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                                }\n                                @if (item.showText) {\n                                  <span>{{ item.text }}</span>\n                                }\n                              </button>\n                            </a>\n                          } @else {\n                            <button\n                              (click)=\"handleMenu({ data: row, action: item.action })\"\n                              class=\"mapa-table__column--actions-item\"\n                              [title]=\"item.text\"\n                              mat-icon-button\n                            >\n                              @if (item.icon) {\n                                <mat-icon>{{ item.icon }}</mat-icon>\n                              }\n                              @if (item.image) {\n                                <img [src]=\"item.image\" />\n                              }\n                              @if (item.svg) {\n                                <mapa-svg-icon [name]=\"setSvgName(item.svg)\"></mapa-svg-icon>\n                              }\n                              @if (item.showText) {\n                                <span>{{ item.text }}</span>\n                              }\n                            </button>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (column.key === \"menu\") {\n                      <div class=\"mapa-table__column--menu\">\n                        @if (hasIndividualMenu(row)) {\n                          <mapa-menu\n                            [items]=\"getMenuItems(row)\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        } @else if (menuItems.length > 0) {\n                          <mapa-menu\n                            [items]=\"menuItems\"\n                            [data]=\"row\"\n                            (emitMenu)=\"handleMenu($event)\"\n                          ></mapa-menu>\n                        }\n                      </div>\n                    }\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: displayedColumns;\"\n            class=\"row-hover\"\n          ></tr>\n        </table>\n      }\n    </div>\n\n    @if (shouldShowPaginator) {\n      <section>\n        <mat-paginator\n          class=\"mapa-table__paginator\"\n          appBubblePagination\n          [appCustomLength]=\"totalCount\"\n          [bubblePageIndex]=\"paginatorPageIndex\"\n          [pageIndex]=\"paginatorPageIndex\"\n          [showFirstButton]=\"paginatorShowFirstButton\"\n          [showLastButton]=\"paginatorShowLastButton\"\n          [renderButtonsNumber]=\"paginatorRenderButtonsNumber\"\n          [hideDefaultArrows]=\"paginatorHideDefaultArrows\"\n          [bubblePageSize]=\"pageSize\"\n          [length]=\"totalCount\"\n          [pageSize]=\"pageSize\"\n          [pageSizeOptions]=\"[5, 10, 25, 100]\"\n          (page)=\"changePage($event)\"\n        ></mat-paginator>\n      </section>\n    }\n  </section>\n} @else if (status.finished && dataSource.data.length === 0) {\n  <section class=\"mapa-table\">\n    <mapa-empty\n      [title]=\"resolvedEmptyTitle\"\n      [subtitle]=\"resolvedEmptySubtitle\"\n    ></mapa-empty>\n  </section>\n}\n\n<ng-template\n  #tableHeader\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n>\n  @if (isFirst && checkbox) {\n    @if (selection) {\n      <mat-checkbox\n        (change)=\"$event ? toggleAllRows() : null\"\n        [checked]=\"selection.hasValue() && isAllSelected()\"\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n        (click)=\"$event.stopPropagation()\"\n        color=\"primary\"\n      ></mat-checkbox>\n    }\n  }\n  <div>\n    <span [innerHTML]=\"column.label | safeHtml\"></span>\n  </div>\n  @if (column.key !== \"actions\" && column.key !== \"menu\" && column.sort) {\n    <div class=\"mapa-table--show-on-desktop\">\n      <mat-icon>filter_list</mat-icon>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #tableContent\n  let-selection=\"selection\"\n  let-column=\"column\"\n  let-isFirst=\"isFirst\"\n  let-checkbox=\"checkbox\"\n  let-row=\"row\"\n>\n  @if (isFirst && checkbox) {\n    <mat-checkbox\n      (click)=\"$event.stopPropagation()\"\n      (change)=\"$event ? selection?.toggle(row) : null; getSelectedValues()\"\n      [checked]=\"selection?.isSelected(row)\"\n      color=\"primary\"\n      class=\"mapa-table__checkbox\"\n    >\n    </mat-checkbox>\n  }\n  @if (isMaskedData(column, row)) {\n    {{ getValueAsDate(column, row) | date: column.mask }}\n  } @else if (column.status) {\n    <span [innerHTML]=\"getStatusLabel(column, row) | safeHtml\"></span>\n  } @else {\n    <span [innerHTML]=\"getCellContent(row, column.key) | safeHtml\"></span>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .mapa-table .mat-mdc-table{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);width:100%}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-checkbox{margin:6px 8px 0 0;padding:0}:host ::ng-deep .mapa-table td.mat-mdc-cell{padding:16px 0}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-row .mat-mdc-cell{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400;color:#50575e}:host ::ng-deep .mapa-table .row-hover:hover{box-shadow:0 2px 4px #00000021;outline:1px solid rgba(238,238,238,.93);cursor:pointer}:host ::ng-deep .mapa-table .mat-mdc-table .mat-mdc-header-cell{border:none;border-bottom:1px solid #eee;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:600;color:#50575e}:host ::ng-deep .mapa-table .mat-mdc-row,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-header-cell,:host ::ng-deep .mapa-table .mdc-data-table__content{--mat-table-row-item-label-text-font: var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif)}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:transparent;border-color:#b6b6b6}:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,:host ::ng-deep .mapa-table .mat-mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{background-color:#ea561d;border-color:#ea561d}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}:host ::ng-deep .mapa-table__paginator .mat-paginator-container,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-container{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;justify-content:flex-start}:host ::ng-deep .mapa-table__paginator .mat-paginator-page-size,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-page-size{margin-right:10vw}:host ::ng-deep .mapa-table__paginator .custom-paginator-container{justify-content:flex-end}:host ::ng-deep .mapa-table__paginator .g-bubble-container{display:flex;align-items:center;justify-content:flex-end;gap:8px}:host ::ng-deep .mapa-table__paginator .g-bubble{border-radius:4px;outline:none;border:none;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;background:transparent;color:#0000008a;cursor:pointer;margin:.4em 0;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px;display:flex;align-items:center;justify-content:center}:host ::ng-deep .mapa-table__paginator .g-bubble:hover{background-color:#dfe3e6}:host ::ng-deep .mapa-table__paginator .g-bubble__active{background-color:#ea561d;color:#fff}:host ::ng-deep .mapa-table__paginator .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-page-size-label,:host ::ng-deep .mapa-table__paginator .custom-paginator-counter{color:#0000008a}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous,:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif)!important;color:#999}:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-previous[disabled],:host ::ng-deep .mapa-table__paginator .mat-mdc-paginator-navigation-next[disabled]{color:#dfe3e6}:host ::ng-deep .hidden{display:none}:host ::ng-deep .mapa-table{width:100%;white-space:nowrap;overflow-x:auto}:host ::ng-deep .mapa-table .mat-mdc-icon-button{width:unset!important;height:unset!important;line-height:unset!important;justify-content:flex-start}:host ::ng-deep .mapa-table .mat-mdc-icon-button .mat-mdc-button-touch-target,:host ::ng-deep .mapa-table .mat-mdc-icon-button .mdc-button__label{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%!important}@media(min-width:1201px){:host ::ng-deep .mapa-table--show-on-mobile{display:none}:host ::ng-deep .mapa-table--show-on-desktop{display:block}}@media(max-width:1200px){:host ::ng-deep .mapa-table--show-on-mobile{padding:20px}:host ::ng-deep .mapa-table--show-on-mobile .mapa__card{width:unset!important}:host ::ng-deep .mapa-table--show-on-desktop{display:none}}:host ::ng-deep .mapa-table__select-all{display:flex;align-items:center;padding:16px 24px;font-size:12px;text-transform:uppercase}@media(max-width:1200px){:host ::ng-deep .mapa-table__checkbox{margin-right:8px}:host ::ng-deep .mapa-table__checkbox--header{padding-left:24px}}:host ::ng-deep .mapa-table__card{position:relative;padding:24px;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}:host ::ng-deep .mapa-table__card--floating-content{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:8px}:host ::ng-deep .mapa-table__card--floating-actions{position:absolute;bottom:16px;right:16px;color:#ea561d}:host ::ng-deep .mapa-table__card--header{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;font-size:12px;text-transform:uppercase}:host ::ng-deep .mapa-table__card--header mat-icon{height:16px;width:16px;font-size:16px}:host ::ng-deep .mapa-table__card--column{padding:16px 0}:host ::ng-deep .mapa-table__label{margin-top:4px}:host ::ng-deep .mapa-table__column{padding:15px;align-items:center;display:flex}:host ::ng-deep .mapa-table__column--actions{display:flex}:host ::ng-deep .mapa-table__column--actions .mat-icon{color:#ea561d!important}:host ::ng-deep .mapa-table__column--actions-item{display:flex!important;align-items:center;gap:8px}:host ::ng-deep .mapa-table__column--actions-item span{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-table__column--menu{display:flex;align-items:center;justify-content:center;gap:8px}:host ::ng-deep .mapa-table__column--menu .mapa-table__column--menu-item-text{display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px!important}:host ::ng-deep .mapa-table__column--menu-item{display:flex;align-items:center;width:unset!important;height:unset!important}:host ::ng-deep .mapa-table__column--menu-item img{margin-right:8px}:host ::ng-deep .mapa-table__column--menu-item button{color:#ea561d!important}:host ::ng-deep .mapa-table__column--menu-item button span{font-size:12px;text-transform:uppercase;display:flex}:host ::ng-deep .mapa-table__column--menu-item-disabled{opacity:.45;cursor:not-allowed}:host ::ng-deep .mapa-table__column--header{width:100%}:host ::ng-deep .mapa-table__column--header .mat-icon{cursor:pointer;position:relative;bottom:-3px;margin:0 7px;font-size:14px;height:14px;width:14px}:host ::ng-deep .mapa-table__column--status{margin:auto;text-align:center;width:min-content;border-radius:4px;padding:4px 8px}:host ::ng-deep .mapa-table__column--status-round{border-radius:50px}:host ::ng-deep .mapa-table__column--ellipsis{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host ::ng-deep .mapa-table__column--no-wrap{white-space:nowrap}:host ::ng-deep .mapa-table__column--wrap{white-space:pre-wrap}:host ::ng-deep .mapa-table__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-table--column-actions,:host ::ng-deep .mapa-table--column-menu{width:100%}:host ::ng-deep .mapa-table__content--value{color:#fff;font-weight:500}:host ::ng-deep .mapa-table .mat-sort-header-arrow{color:transparent}:host ::ng-deep .mapa-table .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-table .mat-sort-header-content mat-icon{margin-left:24px}:host ::ng-deep .mapa-table .mat-mdc-cell{padding:0 10px!important}:host ::ng-deep .mapa-table .mat-mdc-header-cell{padding:0 24px!important}:host ::ng-deep .mapa-table .mat-mdc-table{width:100%;overflow-x:auto}:host ::ng-deep .mapa-table__skeleton-content{padding:24px}:host ::ng-deep .mapa-table__skeleton-header,:host ::ng-deep .mapa-table__skeleton-row{display:flex;gap:12px}:host ::ng-deep .mapa-table__skeleton-header{margin-bottom:16px}:host ::ng-deep .mapa-table__skeleton-row{margin-bottom:12px}:host ::ng-deep .mapa-table__skeleton-cell{height:16px;border-radius:8px;background:linear-gradient(90deg,#f0f2f4 25%,#e6e9ec,#f0f2f4 75%);background-size:200% 100%;animation:mapa-table-skeleton-shimmer 1.2s infinite linear}:host ::ng-deep .mapa-table__skeleton-cell--header{height:20px}@media(max-width:1000px){:host ::ng-deep .mapa-table .mat-mdc-paginator-range-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}:host ::ng-deep .mapa-table .mat-mdc-paginator-range-label{padding:16px 0;text-align:center;width:100%}:host ::ng-deep .mapa-table .mat-mdc-paginator-container{justify-content:center}}:host ::ng-deep .mapa-table .classification{width:40px;height:40px;border-radius:24px;display:flex;justify-content:center;align-items:center}:host ::ng-deep .mapa-table .roundCell{border-radius:10px}:host ::ng-deep .mapa-table .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}:host ::ng-deep .mapa-table .name{color:#181818;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:20px}:host ::ng-deep .mapa-table .cpf{color:#77838f;text-align:left;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-table .label_report{color:#181818;text-align:center;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}@keyframes mapa-table-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n", ".classification-1{background-color:#073e92;color:#fff}.classification-2{background-color:#0e6ece;color:#fff}.classification-3{background-color:#2d9ced;color:#000}.classification-4{background-color:#68ceee;color:#000}.classification-5{background-color:#96f2ee;color:#000}.classification-6{background-color:#f598a7;color:#000}.classification-7{background-color:#f56580;color:#000}.classification-8{background-color:#f4284e;color:#fff}.classification-9{background-color:#c11c2f;color:#fff}.small-dot{width:12px;height:12px;border-radius:12px;padding:0;margin:0}.dot{width:16px;height:16px;border-radius:16px;padding:0;margin:0}.indicator{display:flex;padding:2px 4px 2px 16px;justify-content:space-between;align-items:center;border-radius:8px;font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}.display-S{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:20px;font-style:normal;font-weight:400}.display-L{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:32px;font-style:normal;font-weight:400}.display-XG{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:48px;font-style:normal;font-weight:400}*{transition:opacity .4s ease-out,max-height .4s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MapaMenuComponent, selector: "mapa-menu", inputs: ["items", "data"], outputs: ["emitMenu"] }, { kind: "component", type: MapaSvgIconComponent, selector: "mapa-svg-icon", inputs: ["name", "color"] }, { kind: "component", type: MapaEmptyStateComponent, selector: "mapa-empty", inputs: ["title", "subtitle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.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$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: BubblePaginationDirective, selector: "[appBubblePagination], [appStylePaginatorMv]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows", "bubblePageIndex", "bubblePageSize"], outputs: ["pageIndexChangeEmitter"] }, { kind: "pipe", type: i1$2.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,