npm - mapa-library-ui - Versions diffs - 1.7.1 → 1.7.3 - Mend

mapa-library-ui 1.7.1 → 1.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/fesm2022/mapa-library-ui-src-lib-components-group-report.mjs CHANGED Viewed

@@ -134,11 +134,11 @@ class MapaGroupReportComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaGroupReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaGroupReportComponent, isStandalone: true, selector: "mapa-group-report", inputs: { groupReport: "groupReport", showGroupReportGeneral: "showGroupReportGeneral" }, outputs: { onSortChange: "onSortChange" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"mapa-group-report\">\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"handleSortChange($event)\"\n  >\n    @for (column of columns; track trackColumn($index, column)) {\n      <ng-container [matColumnDef]=\"column.key\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [disabled]=\"!column.sort\"\n        >\n          <div\n            [ngTemplateOutlet]=\"tableHeader\"\n            [ngTemplateOutletContext]=\"{ column: column }\"\n          ></div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n          <div\n            class=\"mapa-group-report__column\"\n            [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n          >\n            <div class=\"mapa-group-report__content\">\n              @if (column.key === \"name\") {\n                <div class=\"mapa-group-report__content--value\">\n                  <div class=\"mapa-group-report__content--title\">\n                    {{ row.name }}<br />\n                  </div>\n                  <div class=\"mapa-group-report__content--subtitle\">\n                    {{ row.cpf }}\n                  </div>\n                </div>\n              } @else if (column.key === \"general\") {\n                <div class=\"general\">\n                  {{ getGeneralValue(row) | currency:'':'' }}%\n                </div>\n              } @else {\n                <div class=\"mapa-group-report__hover\">\n                  <span class=\"mapa-group-report__hover--main\">\n                    <div\n                      class=\"mapa__tag--bg\"\n                      [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n                      [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n                    >\n                      {{\n                        getDimensionClassification(row, column.key)?.classificationName ||\n                          \"-\"\n                      }}\n                    </div>\n                  </span>\n                  <span class=\"mapa-group-report__hover--hidden\">\n                    {{ getDimensionLabel(row, column.key) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n  <div class=\"mapa-group-report__header\">\n    {{ column.label }}\n    @if (column.sort) {\n      <div>\n        <mat-icon>filter_list</mat-icon>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: MapaGroupReportComponent, isStandalone: true, selector: "mapa-group-report", inputs: { groupReport: "groupReport", showGroupReportGeneral: "showGroupReportGeneral" }, outputs: { onSortChange: "onSortChange" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"mapa-group-report\">\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"handleSortChange($event)\"\n  >\n    @for (column of columns; track trackColumn($index, column)) {\n      <ng-container [matColumnDef]=\"column.key\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [disabled]=\"!column.sort\"\n        >\n          <div\n            [ngTemplateOutlet]=\"tableHeader\"\n            [ngTemplateOutletContext]=\"{ column: column }\"\n          ></div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n          <div\n            class=\"mapa-group-report__column\"\n            [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n          >\n            <div class=\"mapa-group-report__content\">\n              @if (column.key === \"name\") {\n                <div class=\"mapa-group-report__content--value\">\n                  <div class=\"mapa-group-report__content--title\">\n                    {{ row.name }}<br />\n                  </div>\n                  <div class=\"mapa-group-report__content--subtitle\">\n                    {{ row.cpf }}\n                  </div>\n                </div>\n              } @else if (column.key === \"general\") {\n                <div class=\"general\">\n                  {{ getGeneralValue(row) | currency:'':'' }}%\n                </div>\n              } @else {\n                <div class=\"mapa-group-report__hover\">\n                  <span class=\"mapa-group-report__hover--main\">\n                    <div\n                      class=\"mapa__tag--bg\"\n                      [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n                      [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n                    >\n                      {{\n                        getDimensionClassification(row, column.key)?.classificationName ||\n                          \"-\"\n                      }}\n                    </div>\n                  </span>\n                  <span class=\"mapa-group-report__hover--hidden\">\n                    {{ getDimensionLabel(row, column.key) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n  <div class=\"mapa-group-report__header\">\n    {{ column.label }}\n    @if (column.sort) {\n      <div>\n        <mat-icon>filter_list</mat-icon>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__header{font-size:14px!important;justify-content:flex-start!important;gap:10px}:host ::ng-deep .mapa-group-report__header mat-icon{font-size:16px!important;height:16px!important;width:16px!important;margin-left:8px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaGroupReportComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mapa-group-report", changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, MatTableModule, MatSortModule], standalone: true, template: "<section class=\"mapa-group-report\">\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"handleSortChange($event)\"\n  >\n    @for (column of columns; track trackColumn($index, column)) {\n      <ng-container [matColumnDef]=\"column.key\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [disabled]=\"!column.sort\"\n        >\n          <div\n            [ngTemplateOutlet]=\"tableHeader\"\n            [ngTemplateOutletContext]=\"{ column: column }\"\n          ></div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n          <div\n            class=\"mapa-group-report__column\"\n            [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n          >\n            <div class=\"mapa-group-report__content\">\n              @if (column.key === \"name\") {\n                <div class=\"mapa-group-report__content--value\">\n                  <div class=\"mapa-group-report__content--title\">\n                    {{ row.name }}<br />\n                  </div>\n                  <div class=\"mapa-group-report__content--subtitle\">\n                    {{ row.cpf }}\n                  </div>\n                </div>\n              } @else if (column.key === \"general\") {\n                <div class=\"general\">\n                  {{ getGeneralValue(row) | currency:'':'' }}%\n                </div>\n              } @else {\n                <div class=\"mapa-group-report__hover\">\n                  <span class=\"mapa-group-report__hover--main\">\n                    <div\n                      class=\"mapa__tag--bg\"\n                      [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n                      [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n                    >\n                      {{\n                        getDimensionClassification(row, column.key)?.classificationName ||\n                          \"-\"\n                      }}\n                    </div>\n                  </span>\n                  <span class=\"mapa-group-report__hover--hidden\">\n                    {{ getDimensionLabel(row, column.key) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n  <div class=\"mapa-group-report__header\">\n    {{ column.label }}\n    @if (column.sort) {\n      <div>\n        <mat-icon>filter_list</mat-icon>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
+            args: [{ selector: "mapa-group-report", changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, MatTableModule, MatSortModule], standalone: true, template: "<section class=\"mapa-group-report\">\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    (matSortChange)=\"handleSortChange($event)\"\n  >\n    @for (column of columns; track trackColumn($index, column)) {\n      <ng-container [matColumnDef]=\"column.key\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [disabled]=\"!column.sort\"\n        >\n          <div\n            [ngTemplateOutlet]=\"tableHeader\"\n            [ngTemplateOutletContext]=\"{ column: column }\"\n          ></div>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [style.width]=\"column.width\">\n          <div\n            class=\"mapa-group-report__column\"\n            [class.mapa-group-report__column--center-cell]=\"column.align === 'center' || column.key !== 'name'\"\n          >\n            <div class=\"mapa-group-report__content\">\n              @if (column.key === \"name\") {\n                <div class=\"mapa-group-report__content--value\">\n                  <div class=\"mapa-group-report__content--title\">\n                    {{ row.name }}<br />\n                  </div>\n                  <div class=\"mapa-group-report__content--subtitle\">\n                    {{ row.cpf }}\n                  </div>\n                </div>\n              } @else if (column.key === \"general\") {\n                <div class=\"general\">\n                  {{ getGeneralValue(row) | currency:'':'' }}%\n                </div>\n              } @else {\n                <div class=\"mapa-group-report__hover\">\n                  <span class=\"mapa-group-report__hover--main\">\n                    <div\n                      class=\"mapa__tag--bg\"\n                      [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n                      [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n                    >\n                      {{\n                        getDimensionClassification(row, column.key)?.classificationName ||\n                          \"-\"\n                      }}\n                    </div>\n                  </span>\n                  <span class=\"mapa-group-report__hover--hidden\">\n                    {{ getDimensionLabel(row, column.key) }}\n                  </span>\n                </div>\n              }\n            </div>\n          </div>\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n  <div class=\"mapa-group-report__header\">\n    {{ column.label }}\n    @if (column.sort) {\n      <div>\n        <mat-icon>filter_list</mat-icon>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .mapa-group-report{width:100%;white-space:nowrap}:host ::ng-deep .mapa-group-report__header{font-size:14px!important;justify-content:flex-start!important;gap:10px}:host ::ng-deep .mapa-group-report__header mat-icon{font-size:16px!important;height:16px!important;width:16px!important;margin-left:8px}:host ::ng-deep .mapa-group-report__column{display:flex;align-items:center}:host ::ng-deep .mapa-group-report__column--center-cell{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report__content--value{margin-right:40px}:host ::ng-deep .mapa-group-report__content--title{color:#000;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:14px;font-style:normal;font-weight:500;line-height:20px}:host ::ng-deep .mapa-group-report__content--subtitle{color:#77838f;text-align:left;font-family:var(--mapa-font-heading, \"Asap\", \"Inter\", sans-serif);font-size:12px;font-style:normal;font-weight:400;line-height:16px}:host ::ng-deep .mapa-group-report__hover:hover--main{display:none}:host ::ng-deep .mapa-group-report__hover:hover--hidden{display:flex}:host ::ng-deep .mapa-group-report__hover--hidden{display:none}:host ::ng-deep .mapa-group-report__header{display:flex;align-items:center;justify-content:center;width:100%}:host ::ng-deep .mapa-group-report .mat-sort-header-arrow{display:none}:host ::ng-deep .mapa-group-report .mat-sort-header-content{width:100%!important}:host ::ng-deep .mapa-group-report .general{border-radius:24px;border:1px solid #dcdcde;display:flex;justify-content:center;align-items:center;width:48px;height:48px}\n"] }]
         }], propDecorators: { groupReport: [{
                 type: Input
             }], showGroupReportGeneral: [{

package/fesm2022/mapa-library-ui-src-lib-components-group-report.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mapa-library-ui-src-lib-components-group-report.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/group-report/src/group-report.component.ts","../../../projects/mapa-library-ui/src/lib/components/group-report/src/group-report.component.html","../../../projects/mapa-library-ui/src/lib/components/group-report/public-api.ts","../../../projects/mapa-library-ui/src/group-report.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-group-report.ts"],"sourcesContent":["import { CommonModule } from \"@angular/common\";\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n ViewChild,\n} from \"@angular/core\";\nimport { MatIconModule } from \"@angular/material/icon\";\nimport { MatSort, Sort } from \"@angular/material/sort\";\nimport { MatSortModule } from \"@angular/material/sort\";\nimport { MatTableDataSource } from \"@angular/material/table\";\nimport { MatTableModule } from \"@angular/material/table\";\nimport { Classification } from \"../../../core/interfaces/classification.interface\";\nimport { TableColumn } from \"../../../core/interfaces/table-column.interface\";\nimport {\n Dimension,\n GroupReportDimensionCell,\n GroupReportItem,\n GroupReportRow,\n GroupReportRowValue,\n} from \"./group-report-interface\";\n\n@Component({\n selector: \"mapa-group-report\",\n templateUrl: \"./group-report.component.html\",\n styleUrl: \"./group-report.component.scss\",\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [CommonModule, MatIconModule, MatTableModule, MatSortModule],\n standalone: true,\n})\nexport class MapaGroupReportComponent implements OnChanges, AfterViewInit {\n @Input() groupReport: GroupReportItem[] = [];\n @Input() showGroupReportGeneral = false;\n @Output() onSortChange: EventEmitter<Sort> = new EventEmitter<Sort>();\n\n @ViewChild(MatSort) sort!: MatSort;\n\n dataSource: MatTableDataSource<GroupReportRow> =\n new MatTableDataSource<GroupReportRow>([]);\n displayedColumns: string[] = [];\n columns: TableColumn[] = [];\n data: GroupReportRow[] = [];\n\n ngAfterViewInit(): void {\n this.dataSource.sort = this.sort;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes[\"groupReport\"] \|\| changes[\"showGroupReportGeneral\"]) {\n this.refreshTableState();\n }\n }\n\n trackColumn(index: number, column: TableColumn): string {\n return `${index}:${column.key}`;\n }\n\n handleSortChange(sort: Sort): void {\n this.onSortChange.emit(sort);\n }\n\n getDimensionCell(\n row: GroupReportRow,\n key: string\n ): GroupReportDimensionCell \| undefined {\n const cell = row[key];\n return this.isGroupReportDimensionCell(cell) ? cell : undefined;\n }\n\n getDimensionClassification(\n row: GroupReportRow,\n key: string\n ): Classification \| undefined {\n return this.getDimensionCell(row, key)?.value?.classification;\n }\n\n getDimensionLabel(row: GroupReportRow, key: string): number \| string {\n return this.getDimensionCell(row, key)?.value?.label ?? \"-\";\n }\n\n getGeneralValue(row: GroupReportRow): number \| null {\n return typeof row.general === \"number\" ? row.general : null;\n }\n\n private refreshTableState(): void {\n this.columns = this.generateColumns();\n this.data = this.generateGroupData();\n this.displayedColumns = this.columns.map((column) => column.key);\n this.dataSource.data = this.data;\n this.dataSource.sortingDataAccessor = (\n row: GroupReportRow,\n columnKey: string\n ): string \| number => this.getSortValue(row, columnKey);\n if (this.sort) {\n this.dataSource.sort = this.sort;\n }\n }\n\n private getSortValue(row: GroupReportRow, columnKey: string): string \| number {\n const cell = row[columnKey];\n\n if (this.isGroupReportDimensionCell(cell)) {\n return cell.value?.classification?.classificationId ?? 0;\n }\n\n return typeof cell === \"number\" \|\| typeof cell === \"string\" ? cell : \"\";\n }\n\n private isGroupReportDimensionCell(\n value: GroupReportRowValue\n ): value is GroupReportDimensionCell {\n return typeof value === \"object\" && value !== null && \"direction\" in value;\n }\n\n private generateColumns(): TableColumn[] {\n const columns: TableColumn[] = [{ key: \"name\", label: \"\", sort: false }];\n const existingKeys = new Set<string>([\"name\"]);\n\n if (this.showGroupReportGeneral) {\n columns.push({ key: \"general\", label: \"% Geral\", sort: false });\n existingKeys.add(\"general\");\n }\n\n this.groupReport.forEach((reportItem) => {\n reportItem.dimensions?.forEach((dimension) => {\n const key = this.getColumnKey(dimension.dimensionName);\n if (!existingKeys.has(key)) {\n columns.push({\n key,\n label: dimension.dimensionName,\n classification: dimension.classification,\n sort: true,\n });\n existingKeys.add(key);\n }\n });\n });\n\n return columns;\n }\n\n private generateGroupData(): GroupReportRow[] {\n return this.groupReport.map((item) => {\n const dataItem: GroupReportRow = {\n name: item.candidate.name,\n cpf: item.candidate.cpf,\n general: item.candidate.general,\n };\n\n item.dimensions?.forEach((dimension) => {\n dataItem[this.getColumnKey(dimension.dimensionName)] = {\n value: {\n label: this.getDimensionDisplayValue(dimension),\n classification: this.getDimensionClassificationFromDimension(dimension),\n },\n direction: dimension.direction,\n };\n });\n\n return dataItem;\n });\n }\n\n private getColumnKey(dimensionName: string): string {\n return dimensionName.toLowerCase();\n }\n\n private getDimensionDisplayValue(\n dimension: Dimension\n ): number \| string \| undefined {\n return (\n dimension.escoreT ??\n dimension.average ??\n dimension.percentil ??\n dimension.percentage ??\n dimension.count\n );\n }\n\n private getDimensionClassificationFromDimension(\n dimension: Dimension\n ): Classification \| undefined {\n if (dimension.classification) {\n return dimension.classification;\n }\n\n if (\n dimension.classificationId === undefined &&\n !dimension.classificationName &&\n !dimension.classificationColor\n ) {\n return undefined;\n }\n\n return {\n classificationId: dimension.classificationId,\n classificationName: dimension.classificationName,\n classificationColor: dimension.classificationColor,\n };\n }\n}\n\n\n\n","<section class=\"mapa-group-report\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"handleSortChange($event)\"\n >\n @for (column of columns; track trackColumn($index, column)) {\n <ng-container [matColumnDef]=\"column.key\">\n <th\n mat-header-cell\n matHeaderCellDef\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ column: column }\"\n ></div>\n </th>\n <td mat-cell matCellDef=\"let row\" [style.width]=\"column.width\">\n <div\n class=\"mapa-group-report__column\"\n [class.mapa-group-report__column--center-cell]=\"column.align === 'center' \|\| column.key !== 'name'\"\n >\n <div class=\"mapa-group-report__content\">\n @if (column.key === \"name\") {\n <div class=\"mapa-group-report__content--value\">\n <div class=\"mapa-group-report__content--title\">\n {{ row.name }}<br />\n </div>\n <div class=\"mapa-group-report__content--subtitle\">\n {{ row.cpf }}\n </div>\n </div>\n } @else if (column.key === \"general\") {\n <div class=\"general\">\n {{ getGeneralValue(row) \| currency:'':'' }}%\n </div>\n } @else {\n <div class=\"mapa-group-report__hover\">\n <span class=\"mapa-group-report__hover--main\">\n <div\n class=\"mapa__tag--bg\"\n [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n >\n {{\n getDimensionClassification(row, column.key)?.classificationName \|\|\n \"-\"\n }}\n </div>\n </span>\n <span class=\"mapa-group-report__hover--hidden\">\n {{ getDimensionLabel(row, column.key) }}\n </span>\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n <div class=\"mapa-group-report__header\">\n {{ column.label }}\n @if (column.sort) {\n <div>\n <mat-icon>filter_list</mat-icon>\n </div>\n }\n </div>\n</ng-template>\n","/\n Public API Surface of mapa-library-ui group-report\n /\n\nexport from './src/group-report.component';\nexport * from './src/group-report-interface';\n","/\n Public API Surface of mapa-library-ui group-report\n /\nexport from './lib/components/group-report/public-api';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './group-report';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"mapa-library-ui-src-lib-components-group-report.mjs","sources":["../../../projects/mapa-library-ui/src/lib/components/group-report/src/group-report.component.ts","../../../projects/mapa-library-ui/src/lib/components/group-report/src/group-report.component.html","../../../projects/mapa-library-ui/src/lib/components/group-report/public-api.ts","../../../projects/mapa-library-ui/src/group-report.ts","../../../projects/mapa-library-ui/src/mapa-library-ui-src-lib-components-group-report.ts"],"sourcesContent":["import { CommonModule } from \"@angular/common\";\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n Input,\n OnChanges,\n Output,\n SimpleChanges,\n ViewChild,\n} from \"@angular/core\";\nimport { MatIconModule } from \"@angular/material/icon\";\nimport { MatSort, Sort } from \"@angular/material/sort\";\nimport { MatSortModule } from \"@angular/material/sort\";\nimport { MatTableDataSource } from \"@angular/material/table\";\nimport { MatTableModule } from \"@angular/material/table\";\nimport { Classification } from \"../../../core/interfaces/classification.interface\";\nimport { TableColumn } from \"../../../core/interfaces/table-column.interface\";\nimport {\n Dimension,\n GroupReportDimensionCell,\n GroupReportItem,\n GroupReportRow,\n GroupReportRowValue,\n} from \"./group-report-interface\";\n\n@Component({\n selector: \"mapa-group-report\",\n templateUrl: \"./group-report.component.html\",\n styleUrl: \"./group-report.component.scss\",\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [CommonModule, MatIconModule, MatTableModule, MatSortModule],\n standalone: true,\n})\nexport class MapaGroupReportComponent implements OnChanges, AfterViewInit {\n @Input() groupReport: GroupReportItem[] = [];\n @Input() showGroupReportGeneral = false;\n @Output() onSortChange: EventEmitter<Sort> = new EventEmitter<Sort>();\n\n @ViewChild(MatSort) sort!: MatSort;\n\n dataSource: MatTableDataSource<GroupReportRow> =\n new MatTableDataSource<GroupReportRow>([]);\n displayedColumns: string[] = [];\n columns: TableColumn[] = [];\n data: GroupReportRow[] = [];\n\n ngAfterViewInit(): void {\n this.dataSource.sort = this.sort;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes[\"groupReport\"] \|\| changes[\"showGroupReportGeneral\"]) {\n this.refreshTableState();\n }\n }\n\n trackColumn(index: number, column: TableColumn): string {\n return `${index}:${column.key}`;\n }\n\n handleSortChange(sort: Sort): void {\n this.onSortChange.emit(sort);\n }\n\n getDimensionCell(\n row: GroupReportRow,\n key: string\n ): GroupReportDimensionCell \| undefined {\n const cell = row[key];\n return this.isGroupReportDimensionCell(cell) ? cell : undefined;\n }\n\n getDimensionClassification(\n row: GroupReportRow,\n key: string\n ): Classification \| undefined {\n return this.getDimensionCell(row, key)?.value?.classification;\n }\n\n getDimensionLabel(row: GroupReportRow, key: string): number \| string {\n return this.getDimensionCell(row, key)?.value?.label ?? \"-\";\n }\n\n getGeneralValue(row: GroupReportRow): number \| null {\n return typeof row.general === \"number\" ? row.general : null;\n }\n\n private refreshTableState(): void {\n this.columns = this.generateColumns();\n this.data = this.generateGroupData();\n this.displayedColumns = this.columns.map((column) => column.key);\n this.dataSource.data = this.data;\n this.dataSource.sortingDataAccessor = (\n row: GroupReportRow,\n columnKey: string\n ): string \| number => this.getSortValue(row, columnKey);\n if (this.sort) {\n this.dataSource.sort = this.sort;\n }\n }\n\n private getSortValue(row: GroupReportRow, columnKey: string): string \| number {\n const cell = row[columnKey];\n\n if (this.isGroupReportDimensionCell(cell)) {\n return cell.value?.classification?.classificationId ?? 0;\n }\n\n return typeof cell === \"number\" \|\| typeof cell === \"string\" ? cell : \"\";\n }\n\n private isGroupReportDimensionCell(\n value: GroupReportRowValue\n ): value is GroupReportDimensionCell {\n return typeof value === \"object\" && value !== null && \"direction\" in value;\n }\n\n private generateColumns(): TableColumn[] {\n const columns: TableColumn[] = [{ key: \"name\", label: \"\", sort: false }];\n const existingKeys = new Set<string>([\"name\"]);\n\n if (this.showGroupReportGeneral) {\n columns.push({ key: \"general\", label: \"% Geral\", sort: false });\n existingKeys.add(\"general\");\n }\n\n this.groupReport.forEach((reportItem) => {\n reportItem.dimensions?.forEach((dimension) => {\n const key = this.getColumnKey(dimension.dimensionName);\n if (!existingKeys.has(key)) {\n columns.push({\n key,\n label: dimension.dimensionName,\n classification: dimension.classification,\n sort: true,\n });\n existingKeys.add(key);\n }\n });\n });\n\n return columns;\n }\n\n private generateGroupData(): GroupReportRow[] {\n return this.groupReport.map((item) => {\n const dataItem: GroupReportRow = {\n name: item.candidate.name,\n cpf: item.candidate.cpf,\n general: item.candidate.general,\n };\n\n item.dimensions?.forEach((dimension) => {\n dataItem[this.getColumnKey(dimension.dimensionName)] = {\n value: {\n label: this.getDimensionDisplayValue(dimension),\n classification: this.getDimensionClassificationFromDimension(dimension),\n },\n direction: dimension.direction,\n };\n });\n\n return dataItem;\n });\n }\n\n private getColumnKey(dimensionName: string): string {\n return dimensionName.toLowerCase();\n }\n\n private getDimensionDisplayValue(\n dimension: Dimension\n ): number \| string \| undefined {\n return (\n dimension.escoreT ??\n dimension.average ??\n dimension.percentil ??\n dimension.percentage ??\n dimension.count\n );\n }\n\n private getDimensionClassificationFromDimension(\n dimension: Dimension\n ): Classification \| undefined {\n if (dimension.classification) {\n return dimension.classification;\n }\n\n if (\n dimension.classificationId === undefined &&\n !dimension.classificationName &&\n !dimension.classificationColor\n ) {\n return undefined;\n }\n\n return {\n classificationId: dimension.classificationId,\n classificationName: dimension.classificationName,\n classificationColor: dimension.classificationColor,\n };\n }\n}\n\n\n\n","<section class=\"mapa-group-report\">\n <table\n mat-table\n [dataSource]=\"dataSource\"\n matSort\n (matSortChange)=\"handleSortChange($event)\"\n >\n @for (column of columns; track trackColumn($index, column)) {\n <ng-container [matColumnDef]=\"column.key\">\n <th\n mat-header-cell\n matHeaderCellDef\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n <div\n [ngTemplateOutlet]=\"tableHeader\"\n [ngTemplateOutletContext]=\"{ column: column }\"\n ></div>\n </th>\n <td mat-cell matCellDef=\"let row\" [style.width]=\"column.width\">\n <div\n class=\"mapa-group-report__column\"\n [class.mapa-group-report__column--center-cell]=\"column.align === 'center' \|\| column.key !== 'name'\"\n >\n <div class=\"mapa-group-report__content\">\n @if (column.key === \"name\") {\n <div class=\"mapa-group-report__content--value\">\n <div class=\"mapa-group-report__content--title\">\n {{ row.name }}<br />\n </div>\n <div class=\"mapa-group-report__content--subtitle\">\n {{ row.cpf }}\n </div>\n </div>\n } @else if (column.key === \"general\") {\n <div class=\"general\">\n {{ getGeneralValue(row) \| currency:'':'' }}%\n </div>\n } @else {\n <div class=\"mapa-group-report__hover\">\n <span class=\"mapa-group-report__hover--main\">\n <div\n class=\"mapa__tag--bg\"\n [class.mapa__tag--contrast]=\"getDimensionClassification(row, column.key)?.classificationId === 1\"\n [style.backgroundColor]=\"getDimensionClassification(row, column.key)?.classificationColor\"\n >\n {{\n getDimensionClassification(row, column.key)?.classificationName \|\|\n \"-\"\n }}\n </div>\n </span>\n <span class=\"mapa-group-report__hover--hidden\">\n {{ getDimensionLabel(row, column.key) }}\n </span>\n </div>\n }\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n</section>\n\n<ng-template #tableHeader let-column=\"column\">\n <div class=\"mapa-group-report__header\">\n {{ column.label }}\n @if (column.sort) {\n <div>\n <mat-icon>filter_list</mat-icon>\n </div>\n }\n </div>\n</ng-template>\n","/\n Public API Surface of mapa-library-ui group-report\n /\n\nexport from './src/group-report.component';\nexport * from './src/group-report-interface';\n","/\n Public API Surface of mapa-library-ui group-report\n /\nexport from './lib/components/group-report/public-api';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './group-report';\n"],"names":[],"mappings":"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"}

package/fesm2022/mapa-library-ui-src-lib-components-input.mjs CHANGED Viewed

@@ -1,17 +1,19 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, DestroyRef, Self, Directive, forwardRef } from '@angular/core';
+import { EventEmitter, Output, Input, Component, InjectionToken, inject, Injector, signal, Optional, Inject, Injectable, ElementRef, DestroyRef, booleanAttribute, Directive, Self, forwardRef } from '@angular/core';
 import * as i2$1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+import { NgxMaskDirective, NgxMaskService, provideNgxMask } from 'ngx-mask';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AutofillMonitor } from '@angular/cdk/text-field';
