@gipisistemas/ng-core 1.1.1 → 1.1.2

package/fesm5/gipisistemas-ng-core.js

@@ -5257,8 +5257,9 @@ var TableGroupHeaderDTO = /** @class */ (function (_super) {
 }(AbstractDTO));
 
 var TableComponent = /** @class */ (function () {
-    function TableComponent() {
-        this._expandedElements = [];
+    function TableComponent(_ngZone) {
+        this._ngZone = _ngZone;
+        this._expandedRows = [];
         this._scrollHeightCalc = 410;
         this._isPopoverHover = null;
         this._displayedColumns = [];
@@ -5284,10 +5285,11 @@ var TableComponent = /** @class */ (function () {
         this.showColumnExpandableFixed = false;
         this.expandableOneRow = false;
         this.ignoreChildrenExpandRow = false;
+        this.sort = true;
         this.clearSort = false;
         this.sortActive = '';
         this.sortDirection = 'asc';
-        this.rowExpandedChange = new EventEmitter(true);
+        this.rowExpanded = new EventEmitter();
         this.dataChange = new EventEmitter(true);
         this.page = new EventEmitter();
         this.rowHover = new EventEmitter();
@@ -5362,7 +5364,6 @@ var TableComponent = /** @class */ (function () {
         });
     };
     TableComponent.prototype._createDataSource = function () {
-        var _this = this;
         var columns = this.columns.filter(function (c) { return c.visible; }).map(function (c) { return c.property; });
         if (!ObjectUtil.isNull(this.expandedRef)) {
             columns = __spread(['expandedColumn'], columns);
@@ -5408,9 +5409,9 @@ var TableComponent = /** @class */ (function () {
         if (this.paginator && !this.backendPagination) {
             this._dataSource.paginator = this.matFrontendPaginator;
         }
-        if (!this.groupStartExpanded && (this.groupHeaderRef || (this.expandable && this.expandedRef)) && !ArrayUtil.isEmpty(this._dataSource.data)) {
-            this._dataSource.data.forEach(function (row) { return _this.addCollapse(row); });
-        }
+        // if (!this.groupStartExpanded && (this.groupHeaderRef || (this.expandable && this.expandedRef)) && !ArrayUtil.isEmpty(this._dataSource.data)) {
+        // this._dataSource.data.forEach(row => this.addCollapse(row));
+        // }
     };
     TableComponent.prototype.calcScrollHeight = function () {
         if ((this._dataSource && (this._dataSource.data.length > 0)) && (Math.floor(this._scrollHeightCalc) <= 700)) {
@@ -5422,26 +5423,24 @@ var TableComponent = /** @class */ (function () {
         pageEvent.paginatorPageSizeOptions = ArrayUtil.isEmpty(pageEvent.paginatorPageSizeOptions) ? this.paginatorPageSizeOptions : pageEvent.paginatorPageSizeOptions;
         this.page.emit(pageEvent);
     };
-    TableComponent.prototype.isExpansed = function (element) {
-        return this._expandedElements.filter(function (e) { return ObjectUtil.equals(e, element); }).length > 0;
-    };
-    TableComponent.prototype.removeCollapse = function (element) {
-        var _this = this;
-        if (this.expandableOneRow) {
-            this._dataSource.data.forEach(function (row) { return _this.addCollapse(row); });
+    TableComponent.prototype.isExpandedRow = function (row) {
+        if (ArrayUtil.isEmpty(this._expandedRows)) {
+            return of(false);
         }
-        var expandedElementsAux = ArrayUtil.clone(this._expandedElements);
-        expandedElementsAux.splice(this._expandedElements.indexOf(element), 1);
-        this._expandedElements = ArrayUtil.clone(expandedElementsAux);
+        var index = this._expandedRows.findIndex(function (r) { return r === row; });
+        return of(index >= 0);
     };
-    TableComponent.prototype.addCollapse = function (element) {
-        var collapsedElement = this._expandedElements.filter(function (e) { return ObjectUtil.equals(e, element); }).length > 0;
-        if (!collapsedElement) {
-            this._expandedElements.push(element);
+    TableComponent.prototype.toggleExpandRow = function (row) {
+        var index = this._expandedRows.findIndex(function (r) { return r === row; });
+        if (ArrayUtil.isEmpty(this._expandedRows) || (index < 0)) {
+            this._expandedRows = [row];
+            this.rowExpanded.emit(row);
+            return;
         }
-    };
-    TableComponent.prototype.rowExpandedChangeEmit = function (element) {
-        this.rowExpandedChange.emit(element);
+        var _expandedRowsAux = ArrayUtil.clone(this._expandedRows);
+        _expandedRowsAux.splice(index, 1);
+        this._expandedRows = ArrayUtil.clone(_expandedRowsAux);
+        this.rowExpanded.emit(null);
     };
     TableComponent.prototype.sortData = function (sort) {
         if (this.infiniteScroll) {
@@ -5460,45 +5459,99 @@ var TableComponent = /** @class */ (function () {
         });
     };
     TableComponent.prototype.showPopover = function (event, data) {
+        var _this = this;
         var popover = document.getElementById('table-popover');
         if (!ObjectUtil.isNull(popover)) {
             popover.style.visibility = 'hidden';
             if (!this.loading) {
-                var domRectPopover = popover.getBoundingClientRect();
-                var domRectRow = event.currentTarget.getBoundingClientRect();
-                var cells = event.currentTarget.children;
+                this._ngZone.runOutsideAngular(function () {
+                    var domRectPopover = popover.getBoundingClientRect();
+                    var domRectRow = event.currentTarget.getBoundingClientRect();
+                    var cells = event.currentTarget.children;
+                    if (domRectPopover && domRectRow) {
+                        popover.style.visibility = 'visible';
+                        popover.style.top = (domRectRow.top + domRectRow.height) - 1 + "px";
+                        var startPosition_1 = 0;
+                        var endPosition_1 = 0;
+                        if (_this.columnInitial && (_this.columnInitial >= 0)) {
+                            if (!cells[_this.columnInitial]) {
+                                throw new Error('Initial column undefined or null');
+                            }
+                            startPosition_1 = cells[_this.columnInitial].getBoundingClientRect().left;
+                        }
+                        else {
+                            startPosition_1 = domRectRow.left;
+                        }
+                        if (_this.columnFinal && (_this.columnFinal >= 0)) {
+                            if (!cells[_this.columnFinal]) {
+                                throw new Error('Final column undefined or null');
+                            }
+                            endPosition_1 = cells[_this.columnFinal].getBoundingClientRect().left - domRectPopover.width;
+                        }
+                        else {
+                            endPosition_1 = domRectRow.right - domRectPopover.width;
+                        }
+                        _this._ngZone.run(function () {
+                            if (event.clientX > startPosition_1 + 15 && event.clientX < endPosition_1) {
+                                popover.style.left = event.clientX - 15 + "px";
+                            }
+                            else if (event.clientX <= startPosition_1) {
+                                popover.style.left = startPosition_1 + "px";
+                            }
+                            else if (event.clientX >= endPosition_1) {
+                                popover.style.left = endPosition_1 + "px";
+                            }
+                        });
+                    }
+                });
+            }
+        }
+        this.rowHover.emit(data);
+        this._contextPopover = data;
+    };
+    /**
+    showPopover(event: MouseEvent, data: any): void {
+        const popover: HTMLElement = document.getElementById('table-popover');
+        if (!ObjectUtil.isNull(popover)) {
+            popover.style.visibility = 'hidden';
+
+            if (!this.loading) {
+                const domRectPopover = popover.getBoundingClientRect();
+                const domRectRow = (event.currentTarget as HTMLElement).getBoundingClientRect();
+                const cells = (event.currentTarget as HTMLTableRowElement).children;
+
                 if (domRectPopover && domRectRow) {
                     popover.style.visibility = 'visible';
-                    popover.style.top = (domRectRow.top + domRectRow.height) - 1 + "px";
-                    var startPosition_1 = 0;
-                    var endPosition_1 = 0;
+                    popover.style.top = `${(domRectRow.top + domRectRow.height) - 1}px`;
+
+                    let startPosition: number = 0;
+                    let endPosition: number = 0;
+
                     if (this.columnInitial && (this.columnInitial >= 0)) {
                         if (!cells[this.columnInitial]) {
                             throw new Error('Initial column undefined or null');
                         }
-                        startPosition_1 = cells[this.columnInitial].getBoundingClientRect().left;
-                    }
-                    else {
-                        startPosition_1 = domRectRow.left;
+                        startPosition = cells[this.columnInitial].getBoundingClientRect().left;
+                    } else {
+                        startPosition = domRectRow.left;
                     }
+
                     if (this.columnFinal && (this.columnFinal >= 0)) {
                         if (!cells[this.columnFinal]) {
                             throw new Error('Final column undefined or null');
                         }
-                        endPosition_1 = cells[this.columnFinal].getBoundingClientRect().left - domRectPopover.width;
+                        endPosition = cells[this.columnFinal].getBoundingClientRect().left - domRectPopover.width;
+                    } else {
+                        endPosition = domRectRow.right - domRectPopover.width;
                     }
-                    else {
-                        endPosition_1 = domRectRow.right - domRectPopover.width;
-                    }
-                    setTimeout(function () {
-                        if (event.clientX > startPosition_1 + 15 && event.clientX < endPosition_1) {
-                            popover.style.left = event.clientX - 15 + "px";
-                        }
-                        else if (event.clientX <= startPosition_1) {
-                            popover.style.left = startPosition_1 + "px";
-                        }
-                        else if (event.clientX >= endPosition_1) {
-                            popover.style.left = endPosition_1 + "px";
+
+                    setTimeout(() => {
+                        if (event.clientX > startPosition + 15 && event.clientX < endPosition) {
+                            popover.style.left = `${event.clientX - 15}px`;
+                        } else if (event.clientX <= startPosition) {
+                            popover.style.left = `${startPosition}px`;
+                        } else if (event.clientX >= endPosition) {
+                            popover.style.left = `${endPosition}px`;
                         }
                     });
                 }
@@ -5506,7 +5559,8 @@ var TableComponent = /** @class */ (function () {
         }
         this.rowHover.emit(data);
         this._contextPopover = data;
-    };
+    }
+    */
     TableComponent.prototype.closePopover = function (time) {
         var _this = this;
         of(null).pipe(delay(time)).subscribe(function () {
@@ -5574,6 +5628,9 @@ var TableComponent = /** @class */ (function () {
             this.paginatorPageIndex += 1;
         }
     };
+    TableComponent.ctorParameters = function () { return [
+        { type: NgZone }
+    ]; };
     __decorate([
         ViewChild(MatSort, { static: true }),
         __metadata("design:type", MatSort)
@@ -5739,6 +5796,10 @@ var TableComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Boolean)
     ], TableComponent.prototype, "ignoreChildrenExpandRow", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], TableComponent.prototype, "sort", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Boolean)
@@ -5754,7 +5815,7 @@ var TableComponent = /** @class */ (function () {
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], TableComponent.prototype, "rowExpandedChange", void 0);
+    ], TableComponent.prototype, "rowExpanded", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -5770,7 +5831,7 @@ var TableComponent = /** @class */ (function () {
     TableComponent = __decorate([
         Component({
             selector: 'itss-table',
-            template: "<div [class.box-shadow]=\"shadow\"\n     [style.height]=\"(matTableHeigth | async)\"\n     style=\"background: transparent !important;\"\n     fxLayout=\"column\"\n     fxFlex>\n\n    <itss-table-scrolled [more]=\"hasMore()\"\n                         [scrollOffset]=\"scrollOffset\"\n                         [scrollDelay]=\"scrollDelay\"\n                         (scrolled)=\"handleScroll($event)\"\n                         [ngStyle]=\"{'flex-basis': scrollHeigth ? scrollHeigth + 'px' : _scrollHeightCalc + 'px' }\"\n                         *ngIf=\"infiniteScroll; else table\">\n        <ng-template *ngTemplateOutlet=\"table\"> </ng-template>\n    </itss-table-scrolled>\n\n    <ng-template #table>\n        <mat-table matSort\n                   multiTemplateDataRows\n                   [dataSource]=\"_dataSource\"\n                   [matSortDisabled]=\"!clearSort\"\n                   [matSortDisableClear]=\"!clearSort\"\n                   [matSortActive]=\"sortActive\"\n                   [matSortDirection]=\"sortDirection?.toLocaleLowerCase()\"\n                   (matSortChange)=\"sortData($event)\"\n                   (mouseleave)=\"_isPopoverHover = false; closePopover(0)\">\n\n            <ng-container *ngIf=\"expandedRef\"\n                          cdkColumnDef=\"expandedColumn\">\n                <mat-header-cell fxFlex=\"5\"\n                                 fxLayoutAlign=\"end center\"\n                                 *cdkHeaderCellDef>\n                </mat-header-cell>\n                <mat-cell fxFlex=\"5\"\n                          fxLayoutAlign=\"end center\"\n                          *cdkCellDef=\"let row\">\n                    <itss-button [icon]=\"isExpansed(row) ? 'chevron_right' : 'expand_more'\"\n                                 *ngIf=\"((row?.children) && (row.children.length > 0)) || (row?.expandable) || showColumnExpandableFixed\"\n                                 color=\"primary\"\n                                 type=\"icon\"\n                                 tooltip=\"Expandir | Retrair\"\n                                 (click)=\"(isExpansed(row) ? removeCollapse(row) : addCollapse(row)); rowExpandedChangeEmit(row)\">\n                    </itss-button>\n                </mat-cell>\n            </ng-container>\n\n            <ng-container *ngFor=\"let column of columns\"\n                          [cdkColumnDef]=\"column.property\">\n                <div *ngIf=\"column.sortable\">\n                    <mat-header-cell [fxFlex]=\"column.width | async\"\n                                     [fxLayoutAlign]=\"column.align\"\n                                     [ngStyle]=\"{'padding-left': column.sortable && column.align !== '' && (column.align.toLowerCase() === 'center' || column.align.toLowerCase() === 'center center') ? '15px' : '' }\"\n                                     [style.padding-left.px]=\"column.marginLeft | async\"\n                                     [style.padding-right.px]=\"column.marginRight | async\"\n                                     *cdkHeaderCellDef\n                                     mat-sort-header>\n                        {{ column.name }}\n                    </mat-header-cell>\n                </div>\n                <div *ngIf=\"!column.sortable\">\n                    <mat-header-cell [fxFlex]=\"column.width | async\"\n                                     [fxHide.lt-md]=\"column.hiddenSm\"\n                                     [fxLayoutAlign]=\"column.align\"\n                                     [style.padding-left.px]=\"column.marginLeft | async\"\n                                     [style.padding-right.px]=\"column.marginRight | async\"\n                                     *cdkHeaderCellDef>\n                        <ng-container *ngIf=\"column.name; else templateHeader\">\n                            {{ column.name }}\n                        </ng-container>\n\n                        <ng-template #templateHeader>\n                            <ng-container *ngIf=\"column.templateHeader\">\n                                <ng-container [ngTemplateOutlet]=\"column.templateHeader\"\n                                              [ngTemplateOutletContext]=\"{$implicit: data}\">\n                                </ng-container>\n                            </ng-container>\n                        </ng-template>\n                    </mat-header-cell>\n                </div>\n                <mat-cell [fxFlex]=\"column.width | async\"\n                          [fxHide.lt-md]=\"column.hiddenSm\"\n                          [fxHide]=\"!column.visible\"\n                          [fxLayoutAlign]=\"column.align\"\n                          [class.mat-cell-pointer]=\"column.action\"\n                          [style.padding-left.px]=\"column.marginLeft | async\"\n                          [style.padding-right.px]=\"column.marginRight | async\"\n                          (click)=\"column.action ? column.action(row) : null\"\n                          *cdkCellDef=\"let row\">\n                    <ng-container *ngIf=\"column.value; else template\">\n                        {{ (column.value(row) && (column.value(row).length > (column.sliceLength ? column.sliceLength :\n                        50)))\n                        ? (column.value(row) | slice:0:(column.sliceLength ? column.sliceLength : 50)) + '...'\n                        : column.value(row) }}\n                    </ng-container>\n\n                    <ng-template #template>\n                        <ng-container *ngIf=\"column.template\">\n                            <ng-container [ngTemplateOutlet]=\"column.template\"\n                                          [ngTemplateOutletContext]=\"{$implicit: row}\">\n                            </ng-container>\n                        </ng-container>\n                    </ng-template>\n                </mat-cell>\n            </ng-container>\n\n            <ng-container *ngIf=\"actionsRef\"\n                          cdkColumnDef=\"actionsColumn\">\n                <mat-header-cell fxFlex.gt-md=\"15\"\n                                 fxLayoutAlign=\"center center\"\n                                 *cdkHeaderCellDef>\n                    A\u00E7\u00F5es\n                </mat-header-cell>\n                <mat-cell fxFlex=\"15\"\n                          fxLayoutAlign=\"center center\"\n                          *cdkCellDef=\"let row\">\n                    <ng-template [ngTemplateOutlet]=\"actionsRef\"\n                                 [ngTemplateOutletContext]=\"{$implicit: row}\">\n                    </ng-template>\n                </mat-cell>\n            </ng-container>\n\n            <ng-container *ngIf=\"expandedRef\"\n                          matColumnDef=\"expandedDetail\">\n                <mat-cell *matCellDef=\"let row\"\n                          fxFlexFill\n                          class=\"cell-element-detail\">\n                    <div class=\"element-detail\"\n                         *ngIf=\"!ignoreChildrenExpandRow ? (row.children.length > 0) : ignoreChildrenExpandRow\"\n                         [ngClass]=\"{'collapsed': isExpansed(row), 'expanded': !isExpansed(row)}\">\n                        <ng-template [ngTemplateOutlet]=\"expandedRef\"\n                                     [ngTemplateOutletContext]=\"{$implicit: row}\">\n                        </ng-template>\n                    </div>\n                </mat-cell>\n            </ng-container>\n\n            <ng-container *ngIf=\"groupByColumn && groupHeaderRef\"\n                          matColumnDef=\"groupHeader\">\n                <mat-cell fxFlex\n                          [attr.colspan]=\"columns.length\"\n                          *matCellDef=\"let rowGroup\"\n                          style=\"cursor: pointer;\"\n                          [class.group-header-cell-expanded]=\"!isExpansed(rowGroup)\"\n                          [class.group-header-cell-collapsed]=\"isExpansed(rowGroup)\"\n                          (click)=\"isExpansed(rowGroup) ? removeCollapse(rowGroup) : addCollapse(rowGroup)\">\n                    <div class=\"group-header-cell\">\n                        <itss-button *ngIf=\"rowGroup.childrenGroup.length > 0\"\n                                     [icon]=\"isExpansed(rowGroup) ? 'chevron_right' : 'expand_more'\"\n                                     style.margin-right=\"1.25rem\"\n                                     color=\"primary\"\n                                     type=\"icon\"\n                                     tooltip=\"Expandir | Retrair\"\n                                     (click)=\"isExpansed(rowGroup) ? removeCollapse(rowGroup) : addCollapse(rowGroup)\">\n                        </itss-button>\n\n                        <ng-template [ngTemplateOutlet]=\"groupHeaderRef\"\n                                     [ngTemplateOutletContext]=\"{$implicit: rowGroup}\">\n                        </ng-template>\n                    </div>\n                </mat-cell>\n            </ng-container>\n\n            <ng-container *ngIf=\"groupByColumn && groupHeaderRef\"\n                          matColumnDef=\"expandedGroupHeader\">\n                <mat-cell *matCellDef=\"let rowGroup\"\n                          fxFlexFill>\n                    <div class=\"element-detail\"\n                         *ngIf=\"rowGroup.childrenGroup.length > 0\"\n                         [ngClass]=\"{'collapsed': isExpansed(rowGroup), 'expanded': !isExpansed(rowGroup)}\">\n\n                        <itss-table *ngIf=\"rowGroup.childrenGroup.length > 0; else noChildrenGroup\"\n                                    [paginator]=\"false\"\n                                    [shadow]=\"false\"\n                                    [showHeader]=\"false\"\n                                    [columns]=\"columns\"\n                                    [data]=\"rowGroup.childrenGroup\"\n                                    class=\"table-level-1\"\n                                    fxFlexFill>\n                            <ng-template #footer\n                                         *ngIf=\"groupByColumn && groupHeaderRef && groupFooterRef\">\n                                <ng-template [ngTemplateOutlet]=\"groupFooterRef\"\n                                             [ngTemplateOutletContext]=\"{$implicit: rowGroup}\">\n                                </ng-template>\n                            </ng-template>\n                        </itss-table>\n\n                        <ng-template #noChildrenGroup>\n                            <div *ngIf=\"!loading\"\n                                 class=\"no-records\">\n                                <mat-icon>sentiment_very_dissatisfied</mat-icon>\n                                <span>Nenhum registro foi encontrado</span>\n                            </div>\n                        </ng-template>\n                    </div>\n                </mat-cell>\n            </ng-container>\n\n            <mat-header-row #matHeaderRow\n                            (mouseenter)=\"_isPopoverHover = false; closePopover(0)\"\n                            *matHeaderRowDef=\"_displayedColumns; sticky: headerSticky || groupHeaderSticky\"\n                            [ngClass]=\"{ 'hidden-header': !showHeader }\">\n            </mat-header-row>\n\n            <div *ngIf=\"!loading && !expandable && !actionsPopoverRef && !groupByColumn && !groupHeaderRef\">\n                <mat-row (mouseover)=\"rowHover.emit(row)\"\n                         *matRowDef=\"let row; columns: _displayedColumns;\"\n                         [ngClass]=\"{ 'hoversimulator': row.isMouseHover === true }\"\n                         [class.highlight]=\"getHighlightRow(row)\"\n                         [attr.id]=\"'row_'+ getIndexRow(row)\">\n                </mat-row>\n            </div>\n\n            <div *ngIf=\"!loading && !expandable && actionsPopoverRef && !groupByColumn && !groupHeaderRef\">\n                <mat-row #rowTemplate\n                         *matRowDef=\"let row; columns: _displayedColumns;\"\n                         class=\"element-row\"\n                         (mousemove)=\"showPopover($event, row)\"\n                         [class.hoversimulator]=\"_contextPopover === row\"\n                         [class.highlight]=\"getHighlightRow(row)\"\n                         [attr.id]=\"'row_'+ getIndexRow(row)\">\n                </mat-row>\n            </div>\n\n            <div *ngIf=\"!loading && expandable && !actionsPopoverRef && !groupByColumn && !groupHeaderRef\">\n                <mat-row *matRowDef=\"let row; columns: _displayedColumns;\"\n                         class=\"element-row\"\n                         (mouseover)=\"rowHover.emit(row)\"\n                         [class.expanded-row]=\"_expandedElement === row\"\n                         [ngClass]=\"{ 'hoversimulator': row.isMouseHover === true }\"\n                         [class.highlight]=\"getHighlightRow(row)\"\n                         [attr.id]=\"'row_'+ getIndexRow(row)\">\n                </mat-row>\n\n                <mat-row *matRowDef=\"let row; columns: ['expandedDetail'];\"\n                         class=\"detail-row\"\n                         [attr.id]=\"'row_expand'+ getIndexRow(row)\">\n                </mat-row>\n            </div>\n\n            <div *ngIf=\"!loading && expandable && actionsPopoverRef && !groupByColumn && !groupHeaderRef\">\n                <mat-row #rowTemplate\n                         *matRowDef=\"let row; columns: _displayedColumns;\"\n                         class=\"element-row\"\n                         (mousemove)=\"showPopover($event, row)\"\n                         [class.hoversimulator]=\"_contextPopover === row\"\n                         [class.expanded-row]=\"_expandedElement === row\"\n                         [class.highlight]=\"getHighlightRow(row)\"\n                         [attr.id]=\"'row_'+ getIndexRow(row)\">\n                </mat-row>\n\n                <mat-row *matRowDef=\"let row; columns: ['expandedDetail'];\"\n                         class=\"detail-row\"\n                         [attr.id]=\"'row_expand'+ getIndexRow(row)\">\n                </mat-row>\n            </div>\n\n            <div *ngIf=\"!loading && !expandable && !actionsPopoverRef && groupByColumn && groupHeaderRef\">\n                <mat-row *matRowDef=\"let row; columns: ['groupHeader'];\"\n                         class=\"element-row\"\n                         (mouseover)=\"rowHover.emit(row)\"\n                         [class.expanded-row]=\"_expandedElement === row\"\n                         [class.group-header-sticky]=\"groupHeaderSticky\"\n                         [ngClass]=\"{ 'hoversimulator': row.isMouseHover === true }\"\n                         [class.highlight]=\"getHighlightRow(row)\"\n                         [attr.id]=\"'row_'+ getIndexRow(row)\">\n                </mat-row>\n\n                <mat-row *matRowDef=\"let row; columns: ['expandedGroupHeader'];\"\n                         class=\"detail-row\"\n                         [attr.id]=\"'row_group'+ getIndexRow(row)\">\n                </mat-row>\n            </div>\n        </mat-table>\n\n        <mat-progress-bar mode=\"indeterminate\"\n                          color=\"accent\"\n                          *ngIf=\"loading\">\n        </mat-progress-bar>\n\n        <div *ngIf=\"!loading && (data && (data.length > 0)) && footerRef\"\n             class=\"footer-row\"\n             fxLayout=\"column\"\n             fxLayoutGap=\"10px\">\n            <ng-template [ngTemplateOutlet]=\"footerRef\"\n                         [ngTemplateOutletContext]=\"{$implicit: data}\">\n            </ng-template>\n        </div>\n\n        <div *ngIf=\"!loading && (data && (data.length <= 0))\"\n             class=\"no-records\">\n            <mat-icon>sentiment_very_dissatisfied</mat-icon>\n            <span>Nenhum registro foi encontrado</span>\n        </div>\n\n        <ng-container *ngIf=\"!loading && paginator && (data && (data.length > 0))\">\n            <ng-container #backendPaginatorTemplate\n                          *ngIf=\"backendPagination && !infiniteScroll\">\n                <mat-paginator #backendPaginator\n                               [hidePageSize]=\"!showPageSizeOptions || (paginatorPageSizeOptions && (paginatorPageSizeOptions.length <= 0))\"\n                               [length]=\"paginatorLength\"\n                               [pageIndex]=\"paginatorPageIndex\"\n                               [pageSize]=\"paginatorPageSize\"\n                               [pageSizeOptions]=\"paginatorPageSizeOptions\"\n                               (page)=\"onPage($event)\"\n                               (mouseenter)=\"closePopover(0)\"\n                               showFirstLastButtons>\n                </mat-paginator>\n            </ng-container>\n\n            <ng-container #frontendPaginatorTemplate\n                          *ngIf=\"!backendPagination && !infiniteScroll\">\n                <mat-paginator #frontendPaginator\n                               [hidePageSize]=\"!showPageSizeOptions || (paginatorPageSizeOptions && (paginatorPageSizeOptions.length <= 0))\"\n                               [length]=\"paginatorLength\"\n                               [pageIndex]=\"paginatorPageIndex\"\n                               [pageSize]=\"paginatorPageSize\"\n                               [pageSizeOptions]=\"paginatorPageSizeOptions\"\n                               (page)=\"onPage($event)\"\n                               showFirstLastButtons>\n                </mat-paginator>\n            </ng-container>\n        </ng-container>\n\n        <ng-container #infiniteScrollPaginatorTemplate\n                      *ngIf=\"infiniteScroll && (data && (data.length > 0))\">\n            <span class=\"infinite-scroll-paginator\">\n                1 - {{ data.length }} de {{ paginatorLength }}\n            </span>\n        </ng-container>\n    </ng-template>\n</div>\n\n<div id=\"table-popover\"\n     class=\"table-popover\"\n     (mouseover)=\"_isPopoverHover = true\"\n     (mouseout)=\"_isPopoverHover = false; closePopover(0)\"\n     *ngIf=\"!loading && actionsPopoverRef\">\n    <ng-container [ngTemplateOutlet]=\"actionsPopoverRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: _contextPopover }\">\n    </ng-container>\n</div>",
+            template: "<div [class.box-shadow]=\"shadow\"\n     [style.height]=\"(matTableHeigth | async)\"\n     style=\"background: transparent !important;\"\n     fxLayout=\"column\"\n     fxFlex>\n\n    <itss-table-scrolled [more]=\"hasMore()\"\n                         [scrollOffset]=\"scrollOffset\"\n                         [scrollDelay]=\"scrollDelay\"\n                         (scrolled)=\"handleScroll($event)\"\n                         [ngStyle]=\"{'flex-basis': scrollHeigth ? scrollHeigth + 'px' : _scrollHeightCalc + 'px' }\"\n                         *ngIf=\"infiniteScroll; else table\">\n        <ng-template *ngTemplateOutlet=\"table\"> </ng-template>\n    </itss-table-scrolled>\n\n    <ng-template #table>\n        <mat-table matSort\n                   multiTemplateDataRows\n                   [dataSource]=\"_dataSource\"\n                   [matSortDisabled]=\"!sort\"\n                   [matSortDisableClear]=\"!clearSort\"\n                   [matSortActive]=\"sortActive\"\n                   [matSortDirection]=\"sortDirection?.toLocaleLowerCase()\"\n                   (matSortChange)=\"sortData($event)\"\n                   (mouseleave)=\"_isPopoverHover = false; closePopover(0)\">\n\n            <ng-container *ngIf=\"expandedRef\"\n                          cdkColumnDef=\"expandedColumn\">\n                <mat-header-cell fxFlex=\"5\"\n                                 fxLayoutAlign=\"end center\"\n                                 *cdkHeaderCellDef>\n                </mat-header-cell>\n                <mat-cell fxFlex=\"5\"\n                          fxLayoutAlign=\"end center\"\n                          *cdkCellDef=\"let row\">\n                    <itss-button tooltip=\"Expandir | Retrair\"\n                                 color=\"primary\"\n                                 type=\"icon\"\n                                 *ngIf=\"((row?.children) && (row.children.length > 0)) || (row?.expandable) || showColumnExpandableFixed\"\n                                 [icon]=\"(isExpandedRow(row) | async) ? 'expand_more' : 'chevron_right'\"\n                                 (click)=\"toggleExpandRow(row)\">\n                    </itss-button>\n                </mat-cell>\n            </ng-container>\n\n            <ng-container *ngFor=\"let column of columns\"\n                          [cdkColumnDef]=\"column.property\">\n                <div *ngIf=\"column.sortable\">\n                    <mat-header-cell [fxFlex]=\"column.width | async\"\n                                     [fxLayoutAlign]=\"column.align\"\n                                     [ngStyle]=\"{'padding-left': column.sortable && column.align !== '' && (column.align.toLowerCase() === 'center' || column.align.toLowerCase() === 'center center') ? '15px' : '' }\"\n                                     [style.padding-left.px]=\"column.marginLeft | async\"\n                                     [style.padding-right.px]=\"column.marginRight | async\"\n                                     *cdkHeaderCellDef\n                                     mat-sort-header>\n                        {{ column.name }}\n                    </mat-header-cell>\n                </div>\n                <div *ngIf=\"!column.sortable\">\n                    <mat-header-cell [fxFlex]=\"column.width | async\"\n                                     [fxHide.lt-md]=\"column.hiddenSm\"\n                                     [fxLayoutAlign]=\"column.align\"\n                                     [style.padding-left.px]=\"column.marginLeft | async\"\n                                     [style.padding-right.px]=\"column.marginRight | async\"\n                                     *cdkHeaderCellDef>\n                        <ng-container *ngIf=\"column.name; else templateHeader\">\n                            {{ column.name }}\n                        </ng-container>\n\n                        <ng-template #templateHeader>\n                            <ng-container *ngIf=\"column.templateHeader\">\n                                <ng-container [ngTemplateOutlet]=\"column.templateHeader\"\n                                              [ngTemplateOutletContext]=\"{$implicit: data}\">\n                                </ng-container>\n                            </ng-container>\n                        </ng-template>\n                    </mat-header-cell>\n                </div>\n                <mat-cell [fxFlex]=\"column.width | async\"\n                          [fxHide.lt-md]=\"column.hiddenSm\"\n                          [fxHide]=\"!column.visible\"\n                          [fxLayoutAlign]=\"column.align\"\n                          [class.mat-cell-pointer]=\"column.action\"\n                          [style.padding-left.px]=\"column.marginLeft | async\"\n                          [style.padding-right.px]=\"column.marginRight | async\"\n                          (click)=\"column.action ? column.action(row) : null\"\n                          *cdkCellDef=\"let row\">\n                    <ng-container *ngIf=\"column.value; else template\">\n                        {{ (column.value(row) && (column.value(row).length > (column.sliceLength ? column.sliceLength :\n                        50)))\n                        ? (column.value(row) | slice:0:(column.sliceLength ? column.sliceLength : 50)) + '...'\n                        : column.value(row) }}\n                    </ng-container>\n\n                    <ng-template #template>\n                        <ng-container *ngIf=\"column.template\">\n                            <ng-container [ngTemplateOutlet]=\"column.template\"\n                                          [ngTemplateOutletContext]=\"{$implicit: row}\">\n                            </ng-container>\n                        </ng-container>\n                    </ng-template>\n                </mat-cell>\n            </ng-container>\n\n            <ng-container *ngIf=\"actionsRef\"\n                          cdkColumnDef=\"actionsColumn\">\n                <mat-header-cell fxFlex.gt-md=\"15\"\n                                 fxLayoutAlign=\"center center\"\n                                 *cdkHeaderCellDef>\n                    A\u00E7\u00F5es\n                </mat-header-cell>\n                <mat-cell fxFlex=\"15\"\n                          fxLayoutAlign=\"center center\"\n                          *cdkCellDef=\"let row\">\n                    <ng-template [ngTemplateOutlet]=\"actionsRef\"\n                                 [ngTemplateOutletContext]=\"{$implicit: row}\">\n                    </ng-template>\n                </mat-cell>\n            </ng-container>\n\n            <ng-container *ngIf=\"expandedRef\"\n                          matColumnDef=\"expandedDetail\">\n                <mat-cell *matCellDef=\"let row\"\n                          fxFlexFill\n                          class=\"cell-element-detail\">\n                    <div class=\"element-detail\"\n                         *ngIf=\"!ignoreChildrenExpandRow ? (row.children.length > 0) : ignoreChildrenExpandRow\"\n                         [class.collapsed]=\"!(isExpandedRow(row) | async)\"\n                         [class.expanded]=\"(isExpandedRow(row) | async)\">\n                        <ng-template [ngTemplateOutlet]=\"expandedRef\"\n                                     [ngTemplateOutletContext]=\"{$implicit: row}\">\n                        </ng-template>\n                    </div>\n                </mat-cell>\n            </ng-container>\n\n            <ng-container *ngIf=\"groupByColumn && groupHeaderRef\"\n                          matColumnDef=\"groupHeader\">\n                <mat-cell fxFlex\n                          [attr.colspan]=\"columns.length\"\n                          *matCellDef=\"let rowGroup\"\n                          style=\"cursor: pointer;\"\n                          [class.group-header-cell-collapsed]=\"!(isExpandedRow(rowGroup) | async)\"\n                          [class.group-header-cell-expanded]=\"(isExpandedRow(rowGroup) | async)\"\n                          (click)=\"toggleExpandRow(rowGroup)\">\n                    <div class=\"group-header-cell\">\n                        <itss-button *ngIf=\"rowGroup.childrenGroup.length > 0\"\n                                     [icon]=\"(isExpandedRow(rowGroup) | async) ? 'expand_more' : 'chevron_right'\"\n                                     style.margin-right=\"1.25rem\"\n                                     color=\"primary\"\n                                     type=\"icon\"\n                                     tooltip=\"Expandir | Retrair\">\n                        </itss-button>\n\n                        <ng-template [ngTemplateOutlet]=\"groupHeaderRef\"\n                                     [ngTemplateOutletContext]=\"{$implicit: rowGroup}\">\n                        </ng-template>\n                    </div>\n                </mat-cell>\n            </ng-container>\n\n            <ng-container *ngIf=\"groupByColumn && groupHeaderRef\"\n                          matColumnDef=\"expandedGroupHeader\">\n                <mat-cell *matCellDef=\"let rowGroup\"\n                          fxFlexFill>\n                    <div class=\"element-detail\"\n                         *ngIf=\"rowGroup.childrenGroup.length > 0\"\n                         [class.collapsed]=\"!(isExpandedRow(rowGroup) | async)\"\n                         [class.expanded]=\"(isExpandedRow(rowGroup) | async)\">\n\n                        <itss-table *ngIf=\"rowGroup.childrenGroup.length > 0; else noChildrenGroup\"\n                                    [paginator]=\"false\"\n                                    [shadow]=\"false\"\n                                    [showHeader]=\"false\"\n                                    [columns]=\"columns\"\n                                    [data]=\"rowGroup.childrenGroup\"\n                                    class=\"table-level-1\"\n                                    fxFlexFill>\n                            <ng-template #footer\n                                         *ngIf=\"groupByColumn && groupHeaderRef && groupFooterRef\">\n                                <ng-template [ngTemplateOutlet]=\"groupFooterRef\"\n                                             [ngTemplateOutletContext]=\"{$implicit: rowGroup}\">\n                                </ng-template>\n                            </ng-template>\n                        </itss-table>\n\n                        <ng-template #noChildrenGroup>\n                            <div *ngIf=\"!loading\"\n                                 class=\"no-records\">\n                                <mat-icon>sentiment_very_dissatisfied</mat-icon>\n                                <span>Nenhum registro foi encontrado</span>\n                            </div>\n                        </ng-template>\n                    </div>\n                </mat-cell>\n            </ng-container>\n\n            <mat-header-row #matHeaderRow\n                            (mouseenter)=\"_isPopoverHover = false; closePopover(0)\"\n                            *matHeaderRowDef=\"_displayedColumns; sticky: headerSticky || groupHeaderSticky\"\n                            [ngClass]=\"{ 'hidden-header': !showHeader }\">\n            </mat-header-row>\n\n            <div *ngIf=\"!loading && !expandable && !actionsPopoverRef && !groupByColumn && !groupHeaderRef\">\n                <mat-row (mouseover)=\"rowHover.emit(row)\"\n                         *matRowDef=\"let row; columns: _displayedColumns;\"\n                         [ngClass]=\"{ 'hoversimulator': row.isMouseHover === true }\"\n                         [class.highlight]=\"getHighlightRow(row)\"\n                         [attr.id]=\"'row_'+ getIndexRow(row)\">\n                </mat-row>\n            </div>\n\n            <div *ngIf=\"!loading && !expandable && actionsPopoverRef && !groupByColumn && !groupHeaderRef\">\n                <mat-row #rowTemplate\n                         *matRowDef=\"let row; columns: _displayedColumns;\"\n                         class=\"element-row\"\n                         (mousemove)=\"showPopover($event, row)\"\n                         [class.hoversimulator]=\"_contextPopover === row\"\n                         [class.highlight]=\"getHighlightRow(row)\"\n                         [attr.id]=\"'row_'+ getIndexRow(row)\">\n                </mat-row>\n            </div>\n\n            <div *ngIf=\"!loading && expandable && !actionsPopoverRef && !groupByColumn && !groupHeaderRef\">\n                <mat-row *matRowDef=\"let row; columns: _displayedColumns;\"\n                         class=\"element-row\"\n                         [class.expanded-row]=\"(isExpandedRow(row) | async)\"\n                         [ngClass]=\"{ 'hoversimulator': row.isMouseHover === true }\"\n                         [class.highlight]=\"getHighlightRow(row)\"\n                         [attr.id]=\"'row_'+ getIndexRow(row)\"\n                         (mouseover)=\"rowHover.emit(row)\"\n                         (click)=\"toggleExpandRow(row)\">\n                </mat-row>\n\n                <mat-row *matRowDef=\"let row; columns: ['expandedDetail'];\"\n                         class=\"detail-row\"\n                         [attr.id]=\"'row_expand'+ getIndexRow(row)\">\n                </mat-row>\n            </div>\n\n            <div *ngIf=\"!loading && expandable && actionsPopoverRef && !groupByColumn && !groupHeaderRef\">\n                <mat-row #rowTemplate\n                         *matRowDef=\"let row; columns: _displayedColumns;\"\n                         class=\"element-row\"\n                         [class.hoversimulator]=\"_contextPopover === row\"\n                         [class.expanded-row]=\"(isExpandedRow(row) | async)\"\n                         [class.highlight]=\"getHighlightRow(row)\"\n                         [attr.id]=\"'row_'+ getIndexRow(row)\"\n                         (mousemove)=\"showPopover($event, row)\"\n                         (click)=\"toggleExpandRow(row)\">\n                </mat-row>\n\n                <mat-row *matRowDef=\"let row; columns: ['expandedDetail'];\"\n                         class=\"detail-row\"\n                         [attr.id]=\"'row_expand'+ getIndexRow(row)\">\n                </mat-row>\n            </div>\n\n            <div *ngIf=\"!loading && !expandable && !actionsPopoverRef && groupByColumn && groupHeaderRef\">\n                <mat-row *matRowDef=\"let row; columns: ['groupHeader'];\"\n                         class=\"element-row\"\n                         [class.expanded-row]=\"(isExpandedRow(row) | async)\"\n                         [class.group-header-sticky]=\"groupHeaderSticky\"\n                         [ngClass]=\"{ 'hoversimulator': row.isMouseHover === true }\"\n                         [class.highlight]=\"getHighlightRow(row)\"\n                         [attr.id]=\"'row_'+ getIndexRow(row)\"\n                         (mouseover)=\"rowHover.emit(row)\"\n                         (click)=\"toggleExpandRow(row)\">\n                </mat-row>\n\n                <mat-row *matRowDef=\"let row; columns: ['expandedGroupHeader'];\"\n                         class=\"detail-row\"\n                         [attr.id]=\"'row_group'+ getIndexRow(row)\">\n                </mat-row>\n            </div>\n        </mat-table>\n\n        <mat-progress-bar mode=\"indeterminate\"\n                          color=\"accent\"\n                          *ngIf=\"loading\">\n        </mat-progress-bar>\n\n        <div *ngIf=\"!loading && (data && (data.length > 0)) && footerRef\"\n             class=\"footer-row\"\n             fxLayout=\"column\"\n             fxLayoutGap=\"10px\">\n            <ng-template [ngTemplateOutlet]=\"footerRef\"\n                         [ngTemplateOutletContext]=\"{$implicit: data}\">\n            </ng-template>\n        </div>\n\n        <div *ngIf=\"!loading && (data && (data.length <= 0))\"\n             class=\"no-records\">\n            <mat-icon>sentiment_very_dissatisfied</mat-icon>\n            <span>Nenhum registro foi encontrado</span>\n        </div>\n\n        <ng-container *ngIf=\"!loading && paginator && (data && (data.length > 0))\">\n            <ng-container #backendPaginatorTemplate\n                          *ngIf=\"backendPagination && !infiniteScroll\">\n                <mat-paginator #backendPaginator\n                               [hidePageSize]=\"!showPageSizeOptions || (paginatorPageSizeOptions && (paginatorPageSizeOptions.length <= 0))\"\n                               [length]=\"paginatorLength\"\n                               [pageIndex]=\"paginatorPageIndex\"\n                               [pageSize]=\"paginatorPageSize\"\n                               [pageSizeOptions]=\"paginatorPageSizeOptions\"\n                               (page)=\"onPage($event)\"\n                               (mouseenter)=\"closePopover(0)\"\n                               showFirstLastButtons>\n                </mat-paginator>\n            </ng-container>\n\n            <ng-container #frontendPaginatorTemplate\n                          *ngIf=\"!backendPagination && !infiniteScroll\">\n                <mat-paginator #frontendPaginator\n                               [hidePageSize]=\"!showPageSizeOptions || (paginatorPageSizeOptions && (paginatorPageSizeOptions.length <= 0))\"\n                               [length]=\"paginatorLength\"\n                               [pageIndex]=\"paginatorPageIndex\"\n                               [pageSize]=\"paginatorPageSize\"\n                               [pageSizeOptions]=\"paginatorPageSizeOptions\"\n                               (page)=\"onPage($event)\"\n                               showFirstLastButtons>\n                </mat-paginator>\n            </ng-container>\n        </ng-container>\n\n        <ng-container #infiniteScrollPaginatorTemplate\n                      *ngIf=\"infiniteScroll && (data && (data.length > 0))\">\n            <span class=\"infinite-scroll-paginator\">\n                1 - {{ data.length }} de {{ paginatorLength }}\n            </span>\n        </ng-container>\n    </ng-template>\n</div>\n\n<div id=\"table-popover\"\n     class=\"table-popover\"\n     (mouseover)=\"_isPopoverHover = true\"\n     (mouseout)=\"_isPopoverHover = false; closePopover(0)\"\n     *ngIf=\"!loading && actionsPopoverRef\">\n    <ng-container [ngTemplateOutlet]=\"actionsPopoverRef\"\n                  [ngTemplateOutletContext]=\"{ $implicit: _contextPopover }\">\n    </ng-container>\n</div>",
             animations: [
                 trigger('detailExpand', [
                     state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
@@ -5778,9 +5839,9 @@ var TableComponent = /** @class */ (function () {
                     transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                 ]),
             ],
-            styles: [".box-shadow{border-radius:2px;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084)}table{width:100%}itss-loading{margin:25px;opacity:.7}.no-records{height:48px;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:30px;font-size:14px!important;font-weight:600!important;color:#b3afb3!important}.no-records mat-icon{font-size:32px;height:32px;width:32px;margin-bottom:5px}.footer-row{min-height:57px;font-weight:700;padding:15px 24px;display:flex;align-items:flex-end;justify-content:center;flex-direction:column;color:rgba(0,0,0,.67);border-bottom:1px solid rgba(0,0,0,.12)}.mat-cell-pointer{cursor:pointer}.detail-row{min-height:0!important;border-bottom-width:0}element-row:not(.expanded-row):hover{background:#f5f5f5}element-row:not(.expanded-row):active{background:#efefef}.hoversimulator:not(.highlight){background:#f5f5f5}.hoversimulator:has(.highlight){background-color:rgba(255,217,0,.212)!important}.highlight{background-color:rgba(255,217,0,.102)!important}::ng-deep mat-cell.cell-element-detail{font-weight:400!important}.element-detail{width:100%;overflow:hidden;display:flex;min-height:45px!important}.element-detail.collapsed{height:0!important;min-height:0!important;display:none!important}.element-detail.expanded{height:auto!important}.hidden-header,.hidden-header .mat-header-cell{height:0!important;min-height:0!important}.actions-popover.mat-card{min-width:auto!important;padding:5px!important;background:#f5f5f5;border-radius:5px!important}.actions-popover.mat-card .mat-card-content itss-button .mat-icon-button mat-icon{height:18px!important;width:18px!important}.table-level-1 .mat-table .mat-header-row{border-bottom:unset!important}.mat-column-expandedGroupHeader{padding:0!important}.group-header-cell{display:flex;flex-direction:row;align-items:center;width:100%}.group-header-sticky{position:-webkit-sticky;position:sticky;top:54px}.infinite-scroll-paginator{color:#696969;font-size:14px;display:flex;align-items:center;justify-content:center;height:56px;position:-webkit-sticky;position:sticky;bottom:0;background:#fff;border-top:1px solid #f3465c}.table-popover{position:fixed;display:inline-flex;background-color:#f5f5f5;width:auto;border-radius:0 0 10px 10px;border:1px solid #ddd;border-top-width:0;padding:2px 5px;z-index:1;visibility:hidden}"]
+            styles: [".box-shadow{border-radius:2px;box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084)}table{width:100%}itss-loading{margin:25px;opacity:.7}.no-records{height:48px;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:30px;font-size:14px!important;font-weight:600!important;color:#b3afb3!important;text-transform:initial!important}.no-records mat-icon{font-size:32px;height:32px;width:32px;margin-bottom:5px}.footer-row{min-height:57px;font-weight:700;padding:15px 24px;display:flex;align-items:flex-end;justify-content:center;flex-direction:column;color:rgba(0,0,0,.67);border-bottom:1px solid rgba(0,0,0,.12)}.mat-cell-pointer{cursor:pointer}.detail-row{min-height:0!important;border-bottom-width:0}element-row:not(.expanded-row):hover{background:#f5f5f5}element-row:not(.expanded-row):active{background:#efefef}.hoversimulator:not(.highlight){background:#f5f5f5}.hoversimulator:has(.highlight){background-color:rgba(255,217,0,.212)!important}.highlight{background-color:rgba(255,217,0,.102)!important}::ng-deep mat-cell.cell-element-detail{font-weight:400!important}.element-detail{width:100%;overflow:hidden;display:flex;min-height:45px!important}.element-detail.collapsed{height:0!important;min-height:0!important;display:none!important}.element-detail.expanded{height:auto!important}.hidden-header,.hidden-header .mat-header-cell{height:0!important;min-height:0!important}.actions-popover.mat-card{min-width:auto!important;padding:5px!important;background:#f5f5f5;border-radius:5px!important}.actions-popover.mat-card .mat-card-content itss-button .mat-icon-button mat-icon{height:18px!important;width:18px!important}.table-level-1 .mat-table .mat-header-row{border-bottom:unset!important}.mat-column-expandedGroupHeader{padding:0!important}.group-header-cell{display:flex;flex-direction:row;align-items:center;width:100%}.group-header-sticky{position:-webkit-sticky;position:sticky;top:54px}.infinite-scroll-paginator{color:#696969;font-size:14px;display:flex;align-items:center;justify-content:center;height:56px;position:-webkit-sticky;position:sticky;bottom:0;background:#fff;border-top:1px solid #f3465c}.table-popover{position:fixed;display:inline-flex;background-color:#f5f5f5;width:auto;border-radius:0 0 10px 10px;border:1px solid #ddd;border-top-width:0;padding:2px 5px;z-index:1;visibility:hidden}"]
         }),
-        __metadata("design:paramtypes", [])
+        __metadata("design:paramtypes", [NgZone])
     ], TableComponent);
     return TableComponent;
 }());
@@ -10990,7 +11051,7 @@ var GIPIInputMonthPickerComponent = /** @class */ (function () {
                 'class': 'gipi-input-monthpicker',
             },
             changeDetection: ChangeDetectionStrategy.OnPush,
-            styles: [".input-monthpicker-container{display:flex;flex-direction:column;gap:12px;width:100%}.input-monthpicker-container .input-monthpicker-label{color:#131313;font-size:1.4rem;line-height:100%}.input-monthpicker-container .input-monthpicker-label>span{color:#d14014;font-size:inherit;line-height:inherit}.input-monthpicker-container .input-monthpicker-content{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:12px;width:100%;max-height:4rem;border-radius:5px;cursor:text;background-color:#fff;border:1px solid rgba(0,0,0,.12);color:#696969;caret-color:#9a9da2;transition:.2s;position:relative}.input-monthpicker-container .input-monthpicker-content:focus-within,.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:active),.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:focus){box-shadow:0 0 0 .2rem #f0f0f0}.input-monthpicker-container .input-monthpicker-content:focus-within,.input-monthpicker-container .input-monthpicker-content:hover{border-color:#bfbfbf!important}.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:invalid){border-color:#d14014!important;color:#d14014!important;caret-color:#d14014!important}.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:invalid):focus-within{box-shadow:0 0 0 .2rem #f1c4b6!important}.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:disabled){border-color:#e0e1e2!important;color:#d1d2d4!important;box-shadow:none!important;cursor:not-allowed!important;caret-color:#d1d2d4!important;pointer-events:none!important}.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:disabled) .input-monthpicker-input,.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:disabled) .input-monthpicker-suffix .input-monthpicker-button{cursor:not-allowed!important;pointer-events:none!important}.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:disabled) .input-monthpicker-suffix .input-monthpicker-trigger{border-color:#e0e1e2!important;pointer-events:none!important}.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:disabled) mat-icon{color:#d1d2d4!important;fill:#d1d2d4!important;cursor:not-allowed!important;pointer-events:none!important}.input-monthpicker-container .input-monthpicker-content .input-monthpicker-input{height:16px;max-width:84%;outline:0;border:none;background-color:transparent;color:inherit;flex:1}.input-monthpicker-container .input-monthpicker-content .input-monthpicker-suffix{display:flex;flex-direction:row;align-items:center;gap:16px}.input-monthpicker-container .input-monthpicker-content .input-monthpicker-suffix .input-monthpicker-button{display:flex;align-items:center;justify-content:center;outline:0;border:none;cursor:pointer;background-color:transparent}.input-monthpicker-container .input-monthpicker-content .input-monthpicker-suffix .input-monthpicker-button:hover:not(:disabled)>mat-icon{transform:scale(1.08)}.input-monthpicker-icon{width:1.6rem;height:1.6rem;font-size:1.6rem;color:#131313;fill:#131313}::ng-deep .calendar{width:100%;display:flex;flex-direction:column}::ng-deep .calendar .calendar-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid #aeb1b5;margin-bottom:8px}::ng-deep .calendar .calendar-header .calendar-title{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:1.6rem;line-height:1.8rem;font-weight:600;cursor:default;border-radius:8px;padding:8px;white-space:nowrap}::ng-deep .calendar .calendar-header .calendar-title>mat-icon{font-size:2rem;width:20px;height:20px}::ng-deep .calendar .calendar-header .calendar-title.month:hover{cursor:pointer;background-color:#f0f0f0}::ng-deep .calendar .calendar-header .calendar-controls{display:flex;flex-direction:row;align-items:center;gap:8px}::ng-deep .calendar .calendar-header .calendar-controls>button{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;background-color:#e0313e;cursor:pointer;transition:.3s;border:0;outline:0;color:#fff}::ng-deep .calendar .calendar-header .calendar-controls>button:hover{background-color:#cc2d38}::ng-deep .calendar .calendar-header .calendar-controls>button>mat-icon{font-size:1.8rem;width:18px;height:18px}::ng-deep .calendar .table-months{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);gap:4px}::ng-deep .calendar .table-months .month{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;font-size:1.4rem;line-height:1.7rem;color:#555659;background-color:#f0f0f0;transition:background-color .1s;cursor:pointer}::ng-deep .calendar .table-months .month.disabled{color:#bbbdc1;background-color:#e0e1e2}::ng-deep .calendar .table-months .month:not(.disabled).selected,::ng-deep .calendar .table-months .month:not(.disabled):hover{color:#fff;background-color:#e0313e}::ng-deep .calendar .table-months .month:not(.disabled).selected:hover{background-color:#cc2d38}::ng-deep .calendar .table-years{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr);gap:4px}::ng-deep .calendar .table-years .year{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;font-size:1.4rem;line-height:1.7rem;color:#555659;background-color:#f0f0f0;transition:background-color .1s;cursor:pointer}::ng-deep .calendar .table-years .year.disabled{color:#bbbdc1;background-color:#e0e1e2}::ng-deep .calendar .table-years .year:not(.disabled).selected,::ng-deep .calendar .table-years .year:not(.disabled):hover{color:#fff;background-color:#e0313e}::ng-deep .calendar .table-years .year:not(.disabled).selected:hover{background-color:#cc2d38}"]
+            styles: [".input-monthpicker-container{display:flex;flex-direction:column;gap:12px;width:100%}.input-monthpicker-container .input-monthpicker-label{color:#131313;font-size:1.4rem;line-height:100%}.input-monthpicker-container .input-monthpicker-label>span{color:#d14014;font-size:inherit;line-height:inherit}.input-monthpicker-container .input-monthpicker-content{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:12px;width:100%;max-height:4rem;border-radius:5px;cursor:text;background-color:#fff;border:1px solid rgba(0,0,0,.12);color:#696969;caret-color:#9a9da2;transition:.2s;position:relative}.input-monthpicker-container .input-monthpicker-content:focus-within,.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:active),.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:focus){box-shadow:0 0 0 .2rem #f0f0f0}.input-monthpicker-container .input-monthpicker-content:focus-within,.input-monthpicker-container .input-monthpicker-content:hover{border-color:#bfbfbf!important}.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:disabled){border-color:#e0e1e2!important;color:#d1d2d4!important;box-shadow:none!important;cursor:not-allowed!important;caret-color:#d1d2d4!important;pointer-events:none!important}.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:disabled) .input-monthpicker-input,.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:disabled) .input-monthpicker-suffix .input-monthpicker-button{cursor:not-allowed!important;pointer-events:none!important}.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:disabled) .input-monthpicker-suffix .input-monthpicker-trigger{border-color:#e0e1e2!important;pointer-events:none!important}.input-monthpicker-container .input-monthpicker-content:has(.input-monthpicker-input:disabled) mat-icon{color:#d1d2d4!important;fill:#d1d2d4!important;cursor:not-allowed!important;pointer-events:none!important}.input-monthpicker-container .input-monthpicker-content .input-monthpicker-input{height:16px;max-width:84%;outline:0;border:none;background-color:transparent;color:inherit;flex:1}.input-monthpicker-container .input-monthpicker-content .input-monthpicker-suffix{display:flex;flex-direction:row;align-items:center;gap:16px}.input-monthpicker-container .input-monthpicker-content .input-monthpicker-suffix .input-monthpicker-button{display:flex;align-items:center;justify-content:center;outline:0;border:none;cursor:pointer;background-color:transparent}.input-monthpicker-container .input-monthpicker-content .input-monthpicker-suffix .input-monthpicker-button:hover:not(:disabled)>mat-icon{transform:scale(1.08)}.input-monthpicker-icon{width:1.6rem;height:1.6rem;font-size:1.6rem;color:#131313;fill:#131313}::ng-deep .calendar{width:100%;display:flex;flex-direction:column}::ng-deep .calendar .calendar-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid #aeb1b5;margin-bottom:8px}::ng-deep .calendar .calendar-header .calendar-title{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:1.6rem;line-height:1.8rem;font-weight:600;cursor:default;border-radius:8px;padding:8px;white-space:nowrap}::ng-deep .calendar .calendar-header .calendar-title>mat-icon{font-size:2rem;width:20px;height:20px}::ng-deep .calendar .calendar-header .calendar-title.month:hover{cursor:pointer;background-color:#f0f0f0}::ng-deep .calendar .calendar-header .calendar-controls{display:flex;flex-direction:row;align-items:center;gap:8px}::ng-deep .calendar .calendar-header .calendar-controls>button{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;background-color:#e0313e;cursor:pointer;transition:.3s;border:0;outline:0;color:#fff}::ng-deep .calendar .calendar-header .calendar-controls>button:hover{background-color:#cc2d38}::ng-deep .calendar .calendar-header .calendar-controls>button>mat-icon{font-size:1.8rem;width:18px;height:18px}::ng-deep .calendar .table-months{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);gap:4px}::ng-deep .calendar .table-months .month{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;font-size:1.4rem;line-height:1.7rem;color:#555659;background-color:#f0f0f0;transition:background-color .1s;cursor:pointer}::ng-deep .calendar .table-months .month.disabled{color:#bbbdc1;background-color:#e0e1e2}::ng-deep .calendar .table-months .month:not(.disabled).selected,::ng-deep .calendar .table-months .month:not(.disabled):hover{color:#fff;background-color:#e0313e}::ng-deep .calendar .table-months .month:not(.disabled).selected:hover{background-color:#cc2d38}::ng-deep .calendar .table-years{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr);gap:4px}::ng-deep .calendar .table-years .year{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;font-size:1.4rem;line-height:1.7rem;color:#555659;background-color:#f0f0f0;transition:background-color .1s;cursor:pointer}::ng-deep .calendar .table-years .year.disabled{color:#bbbdc1;background-color:#e0e1e2}::ng-deep .calendar .table-years .year:not(.disabled).selected,::ng-deep .calendar .table-years .year:not(.disabled):hover{color:#fff;background-color:#e0313e}::ng-deep .calendar .table-years .year:not(.disabled).selected:hover{background-color:#cc2d38}"]
         }),
         __metadata("design:paramtypes", [ChangeDetectorRef,
             GIPINgConfig])
@@ -23561,7 +23622,7 @@ var MonthYearPickerComponent = /** @class */ (function () {
                 'class': 'gipi-month-year-picker',
             },
             changeDetection: ChangeDetectionStrategy.OnPush,
-            styles: [":host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:.8rem;font-size:1.4rem;color:#696969}.input-wrapper .input-label{display:flex;align-items:center;gap:.4rem;color:#131313;line-height:1.6rem}.input-wrapper .input-label>span{font-size:1.6rem;line-height:1.6rem;color:#d14014}.input-wrapper .input-content{display:flex;font-family:inherit;font-size:inherit;color:inherit;height:4rem;background:#fff;border:1px solid rgba(0,0,0,.12);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.6rem}.input-wrapper .input-content .input-element{padding:.75rem .8rem;border:none;outline:0;background-color:transparent;flex:1;color:inherit;caret-color:#696969;min-width:0}.input-wrapper .input-content:not(.input-element:disabled):has(.input-element:enabled:hover),.input-wrapper .input-content:not(.input-element:disabled):has(.prefix:hover),.input-wrapper .input-content:not(.input-element:disabled):has(.suffix:hover){border-color:#6d6f73}.input-wrapper .input-content:not(.input-element:disabled):has(.input-element.ng-invalid:enabled:hover),.input-wrapper .input-content:not(.input-element:disabled):has(.input-element:invalid:enabled:hover){border-color:#e07f62}.input-wrapper .input-content:not(.input-element:disabled):has(.input-element:enabled:focus){outline:0;outline-offset:0;box-shadow:0 0 0 .2rem #e0e1e2;border-color:#6d6f73}.input-wrapper .input-content:not(.input-element:disabled):has(.input-element.ng-invalid:enabled),.input-wrapper .input-content:not(.input-element:disabled):has(.input-element:invalid:enabled){border-color:#d14014}.input-wrapper .input-content:not(.input-element:disabled):has(.input-element.ng-invalid:enabled:focus),.input-wrapper .input-content:not(.input-element:disabled):has(.input-element:invalid:enabled:focus){outline:0;outline-offset:0;box-shadow:0 0 0 .2rem #f1c4b6;border-color:#d14014}.input-wrapper .input-content:has(.input-element:disabled){color:#bbbdc1!important;border-color:#e0e1e2!important;background-color:#f5f5f6!important;cursor:not-allowed}.input-wrapper .input-content:has(.input-element:disabled) .suffix>mat-icon{color:#bbbdc1!important}.input-wrapper .input-content .input-element:disabled{cursor:not-allowed}.input-wrapper .input-content .suffix{display:flex;align-items:center;justify-content:center;padding-block:.75rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-right:.8rem}.input-wrapper .input-content .suffix>mat-icon{width:2rem;height:2rem;font-size:2rem;color:#696969}.input-wrapper .input-help{flex:1;font-size:1rem;font-weight:500;margin-top:-.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.month-year-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-icon-button .month-year-toggle-default-icon{margin:auto}.btn-month-year-toggle{width:2rem!important;height:2rem!important;line-height:2rem!important}"]
+            styles: [":host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:.8rem;font-size:1.4rem;color:#696969}.input-wrapper .input-label{display:flex;align-items:center;gap:.4rem;color:#131313;line-height:1.6rem}.input-wrapper .input-label>span{font-size:1.6rem;line-height:1.6rem;color:#d14014}.input-wrapper .input-content{display:flex;font-family:inherit;font-size:inherit;color:inherit;height:4rem;background:#fff;border:1px solid rgba(0,0,0,.12);transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.6rem}.input-wrapper .input-content .input-element{padding:.75rem .8rem;border:none;outline:0;background-color:transparent;flex:1;color:inherit;caret-color:#696969;min-width:0}.input-wrapper .input-content:not(.input-element:disabled):has(.input-element:enabled:hover),.input-wrapper .input-content:not(.input-element:disabled):has(.prefix:hover),.input-wrapper .input-content:not(.input-element:disabled):has(.suffix:hover){border-color:#6d6f73}.input-wrapper .input-content:not(.input-element:disabled):has(.input-element:enabled:focus){outline:0;outline-offset:0;box-shadow:0 0 0 .2rem #e0e1e2;border-color:#6d6f73}.input-wrapper .input-content:has(.input-element:disabled){color:#bbbdc1!important;border-color:#e0e1e2!important;background-color:#f5f5f6!important;cursor:not-allowed}.input-wrapper .input-content:has(.input-element:disabled) .suffix>mat-icon{color:#bbbdc1!important}.input-wrapper .input-content .input-element:disabled{cursor:not-allowed}.input-wrapper .input-content .suffix{display:flex;align-items:center;justify-content:center;padding-block:.75rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-right:.8rem}.input-wrapper .input-content .suffix>mat-icon{width:2rem;height:2rem;font-size:2rem;color:#696969}.input-wrapper .input-help{flex:1;font-size:1rem;font-weight:500;margin-top:-.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.month-year-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-icon-button .month-year-toggle-default-icon{margin:auto}.btn-month-year-toggle{width:2rem!important;height:2rem!important;line-height:2rem!important}"]
         }),
         __param(5, Inject(GIPI_MONTH_YEAR_SCROLL_STRATEGY)),
         __param(6, Optional()),