mapa-library-ui 1.7.0 → 1.7.2

package/fesm2022/mapa-library-ui-src-lib-components-form.mjs

@@ -316,7 +316,7 @@ class MatInputAutosizeDirective {
         Object.assign(textContainer.style, {
             display: 'inline-block',
             'max-width': this.matInputAutosizeMaxWidth || null,
-            'min-width': this.matInputAutosizeMinWidth,
+            'min-width': `max(var(--mapa-input-autosize-preferred-width, 0px), ${this.matInputAutosizeMinWidth})`,
             font: this.matInputAutosizeFontStyle || null,
             visibility: 'hidden',
             'white-space': 'pre',
@@ -400,7 +400,7 @@ class MapaInputComponent {
                 useExisting: forwardRef(() => MapaInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-input__label\">\n  {{ element.label }}\n</label>\n<div class=\"mapa-form--inline\">\n  <mat-form-field\n    class=\"mapa-input\"\n    [class.mapa-input--autosize]=\"element.autosize\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n  >\n    <mat-icon *ngIf=\"element.prefix\" class=\"mapa-input--prefix\" matPrefix>\n      {{ element.prefix }}\n    </mat-icon>\n    <input\n      *ngIf=\"element.autosize\"\n      matInput\n      matInputAutosize\n      [matInputAutosizeMinWidth]=\"element.autosizeMinWidth!\"\n      [matInputAutosizeMaxWidth]=\"element.autosizeMaxWidth!\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      thousandSeparator=\".\"\n      decimalMarker=\",\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <input\n      matInput\n      *ngIf=\"!element.autosize\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <button\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n    >\n      &times;\n    </button>\n    <mat-icon\n      *ngIf=\"element.suffix\"\n      class=\"mapa-input--suffix\"\n      matSuffix\n      (click)=\"suffix.emit()\"\n    >\n      {{ element.suffix }}\n    </mat-icon>\n    <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n    <mat-error>\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </mat-error>\n  </mat-form-field>\n\n  <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n    <mapa-button\n      color=\"basic\"\n      (clicked)=\"element.actionButton.action.emit(true)\"\n    >\n      {{ element.actionButton.label }}\n    </mapa-button>\n  </div>\n</div>\n", styles: [".mapa-input{width:310px;min-width:310px;box-sizing:border-box}.mapa-input--autosize{width:auto}.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-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-error:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint{display:block;margin:8px 0 0;padding-left:4px;color:var(--mapa-color-muted, #555555);font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}:host ::ng-deep .mapa-input .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:var(--mapa-color-surface, #ffffff);border-radius:var(--mapa-radius-sm, 12px);height:48px}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-input .mdc-notched-outline{background-color:transparent;border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-input .mdc-text-field--outlined .mat-mdc-form-field-infix{padding-bottom:12px;padding-top:16px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-input .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-input .mdc-notched-outline__leading,:host ::ng-deep .mapa-input .mdc-notched-outline__notch,:host ::ng-deep .mapa-input .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:last-child{margin-right:12px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--suffix{padding:0 0 0 8px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mat-icon:last-child{padding-right:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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"] }] }); }
