mapa-library-ui 0.0.22 → 0.0.24

package/fesm2015/mapa-library-ui-src-lib-components-table.mjs

@@ -1,26 +1,433 @@
-import { SelectionModel } from '@angular/cdk/collections';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, Input, ViewChild, Output, NgModule } from '@angular/core';
-import * as i4 from '@angular/material/paginator';
+import { EventEmitter, Directive, Output, Input, Host, Self, Optional, Component, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
+import { map, startWith } from 'rxjs';
+import * as i1 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
+import { SelectionModel } from '@angular/cdk/collections';
 import { MatSort } from '@angular/material/sort';
-import * as i5 from '@angular/material/table';
+import * as i6 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import * as i1 from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/checkbox';
+import * as i3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3 from '@angular/material/icon';
+import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6 from 'mapa-library-ui';
-import { BubblePaginationDirective } from 'mapa-library-ui';
+
+class BubblePaginationDirective {
+    constructor(matPag, elementRef, ren) {
+        this.matPag = matPag;
+        this.elementRef = elementRef;
+        this.ren = ren;
+        this.pageIndexChangeEmitter = new EventEmitter();
+        this.showFirstButton = true;
+        this.showLastButton = true;
+        this.renderButtonsNumber = 2;
+        this.appCustomLength = 0;
+        this.hideDefaultArrows = false;
+        this.buttonsRef = [];
+    }
+    ngAfterViewInit() {
+        this.styleDefaultPagination();
+        this.createBubbleDivRef();
+        this.renderButtons();
+    }
+    ngOnChanges(changes) {
+        var _a;
+        if (!((_a = changes === null || changes === void 0 ? void 0 : changes["appCustomLength"]) === null || _a === void 0 ? void 0 : _a.firstChange)) {
+            this.removeButtons();
+            this.switchPage(0);
+            this.renderButtons();
+        }
+    }
+    renderButtons() {
+        this.buildButtons();
+        this.matPag.page
+            .pipe(map((e) => { var _a; return [(_a = e.previousPageIndex) !== null && _a !== void 0 ? _a : 0, e.pageIndex]; }), startWith([0, 0]))
+            .subscribe(([prev, curr]) => {
+            this.changeActiveButtonStyles(prev, curr);
+            this.updateButtonsOnPageEvent();
+        });
+    }
+    changeActiveButtonStyles(previousIndex, newIndex) {
+        const previouslyActive = this.buttonsRef[previousIndex];
+        const currentActive = this.buttonsRef[newIndex];
+        try {
+            this.ren.removeClass(previouslyActive, "g-bubble__active");
+            this.ren.addClass(currentActive, "g-bubble__active");
+        }
+        catch (_a) { }
+        this.buttonsRef.forEach((button) => this.ren.setStyle(button, "display", "none"));
+        const renderElements = this.renderButtonsNumber;
+        const endDots = newIndex < this.buttonsRef.length - renderElements - 1;
+        const startDots = newIndex - renderElements > 0;
+        const firstButton = this.buttonsRef[0];
+        const lastButton = this.buttonsRef[this.buttonsRef.length - 1];
+        try {
+            if (this.showLastButton) {
+                this.ren.setStyle(this.dotsEndRef, "display", endDots ? "block" : "none");
+                this.ren.setStyle(lastButton, "display", endDots ? "flex" : "none");
+            }
+        }
+        catch (_b) { }
+        try {
+            if (this.showFirstButton) {
+                this.ren.setStyle(this.dotsStartRef, "display", startDots ? "block" : "none");
+                this.ren.setStyle(firstButton, "display", startDots ? "flex" : "none");
+            }
+        }
+        catch (_c) { }
+        const startingIndex = startDots ? newIndex - renderElements : 0;
+        const endingIndex = endDots
+            ? newIndex + renderElements
+            : this.buttonsRef.length - 1;
+        for (let i = startingIndex; i <= endingIndex; i++) {
+            const button = this.buttonsRef[i];
+            this.ren.setStyle(button, "display", "flex");
+        }
+    }
+    styleDefaultPagination() {
+        const nativeElement = this.elementRef.nativeElement;
+        const itemsPerPage = nativeElement.querySelector(".mat-mdc-paginator-page-size");
+        const howManyDisplayedEl = nativeElement.querySelector(".mat-mdc-paginator-range-label");
+        const previousButton = nativeElement.querySelector("button.mat-mdc-paginator-navigation-previous");
+        const nextButtonDefault = nativeElement.querySelector("button.mat-mdc-paginator-navigation-next");
+        if (this.hideDefaultArrows) {
+            this.ren.setStyle(previousButton, "display", "none");
+            this.ren.setStyle(nextButtonDefault, "display", "none");
+        }
+    }
+    createBubbleDivRef() {
+        const actionContainer = this.elementRef.nativeElement.querySelector("div.mat-mdc-paginator-range-actions");
+        const nextButtonDefault = this.elementRef.nativeElement.querySelector("button.mat-mdc-paginator-navigation-next");
+        this.bubbleContainerRef = this.ren.createElement("div");
+        this.ren.addClass(this.bubbleContainerRef, "g-bubble-container");
+        this.ren.insertBefore(actionContainer, this.bubbleContainerRef, nextButtonDefault);
+    }
+    buildButtons() {
+        const neededButtons = Math.ceil(this.appCustomLength / this.matPag.pageSize);
+        if (neededButtons === 1) {
+            this.ren.setStyle(this.elementRef.nativeElement, "display", "none");
+            return;
+        }
+        this.buttonsRef = [this.createButton(0)];
+        this.dotsStartRef = this.createDotsElement();
+        for (let index = 1; index < neededButtons - 1; index++) {
+            this.buttonsRef = [...this.buttonsRef, this.createButton(index)];
+        }
+        this.dotsEndRef = this.createDotsElement();
+        this.buttonsRef = [
+            ...this.buttonsRef,
+            this.createButton(neededButtons - 1),
+        ];
+    }
+    removeButtons() {
+        this.bubbleContainerRef.innerHTML = '';
+        this.buttonsRef.forEach((button) => {
+            this.ren.removeChild(this.bubbleContainerRef, button);
+        });
+        this.buttonsRef = [];
+        this.buttonsRef.length = 0;
+    }
+    createButton(i) {
+        const bubbleButton = this.ren.createElement("div");
+        const text = this.ren.createText(String(i + 1));
+        this.ren.addClass(bubbleButton, "g-bubble");
+        this.ren.setStyle(bubbleButton, "margin-right", "8px");
+        this.ren.appendChild(bubbleButton, text);
+        this.ren.listen(bubbleButton, "click", () => {
+            this.switchPage(i);
+        });
+        this.ren.appendChild(this.bubbleContainerRef, bubbleButton);
+        this.ren.setStyle(bubbleButton, "display", "none");
+        return bubbleButton;
+    }
+    createDotsElement() {
+        const dotsEl = this.ren.createElement("span");
+        const dotsText = this.ren.createText(".....");
+        this.ren.setStyle(dotsEl, "font-size", "18px");
+        this.ren.setStyle(dotsEl, "margin-right", "8px");
+        this.ren.setStyle(dotsEl, "padding-top", "6px");
+        this.ren.setStyle(dotsEl, "color", "#919191");
+        this.ren.appendChild(dotsEl, dotsText);
+        this.ren.appendChild(this.bubbleContainerRef, dotsEl);
+        this.ren.setStyle(dotsEl, "display", "none");
+        return dotsEl;
+    }
+    switchPage(i) {
+        const previousPageIndex = this.matPag.pageIndex;
+        this.matPag.pageIndex = i;
+        try {
+            this.matPag["_emitPageEvent"](previousPageIndex);
+        }
+        catch (_a) { }
+        this.pageIndexChangeEmitter.emit(i);
+    }
+    updateButtonsOnPageEvent() {
+        const neededButtons = Math.ceil(this.appCustomLength / this.matPag.pageSize);
+        if (neededButtons === this.buttonsRef.length) {
+            return;
+        }
+        this.removeButtons();
+        this.buildButtons();
+    }
+}
+BubblePaginationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BubblePaginationDirective, deps: [{ token: i1.MatPaginator }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+BubblePaginationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BubblePaginationDirective, isStandalone: true, selector: "[appBubblePagination]", inputs: { showFirstButton: "showFirstButton", showLastButton: "showLastButton", renderButtonsNumber: "renderButtonsNumber", appCustomLength: "appCustomLength", hideDefaultArrows: "hideDefaultArrows" }, outputs: { pageIndexChangeEmitter: "pageIndexChangeEmitter" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BubblePaginationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[appBubblePagination]",
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatPaginator }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { pageIndexChangeEmitter: [{
+                type: Output
+            }], showFirstButton: [{
+                type: Input
+            }], showLastButton: [{
+                type: Input
+            }], renderButtonsNumber: [{
+                type: Input
+            }], appCustomLength: [{
+                type: Input
+            }], hideDefaultArrows: [{
+                type: Input
+            }] } });
+
+class PaginatorLegacyDirective {
+    constructor(matPag, ViewContainer, renderer) {
+        this.matPag = matPag;
+        this.ViewContainer = ViewContainer;
+        this.renderer = renderer;
+        this.buttons = [];
+        this.buildPageNumbers = () => {
+            let dots;
+            let page;
+            let pageDifference;
+            let startIndex;
+            let totalPages;
+            totalPages = this.matPag.getNumberOfPages();
+            // Container div with paginator elements
+            const actionContainer = this.ViewContainer.element.nativeElement.querySelector('div.mat-paginator-range-actions');
+            // Button that triggers the next page action
+            const nextPageNode = this.ViewContainer.element.nativeElement.querySelector('button.mat-paginator-navigation-next');
+            // Label showing the page range
+            const pageRange = this.ViewContainer.element.nativeElement.querySelector('div.mat-paginator-range-label');
+            let prevButtonCount = this.buttons.length;
+            // Remove buttons before creating new ones
+            if (prevButtonCount > 0) {
+                this.buttons.forEach((button) => {
+                    this.renderer.removeChild(actionContainer, button);
+                });
+                // Empty state array
+                prevButtonCount = 0;
+            }
+            this.renderer.addClass(pageRange, 'custom-paginator-counter');
+            this.renderer.addClass(actionContainer, 'custom-paginator-container');
+            // Initialize next page and last page buttons
+            if (prevButtonCount === 0) {
+                const nodeArray = actionContainer.childNodes;
+                setTimeout(() => {
+                    for (const node of nodeArray) {
+                        if (node.nodeName === 'BUTTON') {
+                            // Next Button styles
+                            if (node.innerHTML.length > 100 && node.disabled) {
+                                this.renderer.addClass(node, 'custom-paginator-arrow-disabled');
+                                this.renderer.removeClass(node, 'custom-paginator-arrow-enabled');
+                            }
+                            else if (node.innerHTML.length > 100 && !node.disabled) {
+                                this.renderer.addClass(node, 'custom-paginator-arrow-enabled');
+                                this.renderer.removeClass(node, 'custom-paginator-arrow-disabled');
+                            }
+                        }
+                    }
+                });
+            }
+            dots = [false, false];
+            if (totalPages > 0) {
+                this.renderer.insertBefore(actionContainer, this.createButton('0', this.matPag.pageIndex), nextPageNode);
+            }
+            page = this.showTotalPages + 2;
+            pageDifference = totalPages - page;
+            startIndex = Math.max(this.currentPage - this.showTotalPages - 2, 1);
+            for (let index = startIndex; index < totalPages - 1; index = index + 1) {
+                if ((index < page && this.currentPage <= this.showTotalPages) ||
+                    (index >= this.rangeStart && index <= this.rangeEnd) ||
+                    (this.currentPage > pageDifference && index >= pageDifference) ||
+                    totalPages < this.showTotalPages + page) {
+                    this.renderer.insertBefore(actionContainer, this.createButton(`${index}`, this.matPag.pageIndex), nextPageNode);
+                }
+                else {
+                    if (index > this.rangeEnd && !dots[0]) {
+                        this.renderer.insertBefore(actionContainer, this.createButton(this.pageGapTxt[0], this.matPag.pageIndex), nextPageNode);
+                        dots[0] = true;
+                        break;
+                    }
+                    if (index < this.rangeEnd && !dots[1]) {
+                        this.renderer.insertBefore(actionContainer, this.createButton(this.pageGapTxt[1], this.matPag.pageIndex), nextPageNode);
+                        dots[1] = true;
+                    }
+                }
+            }
+            if (totalPages > 1) {
+                this.renderer.insertBefore(actionContainer, this.createButton(`${totalPages - 1}`, this.matPag.pageIndex), nextPageNode);
+            }
+        };
+        this.currentPage = 1;
+        this.pageGapTxt = ['•••', '---'];
+        this.showTotalPages = 2;
+        this.checkPage = [0, 0, 0];
+        // Display custom range label text
+        this.matPag._intl.getRangeLabel = (page, pageSize, length) => {
+            const startIndex = page * pageSize;
+            const endIndex = startIndex < length
+                ? Math.min(startIndex + pageSize, length)
+                : startIndex + pageSize;
+            if (length === 0) {
+                return 'Mostrando 0 – 0 de 0 item';
+            }
+            if (length === 1) {
+                return ('Mostrando ' +
+                    (startIndex + 1) +
+                    ' – ' +
+                    endIndex +
+                    ' de ' +
+                    length +
+                    ' item');
+            }
+            else {
+                return ('Mostrando ' +
+                    (startIndex + 1) +
+                    ' – ' +
+                    endIndex +
+                    ' de ' +
+                    length +
+                    ' itens');
+            }
+        };
+        // Subscribe to rerender buttons when next page and last page button is used
+        this.matPag.page.subscribe((paginator) => {
+            this.currentPage = paginator.pageIndex;
+            this.matPag.pageIndex = paginator.pageIndex;
+            this.initPageRange();
+        });
+        this.matPag._intl.itemsPerPageLabel = 'Itens por página';
+        const paginatorIntl = this.matPag._intl;
+        paginatorIntl.nextPageLabel = '';
+        paginatorIntl.previousPageLabel = '';
+    }
+    ngDoCheck() {
+        var _a, _b, _c;
+        // Reset paginator if the pageSize, pageIndex, length changes
+        if (((_a = this.matPag) === null || _a === void 0 ? void 0 : _a.length) !== this.checkPage[0] ||
+            ((_b = this.matPag) === null || _b === void 0 ? void 0 : _b.pageSize) !== this.checkPage[1] ||
+            ((_c = this.matPag) === null || _c === void 0 ? void 0 : _c.pageIndex) !== this.checkPage[2]) {
+            const pageCount = this.matPag.getNumberOfPages();
+            if (this.currentPage > pageCount && pageCount !== 0) {
+                this.currentPage = 1;
+                this.matPag.pageIndex = 0;
+            }
+            this.currentPage = this.matPag.pageIndex;
+            this.initPageRange();
+            this.checkPage = [
+                this.matPag.length,
+                this.matPag.pageSize,
+                this.matPag.pageIndex,
+            ];
+        }
+    }
+    createButton(index, pageIndex) {
+        const linkBtn = this.renderer.createElement('button');
+        this.renderer.setAttribute(linkBtn, 'class', 'custom-paginator-page');
+        this.renderer.addClass(linkBtn, 'custom-paginator-page-enabled');
+        if (index === this.pageGapTxt[0] || index === this.pageGapTxt[1]) {
+            this.renderer.addClass(linkBtn, 'custom-paginator-arrow-enabled');
+        }
+        const pagingTxt = isNaN(+index) ? this.pageGapTxt[0] : +index + 1;
+        const text = this.renderer.createText(pagingTxt + '');
+        this.renderer.addClass(linkBtn, 'mat-custom-page');
+        switch (index) {
+            case `${pageIndex}`:
+                this.renderer.setAttribute(linkBtn, 'disabled', 'disabled');
+                this.renderer.removeClass(linkBtn, 'custom-paginator-page-enabled');
+                this.renderer.addClass(linkBtn, 'custom-paginator-page-disabled');
+                break;
+            case this.pageGapTxt[0]:
+                this.renderer.listen(linkBtn, 'click', () => {
+                    this.switchPage(this.currentPage < this.showTotalPages + 1
+                        ? this.showTotalPages + 2
+                        : this.currentPage + this.showTotalPages - 1);
+                });
+                break;
+            case this.pageGapTxt[1]:
+                this.renderer.listen(linkBtn, 'click', () => {
+                    this.switchPage(this.currentPage >
+                        this.matPag.getNumberOfPages() - this.showTotalPages - 2
+                        ? this.matPag.getNumberOfPages() - this.showTotalPages - 3
+                        : this.currentPage - this.showTotalPages + 1);
+                });
+                break;
+            default:
+                this.renderer.listen(linkBtn, 'click', () => {
+                    this.switchPage(+index);
+                });
+                break;
+        }
+        this.renderer.appendChild(linkBtn, text);
+        // Add button to private array for state
+        this.buttons.push(linkBtn);
+        return linkBtn;
+    }
+    /**
+     * @description calculates the button range based on class input parameters and based on current page index value.
+     */
+    initPageRange() {
+        this.rangeStart = this.currentPage - this.showTotalPages / 2;
+        this.rangeEnd = this.currentPage + this.showTotalPages / 2;
+        this.buildPageNumbers();
+    }
+    switchPage(index) {
+        this.matPag.pageIndex = index;
+        this.matPag.page.emit({
+            previousPageIndex: this.currentPage,
+            pageIndex: index,
+            pageSize: this.matPag.pageSize,
+            length: this.matPag.length,
+        });
+        this.currentPage = index;
+        this.initPageRange();
+    }
+    ngAfterViewInit() {
+        this.rangeStart = 0;
+        this.rangeEnd = this.showTotalPages - 1;
+        this.initPageRange();
+    }
+}
+PaginatorLegacyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaginatorLegacyDirective, deps: [{ token: i1.MatPaginator, host: true, optional: true, self: true }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+PaginatorLegacyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PaginatorLegacyDirective, isStandalone: true, selector: "[appStylePaginator]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaginatorLegacyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appStylePaginator]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1.MatPaginator, decorators: [{
+                        type: Host
+                    }, {
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }];
+    } });
 
 class MapaTableComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
         this.columns = [];
         this.data = [];