+import { filter } from 'rxjs/operators';
 import { fromEvent } from 'rxjs';
 class ButtonComponent {
@@ -263,6 +265,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 type: Input
             }] } });
+/**
+ * Máscaras numéricas cujo valor de modelo não é a simples projeção
+ * "texto renderizado menos caracteres especiais". `separator` ainda altera
+ * `NgxMaskService.specialCharacters` em runtime, o que quebra a simetria da
+ * comparação feita aqui. Nenhuma delas é produzida por autofill.
+ */
+const SKIPPED_MASK_PREFIXES = ['separator', 'percent'];
+/**
+ * Mantém o FormControl em sincronia com `input.value` quando o valor foi escrito
+ * por algo que não é o usuário: autofill do navegador, gerenciador de senhas ou
+ * extensão (geradores de CPF/CNPJ).
+ *
+ * A NgxMaskDirective é o ControlValueAccessor de todo input com máscara desta
+ * biblioteca e só empurra valor para o modelo a partir do seu host listener de
+ * `input`. O handler de `blur` chama `onTouch()` mas nunca `onChange()`, e não
+ * existe listener de `change`. Um agente externo que atribui `element.value` sem
+ * disparar um evento `input` nativo deixa o controle no valor anterior, mantendo
+ * o erro `required` na tela até o usuário redigitar o campo.
+ *
+ * Esta diretiva detecta a divergência e reenvia o evento `input` que faltou,
+ * fazendo a NgxMaskDirective analisar, re-renderizar e emitir exatamente como se
+ * o usuário tivesse colado o valor. É no-op enquanto DOM e modelo concordam.
+ */
+class MapaMaskAutofillSyncDirective {
+    constructor() {
+        /** Permite desligar a reconciliação em um campo específico. */
+        this.mapaMaskAutofillSync = true;
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.autofillMonitor = inject(AutofillMonitor);
+        this.maskDirective = inject(NgxMaskDirective, {
+            self: true,
+            optional: true,
+        });
+        this.maskService = inject(NgxMaskService, {
+            self: true,
+            optional: true,
+        });
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.reconciling = false;
+    }
+    ngOnInit() {
+        // monitor() é idempotente por elemento e devolve um Subject compartilhado
+        // com o MatInput, que já monitora este mesmo elemento. Nunca chamar
+        // stopMonitoring(): ele completa esse Subject e remove o listener de
+        // animação para todos os consumidores. O MatInput cuida do teardown.
+        this.autofillMonitor
+            .monitor(this.elementRef.nativeElement)
+            .pipe(filter((event) => event.isAutofilled), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.reconcile());
+    }
+    /** Idempotente: não faz nada enquanto DOM e modelo concordam. */
+    reconcile() {
+        if (!this.mapaMaskAutofillSync || this.reconciling) {
+            return;
+        }
+        const element = this.elementRef.nativeElement;
+        // ngControl.control só existe depois do ngOnChanges da FormControlDirective,
+        // por isso é lido aqui e não no construtor.
+        const control = this.ngControl?.control;
+        if (!control || control.disabled || element.readOnly) {
+            return;
+        }
+        if (element instanceof HTMLInputElement && element.type === 'number') {
+            return;
+        }
+        const mask = this.maskDirective?.mask() ?? '';
+        if (SKIPPED_MASK_PREFIXES.some((prefix) => mask.startsWith(prefix))) {
+            return;
+        }
+        if (this.isInSync(element, control, mask)) {
+            return;
+        }
+        const previousValue = control.value;
+        this.reconciling = true;
+        try {
+            // Reenvia o que o navegador deveria ter emitido. A NgxMaskDirective relê
+            // element.value, reaplica a máscara, re-renderiza o campo e empurra o
+            // valor pelo seu próprio pipeline de CVA — marcando o controle como dirty
+            // e reexecutando todos os validadores.
+            element.dispatchEvent(new Event('input', { bubbles: true }));
+            if (control.value === previousValue) {
+                // O evento não moveu o modelo. Acontece com controles criados como
+                // { updateOn: 'blur' | 'submit' }, em que o value accessor apenas
+                // enfileira a mudança em vez de comitá-la.
+                control.setValue(this.toModelValue(element.value, mask));
+                control.markAsDirty();
+            }
+        }
+        finally {
+            this.reconciling = false;
+        }
+    }
+    isInSync(element, control, mask) {
+        return (this.toComparable(element.value, mask) ===
+            this.toComparable(this.stringify(control.value), mask));
+    }
+    /**
+     * Sem máscara, o texto renderizado e o valor de modelo são a mesma string. Com
+     * máscara eles diferem apenas pelos caracteres especiais, então limpar os dois
+     * lados com as regras da própria NgxMaskService vale tanto para
+     * `dropSpecialCharacters: true` quanto para `false`.
+     */
+    toComparable(value, mask) {
+        return mask && this.maskService ? this.maskService.removeMask(value) : value;
+    }
+    toModelValue(domValue, mask) {
+        return mask && this.maskService && this.maskService.dropSpecialCharacters
+            ? this.maskService.removeMask(domValue)
+            : domValue;
+    }
+    stringify(value) {
+        return value === null || value === undefined ? '' : String(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaMaskAutofillSyncDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.21", type: MapaMaskAutofillSyncDirective, isStandalone: true, selector: "input[mask], textarea[mask]", inputs: { mapaMaskAutofillSync: ["mapaMaskAutofillSync", "mapaMaskAutofillSync", booleanAttribute] }, host: { listeners: { "change": "reconcile()", "focusout": "reconcile()" } }, exportAs: ["mapaMaskAutofillSync"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaMaskAutofillSyncDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[mask], textarea[mask]',
+                    standalone: true,
+                    exportAs: 'mapaMaskAutofillSync',
+                    host: {
+                        '(change)': 'reconcile()',
+                        '(focusout)': 'reconcile()',
+                    },
+                }]
+        }], propDecorators: { mapaMaskAutofillSync: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
 /*
 * Originally from: https://github.com/anotherkitten/mat-input-autosize
 * @author: Ellie Larson (anotherkitten)
@@ -389,7 +524,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: [":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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: MatInputAutosizeDirective, selector: "[matInputAutosize]", inputs: ["matInputAutosizeMaxWidth", "matInputAutosizeMinWidth", "matInputAutosizeFontStyle"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
+        ], 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: ButtonComponent, selector: "mapa-button", inputs: ["color", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: MatInputAutosizeDirective, selector: "[matInputAutosize]", inputs: ["matInputAutosizeMaxWidth", "matInputAutosizeMinWidth", "matInputAutosizeFontStyle"] }, { kind: "directive", type: MapaMaskAutofillSyncDirective, selector: "input[mask], textarea[mask]", inputs: ["mapaMaskAutofillSync"], exportAs: ["mapaMaskAutofillSync"] }, { kind: "component", type: MapaFormErrorsComponent, selector: "mapa-form-errors", inputs: ["control", "errors"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: MapaInputComponent, decorators: [{
             type: Component,
@@ -403,6 +538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                         MatInputModule,
                         ButtonComponent,
                         MatInputAutosizeDirective,
+                        MapaMaskAutofillSyncDirective,
                         MapaFormErrorsComponent,
                     ], providers: [
                         provideNgxMask(),
@@ -411,7 +547,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: [":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"] }]
+                    ], 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: [{