+        ], ngImport: i0, template: "<label *ngIf=\"element.label\" class=\"mapa-input__label\">\n  {{ element.label }}\n</label>\n<div class=\"mapa-form--inline\">\n  <mat-form-field\n    class=\"mapa-input\"\n    [class.mapa-input--autosize]=\"element.autosize\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n  >\n    <mat-icon *ngIf=\"element.prefix\" class=\"mapa-input--prefix\" matPrefix>\n      {{ element.prefix }}\n    </mat-icon>\n    <input\n      *ngIf=\"element.autosize\"\n      matInput\n      matInputAutosize\n      [matInputAutosizeMinWidth]=\"element.autosizeMinWidth!\"\n      [matInputAutosizeMaxWidth]=\"element.autosizeMaxWidth!\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      thousandSeparator=\".\"\n      decimalMarker=\",\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <input\n      matInput\n      *ngIf=\"!element.autosize\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <button\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      type=\"button\"\n      tabindex=\"-1\"\n      matSuffix\n      aria-label=\"Limpar\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n    >\n      &times;\n    </button>\n    <mat-icon\n      *ngIf=\"element.suffix\"\n      class=\"mapa-input--suffix\"\n      matSuffix\n      (click)=\"suffix.emit()\"\n    >\n      {{ element.suffix }}\n    </mat-icon>\n    <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n    <mat-error>\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </mat-error>\n  </mat-form-field>\n\n  <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n    <mapa-button\n      color=\"basic\"\n      (clicked)=\"element.actionButton.action.emit(true)\"\n    >\n      {{ element.actionButton.label }}\n    </mapa-button>\n  </div>\n</div>\n", styles: [":host{display:inline-block;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input{width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input--autosize{width:auto;--mapa-input-autosize-preferred-width: 310px}.mapa-input__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-input--autosize .mat-mdc-form-field-infix{overflow:hidden}:host ::ng-deep .mapa-input .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-error:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint{display:block;margin:8px 0 0;padding-left:4px;color:var(--mapa-color-muted, #555555);font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}:host ::ng-deep .mapa-input .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:var(--mapa-color-surface, #ffffff);border-radius:var(--mapa-radius-sm, 12px);height:48px}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-input .mdc-notched-outline{background-color:transparent;border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-input .mdc-text-field--outlined .mat-mdc-form-field-infix{padding-bottom:12px;padding-top:16px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-input .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-input .mdc-notched-outline__leading,:host ::ng-deep .mapa-input .mdc-notched-outline__notch,:host ::ng-deep .mapa-input .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:last-child{margin-right:12px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--suffix{padding:0 0 0 8px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mat-icon:last-child{padding-right:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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,
@@ -422,7 +422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                             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    [class.mapa-input--autosize]=\"element.autosize\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n  >\n    <mat-icon *ngIf=\"element.prefix\" class=\"mapa-input--prefix\" matPrefix>\n      {{ element.prefix }}\n    </mat-icon>\n    <input\n      *ngIf=\"element.autosize\"\n      matInput\n      matInputAutosize\n      [matInputAutosizeMinWidth]=\"element.autosizeMinWidth!\"\n      [matInputAutosizeMaxWidth]=\"element.autosizeMaxWidth!\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      thousandSeparator=\".\"\n      decimalMarker=\",\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <input\n      matInput\n      *ngIf=\"!element.autosize\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <button\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n    >\n      &times;\n    </button>\n    <mat-icon\n      *ngIf=\"element.suffix\"\n      class=\"mapa-input--suffix\"\n      matSuffix\n      (click)=\"suffix.emit()\"\n    >\n      {{ element.suffix }}\n    </mat-icon>\n    <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n    <mat-error>\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </mat-error>\n  </mat-form-field>\n\n  <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n    <mapa-button\n      color=\"basic\"\n      (clicked)=\"element.actionButton.action.emit(true)\"\n    >\n      {{ element.actionButton.label }}\n    </mapa-button>\n  </div>\n</div>\n", styles: [".mapa-input{width:310px;min-width:310px;box-sizing:border-box}.mapa-input--autosize{width:auto}.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-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-error:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint{display:block;margin:8px 0 0;padding-left:4px;color:var(--mapa-color-muted, #555555);font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}:host ::ng-deep .mapa-input .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:var(--mapa-color-surface, #ffffff);border-radius:var(--mapa-radius-sm, 12px);height:48px}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-input .mdc-notched-outline{background-color:transparent;border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-input .mdc-text-field--outlined .mat-mdc-form-field-infix{padding-bottom:12px;padding-top:16px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-input .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-input .mdc-notched-outline__leading,:host ::ng-deep .mapa-input .mdc-notched-outline__notch,:host ::ng-deep .mapa-input .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:last-child{margin-right:12px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--suffix{padding:0 0 0 8px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mat-icon:last-child{padding-right:12px}\n"] }]
+                    ], 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    [class.mapa-input--autosize]=\"element.autosize\"\n    appearance=\"outline\"\n    subscriptSizing=\"dynamic\"\n  >\n    <mat-icon *ngIf=\"element.prefix\" class=\"mapa-input--prefix\" matPrefix>\n      {{ element.prefix }}\n    </mat-icon>\n    <input\n      *ngIf=\"element.autosize\"\n      matInput\n      matInputAutosize\n      [matInputAutosizeMinWidth]=\"element.autosizeMinWidth!\"\n      [matInputAutosizeMaxWidth]=\"element.autosizeMaxWidth!\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      thousandSeparator=\".\"\n      decimalMarker=\",\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <input\n      matInput\n      *ngIf=\"!element.autosize\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"element.placeholder || element.label\"\n      [maxlength]=\"element.maxLength\"\n      (keydown.enter)=\"suffixEmit()\"\n      [type]=\"type\"\n      [mask]=\"element.mask\"\n      [autocomplete]=\"element.autocomplete\"\n      [readOnly]=\"element.readonly\"\n    />\n    <button\n      *ngIf=\"hasValue() && !formControl.disabled && element.clearValue\"\n      type=\"button\"\n      tabindex=\"-1\"\n      matSuffix\n      aria-label=\"Limpar\"\n      (click)=\"clearValue()\"\n      class=\"mapa-input--close\"\n    >\n      &times;\n    </button>\n    <mat-icon\n      *ngIf=\"element.suffix\"\n      class=\"mapa-input--suffix\"\n      matSuffix\n      (click)=\"suffix.emit()\"\n    >\n      {{ element.suffix }}\n    </mat-icon>\n    <mat-hint *ngIf=\"element.hint\">{{ element.hint }}</mat-hint>\n    <mat-error>\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </mat-error>\n  </mat-form-field>\n\n  <div *ngIf=\"element.actionButton\" class=\"mapa-form--action\">\n    <mapa-button\n      color=\"basic\"\n      (clicked)=\"element.actionButton.action.emit(true)\"\n    >\n      {{ element.actionButton.label }}\n    </mapa-button>\n  </div>\n</div>\n", styles: [":host{display:inline-block;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input{width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-input--autosize{width:auto;--mapa-input-autosize-preferred-width: 310px}.mapa-input__label{font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);display:block;font-size:12px;font-style:normal;font-weight:600;line-height:16px;text-transform:uppercase;margin-bottom:16px}:host ::ng-deep .mapa-input--autosize .mat-mdc-form-field-infix{overflow:hidden}:host ::ng-deep .mapa-input .mat-mdc-form-field-error-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mapa-input .mat-mdc-form-field-subscript-wrapper{padding:0!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-error:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint{display:block;margin:8px 0 0;padding-left:4px;color:var(--mapa-color-muted, #555555);font-size:13px;line-height:18px}:host ::ng-deep .mapa-input .mat-mdc-form-field-hint:before{display:none}:host ::ng-deep .mapa-input .mat-mdc-input-element{font-family:var(--mapa-font-body, \"Asap\", \"Roboto\", \"Inter\", sans-serif);font-size:16px;font-style:normal;font-weight:400}:host ::ng-deep .mapa-input .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper{background-color:var(--mapa-color-surface, #ffffff);border-radius:var(--mapa-radius-sm, 12px);height:48px}:host ::ng-deep .mapa-input .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-left:unset!important;padding-right:unset!important}:host ::ng-deep .mapa-input .mdc-notched-outline{background-color:transparent;border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-input .mdc-text-field--outlined .mat-mdc-form-field-infix{padding-bottom:12px;padding-top:16px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-input .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-input .mdc-notched-outline__leading,:host ::ng-deep .mapa-input .mdc-notched-outline__notch,:host ::ng-deep .mapa-input .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix{display:flex}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--close:last-child{margin-right:12px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mapa-input--suffix{padding:0 0 0 8px}:host ::ng-deep .mapa-input .mat-mdc-form-field-icon-suffix .mat-icon:last-child{padding-right:12px}\n"] }]
         }], propDecorators: { formControl: [{
                 type: Input
             }], element: [{
@@ -885,7 +885,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        <button\n          *ngIf=\"hasValue()\"\n          type=\"button\"\n          matSuffix\n          aria-label=\"Limpar\"\n          class=\"mapa-datepicker__clear\"\n          (click)=\"cleanDatepicker()\"\n        >\n          &times;\n        </button>\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:inline-block;width:310px;min-width:310px;box-sizing:border-box}: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-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker--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}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$3.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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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        <button\n          *ngIf=\"hasValue()\"\n          type=\"button\"\n          matSuffix\n          aria-label=\"Limpar\"\n          class=\"mapa-datepicker__clear\"\n          (click)=\"cleanDatepicker()\"\n      tabindex=\"-1\"\n        >\n          &times;\n        </button>\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:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}: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-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker--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}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$3.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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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,
@@ -901,7 +901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     ], providers: [
                         provideNgxMask(),
                         provideNativeDateAdapter(MAPA_DATEPICKER_FORMATS),
-                    ], standalone: true, 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        <button\n          *ngIf=\"hasValue()\"\n          type=\"button\"\n          matSuffix\n          aria-label=\"Limpar\"\n          class=\"mapa-datepicker__clear\"\n          (click)=\"cleanDatepicker()\"\n        >\n          &times;\n        </button>\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:inline-block;width:310px;min-width:310px;box-sizing:border-box}: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-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker--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}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error:before{display:none}\n"] }]
+                    ], standalone: true, 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        <button\n          *ngIf=\"hasValue()\"\n          type=\"button\"\n          matSuffix\n          aria-label=\"Limpar\"\n          class=\"mapa-datepicker__clear\"\n          (click)=\"cleanDatepicker()\"\n      tabindex=\"-1\"\n        >\n          &times;\n        </button>\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:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}: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-text-field-wrapper{height:48px;border-radius:var(--mapa-radius-sm, 12px);background-color:var(--mapa-color-surface, #ffffff)}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-flex{height:48px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-icon-suffix{display:flex;align-items:center}:host ::ng-deep .mapa-datepicker__field .mdc-text-field--outlined{--mat-form-field-outlined-container-shape: var(--mapa-radius-sm, 12px);--mat-form-field-outlined-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-hover-outline-color: var( --mapa-color-border, rgba(26, 26, 26, .18) );--mat-form-field-outlined-focus-outline-color: var( --mapa-color-accent, #ff560b );--mat-form-field-outlined-outline-width: 1px;--mat-form-field-outlined-focus-outline-width: 1px}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-infix{padding-bottom:12px;--mat-form-field-container-height: 48px}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline{border-radius:var(--mapa-radius-sm, 12px)}:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__leading,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__notch,:host ::ng-deep .mapa-datepicker__field .mdc-notched-outline__trailing{border-width:1px!important}:host ::ng-deep .mapa-datepicker__field .mat-mdc-form-field-subscript-wrapper{min-height:22px}:host ::ng-deep .mapa-datepicker__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker--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}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error{margin:8px 0 0;padding-left:4px;color:#b54242;font-size:13px;line-height:18px}:host ::ng-deep .mapa-datepicker .mat-mdc-form-field-error:before{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
                 type: Input
             }], element: [{
@@ -1095,7 +1095,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(getMapaDatepickerRangeFormats()),
-        ], 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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\n    />\n    <button\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      class=\"mapa-datepicker-range__clear\"\n      (click)=\"cleanDatepicker()\"\n    >\n      &times;\n    </button>\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{display:inline-block;width:310px;min-width:310px;box-sizing:border-box}: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:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 0 0 16px;min-height:48px;height:48px;width:100%}: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,:host ::ng-deep .mapa-datepicker-range__end-date{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}: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,: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:100%;min-width:0}:host ::ng-deep .mapa-datepicker-range__end-date{flex-basis:72px}:host ::ng-deep .mapa-datepicker-range__divider{flex:none;margin:0 8px}:host ::ng-deep .mapa-datepicker-range__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker-range__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-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%;height:48px!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:left;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$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$3.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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\n    />\n    <button\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      class=\"mapa-datepicker-range__clear\"\n      (click)=\"cleanDatepicker()\"\n      tabindex=\"-1\"\n    >\n      &times;\n    </button>\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{display:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}: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:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 0 0 16px;min-height:48px;height:48px;width:100%}: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,:host ::ng-deep .mapa-datepicker-range__end-date{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}: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,: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:100%;min-width:0}:host ::ng-deep .mapa-datepicker-range__end-date{flex-basis:72px}:host ::ng-deep .mapa-datepicker-range__divider{flex:none;margin:0 8px}:host ::ng-deep .mapa-datepicker-range__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker-range__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-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%;height:48px!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:left;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$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$3.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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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,
@@ -1110,7 +1110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     ], providers: [
                         provideNgxMask(),
                         provideNativeDateAdapter(getMapaDatepickerRangeFormats()),
-                    ], standalone: true, 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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\n    />\n    <button\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      class=\"mapa-datepicker-range__clear\"\n      (click)=\"cleanDatepicker()\"\n    >\n      &times;\n    </button>\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{display:inline-block;width:310px;min-width:310px;box-sizing:border-box}: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:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 0 0 16px;min-height:48px;height:48px;width:100%}: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,:host ::ng-deep .mapa-datepicker-range__end-date{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}: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,: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:100%;min-width:0}:host ::ng-deep .mapa-datepicker-range__end-date{flex-basis:72px}:host ::ng-deep .mapa-datepicker-range__divider{flex:none;margin:0 8px}:host ::ng-deep .mapa-datepicker-range__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker-range__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-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%;height:48px!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:left;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"] }]
+                    ], standalone: true, 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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\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]=\"dateInputMask\"\n      [attr.data-date-format]=\"activeDateFormat\"\n    />\n    <button\n      type=\"button\"\n      matSuffix\n      aria-label=\"Limpar\"\n      class=\"mapa-datepicker-range__clear\"\n      (click)=\"cleanDatepicker()\"\n      tabindex=\"-1\"\n    >\n      &times;\n    </button>\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{display:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}: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:var(--mapa-color-surface, #ffffff);border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);overflow:hidden;box-sizing:border-box;padding:0 0 0 16px;min-height:48px;height:48px;width:100%}: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,:host ::ng-deep .mapa-datepicker-range__end-date{display:flex;flex:1 1 0;align-items:center;align-self:stretch;min-width:0}: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,: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:100%;min-width:0}:host ::ng-deep .mapa-datepicker-range__end-date{flex-basis:72px}:host ::ng-deep .mapa-datepicker-range__divider{flex:none;margin:0 8px}:host ::ng-deep .mapa-datepicker-range__clear{display:flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mapa-color-muted, #555555);font-family:inherit;font-size:16px;line-height:1;cursor:pointer}:host ::ng-deep .mapa-datepicker-range__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-icon-suffix{display:flex;flex:none;align-items:center;gap:4px;margin-left:0;padding:unset!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-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%;height:48px!important}:host ::ng-deep .mapa-datepicker-range .mat-mdc-text-field-wrapper{padding:0!important;align-items:center!important;display:flex;background:var(--mapa-color-surface, #ffffff);min-height:100%}:host ::ng-deep .mapa-datepicker-range .mdc-notched-outline{display:none}:host ::ng-deep .mapa-datepicker-range .mat-mdc-form-field-infix{padding:0!important;margin-left:0!important;min-height:unset!important;border-top:unset!important;display:flex;align-items:center;height:100%}:host ::ng-deep .mapa-datepicker-range .mat-mdc-input-element{align-self:center;height:100%;line-height:24px;margin:0!important;padding:0 8px 0 0!important;text-align:left;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"] }]
         }], ctorParameters: () => [{ type: MapaI18nService }, { type: i0.ChangeDetectorRef }], propDecorators: { formGroup: [{
                 type: Input
             }], element: [{
@@ -1422,7 +1422,7 @@ class MapaDropdownComponent {
                 useExisting: forwardRef(() => MapaDropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"mapa-dropdown\"\n  [class.mapa-dropdown--open]=\"isOpen()\"\n  [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n  [class.mapa-dropdown--disabled]=\"isDisabled()\"\n  [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n  [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n  [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n      {{ element.label }}\n    </label>\n  }\n\n  <div class=\"mapa-dropdown__field-row\">\n    <button\n      #triggerButton\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      class=\"mapa-dropdown__trigger\"\n      [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n      [id]=\"element.key || null\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleDropdown()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-haspopup=\"listbox\"\n    >\n      <span\n        class=\"mapa-dropdown__trigger-text\"\n        [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n        [innerHTML]=\"selectedLabel() | safeHtml\"\n      ></span>\n      @if (hasValue() && !isDisabled() && element.clearValue) {\n        <span\n          class=\"mapa-dropdown__clear\"\n          role=\"button\"\n          aria-label=\"Limpar\"\n          (click)=\"clearValue($event)\"\n        >\n          &times;\n        </span>\n      }\n    </button>\n\n    @if (element.actionButton) {\n      <mapa-button\n        class=\"mapa-dropdown__action\"\n        color=\"basic\"\n        (clicked)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    }\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n  >\n    <div class=\"mapa-dropdown__panel\">\n      @if (hasSearch()) {\n        <input\n          #searchInput\n          class=\"mapa-dropdown__search-input\"\n          type=\"text\"\n          [formControl]=\"searchControl!\"\n          [placeholder]=\"searchPlaceholder()\"\n        />\n      }\n\n      <div class=\"mapa-dropdown__options\" role=\"listbox\">\n        @if (isMultiple() && visibleOptions().length) {\n          <button\n            class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n            type=\"button\"\n            (click)=\"toggleSelectAll()\"\n          >\n            <input\n              class=\"mapa-dropdown__checkbox\"\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n            />\n            {{ selectAllLabel }}\n          </button>\n        }\n\n        @if (hasGroups()) {\n          @for (group of filteredGroups(); track group.label) {\n            <div class=\"mapa-dropdown__group\" role=\"group\">\n              <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n              @for (option of group.options; track option.key) {\n                <button\n                  class=\"mapa-dropdown__option\"\n                  [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n                  [style.padding-left.px]=\"optionPadding(option)\"\n                  type=\"button\"\n                  (click)=\"selectOption(option)\"\n                >\n                  @if (isMultiple()) {\n                    <input\n                      class=\"mapa-dropdown__checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isOptionSelected(option)\"\n                      (click)=\"$event.stopPropagation(); selectOption(option)\"\n                    />\n                  }\n                  <span [innerHTML]=\"option.value | safeHtml\"></span>\n                </button>\n              }\n            </div>\n          }\n        } @else {\n          @for (option of filteredOptions(); track option.key) {\n            <button\n              class=\"mapa-dropdown__option\"\n              [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n              [style.padding-left.px]=\"optionPadding(option)\"\n              type=\"button\"\n              (click)=\"selectOption(option)\"\n            >\n              @if (isMultiple()) {\n                <input\n                  class=\"mapa-dropdown__checkbox\"\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  (click)=\"$event.stopPropagation(); selectOption(option)\"\n                />\n              }\n              <span [innerHTML]=\"option.value | safeHtml\"></span>\n            </button>\n          }\n        }\n\n        @if (!visibleOptions().length) {\n          <p class=\"mapa-dropdown__empty-state\">\n            {{ emptyStateLabel() }}\n          </p>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  @if (shouldShowError()) {\n    <p class=\"mapa-dropdown__error\">\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </p>\n  } @else if (element.hint) {\n    <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;max-width:min-content;min-width:310px;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__label{display:inline-block;margin-bottom:8px;color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-heading, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mapa-dropdown__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__option{width:100%;min-height:48px;padding:12px 16px;border:0;background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}.mapa-dropdown__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__trigger:after{content:\"\";position:absolute;top:50%;right:18px;width:9px;height:9px;border-right:2px solid var(--mapa-color-ink, #1a1a1a);border-bottom:2px solid var(--mapa-color-ink, #1a1a1a);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;pointer-events:none}.mapa-dropdown__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__clear{position:absolute;top:50%;right:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--mapa-color-muted, #555555);font-size:16px;line-height:1;cursor:pointer}.mapa-dropdown__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"], dependencies: [{ 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"mapa-dropdown\"\n  [class.mapa-dropdown--open]=\"isOpen()\"\n  [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n  [class.mapa-dropdown--disabled]=\"isDisabled()\"\n  [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n  [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n  [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n      {{ element.label }}\n    </label>\n  }\n\n  <div class=\"mapa-dropdown__field-row\">\n    <button\n      #triggerButton\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      class=\"mapa-dropdown__trigger\"\n      [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n      [id]=\"element.key || null\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleDropdown()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-haspopup=\"listbox\"\n      tabindex=\"-1\"\n    >\n      <span\n        class=\"mapa-dropdown__trigger-text\"\n        [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n        [innerHTML]=\"selectedLabel() | safeHtml\"\n      ></span>\n      @if (hasValue() && !isDisabled() && element.clearValue) {\n        <span\n          class=\"mapa-dropdown__clear\"\n          role=\"button\"\n          aria-label=\"Limpar\"\n          (click)=\"clearValue($event)\"\n        >\n          &times;\n        </span>\n      }\n    </button>\n\n    @if (element.actionButton) {\n      <mapa-button\n        class=\"mapa-dropdown__action\"\n        color=\"basic\"\n        (clicked)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    }\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n  >\n    <div class=\"mapa-dropdown__panel\">\n      @if (hasSearch()) {\n        <input\n          #searchInput\n          class=\"mapa-dropdown__search-input\"\n          type=\"text\"\n          [formControl]=\"searchControl!\"\n          [placeholder]=\"searchPlaceholder()\"\n        />\n      }\n\n      <div class=\"mapa-dropdown__options\" role=\"listbox\">\n        @if (isMultiple() && visibleOptions().length) {\n          <button\n            class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n            type=\"button\"\n            (click)=\"toggleSelectAll()\"\n          >\n            <input\n              class=\"mapa-dropdown__checkbox\"\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n            />\n            {{ selectAllLabel }}\n          </button>\n        }\n\n        @if (hasGroups()) {\n          @for (group of filteredGroups(); track group.label) {\n            <div class=\"mapa-dropdown__group\" role=\"group\">\n              <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n              @for (option of group.options; track option.key) {\n                <button\n                  class=\"mapa-dropdown__option\"\n                  [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n                  [style.padding-left.px]=\"optionPadding(option)\"\n                  type=\"button\"\n                  (click)=\"selectOption(option)\"\n                >\n                  @if (isMultiple()) {\n                    <input\n                      class=\"mapa-dropdown__checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isOptionSelected(option)\"\n                      (click)=\"$event.stopPropagation(); selectOption(option)\"\n                    />\n                  }\n                  <span [innerHTML]=\"option.value | safeHtml\"></span>\n                </button>\n              }\n            </div>\n          }\n        } @else {\n          @for (option of filteredOptions(); track option.key) {\n            <button\n              class=\"mapa-dropdown__option\"\n              [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n              [style.padding-left.px]=\"optionPadding(option)\"\n              type=\"button\"\n              (click)=\"selectOption(option)\"\n            >\n              @if (isMultiple()) {\n                <input\n                  class=\"mapa-dropdown__checkbox\"\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  (click)=\"$event.stopPropagation(); selectOption(option)\"\n                />\n              }\n              <span [innerHTML]=\"option.value | safeHtml\"></span>\n            </button>\n          }\n        }\n\n        @if (!visibleOptions().length) {\n          <p class=\"mapa-dropdown__empty-state\">\n            {{ emptyStateLabel() }}\n          </p>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  @if (shouldShowError()) {\n    <p class=\"mapa-dropdown__error\">\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </p>\n  } @else if (element.hint) {\n    <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__label{display:inline-block;margin-bottom:8px;color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-heading, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mapa-dropdown__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__option{width:100%;min-height:48px;padding:12px 16px;border:0;background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}.mapa-dropdown__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__trigger:after{content:\"\";position:absolute;top:50%;right:18px;width:9px;height:9px;border-right:2px solid var(--mapa-color-ink, #1a1a1a);border-bottom:2px solid var(--mapa-color-ink, #1a1a1a);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;pointer-events:none}.mapa-dropdown__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__clear{position:absolute;top:50%;right:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--mapa-color-muted, #555555);font-size:16px;line-height:1;cursor:pointer}.mapa-dropdown__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"], dependencies: [{ 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }, { 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: [{
             type: Component,
@@ -1439,7 +1439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                             useExisting: forwardRef(() => MapaDropdownComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"mapa-dropdown\"\n  [class.mapa-dropdown--open]=\"isOpen()\"\n  [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n  [class.mapa-dropdown--disabled]=\"isDisabled()\"\n  [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n  [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n  [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n      {{ element.label }}\n    </label>\n  }\n\n  <div class=\"mapa-dropdown__field-row\">\n    <button\n      #triggerButton\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      class=\"mapa-dropdown__trigger\"\n      [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n      [id]=\"element.key || null\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleDropdown()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-haspopup=\"listbox\"\n    >\n      <span\n        class=\"mapa-dropdown__trigger-text\"\n        [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n        [innerHTML]=\"selectedLabel() | safeHtml\"\n      ></span>\n      @if (hasValue() && !isDisabled() && element.clearValue) {\n        <span\n          class=\"mapa-dropdown__clear\"\n          role=\"button\"\n          aria-label=\"Limpar\"\n          (click)=\"clearValue($event)\"\n        >\n          &times;\n        </span>\n      }\n    </button>\n\n    @if (element.actionButton) {\n      <mapa-button\n        class=\"mapa-dropdown__action\"\n        color=\"basic\"\n        (clicked)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    }\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n  >\n    <div class=\"mapa-dropdown__panel\">\n      @if (hasSearch()) {\n        <input\n          #searchInput\n          class=\"mapa-dropdown__search-input\"\n          type=\"text\"\n          [formControl]=\"searchControl!\"\n          [placeholder]=\"searchPlaceholder()\"\n        />\n      }\n\n      <div class=\"mapa-dropdown__options\" role=\"listbox\">\n        @if (isMultiple() && visibleOptions().length) {\n          <button\n            class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n            type=\"button\"\n            (click)=\"toggleSelectAll()\"\n          >\n            <input\n              class=\"mapa-dropdown__checkbox\"\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n            />\n            {{ selectAllLabel }}\n          </button>\n        }\n\n        @if (hasGroups()) {\n          @for (group of filteredGroups(); track group.label) {\n            <div class=\"mapa-dropdown__group\" role=\"group\">\n              <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n              @for (option of group.options; track option.key) {\n                <button\n                  class=\"mapa-dropdown__option\"\n                  [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n                  [style.padding-left.px]=\"optionPadding(option)\"\n                  type=\"button\"\n                  (click)=\"selectOption(option)\"\n                >\n                  @if (isMultiple()) {\n                    <input\n                      class=\"mapa-dropdown__checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isOptionSelected(option)\"\n                      (click)=\"$event.stopPropagation(); selectOption(option)\"\n                    />\n                  }\n                  <span [innerHTML]=\"option.value | safeHtml\"></span>\n                </button>\n              }\n            </div>\n          }\n        } @else {\n          @for (option of filteredOptions(); track option.key) {\n            <button\n              class=\"mapa-dropdown__option\"\n              [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n              [style.padding-left.px]=\"optionPadding(option)\"\n              type=\"button\"\n              (click)=\"selectOption(option)\"\n            >\n              @if (isMultiple()) {\n                <input\n                  class=\"mapa-dropdown__checkbox\"\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  (click)=\"$event.stopPropagation(); selectOption(option)\"\n                />\n              }\n              <span [innerHTML]=\"option.value | safeHtml\"></span>\n            </button>\n          }\n        }\n\n        @if (!visibleOptions().length) {\n          <p class=\"mapa-dropdown__empty-state\">\n            {{ emptyStateLabel() }}\n          </p>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  @if (shouldShowError()) {\n    <p class=\"mapa-dropdown__error\">\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </p>\n  } @else if (element.hint) {\n    <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;max-width:min-content;min-width:310px;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__label{display:inline-block;margin-bottom:8px;color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-heading, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mapa-dropdown__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__option{width:100%;min-height:48px;padding:12px 16px;border:0;background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}.mapa-dropdown__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__trigger:after{content:\"\";position:absolute;top:50%;right:18px;width:9px;height:9px;border-right:2px solid var(--mapa-color-ink, #1a1a1a);border-bottom:2px solid var(--mapa-color-ink, #1a1a1a);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;pointer-events:none}.mapa-dropdown__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__clear{position:absolute;top:50%;right:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--mapa-color-muted, #555555);font-size:16px;line-height:1;cursor:pointer}.mapa-dropdown__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"mapa-dropdown\"\n  [class.mapa-dropdown--open]=\"isOpen()\"\n  [class.mapa-dropdown--invalid]=\"shouldShowError()\"\n  [class.mapa-dropdown--disabled]=\"isDisabled()\"\n  [class.mapa-dropdown--highlight]=\"border === 'highlight'\"\n  [class.mapa-dropdown--soft-border]=\"border === 'soft'\"\n  [class.mapa-dropdown--tag]=\"border === 'tag'\"\n>\n  @if (element.label) {\n    <label class=\"mapa-dropdown__label\" [attr.for]=\"element.key || null\">\n      {{ element.label }}\n    </label>\n  }\n\n  <div class=\"mapa-dropdown__field-row\">\n    <button\n      #triggerButton\n      cdkOverlayOrigin\n      #origin=\"cdkOverlayOrigin\"\n      class=\"mapa-dropdown__trigger\"\n      [class.mapa-dropdown__trigger--clearable]=\"hasValue() && element.clearValue\"\n      [id]=\"element.key || null\"\n      type=\"button\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleDropdown()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-haspopup=\"listbox\"\n      tabindex=\"-1\"\n    >\n      <span\n        class=\"mapa-dropdown__trigger-text\"\n        [class.mapa-dropdown__trigger-text--placeholder]=\"!hasValue()\"\n        [innerHTML]=\"selectedLabel() | safeHtml\"\n      ></span>\n      @if (hasValue() && !isDisabled() && element.clearValue) {\n        <span\n          class=\"mapa-dropdown__clear\"\n          role=\"button\"\n          aria-label=\"Limpar\"\n          (click)=\"clearValue($event)\"\n        >\n          &times;\n        </span>\n      }\n    </button>\n\n    @if (element.actionButton) {\n      <mapa-button\n        class=\"mapa-dropdown__action\"\n        color=\"basic\"\n        (clicked)=\"element.actionButton.action.emit(true)\"\n      >\n        {{ element.actionButton.label }}\n      </mapa-button>\n    }\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n    cdkConnectedOverlayPanelClass=\"mapa-dropdown__overlay-pane\"\n    (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n  >\n    <div class=\"mapa-dropdown__panel\">\n      @if (hasSearch()) {\n        <input\n          #searchInput\n          class=\"mapa-dropdown__search-input\"\n          type=\"text\"\n          [formControl]=\"searchControl!\"\n          [placeholder]=\"searchPlaceholder()\"\n        />\n      }\n\n      <div class=\"mapa-dropdown__options\" role=\"listbox\">\n        @if (isMultiple() && visibleOptions().length) {\n          <button\n            class=\"mapa-dropdown__option mapa-dropdown__option--select-all\"\n            type=\"button\"\n            (click)=\"toggleSelectAll()\"\n          >\n            <input\n              class=\"mapa-dropdown__checkbox\"\n              type=\"checkbox\"\n              [checked]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (click)=\"$event.stopPropagation(); toggleSelectAll()\"\n            />\n            {{ selectAllLabel }}\n          </button>\n        }\n\n        @if (hasGroups()) {\n          @for (group of filteredGroups(); track group.label) {\n            <div class=\"mapa-dropdown__group\" role=\"group\">\n              <p class=\"mapa-dropdown__group-label\">{{ group.label }}</p>\n              @for (option of group.options; track option.key) {\n                <button\n                  class=\"mapa-dropdown__option\"\n                  [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n                  [style.padding-left.px]=\"optionPadding(option)\"\n                  type=\"button\"\n                  (click)=\"selectOption(option)\"\n                >\n                  @if (isMultiple()) {\n                    <input\n                      class=\"mapa-dropdown__checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isOptionSelected(option)\"\n                      (click)=\"$event.stopPropagation(); selectOption(option)\"\n                    />\n                  }\n                  <span [innerHTML]=\"option.value | safeHtml\"></span>\n                </button>\n              }\n            </div>\n          }\n        } @else {\n          @for (option of filteredOptions(); track option.key) {\n            <button\n              class=\"mapa-dropdown__option\"\n              [class.mapa-dropdown__option--selected]=\"isOptionSelected(option)\"\n              [style.padding-left.px]=\"optionPadding(option)\"\n              type=\"button\"\n              (click)=\"selectOption(option)\"\n            >\n              @if (isMultiple()) {\n                <input\n                  class=\"mapa-dropdown__checkbox\"\n                  type=\"checkbox\"\n                  [checked]=\"isOptionSelected(option)\"\n                  (click)=\"$event.stopPropagation(); selectOption(option)\"\n                />\n              }\n              <span [innerHTML]=\"option.value | safeHtml\"></span>\n            </button>\n          }\n        }\n\n        @if (!visibleOptions().length) {\n          <p class=\"mapa-dropdown__empty-state\">\n            {{ emptyStateLabel() }}\n          </p>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  @if (shouldShowError()) {\n    <p class=\"mapa-dropdown__error\">\n      <mapa-form-errors\n        [control]=\"formControl\"\n        [errors]=\"element.errors\"\n      ></mapa-form-errors>\n    </p>\n  } @else if (element.hint) {\n    <p class=\"mapa-dropdown__hint\">{{ element.hint }}</p>\n  }\n</div>\n", styles: [":host{position:relative;display:inline-block;width:310px;max-width:100%;min-width:0;box-sizing:border-box}.mapa-dropdown{width:100%}.mapa-dropdown__label{display:inline-block;margin-bottom:8px;color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-heading, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mapa-dropdown__field-row{display:flex;align-items:center;gap:24px;min-width:0}.mapa-dropdown__trigger,.mapa-dropdown__search-input,.mapa-dropdown__option{width:100%;min-height:48px;padding:12px 16px;border:0;background:var(--mapa-color-surface, #ffffff);color:var(--mapa-color-ink, #1a1a1a);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:16px;line-height:24px}.mapa-dropdown__trigger:focus,.mapa-dropdown__search-input:focus,.mapa-dropdown__option:focus{outline:none}.mapa-dropdown__trigger::placeholder,.mapa-dropdown__search-input::placeholder,.mapa-dropdown__option::placeholder{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;min-width:0;padding-right:46px;border:1px solid var(--mapa-color-border, rgba(26, 26, 26, .18));border-radius:var(--mapa-radius-sm, 12px);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.mapa-dropdown__trigger--clearable{padding-right:70px}.mapa-dropdown__trigger:after{content:\"\";position:absolute;top:50%;right:18px;width:9px;height:9px;border-right:2px solid var(--mapa-color-ink, #1a1a1a);border-bottom:2px solid var(--mapa-color-ink, #1a1a1a);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;pointer-events:none}.mapa-dropdown__trigger:disabled{background:var(--mapa-color-disabled-surface, #f6f7f7);color:var(--mapa-color-muted, #555555);cursor:not-allowed}.mapa-dropdown__trigger:disabled:after{opacity:.5}.mapa-dropdown--open .mapa-dropdown__trigger,.mapa-dropdown__trigger:focus{border-color:var(--mapa-color-accent, #ff560b);box-shadow:0 0 0 3px #ff560b1f}.mapa-dropdown--open .mapa-dropdown__trigger:after{transform:translateY(-20%) rotate(-135deg)}.mapa-dropdown--highlight .mapa-dropdown__trigger{border:2px solid #eedb2a;border-radius:16px}.mapa-dropdown--tag .mapa-dropdown__trigger{border-radius:16px}.mapa-dropdown__trigger-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__trigger-text--placeholder{color:var(--mapa-color-muted, #CFC4C7)}.mapa-dropdown__clear{position:absolute;top:50%;right:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--mapa-color-muted, #555555);font-size:16px;line-height:1;cursor:pointer}.mapa-dropdown__clear:hover{background:#1a1a1a14;color:var(--mapa-color-ink, #1a1a1a)}.mapa-dropdown__action{flex:none}.mapa-dropdown__checkbox{flex:none;width:16px;height:16px;margin-right:12px;accent-color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__panel{width:100%;overflow:hidden;border:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));border-radius:var(--mapa-radius-md, 16px);background:var(--mapa-color-surface, #ffffff);box-shadow:var(--mapa-shadow-panel, 0 18px 40px rgba(26, 26, 26, .08))}.mapa-dropdown__search-input{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08))}.mapa-dropdown__options{max-height:240px;overflow-y:auto;background:var(--mapa-color-surface, #ffffff)}.mapa-dropdown__group-label{margin:0;padding:10px 16px 6px;color:var(--mapa-color-muted, #555555);font-family:var(--mapa-font-body, \"Asap\", sans-serif);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mapa-dropdown__option{display:flex;align-items:center;min-height:44px;text-align:left;cursor:pointer;transition:background-color .2s ease,color .2s ease}.mapa-dropdown__option:hover{background:#ff560b14}.mapa-dropdown__option--selected{background:#ff560b1f;color:var(--mapa-color-accent, #ff560b)}.mapa-dropdown__option--select-all{border-bottom:1px solid var(--mapa-color-border-soft, rgba(26, 26, 26, .08));font-weight:600}.mapa-dropdown__empty-state{margin:0;padding:14px 16px;color:var(--mapa-color-muted, #555555);font-size:14px;line-height:20px}.mapa-dropdown--invalid .mapa-dropdown__trigger{border-color:#b54242;box-shadow:0 0 0 3px #b542421f}.mapa-dropdown__hint,.mapa-dropdown__error{display:block;margin:8px 0 0;padding-left:4px;font-size:13px;line-height:18px}.mapa-dropdown__hint{color:var(--mapa-color-muted, #555555)}.mapa-dropdown__error{color:#b54242}\n"] }]
         }], propDecorators: { element: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1565,7 +1565,7 @@ 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-textarea .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: ["element", "formControl", "formControlSearch", "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%;min-width:0}:host ::ng-deep .mapa-form__element--type{width:100%;min-width:0}:host ::ng-deep .mapa-form mapa-textarea .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: ["element", "formControl", "formControlSearch", "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,
@@ -1580,7 +1580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         RadioButtonComponent,
                         SlideToggleComponent,
                         MapaTextareaComponent,
-                    ], standalone: true, 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-textarea .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"] }]
+                    ], standalone: true, 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%;min-width:0}:host ::ng-deep .mapa-form__element--type{width:100%;min-width:0}:host ::ng-deep .mapa-form mapa-textarea .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"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], elements: [{