-        this.tableData = new EventEmitter();
         this.rowClick = new EventEmitter();
         this.selectedObjectsChange = new EventEmitter();
         this.displayedColumns = [];
@@ -40,10 +447,12 @@ class MapaTableComponent {
     toggleAllRows() {
         if (this.isAllSelected()) {
             this.selection.clear();
+            this.getSelectedValues();
         }
         else {
             const dataAsPeriodicElements = this.dataSource.data;
             dataAsPeriodicElements.forEach(row => this.selection.select(row));
+            this.getSelectedValues();
         }
     }
     checkboxLabel(row) {
@@ -77,31 +486,32 @@ class MapaTableComponent {
         }
         return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
     }
-    createObjectFromSelection() {
-        const selectedRows = this.selection.selected;
-        const selectedObjects = [];
-        selectedRows.forEach(row => {
-            if (this.selection.isSelected(row)) {
-                const obj = {};
-                this.columns.forEach(column => {
-                    obj[column.key] = row[column.key];
-                });
-                selectedObjects.push(obj);
-            }
-        });
-        this.selectedObjectsChange.emit(selectedObjects);
+    emitRowClick(row, action) {
+        const rowData = { row, action };
+        this.rowClick.emit(rowData);
     }
-    handleRowClick(id, test) {
-        console.log(test);
-        this.rowClick.emit(id);
+    toggleSelection(row) {
+        if (this.selection.isSelected(row)) {
+            this.selection.deselect(row);
+        }
+        else {
+            this.selection.select(row);
+        }
+        this.getSelectedValues();
+    }
+    getSelectedValues() {
+        const selectedRows = this.selection.selected.map(row => {
+            return { row };
+        });
+        console.log(selectedRows);
     }
 }
-MapaTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MapaTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaTableComponent, selector: "mapa-table", inputs: { columns: "columns", data: "data", checkbox: "checkbox", actions: "actions" }, outputs: { tableData: "tableData", rowClick: "rowClick", selectedObjectsChange: "selectedObjectsChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"mapa-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort>\n    <ng-container\n      *ngFor=\"let column of columns; let isFirst = first\"\n      [matColumnDef]=\"column.key\"\n    >\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        (click)=\"sortData(column.key)\"\n      >\n        <div class=\"mapa-table__header\">\n          <ng-container *ngIf=\"isFirst && checkbox\">\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation(); createObjectFromSelection()\"\n            >\n            </mat-checkbox>\n          </ng-container>\n          <div *ngIf=\"column.key !== 'actions'\">\n            <mat-icon>filter_list</mat-icon>\n          </div>\n          <div class=\"mapa-table__label\">\n            {{ column.label }}\n          </div>\n        </div>\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <ng-container *ngIf=\"isFirst && checkbox\">\n          <mat-checkbox\n            (click)=\"$event.stopPropagation(); createObjectFromSelection()\"\n            (change)=\"$event ? selection.toggle(row) : null\"\n            [checked]=\"selection.isSelected(row)\"\n          >\n          </mat-checkbox>\n        </ng-container>\n        <ng-container *ngIf=\"column.key === 'actions'\">\n          <div class=\"mapa-table__actions\">\n            <mat-icon (click)=\"handleRowClick(row, 'edit')\">edit</mat-icon>\n            <mat-icon (click)=\"handleRowClick(row, 'delete')\">delete</mat-icon>\n            <mat-icon (click)=\"handleRowClick(row, 'visibility')\"\n              >visibility</mat-icon\n            >\n          </div>\n        </ng-container>\n        <div class=\"mapa-table__column\" (click)=\"handleRowClick(row, '')\">\n          {{ row[column.key] }}\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n\n  <mat-paginator\n    class=\"mapa-table__paginator\"\n    appBubblePagination\n    [appCustomLength]=\"dataSource ? dataSource.data.length : 0\"\n    [length]=\"dataSource ? dataSource.data.length : 0\"\n    [pageSizeOptions]=\"[5, 10, 25, 100]\"\n    [pageSize]=\"5\"\n    aria-label=\"Select page\"\n  ></mat-paginator>\n</div>\n", styles: [".mapa-table__column{width:100%}.mapa-table__label{margin-top:4px}.mapa-table__header{padding-top:15px;padding-bottom:15px;align-items:center;display:flex}.mapa-table__actions{display:flex}.mapa-table__actions .mat-icon{color:#ea561d!important}.mapa-table__paginator .mat-mdc-paginator-container{display:flex;justify-content:space-between;margin-right:25vw}.mapa-table__paginator .g-bubble-container{display:flex;gap:4px}.mapa-table__paginator .g-bubble{background-color:#fff;border-radius:20%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#181818;font-size:14px;cursor:pointer;transition:.3s}.mapa-table__paginator .g-bubble:hover{background-color:#b6b6b6;color:#fff}.mapa-table__paginator .g-bubble__active{background-color:#ea561d;color:#fff}.mapa-table__paginator mat-paginator{background:transparent!important}.mapa-table__paginator .mat-mdc-paginator-range-actions{margin-right:12px!important}.mapa-table .mat-table{width:100%}.mapa-table .tr,.mapa-table th{padding-top:15px;padding-bottom:15px}.mapa-table .mat-mdc-cell{padding:15px}.mapa-table .mat-icon{cursor:pointer;position:relative;bottom:-6px;padding:0 5px}.mapa-table .mat-accent{--mdc-checkbox-selected-focus-icon-color: #ea561d;--mdc-checkbox-selected-hover-icon-color: #ea561d;--mdc-checkbox-selected-pressed-icon-color: transparent;--mdc-checkbox-selected-icon-color: #ea561d;--mdc-checkbox-selected-checkmark-color: #fff;--mdc-circular-progress-active-indicator-color: transparent}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.BubblePaginationDirective, selector: "[appBubblePagination]", inputs: ["showFirstButton", "showLastButton", "renderButtonsNumber", "appCustomLength", "hideDefaultArrows"], outputs: ["pageIndexChangeEmitter"] }], encapsulation: i0.ViewEncapsulation.None });
+MapaTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTableComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+MapaTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapaTableComponent, selector: "mapa-table", inputs: { columns: "columns", data: "data", checkbox: "checkbox", actions: "actions" }, outputs: { rowClick: "rowClick", selectedObjectsChange: "selectedObjectsChange" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<div class=\"mapa-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort>\n    <ng-container\n      *ngFor=\"let column of columns; let isFirst = first\"\n      [matColumnDef]=\"column.key\"\n    >\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        (click)=\"sortData(column.key)\"\n      >\n        <div class=\"mapa-table__header\">\n          <ng-container *ngIf=\"isFirst && checkbox\">\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation()\"\n            >\n            </mat-checkbox>\n          </ng-container>\n          <div *ngIf=\"column.key !== 'actions'\">\n            <mat-icon>filter_list</mat-icon>\n          </div>\n          <div class=\"mapa-table__label\">\n            {{ column.label }}\n          </div>\n        </div>\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <div class=\"header\">\n          <ng-container *ngIf=\"isFirst && checkbox\">\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"$event ? selection.toggle(row) : null; getSelectedValues()\"\n              [checked]=\"selection.isSelected(row)\"\n            >\n            </mat-checkbox>\n          </ng-container>\n          <ng-container *ngIf=\"column.key === 'actions'\">\n            <div class=\"actions\">\n              <mat-icon (click)=\"emitRowClick(row, 'edit')\">edit</mat-icon>\n              <mat-icon (click)=\"emitRowClick(row, 'delete')\">delete</mat-icon>\n              <mat-icon (click)=\"emitRowClick(row, 'visibility')\"\n                >visibility</mat-icon\n              >\n            </div>\n          </ng-container>\n          <div class=\"table__column\" (click)=\"emitRowClick(row, '')\">\n            {{ row[column.key] }}\n          </div>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n\n  <!--\n  <mat-paginator\n    class=\"mapa-table__paginator paginator\"\n    appBubblePagination\n    [appCustomLength]=\"dataSource ? dataSource.data.length : 0\"\n    [length]=\"dataSource ? dataSource.data.length : 0\"\n    [pageSizeOptions]=\"[5, 10, 25, 100]\"\n    [pageSize]=\"5\"\n    aria-label=\"Select page\"\n  ></mat-paginator>\n  -->\n  <mat-paginator\n    class=\"mapa-table__paginator-legacy\"\n    itemsPerPageLabel=\"Item por p\u00E1gina\"\n    appStylePaginator\n    [length]=\"dataSource ? dataSource.data.length : 0\"\n    [pageSize]=\"5\"\n    [pageSizeOptions]=\"[5, 10, 25, 100]\"\n  >\n  </mat-paginator>\n  <!-- (page)=\"pageEvent = $event; onPaginateChange($event)\" -->\n</div>\n", styles: [".mapa-table .mat-table{font-family:SF-Pro;width:100%}.mapa-table .mat-table .mat-checkbox{margin:0 8px 0 0;padding:0}.mapa-table .mat-table .mat-row .mat-cell{font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;color:#50575e}.mapa-table .mat-table .mat-header-cell{border:none;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:600;color:#50575e}.mapa-table .mat-icon{cursor:pointer;position:relative;bottom:-3px;padding:0 5px 0 0}.mapa-table .mat-mdc-row,.mapa-table .mdc-data-table__content,.mapa-table .mat-mdc-header-cell{--mat-table-row-item-label-text-font: \"SF-Pro\"}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#b6b6b6}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-frame{border-color:#ea561d}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-background{background-color:transparent}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-background{background-color:#ea561d}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}.mapa-table__paginator-legacy .custom-paginator-container{justify-content:flex-end}.mapa-table__paginator-legacy .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}.mapa-table__paginator-legacy .custom-paginator-page{border-radius:4px;outline:none;border:none;margin:.4em;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px}.mapa-table__paginator-legacy .custom-paginator-page-enabled{color:#333;background:transparent;cursor:pointer}.mapa-table__paginator-legacy .custom-paginator-page-enabled:hover{background-color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-page-disabled{background-color:#cf482b;color:#fff}.mapa-table__paginator-legacy .custom-paginator-arrow-disabled{color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-arrow-enabled{color:#999}.mapa-table__label{margin-top:4px}.mapa-table__header{padding-top:15px;padding-bottom:15px;align-items:center;display:flex}.mapa-table .actions{display:flex}.mapa-table .actions .mat-icon{color:#ea561d!important}.mapa-table .header{align-items:center;display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: PaginatorLegacyDirective, selector: "[appStylePaginator]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapa-table', encapsulation: ViewEncapsulation.None, template: "<div class=\"mapa-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort>\n    <ng-container\n      *ngFor=\"let column of columns; let isFirst = first\"\n      [matColumnDef]=\"column.key\"\n    >\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        (click)=\"sortData(column.key)\"\n      >\n        <div class=\"mapa-table__header\">\n          <ng-container *ngIf=\"isFirst && checkbox\">\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation(); createObjectFromSelection()\"\n            >\n            </mat-checkbox>\n          </ng-container>\n          <div *ngIf=\"column.key !== 'actions'\">\n            <mat-icon>filter_list</mat-icon>\n          </div>\n          <div class=\"mapa-table__label\">\n            {{ column.label }}\n          </div>\n        </div>\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <ng-container *ngIf=\"isFirst && checkbox\">\n          <mat-checkbox\n            (click)=\"$event.stopPropagation(); createObjectFromSelection()\"\n            (change)=\"$event ? selection.toggle(row) : null\"\n            [checked]=\"selection.isSelected(row)\"\n          >\n          </mat-checkbox>\n        </ng-container>\n        <ng-container *ngIf=\"column.key === 'actions'\">\n          <div class=\"mapa-table__actions\">\n            <mat-icon (click)=\"handleRowClick(row, 'edit')\">edit</mat-icon>\n            <mat-icon (click)=\"handleRowClick(row, 'delete')\">delete</mat-icon>\n            <mat-icon (click)=\"handleRowClick(row, 'visibility')\"\n              >visibility</mat-icon\n            >\n          </div>\n        </ng-container>\n        <div class=\"mapa-table__column\" (click)=\"handleRowClick(row, '')\">\n          {{ row[column.key] }}\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n\n  <mat-paginator\n    class=\"mapa-table__paginator\"\n    appBubblePagination\n    [appCustomLength]=\"dataSource ? dataSource.data.length : 0\"\n    [length]=\"dataSource ? dataSource.data.length : 0\"\n    [pageSizeOptions]=\"[5, 10, 25, 100]\"\n    [pageSize]=\"5\"\n    aria-label=\"Select page\"\n  ></mat-paginator>\n</div>\n", styles: [".mapa-table__column{width:100%}.mapa-table__label{margin-top:4px}.mapa-table__header{padding-top:15px;padding-bottom:15px;align-items:center;display:flex}.mapa-table__actions{display:flex}.mapa-table__actions .mat-icon{color:#ea561d!important}.mapa-table__paginator .mat-mdc-paginator-container{display:flex;justify-content:space-between;margin-right:25vw}.mapa-table__paginator .g-bubble-container{display:flex;gap:4px}.mapa-table__paginator .g-bubble{background-color:#fff;border-radius:20%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#181818;font-size:14px;cursor:pointer;transition:.3s}.mapa-table__paginator .g-bubble:hover{background-color:#b6b6b6;color:#fff}.mapa-table__paginator .g-bubble__active{background-color:#ea561d;color:#fff}.mapa-table__paginator mat-paginator{background:transparent!important}.mapa-table__paginator .mat-mdc-paginator-range-actions{margin-right:12px!important}.mapa-table .mat-table{width:100%}.mapa-table .tr,.mapa-table th{padding-top:15px;padding-bottom:15px}.mapa-table .mat-mdc-cell{padding:15px}.mapa-table .mat-icon{cursor:pointer;position:relative;bottom:-6px;padding:0 5px}.mapa-table .mat-accent{--mdc-checkbox-selected-focus-icon-color: #ea561d;--mdc-checkbox-selected-hover-icon-color: #ea561d;--mdc-checkbox-selected-pressed-icon-color: transparent;--mdc-checkbox-selected-icon-color: #ea561d;--mdc-checkbox-selected-checkmark-color: #fff;--mdc-circular-progress-active-indicator-color: transparent}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
+            args: [{ selector: 'mapa-table', encapsulation: ViewEncapsulation.None, template: "<div class=\"mapa-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort>\n    <ng-container\n      *ngFor=\"let column of columns; let isFirst = first\"\n      [matColumnDef]=\"column.key\"\n    >\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        (click)=\"sortData(column.key)\"\n      >\n        <div class=\"mapa-table__header\">\n          <ng-container *ngIf=\"isFirst && checkbox\">\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              (click)=\"$event.stopPropagation()\"\n            >\n            </mat-checkbox>\n          </ng-container>\n          <div *ngIf=\"column.key !== 'actions'\">\n            <mat-icon>filter_list</mat-icon>\n          </div>\n          <div class=\"mapa-table__label\">\n            {{ column.label }}\n          </div>\n        </div>\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <div class=\"header\">\n          <ng-container *ngIf=\"isFirst && checkbox\">\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n              (change)=\"$event ? selection.toggle(row) : null; getSelectedValues()\"\n              [checked]=\"selection.isSelected(row)\"\n            >\n            </mat-checkbox>\n          </ng-container>\n          <ng-container *ngIf=\"column.key === 'actions'\">\n            <div class=\"actions\">\n              <mat-icon (click)=\"emitRowClick(row, 'edit')\">edit</mat-icon>\n              <mat-icon (click)=\"emitRowClick(row, 'delete')\">delete</mat-icon>\n              <mat-icon (click)=\"emitRowClick(row, 'visibility')\"\n                >visibility</mat-icon\n              >\n            </div>\n          </ng-container>\n          <div class=\"table__column\" (click)=\"emitRowClick(row, '')\">\n            {{ row[column.key] }}\n          </div>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n\n  <!--\n  <mat-paginator\n    class=\"mapa-table__paginator paginator\"\n    appBubblePagination\n    [appCustomLength]=\"dataSource ? dataSource.data.length : 0\"\n    [length]=\"dataSource ? dataSource.data.length : 0\"\n    [pageSizeOptions]=\"[5, 10, 25, 100]\"\n    [pageSize]=\"5\"\n    aria-label=\"Select page\"\n  ></mat-paginator>\n  -->\n  <mat-paginator\n    class=\"mapa-table__paginator-legacy\"\n    itemsPerPageLabel=\"Item por p\u00E1gina\"\n    appStylePaginator\n    [length]=\"dataSource ? dataSource.data.length : 0\"\n    [pageSize]=\"5\"\n    [pageSizeOptions]=\"[5, 10, 25, 100]\"\n  >\n  </mat-paginator>\n  <!-- (page)=\"pageEvent = $event; onPaginateChange($event)\" -->\n</div>\n", styles: [".mapa-table .mat-table{font-family:SF-Pro;width:100%}.mapa-table .mat-table .mat-checkbox{margin:0 8px 0 0;padding:0}.mapa-table .mat-table .mat-row .mat-cell{font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:400;color:#50575e}.mapa-table .mat-table .mat-header-cell{border:none;font-family:SF-Pro;font-size:16px;font-style:normal;font-weight:600;color:#50575e}.mapa-table .mat-icon{cursor:pointer;position:relative;bottom:-3px;padding:0 5px 0 0}.mapa-table .mat-mdc-row,.mapa-table .mdc-data-table__content,.mapa-table .mat-mdc-header-cell{--mat-table-row-item-label-text-font: \"SF-Pro\"}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-frame{border-color:#b6b6b6}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-frame{border-color:#ea561d}.mapa-table .mat-checkbox.mat-accent .mat-checkbox-background{background-color:transparent}.mapa-table .mat-checkbox.mat-accent.mat-checkbox-checked .mat-checkbox-background{background-color:#ea561d}.mapa-table .mat-mdc-paginator-container{display:flex;justify-content:space-between}.mapa-table ::ng-deep .mat-mdc-paginator-page-size-label{display:none}.mapa-table__paginator-legacy .custom-paginator-container{justify-content:flex-end}.mapa-table__paginator-legacy .custom-paginator-counter{white-space:nowrap;margin:0 4px 0 10px!important}.mapa-table__paginator-legacy .custom-paginator-page{border-radius:4px;outline:none;border:none;margin:.4em;font-size:14px;min-width:24px;width:auto;min-height:24px;max-height:24px;padding:1px 6px}.mapa-table__paginator-legacy .custom-paginator-page-enabled{color:#333;background:transparent;cursor:pointer}.mapa-table__paginator-legacy .custom-paginator-page-enabled:hover{background-color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-page-disabled{background-color:#cf482b;color:#fff}.mapa-table__paginator-legacy .custom-paginator-arrow-disabled{color:#dfe3e6}.mapa-table__paginator-legacy .custom-paginator-arrow-enabled{color:#999}.mapa-table__label{margin-top:4px}.mapa-table__header{padding-top:15px;padding-bottom:15px;align-items:center;display:flex}.mapa-table .actions{display:flex}.mapa-table .actions .mat-icon{color:#ea561d!important}.mapa-table .header{align-items:center;display:flex}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { columns: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -115,8 +525,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], sort: [{
                 type: ViewChild,
                 args: [MatSort]
-            }], tableData: [{
-                type: Output
             }], rowClick: [{
                 type: Output
             }], selectedObjectsChange: [{
@@ -125,9 +533,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
 function CustomPaginator() {
     const customPaginatorIntl = new MatPaginatorIntl();
+    const rangeLabel = (page, pageSize, length) => {
+        if (length == 0 || pageSize == 0) {
+            return `0 de ${length}`;
+        }
+        length = Math.max(length, 0);
+        const startIndex = page * pageSize;
+        const endIndex = startIndex < length ?
+            Math.min(startIndex + pageSize, length) :
+            startIndex + pageSize;
+        return `${startIndex + 1} - ${endIndex} de ${length}`;
+    };
     customPaginatorIntl.itemsPerPageLabel = 'Itens por página:';
     customPaginatorIntl.nextPageLabel = 'Próxima página';
     customPaginatorIntl.previousPageLabel = 'Página anterior';
+    customPaginatorIntl.getRangeLabel = rangeLabel;
     return customPaginatorIntl;
 }
 
@@ -139,14 +559,19 @@ MapaTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         MatIconModule,
         MatPaginatorModule,
         MatTableModule,
-        BubblePaginationDirective], exports: [MapaTableComponent] });
+        BubblePaginationDirective,
+        PaginatorLegacyDirective,
+        FormsModule,
+        ReactiveFormsModule], exports: [MapaTableComponent] });
 MapaTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTableModule, providers: [
         { provide: MatPaginatorIntl, useValue: CustomPaginator() }
     ], imports: [CommonModule,
         MatCheckboxModule,
         MatIconModule,
         MatPaginatorModule,
-        MatTableModule] });
+        MatTableModule,
+        FormsModule,
+        ReactiveFormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapaTableModule, decorators: [{
             type: NgModule,
             args: [{
@@ -159,7 +584,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         MatIconModule,
                         MatPaginatorModule,
                         MatTableModule,
-                        BubblePaginationDirective
+                        BubblePaginationDirective,
+                        PaginatorLegacyDirective,
+                        FormsModule,
+                        ReactiveFormsModule
                     ],
                     exports: [
                         MapaTableComponent
@@ -174,9 +602,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Public API Surface of mapa-library-ui input
  */
 
+/*
+ * Public API Surface of mapa-library-ui table
+ */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MapaTableComponent, MapaTableModule };
+export { BubblePaginationDirective, MapaTableComponent, MapaTableModule, PaginatorLegacyDirective };
 //# sourceMappingURL=mapa-library-ui-src-lib-components-table.mjs.map